npm - @stisla/style - Versions diffs - 3.0.0-beta.8 - Mend

@stisla/style 3.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/LICENSE +9 -0
package/README.md +16 -0
package/dist/accordion/accordion.css +194 -0
package/dist/alert/alert.css +138 -0
package/dist/autocomplete/autocomplete.css +193 -0
package/dist/avatar/avatar.css +142 -0
package/dist/avatar-group/avatar-group.css +42 -0
package/dist/badge/badge.css +74 -0
package/dist/breadcrumb/breadcrumb.css +71 -0
package/dist/button/button.css +318 -0
package/dist/button/index.d.ts +1 -0
package/dist/button/index.js +6 -0
package/dist/button-group/button-group.css +108 -0
package/dist/card/card.css +219 -0
package/dist/carousel/carousel.css +170 -0
package/dist/checkbox/checkbox.css +98 -0
package/dist/chunk-K45KLI3Y.js +74 -0
package/dist/collapsible/collapsible.css +36 -0
package/dist/combobox/combobox.css +106 -0
package/dist/combobox/combobox.tomselect.css +251 -0
package/dist/config-CARtrJ7I.d.ts +61 -0
package/dist/dialog/dialog.css +258 -0
package/dist/drawer/drawer.css +318 -0
package/dist/empty-state/empty-state.css +138 -0
package/dist/field/field.css +70 -0
package/dist/icon-box/icon-box.css +64 -0
package/dist/illustration/illustration.css +103 -0
package/dist/index.d.ts +14 -0
package/dist/index.js +60 -0
package/dist/indicator/indicator.css +84 -0
package/dist/input/input.css +220 -0
package/dist/input-group/input-group.css +141 -0
package/dist/kbd/kbd.css +55 -0
package/dist/link/link.css +28 -0
package/dist/list-group/list-group.css +261 -0
package/dist/media/media.css +115 -0
package/dist/menu/menu.css +237 -0
package/dist/meter/meter.css +124 -0
package/dist/navbar/navbar.css +170 -0
package/dist/page/page.css +95 -0
package/dist/pagination/pagination.css +125 -0
package/dist/placeholders/placeholders.css +58 -0
package/dist/popover/popover.css +251 -0
package/dist/progress/progress.css +139 -0
package/dist/radio/radio.css +81 -0
package/dist/scroll-area/scroll-area.css +25 -0
package/dist/scroll-area/scroll-area.overlayscrollbars.css +42 -0
package/dist/select/select.css +282 -0
package/dist/separator/separator.css +26 -0
package/dist/sidebar/sidebar.css +493 -0
package/dist/slider/slider.css +159 -0
package/dist/spinner/spinner.css +65 -0
package/dist/switch/switch.css +91 -0
package/dist/table/table.css +284 -0
package/dist/tabs/tabs.css +137 -0
package/dist/textarea/textarea.css +99 -0
package/dist/timeline/timeline.css +271 -0
package/dist/toast/toast.css +267 -0
package/dist/toggle/toggle.css +125 -0
package/dist/toggle-group/toggle-group.css +87 -0
package/dist/tooltip/tooltip.css +95 -0
package/package.json +46 -0
package/src/theme.css +151 -0

package/dist/popover/popover.css ADDED Viewed

