@stisla/style 3.0.0-beta.8

package/dist/drawer/drawer.css

@@ -0,0 +1,318 @@
+/* @stisla/style — Drawer. Ported from src/scss/components/_drawer.scss. An edge-anchored sheet: a
+ * frosted backdrop dims the page, the panel slides in from a viewport edge (default --end). Sharp
+ * flush corners are the affordance; only the inner edge carries a border. Shown via
+ * [data-state="open"] on the root. References the @theme tokens: colors var(--color-*),
+ * sizes/spacing --spacing(n), type var(--text-*) / var(--leading-*) / var(--font-weight-*), radius
+ * var(--radius-*), shadow var(--shadow-*); only no-namespace customs use --st-* (border-width,
+ * duration, z-index); z-index routes through the z-index scale (--z-index-modal); the backdrop scrim is a bespoke oklch alpha
+ * (no scrim token) and blur radii stay literal (filter geometry). State + scroll-lock hooks
+ * ([data-shaking], html[data-drawer-open]) are attributes, recast from the legacy is-* classes per
+ * the no-is-* convention. Knobs are --drawer-*. Open/close + focus-trap behavior ships with the JS
+ * layer. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .drawer {
+    position: fixed;
+    inset: 0;
+    z-index: var(--drawer-z-index, var(--z-index-modal));
+    display: none;
+    pointer-events: none;
+  }
+
+  .drawer[data-state="open"] {
+    display: block;
+    pointer-events: auto;
+  }
+
+  .drawer__backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: var(--drawer-backdrop-bg, oklch(0 0 0 / 0.55));
+    backdrop-filter: blur(var(--drawer-backdrop-blur, 12px));
+    -webkit-backdrop-filter: blur(var(--drawer-backdrop-blur, 12px));
+    opacity: 0;
+    transition: opacity var(--drawer-transition-duration, var(--transition-duration-normal)) ease;
+    cursor: pointer;
+  }
+
+  .drawer[data-state="open"] .drawer__backdrop {
+    opacity: 1;
+  }
+
+  /* Backdrop opt-out — hide the backdrop element entirely; the JS skips the dismiss-on-click path so
+     the page behind stays interactive (filter panels, inspector strips). */
+  .drawer[data-stisla-drawer-backdrop="false"] .drawer__backdrop {
+    display: none;
+  }
+
+  .drawer__content {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--drawer-bg, var(--color-surface));
+    color: var(--drawer-color, var(--color-foreground));
+    box-shadow: var(--drawer-shadow, var(--shadow-lg));
+    overflow: hidden;
+    outline: none;
+    transition: transform var(--drawer-transition-duration, var(--transition-duration-normal)) ease;
+  }
+
+  /* === Placement === each pins the panel to a viewport edge and parks the content off-screen by
+     100% at rest. Only the inner edge carries a border. Default (bare .drawer) paints as --end. */
+  .drawer .drawer__content,
+  .drawer--end .drawer__content {
+    top: 0;
+    bottom: 0;
+    inset-inline-end: 0;
+    width: var(--drawer-width, --spacing(88));
+    max-width: 100vw;
+    border-inline-start: var(--drawer-border-width, var(--st-border-width)) solid
+      var(--drawer-border-color, var(--color-border));
+    transform: translateX(100%);
+  }
+
+  .drawer--start .drawer__content {
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    width: var(--drawer-width, --spacing(88));
+    max-width: 100vw;
+    border-inline-start: 0;
+    border-inline-end: var(--drawer-border-width, var(--st-border-width)) solid
+      var(--drawer-border-color, var(--color-border));
+    transform: translateX(-100%);
+  }
+
+  .drawer--top .drawer__content {
+    top: 0;
+    inset-inline: 0;
+    bottom: auto;
+    width: auto;
+    height: var(--drawer-height, --spacing(64));
+    max-height: 100dvh;
+    border: 0;
+    border-bottom: var(--drawer-border-width, var(--st-border-width)) solid
+      var(--drawer-border-color, var(--color-border));
+    transform: translateY(-100%);
+  }
+
+  .drawer--bottom .drawer__content {
+    top: auto;
+    bottom: 0;
+    inset-inline: 0;
+    width: auto;
+    height: var(--drawer-height, --spacing(64));
+    max-height: 100dvh;
+    border: 0;
+    border-top: var(--drawer-border-width, var(--st-border-width)) solid
+      var(--drawer-border-color, var(--color-border));
+    transform: translateY(100%);
+  }
+
+  /* RTL — inset-inline-* already anchors the panel on the correct physical edge, but translateX is
+     physical and can't be expressed logically, so flip the sign for the two inline-axis placements.
+     --top / --bottom use translateY (block-axis, direction-agnostic) and stay unchanged. */
+  [dir="rtl"] .drawer .drawer__content,
+  [dir="rtl"] .drawer--end .drawer__content {
+    transform: translateX(-100%);
+  }
+  [dir="rtl"] .drawer--start .drawer__content {
+    transform: translateX(100%);
+  }
+
+  /* Open — slide into place. */
+  .drawer[data-state="open"] .drawer__content {
+    transform: none;
+  }
+
+  /* === Floating === detaches the panel from the viewport: a gap on every side, all four corners
+     rounded, a full border, reading as a raised card rather than a flush sheet. Stacks onto any
+     placement (bare = end). The rest transform adds the gap on top of the 100% slide so the panel
+     still parks fully off-screen. */
+  .drawer--floating .drawer__content,
+  .drawer--floating.drawer--start .drawer__content,
+  .drawer--floating.drawer--end .drawer__content,
+  .drawer--floating.drawer--top .drawer__content,
+  .drawer--floating.drawer--bottom .drawer__content {
+    border: var(--drawer-border-width, var(--st-border-width)) solid
+      var(--drawer-border-color, var(--color-border));
+    border-radius: var(--drawer-radius, var(--radius-lg));
+  }
+
+  .drawer--floating .drawer__content,
+  .drawer--floating.drawer--end .drawer__content {
+    top: var(--drawer-gap, --spacing(3));
+    bottom: var(--drawer-gap, --spacing(3));
+    inset-inline-end: var(--drawer-gap, --spacing(3));
+    transform: translateX(calc(100% + var(--drawer-gap, --spacing(3))));
+  }
+
+  .drawer--floating.drawer--start .drawer__content {
+    top: var(--drawer-gap, --spacing(3));
+    bottom: var(--drawer-gap, --spacing(3));
+    inset-inline-start: var(--drawer-gap, --spacing(3));
+    inset-inline-end: auto;
+    transform: translateX(calc(-100% - var(--drawer-gap, --spacing(3))));
+  }
+
+  .drawer--floating.drawer--top .drawer__content {
+    top: var(--drawer-gap, --spacing(3));
+    bottom: auto;
+    inset-inline: var(--drawer-gap, --spacing(3));
+    transform: translateY(calc(-100% - var(--drawer-gap, --spacing(3))));
+  }
+
+  .drawer--floating.drawer--bottom .drawer__content {
+    top: auto;
+    bottom: var(--drawer-gap, --spacing(3));
+    inset-inline: var(--drawer-gap, --spacing(3));
+    transform: translateY(calc(100% + var(--drawer-gap, --spacing(3))));
+  }
+
+  /* RTL — flip the inline-axis floating transforms (mirrors the base block). */
+  [dir="rtl"] .drawer--floating .drawer__content,
+  [dir="rtl"] .drawer--floating.drawer--end .drawer__content {
+    transform: translateX(calc(-100% - var(--drawer-gap, --spacing(3))));
+  }
+  [dir="rtl"] .drawer--floating.drawer--start .drawer__content {
+    transform: translateX(calc(100% + var(--drawer-gap, --spacing(3))));
+  }
+
+  /* Open — slide into place. Last so it overrides every floating rest transform, LTR and RTL alike. */
+  .drawer--floating[data-state="open"] .drawer__content {
+    transform: none;
+  }
+
+  /* === Parts === */
+  .drawer__header {
+    display: flex;
+    align-items: center;
+    gap: --spacing(2);
+    flex: 0 0 auto;
+    padding: var(--drawer-padding-block, --spacing(5)) var(--drawer-padding-inline, --spacing(5));
+    padding-block-end: 0;
+  }
+
+  .drawer__title {
+    margin: 0;
+    font-size: var(--drawer-title-font-size, var(--text-lg));
+    font-weight: var(--drawer-title-font-weight, var(--font-weight-semibold));
+    line-height: var(--leading-tight);
+    color: var(--drawer-color, var(--color-foreground));
+  }
+
+  .drawer__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--drawer-padding-block, --spacing(5)) var(--drawer-padding-inline, --spacing(5));
+    color: var(--drawer-color, var(--color-foreground));
+    overflow-y: auto;
+  }
+
+  .drawer__footer {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: --spacing(2);
+    padding: var(--drawer-footer-padding-block, --spacing(3.5))
+      var(--drawer-padding-inline, --spacing(5));
+    background-color: var(--drawer-footer-bg, var(--color-surface-2));
+    border-top: var(--st-border-width) solid var(--drawer-footer-border-color, var(--color-border));
+  }
+
+  /* Inline ghost dismiss chip, pushed to the trailing edge whether the header wraps the title
+     directly or in a centered column. */
+  .drawer__close {
+    margin-inline-start: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--drawer-close-size, --spacing(7));
+    height: var(--drawer-close-size, --spacing(7));
+    padding: 0;
+    color: var(--drawer-close-color, var(--color-muted-foreground));
+    background-color: transparent;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    transition:
+      background-color var(--transition-duration-fast) ease,
+      color var(--transition-duration-fast) ease;
+  }
+
+  .drawer__close:hover {
+    color: var(--drawer-close-color-hover, var(--color-foreground));
+    background-color: var(--drawer-close-bg-hover, var(--color-accent));
+  }
+
+  .drawer__close:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+    color: var(--drawer-close-color-hover, var(--color-foreground));
+    background-color: var(--drawer-close-bg-hover, var(--color-accent));
+  }
+
+  .drawer__close > svg,
+  .drawer__close > i {
+    width: --spacing(4);
+    height: --spacing(4);
+  }
+
+  /* === Static backdrop shake === the behavior layer sets [data-shaking] on the panel when a click
+     hits a static backdrop. The shake axis matches the placement axis so the nudge reads as "stuck"
+     along the slide direction. */
+  .drawer__content[data-shaking] {
+    animation: st-drawer-shake-x var(--transition-duration-normal) ease-in-out;
+  }
+  .drawer--top .drawer__content[data-shaking],
+  .drawer--bottom .drawer__content[data-shaking] {
+    animation-name: st-drawer-shake-y;
+  }
+}
+
+/* === Scroll lock === applied to <html> while any backdrop-bearing drawer is open; scrollbar-gutter
+   keeps the page width stable. */
+html[data-drawer-open] {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+@keyframes st-drawer-shake-x {
+  0%,
+  100% {
+    transform: none;
+  }
+  25% {
+    transform: translateX(calc(--spacing(1) * -1));
+  }
+  75% {
+    transform: translateX(--spacing(1));
+  }
+}
+
+@keyframes st-drawer-shake-y {
+  0%,
+  100% {
+    transform: none;
+  }
+  25% {
+    transform: translateY(calc(--spacing(1) * -1));
+  }
+  75% {
+    transform: translateY(--spacing(1));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer__backdrop,
+  .drawer__content {
+    transition: none;
+  }
+  .drawer__content[data-shaking] {
+    animation: none;
+  }
+}

package/dist/empty-state/empty-state.css

@@ -0,0 +1,138 @@
+/* @stisla/style — Empty state. Ported from src/scss/components/_empty-state.scss. A centred block
+ * shown in place of absent content (an empty list, no results, a fresh account, a 404, an error).
+ * Pure layout + media chrome, no JS. BEM: .empty-state + __media / __title / __text / __action; tone
+ * modifiers colour the media, --sm shrinks it for a card/table, --bordered draws a dashed region. The
+ * media slot is a tinted circle holding one glyph by default; drop in an .illustration / <img> /
+ * .icon-box / .avatar / .spinner and the :has() sheds below strip the circle so richer art isn't
+ * double-framed. References the @theme tokens: colors var(--color-*), sizes/spacing --spacing(n), type
+ * var(--text-*) / var(--leading-*) / var(--font-weight-*), radius var(--radius-*); only no-namespace
+ * customs use --st-* (border-width). Knobs are --empty-state-*. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    /* A measure so the text wraps to a comfortable line; margin-inline auto centres horizontally,
+       vertical fill is the consumer's (wrap it in a flex/grid cell). */
+    max-width: var(--empty-state-max-width, --spacing(96));
+    margin-inline: auto;
+    padding-block: var(--empty-state-padding-block, --spacing(10));
+    padding-inline: var(--empty-state-padding-inline, --spacing(4));
+    color: var(--color-foreground);
+  }
+
+  /* === Media === default: a soft-tinted circle holding one glyph, accent from the tone knob. The
+     tint mixes in oklab toward the surface so a saturated tone stays on-hue. */
+  .empty-state__media {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: var(--empty-state-media-size, --spacing(16));
+    height: var(--empty-state-media-size, --spacing(16));
+    margin-block-end: var(--empty-state-media-gap, --spacing(5));
+    color: var(--empty-state-tone, var(--color-muted-foreground));
+    background: color-mix(in oklab, var(--empty-state-tone, var(--color-muted-foreground)) 12%, var(--color-surface));
+    border-radius: 9999px;
+  }
+
+  /* Bare glyph pins to a sensible size so the media reads the same across icon packs; :only-child
+     leaves a composed media (icon + badge) to size itself. */
+  .empty-state__media > :is(svg, i):only-child {
+    width: var(--empty-state-icon-size, --spacing(7));
+    height: var(--empty-state-icon-size, --spacing(7));
+    flex-shrink: 0;
+  }
+
+  /* Richer media brings its own shape, so the slot sheds the circle + tint and becomes a plain
+     centring box (illustration spot art, raw <img>, or the borrowed icon-box / avatar / spinner). */
+  .empty-state__media:is(
+    :has(> .illustration),
+    :has(> img),
+    :has(> .icon-box),
+    :has(> .avatar),
+    :has(> .spinner)
+  ) {
+    width: auto;
+    height: auto;
+    background: none;
+    border-radius: 0;
+  }
+
+  /* Spot art and bitmaps fill the slot up to a cap so a tall illustration never dominates. */
+  .empty-state__media > .illustration,
+  .empty-state__media > img {
+    width: 100%;
+    max-width: var(--empty-state-art-size, --spacing(40));
+    height: auto;
+  }
+
+  /* === Parts === */
+  .empty-state__title {
+    margin: 0;
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-snug);
+    color: var(--color-foreground);
+  }
+
+  /* Tight rhythm under the title; the larger gaps are the media's bottom margin and the action's top
+     margin, so title and text always sit together. */
+  .empty-state__text {
+    margin-block: var(--empty-state-gap, --spacing(1.5)) 0;
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+    color: var(--color-muted-foreground);
+  }
+
+  /* Trailing controls — centred and wrapping so a primary + secondary pair stacks on a narrow region. */
+  .empty-state__action {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: --spacing(2);
+    margin-block-start: var(--empty-state-action-gap, --spacing(5));
+  }
+
+  /* === Tone modifiers === set --empty-state-tone; the media fill, tint, and glyph colour re-resolve.
+     Title and text stay foreground / muted so the message reads as text, not colour. */
+  .empty-state--primary {
+    --empty-state-tone: var(--color-primary);
+  }
+  .empty-state--success {
+    --empty-state-tone: var(--color-success);
+  }
+  .empty-state--warning {
+    --empty-state-tone: var(--color-warning);
+  }
+  .empty-state--danger {
+    --empty-state-tone: var(--color-danger);
+  }
+  .empty-state--info {
+    --empty-state-tone: var(--color-info);
+  }
+
+  /* === Small === for an empty region inside a card, a panel, or an empty table body: smaller media
+     and tighter padding so it doesn't dominate a confined space. */
+  .empty-state--sm {
+    --empty-state-media-size: --spacing(11);
+    --empty-state-icon-size: --spacing(5);
+    --empty-state-media-gap: --spacing(3);
+    --empty-state-action-gap: --spacing(3);
+    --empty-state-padding-block: --spacing(6);
+  }
+
+  /* === Bordered === a dashed region box (a droppable / fillable empty area); the border colour rides
+     the tone so an error region can read red. */
+  .empty-state--bordered {
+    border: var(--st-border-width) dashed
+      var(--empty-state-border-color, color-mix(in oklch, var(--empty-state-tone, var(--color-border)) 60%, var(--color-border)));
+    border-radius: var(--empty-state-radius, var(--radius-lg));
+    background: var(--empty-state-bg, transparent);
+  }
+}

