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

package/dist/styles.css

@@ -2131,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));
@@ -2489,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);
     }
@@ -4095,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
@@ -5982,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
@@ -10403,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"] {