@@ -0,0 +1,251 @@
+/* @stisla/style — Popover. Ported from src/scss/components/_popover.scss. A surface-tier overlay
+ * panel (bg = surface, solid border) positioned by the JS layer (Floating UI), shown via
+ * [data-state="open"] + [data-placement]. Two shapes share the block: a plain popover (title + body
+ * in the root's padding) and a panel popover (a __header drops the root padding so header/footer
+ * dividers span edge-to-edge, each part owning its padding). 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-popover). Knobs are
+ * --popover-*. Positioning + focus-trap + dismiss ship with the JS layer. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+@layer components {
+  /* position: absolute (not fixed) so the popover scrolls with the page alongside its trigger; the
+     JS layer portals it to <body> on open so ancestor overflow: hidden can't crop it. */
+  .popover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--popover-z-index, var(--z-index-popover));
+    display: none;
+    min-width: var(--popover-min-width, --spacing(52));
+    max-width: var(--popover-max-width, --spacing(69));
+    padding: var(--popover-padding-block, --spacing(4))
+      var(--popover-padding-inline, --spacing(4));
+    margin: 0;
+    color: var(--popover-color, var(--color-foreground));
+    background-color: var(--popover-bg, var(--color-surface));
+    border: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+    border-radius: var(--popover-radius, var(--radius-lg));
+    box-shadow: var(--popover-shadow, var(--shadow-md));
+    opacity: 0;
+    /* Resting transform = "above the trigger, easing up from below"; the per-placement overrides
+       below flip the direction so the entrance always reads as moving away from the anchored edge. */
+    transform: translateY(--spacing(1));
+    transition:
+      opacity var(--popover-transition-duration, var(--transition-duration-normal)) ease,
+      transform var(--popover-transition-duration, var(--transition-duration-normal)) ease;
+  }
+  .popover[data-state="open"] {
+    display: block;
+    opacity: 1;
+    transform: none;
+  }
+  /* Per-placement resting transform — Floating UI's resolved placement (which may differ from the
+     requested side after flip()) sets [data-placement], so the entrance tracks the anchored edge. */
+  .popover[data-placement^="bottom"] {
+    transform: translateY(calc(--spacing(1) * -1));
+  }
+  .popover[data-placement^="left"] {
+    transform: translateX(--spacing(1));
+  }
+  .popover[data-placement^="right"] {
+    transform: translateX(calc(--spacing(1) * -1));
+  }
+  .popover[data-placement^="bottom"][data-state="open"],
+  .popover[data-placement^="left"][data-state="open"],
+  .popover[data-placement^="right"][data-state="open"] {
+    transform: none;
+  }
+  /* === Title === */
+  .popover__title {
+    margin-block-end: var(--popover-title-margin-block-end, --spacing(2));
+    color: var(--popover-title-color, var(--color-foreground));
+    font-size: var(--popover-title-font-size, var(--text-base));
+    font-weight: var(--popover-title-font-weight, var(--font-weight-semibold));
+    line-height: var(--leading-tight);
+  }
+  /* Clear the close chip when both title and close are present. :has() is baseline (Safari 16.4+). */
+  .popover:has(.popover__close) .popover__title {
+    padding-inline-end: calc(var(--popover-close-size, --spacing(6)) + --spacing(2));
+  }
+  /* === Body === */
+  .popover__body {
+    margin: 0;
+    color: var(--popover-body-color, var(--color-muted-foreground));
+    font-size: var(--popover-body-font-size, var(--text-sm));
+    line-height: var(--popover-body-line-height, var(--leading-normal));
+    padding-block: var(--popover-body-padding-block, 0);
+    padding-inline: var(--popover-body-padding-inline, 0);
+  }
+  /* A body holding interactive children opts back into --color-foreground via a class or inline
+     override at the consumer; the default muted color keeps text-only popovers reading as context. */
+  /* === Panel parts (header / footer) === opt-in structure for panel-shaped popovers. A __header
+     present means "this is a panel": the root drops its padding so the dividers run edge-to-edge,
+     and header / body / footer each own their padding. :has() is baseline (Safari 16.4+). */
+  .popover:has(.popover__header) {
+    padding: 0;
+  }
+  .popover__header {
+    display: flex;
+    align-items: center;
+    gap: var(--popover-header-gap, --spacing(2));
+    padding: var(--popover-header-padding-block, --spacing(3))
+      var(--popover-header-padding-inline, --spacing(4));
+    border-block-end: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+  }
+  /* Title inside a header is the row's leading child — drop its standalone bottom margin; the header
+     padding owns the rhythm now. */
+  .popover__header .popover__title {
+    margin-block-end: 0;
+  }
+  /* Trailing action in the header (e.g. "mark all as read"). The auto margin is on the action, so
+     leading content packs to the start and only the action moves to the end. */
+  .popover__action {
+    display: inline-flex;
+    align-items: center;
+    gap: --spacing(2);
+    margin-inline-start: auto;
+  }
+  /* In a panel the body sits between the dividers and owns its padding, since the root no longer
+     supplies any. A list component dropped straight in brings its own padding instead of __body. */
+  .popover:not(.popover--menu):has(.popover__header),
+  .popover:not(.popover--menu):has(.popover__footer) {
+    --popover-body-padding-block: --spacing(2);
+    --popover-body-padding-inline: --spacing(4);
+  }
+  .popover__footer {
+    padding: var(--popover-footer-padding-block, --spacing(3))
+      var(--popover-footer-padding-inline, --spacing(4));
+    border-block-start: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+  }
+  /* === Close chip === optional dismiss; positioned absolutely so it doesn't disturb the title/body
+     flow. A 1.5rem ghost chip with --color-accent hover. The pill radius is a stand-alone corner
+     affordance, not concentric math against the frame. */
+  .popover__close {
+    position: absolute;
+    top: var(--popover-padding-block, --spacing(4));
+    inset-inline-end: var(--popover-padding-inline, --spacing(4));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--popover-close-size, --spacing(6));
+    height: var(--popover-close-size, --spacing(6));
+    padding: 0;
+    color: var(--popover-close-color, var(--color-muted-foreground));
+    background: transparent;
+    border: 0;
+    border-radius: 9999px;
+    cursor: pointer;
+    transition:
+      color var(--popover-transition-duration, var(--transition-duration-normal)) ease,
+      background-color var(--popover-transition-duration, var(--transition-duration-normal)) ease;
+  }
+  .popover__close:hover {
+    color: var(--popover-close-color-hover, var(--color-foreground));
+    background-color: var(--popover-close-bg-hover, var(--color-accent));
+  }
+  .popover__close:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+  .popover__close > svg,
+  .popover__close > i {
+    width: 1em;
+    height: 1em;
+    font-size: var(--text-base);
+  }
+  /* === Arrow === a square rotated 45°. The JS arrow() middleware sets the cross-axis offset; the
+     per-placement rules below pin the placement-axis offset so half the diamond sits inside the
+     surface (covered by --popover-bg) and the other half sticks out as the point. The two
+     outward-facing diagonals carry the border so the arrow continues the frame seamlessly. */
+  .popover__arrow {
+    position: absolute;
+    width: var(--popover-arrow-size, --spacing(3));
+    height: var(--popover-arrow-size, --spacing(3));
+    background-color: var(--popover-bg, var(--color-surface));
+    transform: rotate(45deg);
+  }
+  /* CSS rotates clockwise; after rotate(45deg) each original edge maps to a diamond diagonal. For
+     each placement the two outward-facing diagonals get border; the inner two stay borderless. */
+  /* Top placement → arrow at the popover's bottom, pointing down (original right + bottom edges). */
+  .popover[data-placement^="top"] .popover__arrow {
+    bottom: calc(var(--popover-arrow-size, --spacing(3)) * -0.5);
+    border-right: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+    border-bottom: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+  }
+  /* Bottom placement → arrow at the popover's top, pointing up (original left + top edges). */
+  .popover[data-placement^="bottom"] .popover__arrow {
+    top: calc(var(--popover-arrow-size, --spacing(3)) * -0.5);
+    border-top: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+    border-left: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+  }
+  /* Left placement → arrow at the popover's right, pointing right (original top + right edges). */
+  .popover[data-placement^="left"] .popover__arrow {
+    right: calc(var(--popover-arrow-size, --spacing(3)) * -0.5);
+    border-top: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+    border-right: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+  }
+  /* Right placement → arrow at the popover's left, pointing left (original left + bottom edges). */
+  .popover[data-placement^="right"] .popover__arrow {
+    left: calc(var(--popover-arrow-size, --spacing(3)) * -0.5);
+    border-bottom: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+    border-left: var(--popover-border-width, var(--st-border-width)) solid
+      var(--popover-border-color, var(--color-border));
+  }
+  /* === Menu-style popover === a popover hosting a .menu/.media list; tightens the body padding and
+     hands the borrowed row primitive its surface vars (read by .media). */
+  .popover--menu {
+    --popover-body-padding-block: --spacing(1);
+    --popover-body-padding-inline: --spacing(1);
+    --media-padding-inline: --spacing(3);
+    --media-padding-block: --spacing(2);
+    --media-border-color: transparent;
+  }
+  .popover--menu .popover__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--popover-body-gap, --spacing(1));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .popover,
+    .popover__close {
+      transition: none;
+    }
+  }
+}

