@stridge/noctis 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/styles.css

@@ -481,7 +481,7 @@
 }
 
 /* ── Authored static palettes (accent-independent; switch on the resolved mode) ─────────
- * Chart and avatar series stay categorically stable regardless of the accent (re-theming
+ * Chart and categorical-palette series stay categorically stable regardless of the accent (re-theming
  * them would break legend↔series identity), so they are authored — not engine-derived. Dark
  * values sit on `:root`; light values under `[data-theme="light"]`, set by the app shell and the
  * theme provider from the resolved mode. Hues are spread across the wheel and separated in
@@ -497,17 +497,17 @@
     --noctis-color-chart-7: oklch(0.7 0.17 310);
     --noctis-color-chart-8: oklch(0.76 0.14 350);
 
-    --noctis-color-avatar-1: oklch(0.62 0.17 264);
-    --noctis-color-avatar-2: oklch(0.62 0.15 196);
-    --noctis-color-avatar-3: oklch(0.62 0.16 152);
-    --noctis-color-avatar-4: oklch(0.64 0.15 130);
-    --noctis-color-avatar-5: oklch(0.66 0.16 70);
-    --noctis-color-avatar-6: oklch(0.62 0.18 40);
-    --noctis-color-avatar-7: oklch(0.6 0.2 18);
-    --noctis-color-avatar-8: oklch(0.6 0.18 330);
-    --noctis-color-avatar-9: oklch(0.6 0.18 300);
-    --noctis-color-avatar-10: oklch(0.6 0.15 285);
-    --noctis-color-avatar-foreground: oklch(0.99 0 0);
+    --noctis-color-palette-1: oklch(0.62 0.17 264);
+    --noctis-color-palette-2: oklch(0.62 0.15 196);
+    --noctis-color-palette-3: oklch(0.62 0.16 152);
+    --noctis-color-palette-4: oklch(0.64 0.15 130);
+    --noctis-color-palette-5: oklch(0.66 0.16 70);
+    --noctis-color-palette-6: oklch(0.62 0.18 40);
+    --noctis-color-palette-7: oklch(0.6 0.2 18);
+    --noctis-color-palette-8: oklch(0.6 0.18 330);
+    --noctis-color-palette-9: oklch(0.6 0.18 300);
+    --noctis-color-palette-10: oklch(0.6 0.15 285);
+    --noctis-color-palette-foreground: oklch(0.99 0 0);
 }
 
 :root[data-theme="light"] {
@@ -520,16 +520,16 @@
     --noctis-color-chart-7: oklch(0.55 0.19 310);
     --noctis-color-chart-8: oklch(0.6 0.16 350);
 
-    --noctis-color-avatar-1: oklch(0.58 0.18 264);
-    --noctis-color-avatar-2: oklch(0.56 0.15 196);
-    --noctis-color-avatar-3: oklch(0.56 0.16 152);
-    --noctis-color-avatar-4: oklch(0.58 0.15 130);
-    --noctis-color-avatar-5: oklch(0.62 0.16 70);
-    --noctis-color-avatar-6: oklch(0.58 0.19 40);
-    --noctis-color-avatar-7: oklch(0.56 0.21 18);
-    --noctis-color-avatar-8: oklch(0.56 0.19 330);
-    --noctis-color-avatar-9: oklch(0.56 0.19 300);
-    --noctis-color-avatar-10: oklch(0.56 0.16 285);
+    --noctis-color-palette-1: oklch(0.58 0.18 264);
+    --noctis-color-palette-2: oklch(0.56 0.15 196);
+    --noctis-color-palette-3: oklch(0.56 0.16 152);
+    --noctis-color-palette-4: oklch(0.58 0.15 130);
+    --noctis-color-palette-5: oklch(0.62 0.16 70);
+    --noctis-color-palette-6: oklch(0.58 0.19 40);
+    --noctis-color-palette-7: oklch(0.56 0.21 18);
+    --noctis-color-palette-8: oklch(0.56 0.19 330);
+    --noctis-color-palette-9: oklch(0.56 0.19 300);
+    --noctis-color-palette-10: oklch(0.56 0.16 285);
 }
 
 /* ── Light-mode shadows ─────────────────────────────────────────────────────────────────
@@ -1705,6 +1705,29 @@
         --_toolbar-input-height: var(--noctis-toolbar-input-height, var(--noctis-size-control-xs));
         --_toolbar-input-padding-inline: var(--noctis-toolbar-input-padding-inline, var(--noctis-space-1\.5));
     }
+    [data-slot="noctis-pagination"] {
+        --_pagination-gap: var(--noctis-pagination-gap, var(--noctis-space-3));
+    }
+    [data-slot="noctis-pagination-info"] {
+        --_pagination-info-font-size: var(--noctis-pagination-info-font-size, var(--noctis-text-small));
+        --_pagination-info-color: var(--noctis-pagination-info-color, var(--noctis-color-muted));
+    }
+    [data-slot="noctis-pagination-page-size"] {
+        --_pagination-page-size-gap: var(--noctis-pagination-page-size-gap, var(--noctis-space-2));
+    }
+    [data-slot="noctis-pagination-page"] {
+        --_pagination-page-gap: var(--noctis-pagination-page-gap, var(--noctis-space-2));
+        --_pagination-page-inline-size: var(--noctis-pagination-page-inline-size, 3.5rem);
+        --_pagination-page-block-size: var(--noctis-pagination-page-block-size, var(--noctis-size-control-md));
+    }
+    [data-slot="noctis-pagination-separator"] {
+        --_pagination-separator-color: var(--noctis-pagination-separator-color, var(--noctis-color-border));
+        --_pagination-separator-inline-size: var(--noctis-pagination-separator-inline-size, 1px);
+        --_pagination-separator-block-size: var(--noctis-pagination-separator-block-size, 1.5rem);
+    }
+    [data-slot="noctis-pagination"][data-size="sm"] [data-slot="noctis-pagination-page"] {
+        --_pagination-page-block-size: var(--noctis-pagination-page-block-size, var(--noctis-size-control-sm));
+    }
     [data-slot="noctis-accordion-trigger"] {
         --_accordion-trigger-padding-inline: var(--noctis-accordion-trigger-padding-inline, 0);
         --_accordion-trigger-padding-block: var(--noctis-accordion-trigger-padding-block, var(--noctis-space-4));
@@ -2441,6 +2464,31 @@
     [data-slot="noctis-avatar"][data-size="xl"] [data-slot="noctis-avatar-indicator"] {
         --_avatar-indicator-size: var(--noctis-avatar-indicator-size, 1rem);
     }
+    [data-slot="noctis-badge"] {
+        --_badge-padding-inline: var(--noctis-badge-padding-inline, 0.5rem);
+        --_badge-padding-block: var(--noctis-badge-padding-block, 0.1875rem);
+        --_badge-gap: var(--noctis-badge-gap, 0.3125rem);
+        --_badge-font-size: var(--noctis-badge-font-size, var(--noctis-text-mini));
+        --_badge-border-radius: var(--noctis-badge-border-radius, var(--noctis-radius-full));
+    }
+    [data-slot="noctis-badge-dot"] {
+        --_badge-dot-size: var(--noctis-badge-dot-size, 0.375rem);
+    }
+    [data-slot="noctis-badge-icon"] {
+        --_badge-icon-size: var(--noctis-badge-icon-size, 0.875rem);
+    }
+    [data-slot="noctis-badge"][data-size="sm"] {
+        --_badge-padding-inline: var(--noctis-badge-padding-inline, 0.4375rem);
+        --_badge-padding-block: var(--noctis-badge-padding-block, 0.125rem);
+        --_badge-gap: var(--noctis-badge-gap, 0.25rem);
+        --_badge-font-size: var(--noctis-badge-font-size, var(--noctis-text-micro));
+    }
+    [data-slot="noctis-badge"][data-size="sm"] [data-slot="noctis-badge-dot"] {
+        --_badge-dot-size: var(--noctis-badge-dot-size, 0.3125rem);
+    }
+    [data-slot="noctis-badge"][data-size="sm"] [data-slot="noctis-badge-icon"] {
+        --_badge-icon-size: var(--noctis-badge-icon-size, 0.75rem);
+    }
     [data-slot="noctis-otp-field"] {
         --_otp-field-gap: var(--noctis-otp-field-gap, 0.5rem);
     }
@@ -3402,7 +3450,7 @@
      * box-shadow rings) can extend past the edge without being cut off.
      *
      * Avatars are static-identity and accent-independent: the fallback fill is one of ten authored
-     * `--noctis-color-avatar-N` roles, selected by the `data-avatar-index` the component hashes from a
+     * `--noctis-color-palette-N` roles, selected by the `data-avatar-index` the component hashes from a
      * stable seed — so categorical identity holds across themes and the fill never re-themes on the accent.
      */
 