package/dist/field/field.css

@@ -0,0 +1,70 @@
+/* @stisla/style — Field. Ported from src/scss/components/_field.scss. Wrapper that groups a label +
+ * control + helper text, plus an item element for inline input + label rows. Pairs with any form
+ * control (.input, .select, .textarea, .checkbox, .radio, .switch, .slider) and owns the layout
+ * contract. References the @theme tokens: colors var(--color-*), spacing --spacing(n), type
+ * var(--text-*) / var(--font-weight-*). Knobs are --field-* (fallback-default). @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* Root — vertical stack (label / control / helper). Fills its column by default: the controls
+     inside carry width: 100%, so without a width a shrink-to-fit parent would collapse them. */
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, --spacing(1.5));
+    width: 100%;
+  }
+
+  /* Wrapping flex row — for groups of .field__item on one line (radio sets, inline checkbox lists). */
+  .field--inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    --field-gap: --spacing(4);
+  }
+
+  .field__label {
+    font-size: var(--field-label-font-size, var(--text-sm));
+    font-weight: var(--field-label-font-weight, var(--font-weight-medium));
+    color: var(--field-label-color, var(--color-foreground));
+  }
+
+  .field__description {
+    font-size: var(--field-helper-font-size, var(--text-sm));
+    color: var(--field-helper-color, var(--color-muted-foreground));
+  }
+
+  /* Error-tone helper; pair with [aria-invalid="true"] on the control via aria-describedby. */
+  .field__error {
+    font-size: var(--field-helper-font-size, var(--text-sm));
+    color: var(--field-error-color, var(--color-danger));
+  }
+
+  /* Inline input + label row (checkbox, radio, settings row). Lives inside .field. */
+  .field__item {
+    display: flex;
+    align-items: center;
+    gap: var(--field-item-gap, --spacing(2));
+    padding-block: var(--field-item-padding-block, --spacing(0.5));
+  }
+
+  /* Label-first, input-last — justify-content pins the input to the row end (settings rows). */
+  .field__item--reverse {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+
+  /* Inside an item, the label flips to the row-typography contract: regular weight, clickable. */
+  .field__item > .field__label {
+    font-weight: var(--field-item-label-font-weight, var(--font-weight-normal));
+    cursor: pointer;
+    line-height: var(--leading-snug);
+    user-select: none;
+  }
+
+  /* A disabled control inside an item dims its label. Covers checkbox / radio / switch. */
+  .field__item:has(> :is(.checkbox, .radio, .switch):disabled) > .field__label {
+    cursor: not-allowed;
+    opacity: var(--field-item-disabled-opacity, 0.55);
+  }
+}