package/dist/progress/progress.css ADDED Viewed

@@ -0,0 +1,139 @@
+/* @stisla/style — Progress. Ported from src/scss/components/_progress.scss. A thin bar that fills as
+ * work completes, with optional label + value caption. The wrapper is a 2-col grid (label | value)
+ * with the track spanning both. References the @theme tokens (colors var(--color-*), spacing/sizes
+ * --spacing(n), type var(--text-*) / var(--font-weight-*) / var(--leading-*)). Knobs are --progress-*.
+ * Sizes compact/roomy → sm/lg; pill radius literal 9999px. Indeterminate state via the
+ * [data-indeterminate] attribute (the legacy used a state class; dropped per §11). @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+@layer components {
+  .progress {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    column-gap: --spacing(4);
+    row-gap: var(--progress-header-gap, --spacing(1));
+  }
+  /* === Caption === label left, value right; either may be omitted (track spans both columns). */
+  .progress__label {
+    grid-column: 1;
+    font-size: var(--progress-label-font-size, var(--text-sm));
+    font-weight: var(--progress-label-font-weight, var(--font-weight-medium));
+    color: var(--progress-label-color, var(--color-foreground));
+    line-height: var(--leading-snug);
+  }
+  .progress__value {
+    grid-column: 2;
+    font-size: var(--progress-label-font-size, var(--text-sm));
+    color: var(--progress-value-color, var(--color-muted-foreground));
+    line-height: var(--leading-snug);
+  }
+  /* === Track === the recessed pill; owns height, neutral bg, and the overflow clip. */
+  .progress__track {
+    grid-column: 1 / -1;
+    display: block;
+    height: var(--progress-height, --spacing(2));
+    background-color: var(--progress-bg, var(--color-neutral));
+    border-radius: var(--progress-radius, 9999px);
+    overflow: hidden;
+  }
+  /* === Bar === sized by inline width %; default 0 so an unsized bar sits invisible. */
+  .progress__bar {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 100%;
+    background-color: var(--progress-bar-bg, var(--color-primary));
+    overflow: hidden;
+    transition: width var(--progress-bar-transition-duration, 0.6s) ease;
+  }
+  /* === Intent modifiers === the bar carries the color, not the track. */
+  .progress__bar--primary {
+    --progress-bar-bg: var(--color-primary);
+  }
+  .progress__bar--success {
+    --progress-bar-bg: var(--color-success);
+  }
+  .progress__bar--warning {
+    --progress-bar-bg: var(--color-warning);
+  }
+  .progress__bar--danger {
+    --progress-bar-bg: var(--color-danger);
+  }
+  .progress__bar--info {
+    --progress-bar-bg: var(--color-info);
+  }
+  /* === Animated shimmer === a narrow gradient band sweeps across in the first ~third of the cycle,
+     then sits off-screen the rest (so the loop reads as an occasional sheen, not a treadmill). */
+  .progress__bar--animated::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--progress-shimmer-color, color-mix(in oklch, white 30%, transparent)) 50%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: st-progress-shimmer var(--progress-shimmer-duration, 3s) linear infinite;
+  }
+  /* === Indeterminate === fixed-width bar sweeps across; the shimmer is suppressed (the moving bar is
+     the indicator). */
+  .progress[data-indeterminate] .progress__bar {
+    width: 50%;
+    animation: st-progress-indeterminate var(--progress-indeterminate-duration, 1.5s) ease-in-out infinite;
+  }
+  .progress[data-indeterminate] .progress__bar::after {
+    display: none;
+  }
+  /* === Size modifiers (base = md) === */
+  .progress--sm {
+    --progress-height: --spacing(1);
+  }
+  .progress--lg {
+    --progress-height: --spacing(4);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .progress__bar {
+      transition: none;
+    }
+    .progress__bar--animated::after,
+    .progress[data-indeterminate] .progress__bar {
+      animation: none;
+    }
+  }
+  /* Block — fills its container width per SPEC §9 escape ramp. */
+  .progress--block {
+    width: 100%;
+  }
+}
+@keyframes st-progress-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  33% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes st-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}

