@stridge/noctis 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/styles.css

@@ -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));
@@ -2108,6 +2131,45 @@
         --_combobox-input-height: var(--noctis-combobox-input-height, var(--noctis-size-control-lg));
         --_combobox-input-padding-inline: var(--noctis-combobox-input-padding-inline, 0.875rem);
     }
+    [data-slot="noctis-command"] {
+        --_command-inset-block-start: var(--noctis-command-inset-block-start, 12vh);
+        --_command-height: var(--noctis-command-height, min(60vh, 460px));
+        --_command-width: var(--noctis-command-width, min(40rem, 92vw));
+        --_command-border-radius: var(--noctis-command-border-radius, var(--noctis-radius-md));
+        --_command-transition-duration: var(--noctis-command-transition-duration, var(--noctis-duration-overlay));
+    }
+    [data-slot="noctis-command-input"] {
+        --_command-input-height: var(--noctis-command-input-height, 3rem);
+    }
+    [data-slot="noctis-command-list"] {
+        --_command-list-padding: var(--noctis-command-list-padding, 0.375rem);
+        --_command-list-height: var(--noctis-command-list-height, auto);
+        --_command-list-transition-duration: var(--noctis-command-list-transition-duration, var(--noctis-duration-regular));
+    }
+    [data-slot="noctis-command-item"] {
+        --_command-item-height: var(--noctis-command-item-height, 2.5rem);
+        --_command-item-padding-inline: var(--noctis-command-item-padding-inline, 0.375rem);
+        --_command-item-padding-block: var(--noctis-command-item-padding-block, 0.25rem);
+        --_command-item-gap: var(--noctis-command-item-gap, 0.5rem);
+        --_command-item-border-radius: var(--noctis-command-item-border-radius, var(--noctis-radius-sm));
+        --_command-item-color: var(--noctis-command-item-color, var(--noctis-color-secondary));
+        --_command-item-color-highlighted: var(--noctis-command-item-color-highlighted, var(--noctis-color-foreground));
+        --_command-item-background-color-highlighted: var(
+            --noctis-command-item-background-color-highlighted,
+            var(--noctis-color-control-ghost-hover)
+        );
+        --_command-item-background-color-active: var(
+            --noctis-command-item-background-color-active,
+            var(--noctis-color-control-ghost-selected)
+        );
+    }
+    [data-slot="noctis-command-empty"] {
+        --_command-empty-padding-block: var(--noctis-command-empty-padding-block, var(--noctis-space-6));
+    }
+    [data-slot="noctis-command-group-label"] {
+        --_command-group-label-padding-inline: var(--noctis-command-group-label-padding-inline, var(--noctis-space-2\.5));
+        --_command-group-label-padding-inline-start: var(--noctis-command-group-label-padding-inline-start, 0.375rem);
+    }
     [data-slot="noctis-search-dialog"] {
         --_search-dialog-inset-block-start: var(--noctis-search-dialog-inset-block-start, 12vh);
         --_search-dialog-height: var(--noctis-search-dialog-height, min(56vh, 420px));
@@ -2466,6 +2528,62 @@
     [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-skeleton"] {
+        --_skeleton-root-gap: var(--noctis-skeleton-root-gap, var(--noctis-space-3));
+    }
+    [data-slot="noctis-skeleton-box"],
+    [data-slot="noctis-skeleton-circle"],
+    [data-slot="noctis-skeleton-line"] {
+        --_skeleton-fill-background-color: var(--noctis-skeleton-fill-background-color, var(--noctis-color-well));
+        --_skeleton-shimmer-background-color: var(--noctis-skeleton-shimmer-background-color, var(--noctis-color-surface-raised));
+        --_skeleton-shimmer-animation-duration: var(
+            --noctis-skeleton-shimmer-animation-duration,
+            calc(var(--noctis-duration-slow) * 4)
+        );
+    }
+    [data-slot="noctis-skeleton-box"] {
+        --_skeleton-box-block-size: var(--noctis-skeleton-box-block-size, 1.25rem);
+        --_skeleton-box-border-radius: var(--noctis-skeleton-box-border-radius, var(--noctis-radius-md));
+    }
+    [data-slot="noctis-skeleton-circle"] {
+        --_skeleton-circle-size: var(--noctis-skeleton-circle-size, 2.5rem);
+    }
+    [data-slot="noctis-skeleton-line"] {
+        --_skeleton-line-block-size: var(--noctis-skeleton-line-block-size, 0.7em);
+        --_skeleton-line-border-radius: var(--noctis-skeleton-line-border-radius, var(--noctis-radius-sm));
+    }
+    [data-slot="noctis-skeleton-text"] {
+        --_skeleton-text-gap: var(--noctis-skeleton-text-gap, var(--noctis-space-2));
+    }
+    [data-slot="noctis-breadcrumb"] {
+        --_breadcrumb-gap: var(--noctis-breadcrumb-gap, 0.375rem);
+        --_breadcrumb-font-size: var(--noctis-breadcrumb-font-size, var(--noctis-text-small));
+    }
+    [data-slot="noctis-breadcrumb-list"] {
+        --_breadcrumb-list-gap: var(--noctis-breadcrumb-list-gap, 0.375rem);
+    }
+    [data-slot="noctis-breadcrumb-icon"] {
+        --_breadcrumb-icon-size: var(--noctis-breadcrumb-icon-size, 1rem);
+    }
+    [data-slot="noctis-breadcrumb-separator"] {
+        --_breadcrumb-separator-size: var(--noctis-breadcrumb-separator-size, 1rem);
+    }
+    [data-slot="noctis-breadcrumb-link"] {
+        --_breadcrumb-link-border-radius: var(--noctis-breadcrumb-link-border-radius, var(--noctis-radius-sm));
+    }
+    [data-slot="noctis-breadcrumb"][data-size="sm"] {
+        --_breadcrumb-gap: var(--noctis-breadcrumb-gap, 0.25rem);
+        --_breadcrumb-font-size: var(--noctis-breadcrumb-font-size, var(--noctis-text-mini));
+    }
+    [data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-list"] {
+        --_breadcrumb-list-gap: var(--noctis-breadcrumb-list-gap, 0.25rem);
+    }
+    [data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-icon"] {
+        --_breadcrumb-icon-size: var(--noctis-breadcrumb-icon-size, 0.875rem);
+    }
+    [data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-separator"] {
+        --_breadcrumb-separator-size: var(--noctis-breadcrumb-separator-size, 0.875rem);
+    }
     [data-slot="noctis-otp-field"] {
         --_otp-field-gap: var(--noctis-otp-field-gap, 0.5rem);
     }
@@ -4072,6 +4190,122 @@
     }
 }
 