package/dist/icon-box/icon-box.css

@@ -0,0 +1,64 @@
+/* @stisla/style — Icon box. Ported from src/scss/components/_icon-box.scss. A square tinted container
+ * for a single icon (Stisla original). Intent modifiers set --icon-box-tone; the bg (a 15% tint, same
+ * as .badge--soft) and color re-resolve from it. References the @theme tokens (colors var(--color-*),
+ * spacing/sizes --spacing(n), radius var(--radius-*)). Knobs are --icon-box-*. Sizes compact/roomy →
+ * sm/lg; pill radius literal 9999px. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .icon-box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--icon-box-size, --spacing(9));
+    height: var(--icon-box-size, --spacing(9));
+    color: var(--icon-box-color, var(--icon-box-tone, var(--color-muted-foreground)));
+    background: var(
+      --icon-box-bg,
+      color-mix(in oklch, var(--icon-box-tone, var(--color-muted-foreground)) 15%, transparent)
+    );
+    border-radius: var(--icon-box-radius, var(--radius-sm));
+  }
+
+  /* Icon stays a fixed size regardless of surrounding font-size (so not em). */
+  .icon-box :is(svg, i) {
+    width: var(--icon-box-icon-size, --spacing(4.5));
+    height: var(--icon-box-icon-size, --spacing(4.5));
+    flex-shrink: 0;
+  }
+
+  /* === Intent modifiers === override --icon-box-tone; bg + color both re-resolve from the new tone. */
+  .icon-box--primary {
+    --icon-box-tone: var(--color-primary);
+  }
+  .icon-box--success {
+    --icon-box-tone: var(--color-success);
+  }
+  .icon-box--warning {
+    --icon-box-tone: var(--color-warning);
+  }
+  .icon-box--danger {
+    --icon-box-tone: var(--color-danger);
+  }
+  .icon-box--info {
+    --icon-box-tone: var(--color-info);
+  }
+
+  /* === Shape === */
+  .icon-box--round {
+    border-radius: 9999px;
+  }
+  .icon-box--square {
+    border-radius: 0;
+  }
+
+  /* === Sizes (base = md) === */
+  .icon-box--sm {
+    --icon-box-size: --spacing(7);
+    --icon-box-icon-size: --spacing(3.5);
+  }
+  .icon-box--lg {
+    --icon-box-size: --spacing(12);
+    --icon-box-icon-size: --spacing(6);
+  }
+}