package/dist/radio/radio.css ADDED Viewed

@@ -0,0 +1,81 @@
+/* @stisla/style — Radio. Ported from src/scss/components/_radio.scss + the form-check-base mixin.
+ * Native <input type="radio"> styled as a small round dot. References the @theme tokens (colors
+ * var(--color-*), spacing --spacing(n)); only no-namespace customs use --st-* (border-width). Knobs
+ * are --radio-* (fallback-default). @layer components.
+ *
+ * The shared check base is DUPLICATED here with the --radio-* namespace (keep in sync with
+ * checkbox.css). Radius is 50% (circle). :indeterminate is intentionally NOT styled — a radio matches
+ * it when no radio in the group is checked, and that "no selection" state keeps the unchecked
+ * affordance (and accepts hover). State is native, no is-*.
+ * Authoring rules: ../../../../PORTING.md */
+@layer components {
+  .radio {
+    flex-shrink: 0;
+    width: var(--radio-size, --spacing(4));
+    height: var(--radio-size, --spacing(4));
+    margin: 0;
+    vertical-align: middle;
+    background-color: var(--radio-bg, var(--color-surface));
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    border: var(--radio-border-width, var(--st-border-width)) solid
+      var(--radio-border-color, var(--color-border-strong));
+    border-radius: var(--radio-radius, 50%);
+    appearance: none;
+    cursor: pointer;
+    transition:
+      background-color var(--transition-duration-fast) ease,
+      background-position 0.15s ease,
+      border-color var(--transition-duration-fast) ease,
+      box-shadow var(--transition-duration-fast) ease;
+    print-color-adjust: exact;
+    &:focus-visible {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring) 25%, transparent);
+    }
+    /* Hover — only when idle. Skip focus / invalid / checked / disabled (:indeterminate absent by
+       design — it's the "no selection yet" state and keeps the unchecked affordance). */
+    &:hover:not(
+        :disabled,
+        :focus-visible,
+        :checked,
+        [aria-invalid="true"],
+        :user-invalid
+      ) {
+      border-color: color-mix(in oklch, var(--color-border-strong) 80%, var(--color-foreground));
+    }
+    &[aria-invalid="true"],
+    &:user-invalid {
+      border-color: var(--color-danger);
+    }
+    &[aria-invalid="true"]:focus-visible,
+    &:user-invalid:focus-visible {
+      border-color: var(--color-danger);
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 25%, transparent);
+    }
+    &:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+    /* Checked — solid primary fill, dot painted via background-image (literal white, same reason as
+       .checkbox: data: URLs can't read CSS vars). */
+    &:checked {
+      --radio-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");
+      background-color: var(--radio-bg-checked, var(--color-primary));
+      border-color: var(--radio-bg-checked, var(--color-primary));
+      background-image: var(--radio-indicator);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+}