@@ -3456,48 +3504,48 @@
         font-weight: 500;
         line-height: 1;
         text-transform: uppercase;
-        color: var(--noctis-color-avatar-foreground);
+        color: var(--noctis-color-palette-foreground);
         background-color: var(--noctis-color-muted);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="1"] {
-        background-color: var(--noctis-color-avatar-1);
+        background-color: var(--noctis-color-palette-1);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="2"] {
-        background-color: var(--noctis-color-avatar-2);
+        background-color: var(--noctis-color-palette-2);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="3"] {
-        background-color: var(--noctis-color-avatar-3);
+        background-color: var(--noctis-color-palette-3);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="4"] {
-        background-color: var(--noctis-color-avatar-4);
+        background-color: var(--noctis-color-palette-4);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="5"] {
-        background-color: var(--noctis-color-avatar-5);
+        background-color: var(--noctis-color-palette-5);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="6"] {
-        background-color: var(--noctis-color-avatar-6);
+        background-color: var(--noctis-color-palette-6);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="7"] {
-        background-color: var(--noctis-color-avatar-7);
+        background-color: var(--noctis-color-palette-7);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="8"] {
-        background-color: var(--noctis-color-avatar-8);
+        background-color: var(--noctis-color-palette-8);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="9"] {
-        background-color: var(--noctis-color-avatar-9);
+        background-color: var(--noctis-color-palette-9);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="10"] {
-        background-color: var(--noctis-color-avatar-10);
+        background-color: var(--noctis-color-palette-10);
     }
 
     /*
@@ -3672,6 +3720,381 @@
     }
 }
 
+@layer noctis.components {
+    /*
+     * Badge is self-contained, so every rule keys off the element's own `data-slot`. The chip metrics
+     * flow through the `--_badge-*` internals, whose per-size defaults live in the generated component
+     * layer (`tokens.css`) keyed off the `data-size` the root stamps.
+     *
+     * Colour is a two-axis grid: `data-variant` (the emphasis — a `solid` fill, a `soft` tint, a
+     * transparent `outline`, or a neutral `dot` chip) crossed with `data-tone` (the colour identity). In
+     * every variant but `dot` the tone tints the whole chip and the dot/icon ride `currentColor`; the
+     * `dot` variant keeps the chip neutral and colours the leading dot alone. Like Avatar's swatch rules,
+     * the grid is hand-authored flat rules reading a declared role or palette swatch directly — no
+     * `--_badge-*` colour internal and no mint re-point, so a global retheme of a status/accent role (or
+     * the shared categorical palette) propagates for free, and the decorative tones never re-derive off
+     * the accent.
+     *
+     * The six semantic tones (neutral/accent/success/warning/danger/info) paint from their role families
+     * — `solid` from the role, `soft` from its `-muted` tint, `outline` from its `-border`. The eight
+     * decorative tones (red…pink) map onto the accent-independent `--noctis-color-palette-N` palette,
+     * authored for a white knockout, so a `solid` decorative chip stays legible; `soft` shows the swatch
+     * as the label on the neutral chip tint and `outline` draws the swatch as the edge (the palette ships
+     * no engine tint of its own, and a derived tint isn't expressible in component CSS).
+     *
+     * The dot and icon take no tone rules of their own: the dot fills with `currentColor` and the icon
+     * inherits it, so both track the chip's text colour and stay legible in every variant automatically.
+     */
+
+    /* root — the pill. A transparent 1px border holds the box geometry stable across variants, so the
+     * `outline` variant (which colours that border) never shifts the chip's size. The base colours are
+     * the default neutral `soft` look; the variant×tone rules below override them. */
+    [data-slot="noctis-badge"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--_badge-gap);
+        inline-size: fit-content;
+        max-inline-size: 100%;
+        padding-block: var(--_badge-padding-block);
+        padding-inline: var(--_badge-padding-inline);
+        border: 1px solid transparent;
+        border-radius: var(--_badge-border-radius);
+        font-family: var(--noctis-font-sans);
+        font-size: var(--_badge-font-size);
+        font-weight: 500;
+        line-height: 1;
+        white-space: nowrap;
+        vertical-align: middle;
+        color: var(--noctis-color-foreground);
+        background-color: var(--noctis-color-control);
+    }
+
+    /* A badge rendered on an anchor joins the chip, not the link — keep the chip's own colour, drop the
+     * underline. */
+    a[data-slot="noctis-badge"] {
+        text-decoration: none;
+    }
+
+    /* dot — a small leading status dot. Fills with the chip's text colour, so it reads on the fill in
+     * `solid` (a knockout dot) and shows the saturated tone in `soft`/`outline`. */
+    [data-slot="noctis-badge-dot"] {
+        flex-shrink: 0;
+        inline-size: var(--_badge-dot-size);
+        block-size: var(--_badge-dot-size);
+        border-radius: var(--noctis-radius-full);
+        background-color: currentcolor;
+    }
+
+    /* icon — a leading glyph clamped to the chip's icon size; inherits the chip's text colour. */
+    [data-slot="noctis-badge-icon"] {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+    }
+
+    [data-slot="noctis-badge-icon"] svg {
+        inline-size: var(--_badge-icon-size);
+        block-size: var(--_badge-icon-size);
+    }
+
+    /* ─── solid: a filled chip with a knockout label ─────────────────────────────────────────────── */
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="neutral"] {
+        background-color: var(--noctis-color-primary);
+        color: var(--noctis-color-primary-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="accent"] {
+        background-color: var(--noctis-color-accent);
+        color: var(--noctis-color-accent-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="success"] {
+        background-color: var(--noctis-color-success);
+        color: var(--noctis-color-success-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="warning"] {
+        background-color: var(--noctis-color-warning);
+        color: var(--noctis-color-warning-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="danger"] {
+        background-color: var(--noctis-color-danger);
+        color: var(--noctis-color-danger-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="info"] {
+        background-color: var(--noctis-color-info);
+        color: var(--noctis-color-info-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="red"] {
+        background-color: var(--noctis-color-palette-7);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="orange"] {
+        background-color: var(--noctis-color-palette-6);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="amber"] {
+        background-color: var(--noctis-color-palette-5);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="green"] {
+        background-color: var(--noctis-color-palette-4);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="teal"] {
+        background-color: var(--noctis-color-palette-3);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="blue"] {
+        background-color: var(--noctis-color-palette-1);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="purple"] {
+        background-color: var(--noctis-color-palette-9);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="pink"] {
+        background-color: var(--noctis-color-palette-8);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    /* ─── soft: a quiet tint behind saturated text ──────────────────────────────────────────────── */
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="neutral"] {
+        background-color: var(--noctis-color-control);
+        color: var(--noctis-color-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="accent"] {
+        background-color: var(--noctis-color-accent-muted);
+        color: var(--noctis-color-accent);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="success"] {
+        background-color: var(--noctis-color-success-muted);
+        color: var(--noctis-color-success-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="warning"] {
+        background-color: var(--noctis-color-warning-muted);
+        color: var(--noctis-color-warning-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="danger"] {
+        background-color: var(--noctis-color-danger-muted);
+        color: var(--noctis-color-danger-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="info"] {
+        background-color: var(--noctis-color-info-muted);
+        color: var(--noctis-color-info-muted-foreground);
+    }
+
+    /* Decorative `soft` sits the saturated palette colour as text on the neutral chip tint — the
+     * the palette swatches ship no engine tint of their own (unlike the semantic `-muted` roles), and a
+     * faint tint can't be derived in component CSS (no `color-mix`), so the colour reads through the
+     * label while the chip stays a quiet neutral. */
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="red"] {
+        color: var(--noctis-color-palette-7);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="orange"] {
+        color: var(--noctis-color-palette-6);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="amber"] {
+        color: var(--noctis-color-palette-5);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="green"] {
+        color: var(--noctis-color-palette-4);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="teal"] {
+        color: var(--noctis-color-palette-3);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="blue"] {
+        color: var(--noctis-color-palette-1);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="purple"] {
+        color: var(--noctis-color-palette-9);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="pink"] {
+        color: var(--noctis-color-palette-8);
+    }
+
+    /* ─── outline: a transparent chip with a coloured edge ──────────────────────────────────────── */
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="neutral"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-border);
+        color: var(--noctis-color-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="accent"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-accent);
+        color: var(--noctis-color-accent);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="success"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-success-border);
+        color: var(--noctis-color-success-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="warning"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-warning-border);
+        color: var(--noctis-color-warning-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="danger"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-danger-border);
+        color: var(--noctis-color-danger-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="info"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-info-border);
+        color: var(--noctis-color-info-muted-foreground);
+    }
+
+    /* Decorative `outline` draws the saturated palette swatch as both the edge and the label colour on a
+     * transparent chip — the full swatch (no derived alpha) keeps the rule a declared-role read. */
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="red"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-7);
+        color: var(--noctis-color-palette-7);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="orange"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-6);
+        color: var(--noctis-color-palette-6);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="amber"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-5);
+        color: var(--noctis-color-palette-5);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="green"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-4);
+        color: var(--noctis-color-palette-4);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="teal"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-3);
+        color: var(--noctis-color-palette-3);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="blue"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-1);
+        color: var(--noctis-color-palette-1);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="purple"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-9);
+        color: var(--noctis-color-palette-9);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="pink"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-8);
+        color: var(--noctis-color-palette-8);
+    }
+
+    /* ─── dot: a neutral chip whose only colour is its leading status dot ───────────────────────────
+     * Unlike the variants above (where the tone tints the whole chip), the `dot` variant keeps the chip
+     * neutral — a transparent fill, a hairline border, neutral text for every tone — and lets the dot
+     * alone carry the status colour. So the dot must NOT ride `currentColor` here (that would render it
+     * neutral); each tone re-points the dot fill to its saturated role/swatch. */
+    [data-slot="noctis-badge"][data-variant="dot"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-border);
+        color: var(--noctis-color-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="neutral"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-muted);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="accent"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-accent);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="success"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-success);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="warning"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-warning);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="danger"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-danger);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="info"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-info);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="red"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-7);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="orange"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-6);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="amber"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-5);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="green"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-4);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="teal"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-3);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="blue"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-1);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="purple"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-9);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="pink"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-8);
+    }
+}
+
 @layer noctis.components {
     /*
      * Button is a class-escape-hatch primitive: `Button.props()` styles a *foreign* element (the rail's
@@ -3912,8 +4335,9 @@
      * menu trigger's popup is open (and a `Menu.Trigger` rendered as a `Button` carries
      * `data-slot="noctis-menu-trigger"`, not `"noctis-button"`), so keying on the marker is what keeps the
      * seam on exactly the real segments. The general-sibling (`~`) and `:has()` selectors look through any
-     * guard between two segments. Logical properties throughout (`margin-inline-start`, `inset-inline-start`),
-     * so the whole thing mirrors under RTL. The divider's width and colour flow through the
+     * guard between two segments. Logical properties throughout (`border-inline-start-width`,
+     * `inset-inline-start`), so the whole thing mirrors under RTL. The divider's width and colour flow
+     * through the
      * `--_button-group-seam-*` internals declared on the group slot in the generated layer, so
      * `--noctis-button-group-seam-*` retunes it; the high-contrast `strong` border token reads clearly
      * across every button variant.
@@ -3947,19 +4371,24 @@
     }
 
     /*
-     * Square each later segment's inner-start corner, and pull it onto the previous segment's border so
-     * the two share one edge. Anchored on the group root, reaching only its direct-child marked segments.
+     * Weld the segments: square each junction's corners and DROP the touching (inner) borders, so the
+     * seam drawn below is the single divider. A bordered variant (secondary/outline) used to keep its
+     * own 1px border at the junction *and* get the seam on top — two lines, a doubled divider; dropping
+     * the inner borders leaves exactly the seam. Segments sit flush (no negative margin); a borderless
+     * variant (primary/ghost/…) has no inner border to drop, so it is unaffected and the seam still
+     * divides it. Anchored on the group root, reaching only its direct-child marked segments.
      */
     [data-slot="noctis-button-group"] > [data-button-group-item] ~ [data-button-group-item] {
-        margin-inline-start: -1px;
         border-start-start-radius: 0;
         border-end-start-radius: 0;
+        border-inline-start-width: 0;
     }
 
-    /* Square the inner-end corner of every segment that has a later sibling segment. */
+    /* Square the inner-end corner of every segment that has a later sibling, and drop its inner-end border. */
     [data-slot="noctis-button-group"] > [data-button-group-item]:has(~ [data-button-group-item]) {
         border-start-end-radius: 0;
         border-end-end-radius: 0;
+        border-inline-end-width: 0;
     }
 
     /*
@@ -7361,6 +7790,97 @@
     }
 }
 
+@layer noctis.components {
+    /*
+     * Pagination is a self-contained CONTAINER, so every rule keys off its own `data-slot`. It hosts
+     * real Noctis controls — the nav buttons render `Button` welded by a `ButtonGroup`, the page field
+     * renders `Input`, the page-size picker renders `Select` — and those keep their own slots, paint,
+     * and per-size metrics: Pagination styles only its own layout (the row + cluster gaps), the info
+     * line's type, the page field's width, and the hairline separator. The control `size` is fed to the
+     * hosted controls through React context in the orchestration, not a token re-point here. Identity
+     * values flow through the generated `--_pagination-*` internals; the rest is structural layout.
+     */
+
+    /* root — the navigation row. Wraps when narrow; the consumer adds their own justify if they want
+     * the info line and controls pushed apart. */
+    [data-slot="noctis-pagination"] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--_pagination-gap);
+    }
+
+    /* info — the “Showing X–Y of Z” status line, quieter than the controls. */
+    [data-slot="noctis-pagination-info"] {
+        font-size: var(--_pagination-info-font-size);
+        color: var(--_pagination-info-color);
+    }
+
+    /* page-size — the cluster laying out the “Per page” label beside its select. Layout only; the label
+     * carries its own quiet type/colour and the hosted Select keeps its own. */
+    [data-slot="noctis-pagination-page-size"] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--_pagination-page-size-gap);
+    }
+
+    [data-slot="noctis-pagination-page-size-label"] {
+        font-size: var(--noctis-text-small);
+        color: var(--noctis-color-muted);
+    }
+
+    /* page — the “Page [n] of N” cluster. The hosted Input is clamped to the page-field width and its
+     * value is centred. */
+    [data-slot="noctis-pagination-page"] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--_pagination-page-gap);
+        font-size: var(--noctis-text-small);
+        color: var(--noctis-color-muted);
+    }
+
+    [data-slot="noctis-pagination-page"] [data-slot="noctis-input"] {
+        inline-size: var(--_pagination-page-inline-size);
+    }
+
+    [data-slot="noctis-pagination-page"] input {
+        text-align: center;
+    }
+
+    /*
+     * Inside the controls `ButtonGroup`, the page field welds flush like a button segment: the wrapper is
+     * positioned so the group's seam pseudo-element anchors on it, and the inner Input is flattened — a
+     * squared radius (it must NOT follow the pill `radius-control`), its inner borders dropped so the
+     * group's seams are the only dividers (no doubled line), and its rest shadow removed so it sits level
+     * with the flattened buttons. The top/bottom field border stays, lining up with the buttons' edges.
+     */
+    [data-slot="noctis-pagination-controls"] [data-slot="noctis-pagination-page"] {
+        position: relative;
+    }
+
+    [data-slot="noctis-pagination-controls"] [data-slot="noctis-pagination-page"] [data-slot="noctis-input"] {
+        block-size: var(--_pagination-page-block-size);
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    /* controls — the navigation landmark wrapping the welded ButtonGroup of nav buttons. */
+    [data-slot="noctis-pagination-controls"] {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    /* separator — a vertical hairline between clusters (its own minted rule, like Toolbar's). */
+    [data-slot="noctis-pagination-separator"] {
+        flex-shrink: 0;
+        inline-size: var(--_pagination-separator-inline-size);
+        block-size: var(--_pagination-separator-block-size);
+        background-color: var(--_pagination-separator-color);
+    }
+}
+
 @layer noctis.components {
     /*
      * PreviewCard is precompiled: every rule keys off the prefixed `data-slot` anchor (no `:where()`, so