package/dist/illustration/illustration.css

@@ -0,0 +1,103 @@
+/* @stisla/style — Illustration. Ported from src/scss/components/_illustration.scss. Soft volumetric
+ * spot art (empty states, dialogs, onboarding, success/error screens). Every object is shaded from ONE
+ * hue: the gradient stops, the backing disc, and the long shadow all derive from --illus-accent via
+ * color-mix, so recolouring never touches the SVG markup — set --illus-accent (and --illus-badge for
+ * the corner pip) and the whole piece follows. Default is neutral; intent modifiers recolour; an
+ * ancestor or inline --illus-accent overrides everything. Motion is opt-in via --animate.
+ *
+ * NOTE: the short --illus-* knobs, the .il-* SVG paint hooks, and the il-* keyframes are kept as the
+ * illustration's deliberate, cohesive vocabulary — they're referenced inside the SVG art assets, so
+ * renaming them to --illustration-* / .illustration__* would ripple through every illustration file.
+ * Only the token refs are converted: --st-* colours → var(--color-*). The white mix targets, the
+ * drop-shadow geometry, and the ambient loop durations have no token and stay literal.
+ * @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .illustration {
+    /* Resolve a PRIVATE accent from the public knob with a fallback. The public --illus-accent is
+       never set on the element itself, so an ancestor (a gallery, an .empty-state) or a modifier can
+       override it — a custom property set on the element would shadow inheritance and freeze it. */
+    --_a: var(--illus-accent, var(--color-muted-foreground));
+    /* Badge follows the accent by default (monochrome); override --illus-badge for a pop colour. */
+    --_b: var(--illus-badge, var(--_a));
+
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  /* Gradient stops: light → mid → deep, all from the one accent. The light stops sit well above the
+     disc tint so faces never melt into the glow. */
+  .illustration .il-g0 {
+    stop-color: color-mix(in oklch, var(--_a) 34%, white);
+  }
+  .illustration .il-g1 {
+    stop-color: color-mix(in oklch, var(--_a) 58%, white);
+  }
+  .illustration .il-g2 {
+    stop-color: color-mix(in oklch, var(--_a) 82%, white);
+  }
+  .illustration .il-g3 {
+    stop-color: var(--_a);
+  }
+
+  /* Soft circular badge behind the object, two layers for depth. */
+  .illustration .il-disc-o {
+    fill: color-mix(in oklch, var(--_a) 6%, transparent);
+  }
+  .illustration .il-disc-i {
+    fill: color-mix(in oklch, var(--_a) 10%, transparent);
+  }
+
+  /* The object lifts off the disc; shadow falls down-right from the locked top-left light. */
+  .illustration .il-obj {
+    filter: drop-shadow(5px 9px 11px color-mix(in oklch, var(--_a) 26%, transparent));
+  }
+
+  .illustration--primary {
+    --illus-accent: var(--color-primary);
+  }
+  .illustration--success {
+    --illus-accent: var(--color-success);
+    --illus-badge: var(--color-success);
+  }
+  .illustration--danger {
+    --illus-accent: var(--color-danger);
+    --illus-badge: var(--color-danger);
+  }
+  .illustration--warning {
+    --illus-accent: var(--color-warning);
+    --illus-badge: var(--color-warning);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .illustration--animate .il-obj {
+      animation: il-float 5.5s ease-in-out infinite;
+    }
+    .illustration--animate .il-badge {
+      animation: il-pop 3.4s ease-in-out infinite;
+      transform-box: fill-box;
+      transform-origin: center;
+    }
+  }
+}
+
+@keyframes il-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes il-pop {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.12);
+  }
+}