package/dist/scroll-area/scroll-area.css ADDED Viewed

@@ -0,0 +1,25 @@
+/* @stisla/style — Scroll area (portable contract). Ported from src/scss/components/_scroll-area.scss.
+ * This file is the design contract any implementation shares: the .scroll-area root (a clipped scroll
+ * container that works with native scrollbars and no JS), the --scroll-area-* token knobs, and the
+ * --bordered modifier.
+ *
+ * The vanilla JS binding (OverlayScrollbars' .os-scrollbar / .os-viewport DOM, with our knobs
+ * forwarded to its --os-* var surface) lives in the sibling scroll-area.overlayscrollbars.css — load
+ * it alongside this file only when you use the OverlayScrollbars-backed scroll area.
+ *
+ * References the @theme tokens: colors var(--color-*), radius var(--radius-*); only no-namespace
+ * customs use --st-* (border-width). Knobs are --scroll-area-*. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+@layer components {
+  .scroll-area {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--scroll-area-radius, var(--radius-md));
+  }
+  .scroll-area--bordered {
+    border: var(--scroll-area-border-width, var(--st-border-width)) solid
+      var(--scroll-area-border-color, var(--color-border));
+  }
+}

package/dist/scroll-area/scroll-area.overlayscrollbars.css ADDED Viewed

@@ -0,0 +1,42 @@
+/* @stisla/style — Scroll area / OverlayScrollbars adapter (vanilla-JS binding). The scroll-area's
+ * vanilla implementation is backed by OverlayScrollbars; this file forwards the --scroll-area-* knobs
+ * (defined by scroll-area.css) onto the plugin's --os-* var surface on its .os-scrollbar DOM. It is a
+ * lib-coupled stylesheet; a different scrollbar lib (or a React/Vue impl) would provide its own
+ * adapter and reuse the same --scroll-area-* tokens.
+ *
+ * Load AFTER scroll-area.css. The plugin's bundled CSS resets every --os-* var to 0 / `none` on
+ * .os-scrollbar (blocking inheritance from the host), and the JS injects that stylesheet inside
+ * `@layer foundation`, so this rule in @layer components outranks the reset and specificity resolves
+ * cleanly. The fallback-defaults live here (not on the .scroll-area root) so a consumer override of
+ * --scroll-area-* on the root inherits down to this descendant and wins. These .os-* selectors are a
+ * third-party lib's vocabulary, not Stisla state.
+ *
+ * References the @theme tokens (colors var(--color-*), sizes/spacing --spacing(n), radius
+ * var(--radius-*)). Knobs are --scroll-area-*. @layer components. Authoring rules: ../../../../PORTING.md */
+@layer components {
+  .scroll-area .os-scrollbar {
+    --os-size: var(--scroll-area-bar-size, --spacing(2.5));
+    /* Two padding axes (OverlayScrollbars' own vocabulary): `perpendicular` is the gap across the
+       bar's short side, `axis` the gap along its length. They aren't fixed inline/block — which
+       physical axis each maps to flips with the bar's orientation — so they keep the lib's names.
+       Each per-axis knob falls back to the --scroll-area-bar-padding shorthand for uniform tuning. */
+    --os-padding-perpendicular: var(--scroll-area-bar-padding-perpendicular, var(--scroll-area-bar-padding, --spacing(0.5)));
+    --os-padding-axis: var(--scroll-area-bar-padding-axis, var(--scroll-area-bar-padding, --spacing(0.5)));
+    --os-track-bg: var(--scroll-area-track-bg, transparent);
+    --os-handle-bg: var(--scroll-area-handle-bg, color-mix(in oklch, var(--color-foreground) 25%, transparent));
+    --os-handle-bg-hover: var(--scroll-area-handle-bg-hover, color-mix(in oklch, var(--color-foreground) 45%, transparent));
+    --os-handle-bg-active: var(--scroll-area-handle-bg-active, color-mix(in oklch, var(--color-foreground) 65%, transparent));
+    --os-handle-border-radius: var(--scroll-area-bar-radius, 9999px);
+    --os-handle-min-size: var(--scroll-area-handle-min-size, --spacing(6));
+  }
+  /* The plugin transitions the handle itself but doesn't gate it behind prefers-reduced-motion; zero
+     it so the cross-system reduced-motion commitment holds. */
+  @media (prefers-reduced-motion: reduce) {
+    .scroll-area .os-scrollbar-handle,
+    .scroll-area .os-scrollbar {
+      transition: none;
+    }
+  }
+}