+@layer noctis.components {
+    /*
+     * Breadcrumb is self-contained, so every rule keys off the element's own `data-slot`. The metrics
+     * flow through the `--_breadcrumb-*` internals, whose per-size defaults live in the generated
+     * component layer (`tokens.css`) keyed off the `data-size` the root stamps. Colours aren't minted —
+     * the link/page/separator read the `muted`/`foreground`/`subtle` roles directly, so a retheme
+     * propagates for free.
+     *
+     * The root declares `--_breadcrumb-gap` (the icon↔label gap) and `--_breadcrumb-font-size`; both
+     * inherit down to every crumb. The list, icon, and separator carry their own per-size internals.
+     */
+
+    /* root — the nav landmark. Sets the trail's type and a calm default colour the crumbs override. */
+    [data-slot="noctis-breadcrumb"] {
+        font-family: var(--noctis-font-sans);
+        font-size: var(--_breadcrumb-font-size);
+        line-height: 1;
+        color: var(--noctis-color-muted);
+    }
+
+    /* list — the ordered row of crumbs and separators. */
+    [data-slot="noctis-breadcrumb-list"] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--_breadcrumb-list-gap);
+        margin-block: 0;
+        margin-inline: 0;
+        padding-block: 0;
+        padding-inline: 0;
+        list-style: none;
+    }
+
+    /* item — wraps a single crumb (a link or the current page). */
+    [data-slot="noctis-breadcrumb-item"] {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    /* link — an interactive ancestor crumb. Muted by default, lifting to the foreground on hover/focus. */
+    [data-slot="noctis-breadcrumb-link"] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--_breadcrumb-gap);
+        border-radius: var(--_breadcrumb-link-border-radius);
+        color: var(--noctis-color-muted);
+        text-decoration: none;
+        cursor: pointer;
+        transition: color var(--noctis-duration-quick) var(--noctis-ease-out);
+    }
+
+    [data-slot="noctis-breadcrumb-link"]:hover {
+        color: var(--noctis-color-foreground);
+    }
+
+    [data-slot="noctis-breadcrumb-link"]:focus-visible {
+        outline: var(--noctis-size-focus-ring-width) solid var(--noctis-color-ring);
+        outline-offset: var(--noctis-size-focus-ring-offset);
+    }
+
+    /* page — the current page crumb. Reads in the foreground at a slightly heavier weight. */
+    [data-slot="noctis-breadcrumb-page"] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--_breadcrumb-gap);
+        color: var(--noctis-color-foreground);
+        font-weight: 500;
+    }
+
+    /* separator — the presentational glyph between crumbs. Subtle, clamped to the separator size. */
+    [data-slot="noctis-breadcrumb-separator"] {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        color: var(--noctis-color-subtle);
+    }
+
+    [data-slot="noctis-breadcrumb-separator"] svg {
+        inline-size: var(--_breadcrumb-separator-size);
+        block-size: var(--_breadcrumb-separator-size);
+    }
+
+    /* ellipsis — the collapsed-run indicator. Muted, clamped to the crumb icon size. */
+    [data-slot="noctis-breadcrumb-ellipsis"] {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        color: var(--noctis-color-muted);
+    }
+
+    [data-slot="noctis-breadcrumb-ellipsis"] svg {
+        inline-size: var(--_breadcrumb-icon-size);
+        block-size: var(--_breadcrumb-icon-size);
+    }
+
+    /* icon — a crumb's leading glyph, clamped to the icon size; inherits the crumb's text colour. */
+    [data-slot="noctis-breadcrumb-icon"] {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+    }
+
+    [data-slot="noctis-breadcrumb-icon"] svg {
+        inline-size: var(--_breadcrumb-icon-size);
+        block-size: var(--_breadcrumb-icon-size);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-slot="noctis-breadcrumb-link"] {
+            transition: none;
+        }
+    }
+}
+
 @layer noctis.components {
     /*
      * Button is a class-escape-hatch primitive: `Button.props()` styles a *foreign* element (the rail's
@@ -4312,8 +4546,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.
@@ -4347,19 +4582,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;
     }
 
     /*
@@ -5953,6 +6193,377 @@
     }
 }
 
+@layer noctis.components {
+    /*
+     * Command — an accessible command palette. The panel renders through `Surface` (its stable
+     * `data-surface` marker paints the background, border, and shadow, and stamps the `menu` elevation
+     * scope), so this file styles only the palette's own slots: layout, the input row, the rows and
+     * sections, the messages, the drill-in breadcrumb, the footer hints, and the modal scale-fade.
+     *
+     * One panel slot (`command`) serves both mounting modes. The modal `Command.Dialog` stamps
+     * `data-modal` on the panel, which the geometry rules gate on (fixed, centred, the scale-fade); the
+     * inline `Command.Root` omits it, so the same panel sits in normal flow and only the shared metrics
+     * (radius, capped height, the rows) apply. Both modes leave the panel auto-height: it grows and
+     * shrinks with its list, which animates its own height as the result set changes (the list feeds its
+     * measured content height into `--_command-list-height`), so the palette glides between sizes rather
+     * than jumping. Every rule keys off the prefixed `data-slot` anchor (no `:where()`), so the cascade
+     * layer alone is the override seam; identity properties read a `--_command-*` internal or a semantic
+     * `var(--noctis-*)` role, never a literal.
+     */
+
+    /* backdrop — the blurred scrim behind the modal palette, fading with the panel. The 2px blur is a
+     * non-token geometric literal (a filter radius), the same class of value as the panel's transition
+     * offsets. */
+    [data-slot="noctis-command-backdrop"] {
+        position: fixed;
+        inset: 0;
+        z-index: var(--noctis-z-modal);
+        background-color: var(--noctis-color-overlay);
+        backdrop-filter: blur(2px);
+        transition: opacity var(--noctis-duration-overlay) var(--noctis-ease-overlay);
+    }
+
+    [data-slot="noctis-command-backdrop"][data-starting-style],
+    [data-slot="noctis-command-backdrop"][data-ending-style] {
+        opacity: 0;
+    }
+
+    /* panel — the column holding the input row over the scrolling list over the optional footer. The
+     * shared shape (rounded, clipping its scroll, capped height) applies in both modes; the paint comes
+     * from the composed Surface. */
+    [data-slot="noctis-command"] {
+        display: flex;
+        min-block-size: 0;
+        max-block-size: var(--_command-height);
+        inline-size: 100%;
+        flex-direction: column;
+        overflow: hidden;
+        border-radius: var(--_command-border-radius);
+        outline: none;
+    }
+
+    /* the modal panel: centred, top-anchored, auto-height (capped by the shared `max-block-size` so it
+     * stays on-screen; the list scrolls past that), and the scale-fade enter/exit. The transition
+     * animates the individual properties (not `transform`) so the close doesn't snap. */
+    [data-slot="noctis-command"][data-modal] {
+        position: fixed;
+        inset-inline: 0;
+        inset-block-start: var(--_command-inset-block-start);
+        z-index: var(--noctis-z-modal);
+        margin-inline: auto;
+        inline-size: var(--_command-width);
+        transform-origin: top;
+        transition:
+            opacity var(--_command-transition-duration) var(--noctis-ease-overlay),
+            translate var(--_command-transition-duration) var(--noctis-ease-overlay),
+            scale var(--_command-transition-duration) var(--noctis-ease-overlay);
+    }
+
+    [data-slot="noctis-command"][data-modal][data-starting-style] {
+        translate: 0 -0.75rem;
+        scale: 0.96;
+        opacity: 0;
+    }
+
+    [data-slot="noctis-command"][data-modal][data-ending-style] {
+        translate: 0 -0.375rem;
+        scale: 0.97;
+        opacity: 0;
+    }
+
+    /* header — the input row: an optional drill-in breadcrumb and leading glyph, the query field, and an
+     * optional trailing action. No divider under it — the input reads as one surface with the list. The
+     * inline padding lines the leading glyph up with the rows' icon column (list padding + row padding),
+     * and the gap matches a row's icon→label gap, so the input and the rows share one left rhythm. */
+    [data-slot="noctis-command-header"] {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--noctis-space-2);
+        padding-inline: var(--noctis-space-3);
+    }
+
+    /* the leading search glyph (an un-slotted Icon in the header). */
+    [data-slot="noctis-command-header"] > svg {
+        flex-shrink: 0;
+        color: var(--noctis-color-muted);
+    }
+
+    /* breadcrumb — the drill-in trail shown before the field once the palette has been pushed into a
+     * sub-page; each segment reads as quiet meta, not a control. */
+    [data-slot="noctis-command-breadcrumb"] {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--noctis-space-2);
+        font-size: var(--noctis-text-small);
+        line-height: var(--noctis-leading-small);
+        color: var(--noctis-color-muted);
+    }
+
+    /* one breadcrumb segment: a soft chip on the ghost role so the trail lifts off the panel; clicking
+     * it truncates the drill-in stack back to that depth. */
+    [data-slot="noctis-command-breadcrumb"] > button {
+        display: inline-flex;
+        cursor: pointer;
+        align-items: center;
+        border: none;
+        border-radius: var(--noctis-radius-sm);
+        background-color: var(--noctis-color-control-ghost-hover);
+        padding-inline: var(--noctis-space-2);
+        padding-block: var(--noctis-space-1);
+        font: inherit;
+        color: var(--noctis-color-foreground);
+        outline: none;
+        transition: background-color var(--noctis-duration-quick) var(--noctis-ease-out);
+    }
+
+    [data-slot="noctis-command-breadcrumb"] > button:hover {
+        background-color: var(--noctis-color-control-ghost-selected);
+    }
+
+    [data-slot="noctis-command-breadcrumb"] > button:focus-visible {
+        outline: var(--noctis-size-focus-ring-width) solid var(--noctis-color-ring);
+        outline-offset: var(--noctis-size-focus-ring-width);
+    }
+
+    /* input — the query field: transparent, filling the header, with the native clear button hidden. */
+    [data-slot="noctis-command-input"] {
+        block-size: var(--_command-input-height);
+        min-inline-size: 0;
+        flex: 1;
+        border: none;
+        background-color: transparent;
+        font-size: var(--noctis-text-regular);
+        line-height: var(--noctis-leading-regular);
+        color: var(--noctis-color-foreground);
+        outline: none;
+    }
+
+    [data-slot="noctis-command-input"]::placeholder {
+        color: var(--noctis-color-placeholder);
+    }
+
+    [data-slot="noctis-command-input"]::-webkit-search-cancel-button {
+        appearance: none;
+    }
+
+    /* input-action — the trailing affordance slot in the input row (a mode pill, a hint, an action). */
+    [data-slot="noctis-command-input-action"] {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--noctis-space-2);
+        font-size: var(--noctis-text-mini);
+        line-height: var(--noctis-leading-mini);
+        color: var(--noctis-color-muted);
+    }
+
+    /* list — the scrolling listbox and its thin scrollbar. Its `block-size` tracks the measured content
+     * height (the hook writes `--_command-list-height`) and tweens between sizes, so the auto-height
+     * panel grows and shrinks with the rows. `flex: 0 1` lets it shrink — but never grow past its
+     * content — so once the panel hits its cap the list yields and scrolls instead of overflowing.
+     *
+     * The scrollbar is thin and themed (the shared menu-scope thumb role) with no reserved gutter, so it
+     * appears only when the rows overflow the capped panel and a short list shows no empty track.
+     * `scroll-padding-block` keeps the inner list padding in view so the keyboard never parks the first or
+     * last row flush against an edge (which read as a cropped row) — the end rows stop a padding short. */
+    [data-slot="noctis-command-list"] {
+        min-block-size: 0;
+        flex: 0 1 auto;
+        overflow-y: auto;
+        block-size: var(--_command-list-height, auto);
+        scroll-padding-block: var(--_command-list-padding);
+        scrollbar-width: thin;
+        scrollbar-color: var(--noctis-color-scrollbar-thumb) transparent;
+        transition: block-size var(--_command-list-transition-duration) var(--noctis-ease-out);
+    }
+
+    /* sizer — the measured content wrapper inside the scroll viewport. It carries the list's inner
+     * padding (so the scrollbar rides outside it) and its natural height is what the hook observes. */
+    [data-slot="noctis-command-list-sizer"] {
+        padding: var(--_command-list-padding);
+    }
+
+    /* list-view — the per-page view. Remounted on every drill in/out (keyed by depth), so this enter
+     * animation replays each time: the new view fades in as the old one gives way (a pure opacity
+     * cross-fade, like the reference — no slide, no scale, so it never fights the panel's height tween).
+     * Opacity only, so the sizer's measured height is untouched. */
+    [data-slot="noctis-command-list-view"] {
+        animation: noctis-command-view-enter var(--noctis-duration-regular) var(--noctis-ease-out);
+    }
+
+    @keyframes noctis-command-view-enter {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    /* group — a labelled section wrapper (no box of its own). */
+    [data-slot="noctis-command-group"] {
+        display: block;
+    }
+
+    /*
+     * group-label — a section heading, deliberately NOT an option. The cues are script-independent (no
+     * casing — Noctis is localized): the smallest type, the most muted foreground, a gap above. Its text
+     * is outdented to the row's content edge, left of the option-label column.
+     */
+    [data-slot="noctis-command-group-label"] {
+        padding-inline: var(--_command-group-label-padding-inline-start) var(--_command-group-label-padding-inline);
+        padding-block: var(--noctis-space-3) var(--noctis-space-1);
+        font-size: var(--noctis-text-micro);
+        line-height: var(--noctis-leading-micro);
+        color: var(--noctis-color-subtle);
+    }
+
+    /*
+     * item — one command row. Dimensions/colours flow through the `--_command-item-*` internals. The
+     * highlight (neutral, signal-free) appears instantly on the keyboard- or pointer-active row and
+     * fades out over the quick stop; the accent stays a signal, never a hover.
+     */
+    [data-slot="noctis-command-item"] {
+        display: flex;
+        min-block-size: var(--_command-item-height);
+        cursor: pointer;
+        align-items: center;
+        gap: var(--_command-item-gap);
+        border-radius: var(--_command-item-border-radius);
+        padding-block: var(--_command-item-padding-block);
+        padding-inline: var(--_command-item-padding-inline);
+        font-size: var(--noctis-text-small);
+        line-height: var(--noctis-leading-small);
+        color: var(--_command-item-color);
+        outline: none;
+        user-select: none;
+        transition-property: color, background-color;
+        transition-timing-function: var(--noctis-ease-out);
+        transition-duration: var(--noctis-duration-quick);
+    }
+
+    [data-slot="noctis-command-item"][data-highlighted] {
+        transition-duration: 0s;
+    }
+
+    [data-slot="noctis-command-item"]:not([data-disabled]):hover,
+    [data-slot="noctis-command-item"]:not([data-disabled])[data-highlighted] {
+        background-color: var(--_command-item-background-color-highlighted);
+        color: var(--_command-item-color-highlighted);
+    }
+
+    /* a firmer fill while a row is pressed, as tactile feedback before it commits. */
+    [data-slot="noctis-command-item"]:not([data-disabled]):active {
+        background-color: var(--_command-item-background-color-active);
+    }
+
+    [data-slot="noctis-command-item"][data-disabled] {
+        cursor: not-allowed;
+        opacity: var(--noctis-opacity-disabled);
+    }
+
+    /* item-icon — the leading command glyph, quieter than the label. Also catches a bare `Icon`. */
+    [data-slot="noctis-command-item-icon"],
+    [data-slot="noctis-command-item"] > [data-slot="noctis-icon"] {
+        display: inline-flex;
+        flex-shrink: 0;
+        color: var(--noctis-color-muted);
+    }
+
+    /* item-label — the row's text column; truncates rather than wrapping. Its `flex` also claims the
+     * row's free space, so any trailing content the consumer adds after it (a `Kbd` shortcut, a badge, a
+     * count) is pushed to the row's end — the component itself owns no trailing slot. */
+    [data-slot="noctis-command-item-label"] {
+        min-inline-size: 0;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: inherit;
+    }
+
+    /* separator — a thin neutral divider between sections (the menu separator idiom). */
+    [data-slot="noctis-command-separator"] {
+        block-size: 1px;
+        margin-block: var(--noctis-space-1);
+        background-color: var(--noctis-color-border);
+    }
+
+    /*
+     * empty — the centred no-results message. Base UI keeps the element mounted as a live region but
+     * renders its children only while the list is empty, so the styling is gated on `:not(:empty)` —
+     * otherwise the childless element would reserve its block padding and open a gap above the list.
+     */
+    [data-slot="noctis-command-empty"]:not(:empty) {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        padding-block: var(--_command-empty-padding-block);
+        padding-inline: var(--noctis-space-2);
+        text-align: center;
+        font-size: var(--noctis-text-small);
+        line-height: var(--noctis-leading-small);
+        color: var(--noctis-color-muted);
+    }
+
+    /* loading — the centred async progress shell shown before any results settle; the spinner glyph
+     * rides the shared spin token. */
+    [data-slot="noctis-command-loading"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--noctis-space-2);
+        padding-block: var(--_command-empty-padding-block);
+        font-size: var(--noctis-text-small);
+        line-height: var(--noctis-leading-small);
+        color: var(--noctis-color-muted);
+    }
+
+    [data-slot="noctis-command-loading"] > svg {
+        flex-shrink: 0;
+        animation: var(--noctis-animate-spin);
+        color: var(--noctis-color-muted);
+    }
+
+    /* footer — a bare, end-aligned region below the list (a quiet, bordered strip). Unopinionated about
+     * its contents: the consumer composes whatever status or hints go here. */
+    [data-slot="noctis-command-footer"] {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--noctis-space-3);
+        border-block-start: 1px solid var(--noctis-color-border);
+        padding-inline: var(--noctis-space-4);
+        padding-block: var(--noctis-space-2);
+        font-size: var(--noctis-text-mini);
+        line-height: var(--noctis-leading-mini);
+        color: var(--noctis-color-muted);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-slot="noctis-command-backdrop"],
+        [data-slot="noctis-command"][data-modal],
+        [data-slot="noctis-command-list"],
+        [data-slot="noctis-command-breadcrumb"] > button,
+        [data-slot="noctis-command-item"] {
+            transition: none;
+        }
+
+        [data-slot="noctis-command-list-view"] {
+            animation: none;
+        }
+
+        [data-slot="noctis-command-loading"] > svg {
+            animation: none;
+        }
+    }
+}
+
 @layer noctis.components {
     /*
      * ContextMenu is precompiled: every rule keys off the prefixed `data-slot` anchor (no `:where()`, so
@@ -7761,6 +8372,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
@@ -10283,6 +10985,139 @@
     }
 }
 
+@layer noctis.components {
+    /*
+     * Skeleton is self-contained and accent-independent, so every rule keys off the element's own
+     * `data-slot`. The shared placeholder fill, the shimmer band colour, and the sweep duration flow
+     * through the `--_skeleton-fill-*`/`--_skeleton-shimmer-*` internals, which the generated component
+     * layer (`tokens.css`) declares on all three shape slots at once, so a standalone shape paints with
+     * no `Skeleton.Root` ancestor. Per-shape metrics (box height/radius, circle diameter, line
+     * height/radius) ride each shape's own slot; the root and text wrappers are layout only.
+     *
+     * Animation is keyed off each shape's own `data-variant`: `shimmer` (a light band masked over the
+     * fill and translated across), `pulse` (an opacity fade on the shape), or `none` (static). Every
+     * variant degrades to a calm static fill under `prefers-reduced-motion: reduce` (the foot of the file).
+     */
+
+    /* root — the accessible loading group. A vertical stack by default; restyle via className for any
+     * other arrangement. Not a painted placeholder itself. */
+    [data-slot="noctis-skeleton"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--_skeleton-root-gap);
+    }
+
+    /* text — a column of line bars. Not painted itself; its `Skeleton.Line`s carry the fill + animation. */
+    [data-slot="noctis-skeleton-text"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--_skeleton-text-gap);
+    }
+
+    /* The last line of a multi-line block is drawn short so the paragraph reads ragged, not as a box.
+     * `:not(:first-child)` keeps a lone line full width. */
+    [data-slot="noctis-skeleton-text"] > [data-slot="noctis-skeleton-line"]:last-child:not(:first-child) {
+        inline-size: 60%;
+    }
+
+    /* ─── the painted shapes ─────────────────────────────────────────────────────────────────────── */
+
+    /* Shared base: a neutral well-coloured fill, clipped so the shimmer band rides inside the shape. */
+    [data-slot="noctis-skeleton-box"],
+    [data-slot="noctis-skeleton-circle"],
+    [data-slot="noctis-skeleton-line"] {
+        position: relative;
+        overflow: hidden;
+        background-color: var(--_skeleton-fill-background-color);
+    }
+
+    /* box — a rectangle. Fills its inline space; its height is the override seam (a default at md). */
+    [data-slot="noctis-skeleton-box"] {
+        inline-size: 100%;
+        block-size: var(--_skeleton-box-block-size);
+        border-radius: var(--_skeleton-box-border-radius);
+    }
+
+    /* circle — an avatar/icon disc. A square footprint rounded to a full circle; never shrinks in a row. */
+    [data-slot="noctis-skeleton-circle"] {
+        flex-shrink: 0;
+        inline-size: var(--_skeleton-circle-size);
+        block-size: var(--_skeleton-circle-size);
+        border-radius: var(--noctis-radius-full);
+    }
+
+    /* line — a single text-line bar. Fills its inline space; the height tracks the surrounding text. */
+    [data-slot="noctis-skeleton-line"] {
+        inline-size: 100%;
+        block-size: var(--_skeleton-line-block-size);
+        border-radius: var(--_skeleton-line-border-radius);
+    }
+
+    /* ─── shimmer: a light band masked over the fill, swept across ───────────────────────────────────
+     * The overlay paints the brighter shimmer colour, masked to a soft transparent→opaque→transparent
+     * band (black/transparent are mask alpha, not brand colour), then translated its full width so the
+     * highlight sweeps the shape. At each loop end the band sits fully off-shape, so the reset is unseen. */
+    [data-slot="noctis-skeleton-box"][data-variant="shimmer"]::after,
+    [data-slot="noctis-skeleton-circle"][data-variant="shimmer"]::after,
+    [data-slot="noctis-skeleton-line"][data-variant="shimmer"]::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-color: var(--_skeleton-shimmer-background-color);
+        mask-image: linear-gradient(to right, transparent, black, transparent);
+        animation: noctis-skeleton-shimmer var(--_skeleton-shimmer-animation-duration) var(--noctis-ease-in-out) infinite;
+    }
+
+    /* The sweep follows the reading direction — reversed under RTL. */
+    [dir="rtl"] [data-slot="noctis-skeleton-box"][data-variant="shimmer"]::after,
+    [dir="rtl"] [data-slot="noctis-skeleton-circle"][data-variant="shimmer"]::after,
+    [dir="rtl"] [data-slot="noctis-skeleton-line"][data-variant="shimmer"]::after {
+        animation-direction: reverse;
+    }
+
+    @keyframes noctis-skeleton-shimmer {
+        from {
+            transform: translateX(-100%);
+        }
+
+        to {
+            transform: translateX(100%);
+        }
+    }
+
+    /* ─── pulse: a gentle opacity fade on the shape itself ───────────────────────────────────────── */
+    [data-slot="noctis-skeleton-box"][data-variant="pulse"],
+    [data-slot="noctis-skeleton-circle"][data-variant="pulse"],
+    [data-slot="noctis-skeleton-line"][data-variant="pulse"] {
+        animation: noctis-skeleton-pulse var(--_skeleton-shimmer-animation-duration) var(--noctis-ease-in-out) infinite alternate;
+    }
+
+    @keyframes noctis-skeleton-pulse {
+        from {
+            opacity: 0.45;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    /* Reduced motion: hold every placeholder as a calm static fill — drop the swept band, freeze the fade. */
+    @media (prefers-reduced-motion: reduce) {
+        [data-slot="noctis-skeleton-box"][data-variant="shimmer"]::after,
+        [data-slot="noctis-skeleton-circle"][data-variant="shimmer"]::after,
+        [data-slot="noctis-skeleton-line"][data-variant="shimmer"]::after {
+            display: none;
+        }
+
+        [data-slot="noctis-skeleton-box"][data-variant="pulse"],
+        [data-slot="noctis-skeleton-circle"][data-variant="pulse"],
+        [data-slot="noctis-skeleton-line"][data-variant="pulse"] {
+            animation: none;
+        }
+    }
+}
+
 @layer noctis.components {
     /* root — the vertical stack: an optional label/value header above the control */
     [data-slot="noctis-slider"] {