Apply BitPagination improvements (#12978)

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss

@@ -39,6 +39,15 @@
     }
 }
 
+// The list and its items only carry the semantics of the markup: they are removed from the box tree so the
+// buttons stay the direct flex items of the root and the layout of the pagination is the one the root sets
+// (a gap coming from Styles.Root included). The explicit list roles in the markup keep the semantics that
+// removing these boxes used to drop.
+.bit-pgn-lst,
+.bit-pgn-itm {
+    display: contents;
+}
+
 .bit-pgn-trs {
     transform: var(--bit-pgn-ico-transform-start);
 }
@@ -52,18 +61,89 @@
     font-size: inherit;
     text-align: center;
     align-items: center;
+    user-select: none;
     justify-content: center;
     width: var(--bit-pgn-btn-size);
     height: var(--bit-pgn-btn-size);
     border-radius: $shp-radius-control;
 }
 
+// The summary sits on the same baseline as the buttons without taking their square shape, so a long text
+// (a localized one, or one counting items instead of pages) stays on a single line beside them.
+.bit-pgn-sum {
+    display: flex;
+    font-size: inherit;
+    align-items: center;
+    white-space: nowrap;
+    padding: 0 spacing(0.5);
+    height: var(--bit-pgn-btn-size);
+}
+
+// The jump sits on the same baseline as the buttons. Its input keeps the neutral surface of a text input
+// rather than the role color of the buttons, so the digits typed into it stay readable whichever color and
+// variant the pagination is rendered with.
+.bit-pgn-gtp,
+.bit-pgn-pss {
+    display: flex;
+    font-size: inherit;
+    align-items: center;
+    white-space: nowrap;
+    gap: spacing(0.5);
+    padding: 0 spacing(0.5);
+    height: var(--bit-pgn-btn-size);
+}
+
+.bit-pgn-gti,
+.bit-pgn-pse {
+    font: inherit;
+    color: $clr-fg-pri;
+    background: $clr-bg-sec;
+    padding: 0 spacing(0.5);
+    height: var(--bit-pgn-btn-size);
+    border-style: $shp-border-style;
+    border-width: $shp-border-width;
+    border-color: $clr-brd-sec;
+    border-radius: $shp-radius-control;
+
+    &:focus-visible {
+        z-index: 1;
+        @include focus-ring(var(--bit-pgn-clr-fcs, #{$clr-pri-focus}));
+    }
+
+    &[disabled] {
+        cursor: default;
+        pointer-events: none;
+        color: $clr-fg-dis;
+        background: $clr-bg-dis;
+        border-color: $clr-brd-dis;
+    }
+}
+
+// The spin buttons are dropped: the field is a jump to a page and not a value to step through, and they
+// would leave next to no room for the digits at the width the pagination gives it.
+.bit-pgn-gti {
+    text-align: center;
+    appearance: textfield;
+    width: calc(var(--bit-pgn-btn-size) * 1.75);
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        margin: 0;
+        appearance: none;
+    }
+}
+
+.bit-pgn-pse {
+    cursor: pointer;
+}
+
 .bit-pgn-btn {
     cursor: pointer;
     text-align: center;
     font-size: inherit;
     align-items: center;
     display: inline-flex;
+    text-decoration: none;
     justify-content: center;
     width: var(--bit-pgn-btn-size);
     height: var(--bit-pgn-btn-size);
@@ -93,7 +173,10 @@
         @include focus-ring(var(--bit-pgn-clr-fcs, #{$clr-pri-focus}));
     }
 
-    &[disabled] {
+    // A link has no disabled attribute of its own, so a page control it cannot reach reports aria-disabled
+    // and is painted (and made inert) by the same rule.
+    &[disabled],
+    &[aria-disabled="true"] {
         cursor: default;
         pointer-events: none;
         color: var(--bit-pgn-clr-btn-txt-dis);
@@ -102,6 +185,15 @@
     }
 }
 
+// A navigation button carrying a text is no longer a square: it keeps the height of the others and grows
+// along the text, with the icon and the text sharing the room the way a labelled button does.
+.bit-pgn-lbl {
+    width: auto;
+    gap: spacing(0.5);
+    min-width: var(--bit-pgn-btn-size);
+    padding: 0 spacing(1);
+}
+
 .bit-pgn-sel {
     color: var(--bit-pgn-clr-btn-sel-txt);
     border-color: var(--bit-pgn-clr-btn-sel-brd);
@@ -123,6 +215,22 @@
 }
 
 
+// The pill shape applies to the ellipsis as well, so the gaps keep the outline of the buttons they stand
+// in for instead of breaking the row with a square.
+.bit-pgn-rnd {
+    .bit-pgn-btn,
+    .bit-pgn-elp {
+        border-radius: 50%;
+    }
+
+    // A navigation button carrying a text is wider than it is tall, where a 50% radius would draw an
+    // ellipse instead of the pill the round shape asks for.
+    .bit-pgn-lbl {
+        border-radius: calc(var(--bit-pgn-btn-size) / 2);
+    }
+}
+
+
 // forced-colors: the selected page is conveyed by fill colors that High Contrast strips; repaint
 // it with the system selection colors so it stays distinguishable from the other page buttons.
 @media (forced-colors: active) {

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPaginationClassStyles.cs

@@ -7,6 +7,41 @@ public class BitPaginationClassStyles
     /// </summary>
     public string? Root { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the page size selector container of the BitPagination.
+    /// </summary>
+    public string? PageSizeSelector { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the page size label of the BitPagination.
+    /// </summary>
+    public string? PageSizeLabel { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the page size select of the BitPagination.
+    /// </summary>
+    public string? PageSizeSelect { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the summary of the BitPagination.
+    /// </summary>
+    public string? Summary { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the go to page container of the BitPagination.
+    /// </summary>
+    public string? GoToPage { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the go to page label of the BitPagination.
+    /// </summary>
+    public string? GoToPageLabel { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the go to page input of the BitPagination.
+    /// </summary>
+    public string? GoToPageInput { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the button of the BitPagination.
     /// </summary>