@stisla/style 3.0.0-beta.8

package/dist/spinner/spinner.css

@@ -0,0 +1,65 @@
+/* @stisla/style — Spinner. Ported from src/scss/components/_spinner.scss. Default is a border ring;
+ * .spinner--grow is a pulsing dot. Color inherits via currentColor (any parent .text-* recolors it).
+ * References the @theme tokens (spacing/sizes --spacing(n)). Knobs are --spinner-*; sizes compact/roomy
+ * → sm/lg. Stays round. Under prefers-reduced-motion the loop SLOWS rather than stops (a static
+ * spinner reads as "frozen", not "loading"). @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .spinner {
+    display: inline-block;
+    width: var(--spinner-size, --spacing(5));
+    height: var(--spinner-size, --spacing(5));
+    vertical-align: -0.125em;
+    color: inherit;
+    border: var(--spinner-width, 2px) solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: st-spinner-border var(--spinner-duration, 0.75s) linear infinite;
+  }
+
+  /* Grow — a pulsing solid disc: replace the ring with a filled circle and swap the animation. */
+  .spinner--grow {
+    --spinner-duration: 0.75s;
+    border: 0;
+    background: currentColor;
+    opacity: 0;
+    animation-name: st-spinner-grow;
+  }
+
+  /* === Sizes (base = md) === */
+  .spinner--sm {
+    --spinner-size: --spacing(3.5);
+    --spinner-width: 1.5px;
+  }
+  .spinner--lg {
+    --spinner-size: --spacing(8);
+    --spinner-width: 3px;
+  }
+
+  /* Slow the loop instead of stopping it — a static spinner reads as "stuck", not "loading". */
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      --spinner-duration: 1.5s;
+    }
+  }
+}
+
+@keyframes st-spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes st-spinner-grow {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/dist/switch/switch.css

@@ -0,0 +1,91 @@
+/* @stisla/style — Switch. Ported from src/scss/components/_switch.scss. Track + thumb toggle: the
+ * track is the <input> itself (rounded rect); the thumb is a radial-gradient circle that slides via
+ * background-position on :checked. References the @theme tokens (colors var(--color-*), spacing
+ * --spacing(n)); only no-namespace customs use --st-* (border-width). Knobs are --switch-*.
+ *
+ * Authoring (matches .checkbox / .radio — primitive input + separate <label>, composed via .field__item):
+ *   <div class="field__item">
+ *     <input class="switch" type="checkbox" role="switch" id="x">
+ *     <label class="field__label" for="x">Notifications</label>
+ *   </div>
+ * Pair role="switch" so assistive tech announces "switch". State is native (:checked / :disabled /
+ * :focus-visible / [aria-invalid] / :user-invalid), no is-*. NOTE: the pill radius default is a
+ * literal 9999px — the radius scale is sm/md/lg only (no full); same precedent as .button--icon-round.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .switch {
+    flex-shrink: 0;
+    width: var(--switch-track-width, --spacing(7));
+    height: var(--switch-track-height, --spacing(4));
+    margin: 0;
+    vertical-align: middle;
+    border: var(--st-border-width) solid transparent;
+    /* Pill by default; a preset squares the track by setting --switch-radius. */
+    border-radius: var(--switch-radius, 9999px);
+    /* Off-state track: a semi-transparent foreground tone (not --color-neutral, which sits too light
+       in light mode to contrast a white thumb). Resolves to a mid-gray that adapts per theme. */
+    background-color: var(--switch-off-bg, color-mix(in oklch, var(--color-foreground) 25%, transparent));
+    /* Thumb lives in the paint (<input> is void, no pseudo). Default is a hard-edged radial circle;
+       a preset swaps --switch-thumb-paint to a linear-gradient for a solid square thumb. */
+    background-image: var(
+      --switch-thumb-paint,
+      radial-gradient(circle at center, var(--switch-thumb-color, white) 49%, transparent 51%)
+    );
+    background-size: var(--switch-thumb-size, --spacing(3)) var(--switch-thumb-size, --spacing(3));
+    background-position: var(--switch-inset, --spacing(0.5)) center;
+    background-repeat: no-repeat;
+    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;
+
+    /* Hover (idle only). Skip focus / invalid / checked / disabled. */
+    &:hover:not(:disabled, :focus-visible, :checked, [aria-invalid="true"], :user-invalid) {
+      background-color: color-mix(in oklch, var(--color-foreground) 35%, transparent);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring) 25%, transparent);
+    }
+
+    &:checked {
+      background-color: var(--switch-on-bg, var(--color-primary));
+      background-position: calc(100% - var(--switch-inset, --spacing(0.5))) center;
+    }
+
+    /* Validation — touches the border only; the fill follows on/off so both signals compose. */
+    &[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;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  /* === Large (base = md) === a bigger variant for standalone settings rows where the switch is the
+   * row's primary affordance and reads small at the default. */
+  .switch--lg {
+    --switch-track-width: --spacing(11);
+    --switch-track-height: --spacing(6);
+    --switch-thumb-size: --spacing(5);
+    --switch-inset: --spacing(0.5);
+  }
+}

package/dist/table/table.css

@@ -0,0 +1,284 @@
+/* @stisla/style — Table. Ported from src/scss/components/_table.scss. Dashboard data grid: dense cells,
+ * first/last column bump so it sits flush in a .card. References the @theme tokens (colors var(--color-*),
+ * spacing/sizes --spacing(n), type var(--text-*) / var(--font-weight-*), radius var(--radius-*)); only
+ * no-namespace customs use --st-* (border-width). Knobs are --table-*. State via <tr data-state="active">
+ * / .table__sort[data-state], no is-*. `.table--compact` → `.table--sm`; responsive wrappers `xxl` → `2xl`.
+ *
+ * Layered-bg mechanic: a per-cell inset box-shadow chain. Three layers — rest (--table-bg), variant
+ * (--table-bg-type), runtime state (--table-bg-state) — so hover can light a striped+variant row without
+ * erasing the layers underneath. The huge inset shadow paints the cell box without touching
+ * background-color, so layers stack. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .table {
+    /* Layered paint slots: initial here, set by variant/state rules, consumed via the var() chain. */
+    --table-bg-type: initial;
+    --table-color-type: initial;
+    --table-bg-state: initial;
+    --table-color-state: initial;
+
+    width: 100%;
+    color: var(--table-color, var(--color-foreground));
+    vertical-align: top;
+    border-color: var(--table-border-color, var(--color-border));
+  }
+
+  /* Per-cell layered chain. Variants repaint via --table-bg-type; hover/active stomp via --table-bg-state.
+     The inset shadow fills the cell box without touching background-color, so layers stack. */
+  .table > :not(caption) > * > * {
+    padding: var(--table-cell-padding-block, --spacing(3)) var(--table-cell-padding-inline, --spacing(3));
+    /* <th> defaults to center in the UA stylesheet; inherit so headers align with text direction. */
+    text-align: inherit;
+    color: var(--table-color-state, var(--table-color-type, var(--table-color, var(--color-foreground))));
+    background-color: var(--table-bg, transparent);
+    /* Preflight sets border to currentColor; pin all sides to the table palette so a modifier that
+       turns a side on reads the right color. */
+    border-color: var(--table-border-color, var(--color-border));
+    border-bottom-width: var(--st-border-width);
+    box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, transparent));
+  }
+
+  /* Rows pick up the table border color too (.table--bordered turns on row borders). */
+  .table > :not(caption) > * {
+    border-color: var(--table-border-color, var(--color-border));
+  }
+
+  /* Edge-cell bump — lines the first/last column up with the card gutter so a table drops in flush. */
+  .table > :not(caption) > * > :first-child {
+    padding-inline-start: var(--table-edge-padding, --spacing(5));
+  }
+  .table > :not(caption) > * > :last-child {
+    padding-inline-end: var(--table-edge-padding, --spacing(5));
+  }
+
+  .table > thead {
+    vertical-align: bottom;
+  }
+  .table > tbody {
+    vertical-align: inherit;
+  }
+
+  /* === Head === smaller, muted, semi-bold so thead reads as a label row. */
+  .table > thead > tr > * {
+    font-size: var(--table-head-font-size, var(--text-xs));
+    font-weight: var(--table-head-font-weight, var(--font-weight-medium));
+    /* Tight label line-height (no exact token; 1.2 sits between leading-none and leading-tight). */
+    line-height: var(--table-head-line-height, 1.2);
+    --table-color: var(--table-head-color, var(--color-muted-foreground));
+  }
+
+  /* Header alt — opts the head onto surface-2 (same two-tone language as .card__header--alt). */
+  .table__head--alt {
+    --table-bg: var(--table-head-bg-alt, var(--color-surface-2));
+  }
+
+  /* === Sortable header === a full-label button/<a> + a CSS-drawn direction caret (no icon dep). The
+     caret is dim while sortable, solid once active; direction flips with data-state. */
+  .table__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--table-sort-gap, --spacing(1.5));
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-decoration: none;
+    cursor: pointer;
+
+    &::after {
+      content: "";
+      inline-size: var(--table-sort-caret-size, 1em);
+      block-size: var(--table-sort-caret-size, 1em);
+      flex-shrink: 0;
+      background-color: currentColor;
+      opacity: var(--table-sort-caret-opacity, 0.4);
+      -webkit-mask: center / contain no-repeat var(--table-sort-caret);
+      mask: center / contain no-repeat var(--table-sort-caret);
+      --table-sort-caret: var(--table-sort-caret-none);
+      --table-sort-caret-none: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
+      --table-sort-caret-asc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
+      --table-sort-caret-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+      transition: opacity var(--transition-duration-fast) ease;
+    }
+
+    &:hover {
+      color: var(--table-sort-color-hover, var(--color-foreground));
+      --table-sort-caret-opacity: 0.7;
+    }
+
+    &[data-state="asc"],
+    &[data-state="desc"] {
+      color: var(--table-sort-color-active, var(--color-foreground));
+      --table-sort-caret-opacity: 1;
+    }
+    &[data-state="asc"]::after {
+      --table-sort-caret: var(--table-sort-caret-asc);
+    }
+    &[data-state="desc"]::after {
+      --table-sort-caret: var(--table-sort-caret-desc);
+    }
+  }
+
+  /* === Body divider === heavier rule above the tbody. */
+  .table__body--divider {
+    border-top: var(--table-group-divider-width, 2px) solid currentColor;
+  }
+
+  /* === Row variants === 10% bg tint / 25% border mix. Border mix uses `in oklab` (not oklch): the
+     neutral border has chroma 0, and oklch would pull every intent toward red; oklab preserves hue. */
+  .table__row--primary {
+    --table-bg-type: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    --table-color-type: var(--color-foreground);
+    --table-border-color: color-mix(in oklab, var(--color-primary) 25%, var(--color-border));
+  }
+  .table__row--success {
+    --table-bg-type: color-mix(in oklab, var(--color-success) 10%, transparent);
+    --table-color-type: var(--color-foreground);
+    --table-border-color: color-mix(in oklab, var(--color-success) 25%, var(--color-border));
+  }
+  .table__row--info {
+    --table-bg-type: color-mix(in oklab, var(--color-info) 10%, transparent);
+    --table-color-type: var(--color-foreground);
+    --table-border-color: color-mix(in oklab, var(--color-info) 25%, var(--color-border));
+  }
+  .table__row--warning {
+    --table-bg-type: color-mix(in oklab, var(--color-warning) 10%, transparent);
+    --table-color-type: var(--color-foreground);
+    --table-border-color: color-mix(in oklab, var(--color-warning) 25%, var(--color-border));
+  }
+  .table__row--danger {
+    --table-bg-type: color-mix(in oklab, var(--color-danger) 10%, transparent);
+    --table-color-type: var(--color-foreground);
+    --table-border-color: color-mix(in oklab, var(--color-danger) 25%, var(--color-border));
+  }
+  .table__row--neutral {
+    --table-bg-type: var(--color-neutral);
+    --table-color-type: var(--color-neutral-foreground);
+  }
+
+  /* === Runtime states === */
+  .table--striped > tbody > tr:nth-of-type(odd) > * {
+    --table-bg-type: var(--table-striped-bg, color-mix(in oklch, var(--color-foreground) 4%, transparent));
+    --table-color-type: var(--table-striped-color, var(--color-foreground));
+  }
+
+  .table--striped-cols > :not(caption) > tr > :nth-child(2n) {
+    --table-bg-type: var(--table-striped-bg, color-mix(in oklch, var(--color-foreground) 4%, transparent));
+    --table-color-type: var(--table-striped-color, var(--color-foreground));
+  }
+
+  .table--hover > tbody > tr:hover > * {
+    --table-bg-state: var(--table-bg-hover, var(--color-accent));
+    --table-color-state: var(--table-color-hover, var(--color-accent-foreground));
+  }
+
+  /* Active row — persistent selection, highlight tier (matches sidebar / list-group). */
+  .table > tbody > tr[data-state="active"] > * {
+    --table-bg-state: var(--table-bg-active, var(--color-highlight));
+    --table-color-state: var(--table-color-active, var(--color-highlight-foreground));
+  }
+
+  /* === Borders === */
+  .table--bordered > :not(caption) > * {
+    border-width: var(--st-border-width) 0;
+  }
+  .table--bordered > :not(caption) > * > * {
+    border-width: 0 var(--st-border-width);
+  }
+
+  .table--borderless > :not(caption) > * > * {
+    border-bottom-width: 0;
+  }
+  .table--borderless > :not(:first-child) {
+    border-top-width: 0;
+  }
+
+  /* === Small — denser padding === inner cells shrink; edge cells keep the flush-in-card gutter. */
+  .table--sm > :not(caption) > * > * {
+    padding: var(--table-cell-padding-sm, --spacing(1));
+  }
+  .table--sm > :not(caption) > * > :first-child {
+    padding-inline-start: var(--table-edge-padding, --spacing(5));
+  }
+  .table--sm > :not(caption) > * > :last-child {
+    padding-inline-end: var(--table-edge-padding, --spacing(5));
+  }
+
+  /* === Align middle === */
+  .table--align-middle > :not(caption) > * > * {
+    vertical-align: middle;
+  }
+
+  /* === Responsive wrappers === (not .table parts) — wrap the table so it can scroll unchanged. */
+  .table-responsive {
+    overflow-x: auto;
+  }
+  @variant max-sm {
+    .table-responsive-sm {
+      overflow-x: auto;
+    }
+  }
+  @variant max-md {
+    .table-responsive-md {
+      overflow-x: auto;
+    }
+  }
+  @variant max-lg {
+    .table-responsive-lg {
+      overflow-x: auto;
+    }
+  }
+  @variant max-xl {
+    .table-responsive-xl {
+      overflow-x: auto;
+    }
+  }
+  @variant max-2xl {
+    .table-responsive-2xl {
+      overflow-x: auto;
+    }
+  }
+
+  /* === Card integration === a flush table composes with the card frame via its own CSS (no overflow
+     on the card). Corner cells round to the card's inner radius at the edges that meet the card; the
+     last row's bottom border and a bordered table's outer perimeter drop so they don't double the card. */
+  .card > .table:last-child > :last-child > tr:last-child > *,
+  .card > .table-responsive:last-child > .table > :last-child > tr:last-child > * {
+    border-bottom-width: 0;
+  }
+
+  .card > .table:last-child > :last-child > tr:last-child > :first-child,
+  .card > .table-responsive:last-child > .table > :last-child > tr:last-child > :first-child {
+    border-end-start-radius: calc(var(--card-radius, var(--radius-lg)) - var(--st-border-width));
+  }
+  .card > .table:last-child > :last-child > tr:last-child > :last-child,
+  .card > .table-responsive:last-child > .table > :last-child > tr:last-child > :last-child {
+    border-end-end-radius: calc(var(--card-radius, var(--radius-lg)) - var(--st-border-width));
+  }
+
+  .card > .table:first-child > :first-child > tr:first-child > :first-child,
+  .card > .table-responsive:first-child > .table > :first-child > tr:first-child > :first-child {
+    border-start-start-radius: calc(var(--card-radius, var(--radius-lg)) - var(--st-border-width));
+  }
+  .card > .table:first-child > :first-child > tr:first-child > :last-child,
+  .card > .table-responsive:first-child > .table > :first-child > tr:first-child > :last-child {
+    border-start-end-radius: calc(var(--card-radius, var(--radius-lg)) - var(--st-border-width));
+  }
+
+  /* Bordered table: drop the outer perimeter so it doesn't double the card border. */
+  .card > .table--bordered:first-child > :first-child > tr:first-child {
+    border-top-width: 0;
+  }
+  .card > .table--bordered:last-child > :last-child > tr:last-child {
+    border-bottom-width: 0;
+  }
+  .card > .table--bordered > :not(caption) > tr > :first-child {
+    border-inline-start-width: 0;
+  }
+  .card > .table--bordered > :not(caption) > tr > :last-child {
+    border-inline-end-width: 0;
+  }
+}

package/dist/tabs/tabs.css

@@ -0,0 +1,137 @@
+/* @stisla/style — Tabs. Ported from src/scss/components/_tabs.scss. A content-panel switcher: a muted
+ * rail hosts triggers, the active one rises out as a paper pill (Radix-aligned). References the @theme
+ * tokens (colors var(--color-*), spacing/sizes --spacing(n), type var(--text-*) / var(--font-weight-*)
+ * / var(--leading-*), radius var(--radius-*)); only no-namespace customs use --st-* (border-width).
+ * Knobs are --tabs-*. State via data-state="active|inactive" / data-disabled / data-orientation, no
+ * is-*. Switching behavior (data-stisla-tabs) ships with the JS layer. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tabs-gap, --spacing(3));
+  }
+
+  /* === List (the muted rail) === */
+  .tabs__list {
+    display: inline-flex;
+    align-items: stretch;
+    align-self: flex-start; /* pill hugs content, doesn't stretch */
+    flex-direction: var(--tabs-orientation, row);
+    height: var(--tabs-list-height, --spacing(9));
+    padding: var(--tabs-list-padding-block, --spacing(0.5))
+      var(--tabs-list-padding-inline, --spacing(0.5));
+    gap: var(--tabs-list-gap, --spacing(0.5));
+    background: var(--tabs-list-bg, var(--color-surface-2));
+    border-radius: var(--tabs-list-radius, var(--radius-md));
+    color: var(--tabs-list-color, var(--color-muted-foreground));
+  }
+
+  /* === Trigger === border at 1px transparent at rest so the active painted border doesn't shift it. */
+  .tabs__trigger {
+    appearance: none;
+    background: transparent;
+    border: var(--st-border-width) solid transparent;
+    font: inherit;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--tabs-trigger-gap, --spacing(2));
+    height: 100%; /* fills the rail's inner area via box model */
+    padding-block: 0;
+    padding-inline: var(--tabs-trigger-padding-inline, --spacing(3));
+    color: inherit; /* inherits the rail's muted-foreground */
+    font-size: var(--tabs-trigger-font-size, var(--text-sm));
+    font-weight: var(--tabs-trigger-font-weight, var(--font-weight-medium));
+    line-height: var(--leading-none);
+    border-radius: var(
+      --tabs-trigger-radius,
+      calc(var(--tabs-list-radius, var(--radius-md)) - var(--tabs-list-padding-inline, --spacing(0.5)))
+    );
+    text-decoration: none;
+    transition:
+      background-color var(--tabs-transition-duration, var(--transition-duration-fast)) ease,
+      color var(--tabs-transition-duration, var(--transition-duration-fast)) ease,
+      border-color var(--tabs-transition-duration, var(--transition-duration-fast)) ease;
+
+    &:hover:not([data-state="active"]) {
+      color: var(--tabs-trigger-color-hover, var(--color-foreground));
+    }
+
+    &[data-state="active"] {
+      background: var(--tabs-trigger-bg-active, var(--color-highlight));
+      color: var(--tabs-trigger-color-active, var(--color-highlight-foreground));
+      border-color: var(--tabs-trigger-border-color-active, var(--tabs-trigger-bg-active, var(--color-highlight)));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--tabs-ring, var(--color-ring));
+      outline-offset: 2px;
+    }
+
+    &[data-disabled],
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+  }
+
+  /* Icons scale with the trigger font-size (1em) so a custom font-size retunes glyph + icon together. */
+  .tabs__trigger :is(svg, i) {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+
+  /* === Panel === */
+  .tabs__panel {
+    &[data-state="inactive"] {
+      display: none;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--tabs-ring, var(--color-ring));
+      outline-offset: 2px;
+      border-radius: var(--radius-sm);
+    }
+  }
+
+  /* === Vertical orientation === root flips to a row (rail inline-start, panels fill the rest); the
+     list becomes a column. */
+  .tabs--vertical {
+    --tabs-orientation: column;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .tabs--vertical .tabs__list {
+    height: auto;
+    flex-direction: column;
+    align-self: stretch;
+  }
+  /* Vertical triggers stretch + read left-aligned like a menu list; concrete row height (the list is
+     height: auto in vertical mode, so the base height: 100% would collapse). */
+  .tabs--vertical .tabs__trigger {
+    width: 100%;
+    height: --spacing(8);
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .tabs--vertical .tabs__panel {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tabs {
+      --tabs-transition-duration: 0s;
+    }
+  }
+
+  /* Block — fills its container width per SPEC §9 escape ramp. */
+  .tabs--block {
+    width: 100%;
+  }
+}

package/dist/textarea/textarea.css

@@ -0,0 +1,99 @@
+/* @stisla/style — Textarea. Ported from src/scss/components/_textarea.scss + the form-field-base
+ * mixin. Multi-line opt-out from the input's hard-height contract: restores padding-block, lets rows
+ * drive height, and turns --textarea-height into a min-height floor. References the @theme tokens
+ * (colors var(--color-*), spacing --spacing(n), type var(--text-*) / var(--font-weight-*), radius
+ * var(--radius-*)); only no-namespace customs use --st-* (border-width, duration). Knobs --textarea-*.
+ *
+ * The shared field base is DUPLICATED here with the --textarea-* namespace (plain CSS has no
+ * parameterized mixin). Keep in sync with input.css + select.css. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* === Shared field base (= former form-field-base, --textarea-* namespace) === */
+  .textarea {
+    display: block;
+    width: 100%;
+    font-family: inherit;
+    font-size: var(--textarea-font-size, var(--text-sm));
+    font-weight: var(--font-weight-normal);
+    color: var(--textarea-color, var(--color-foreground));
+    background: var(--textarea-bg, var(--color-surface));
+    border: var(--textarea-border-width, var(--st-border-width)) solid
+      var(--textarea-border-color, var(--color-border-strong));
+    border-radius: var(--textarea-radius, var(--radius-md));
+    appearance: none;
+    transition:
+      border-color var(--transition-duration-fast) ease,
+      box-shadow var(--transition-duration-fast) ease,
+      background-color var(--transition-duration-fast) ease;
+
+    /* === Multi-line overrides === */
+    height: auto;
+    min-height: var(--textarea-height, --spacing(9));
+    padding-block: var(--textarea-padding-block, --spacing(1.5)); /* restore vertical padding */
+    padding-inline: var(--textarea-padding-inline, --spacing(2.5));
+    line-height: var(--textarea-line-height, var(--leading-normal));
+    resize: vertical;
+
+    /* iOS Safari zooms when a focused field's font-size < 16px and never zooms back. */
+    @media (pointer: coarse) {
+      font-size: var(--textarea-font-size, var(--text-base));
+    }
+
+    &::placeholder {
+      color: var(--textarea-placeholder, var(--color-muted-foreground));
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled, :focus-visible, [aria-invalid="true"], :user-invalid) {
+      border-color: color-mix(in oklch, var(--color-border-strong) 80%, var(--color-foreground));
+    }
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring) 25%, transparent);
+    }
+
+    &[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;
+    }
+
+    &[readonly]:not(:disabled) {
+      background: var(--color-surface-2);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  /* === Sizes (base = md) — mirror .input so a textarea sits in a form row without breaking rhythm === */
+  .textarea--sm {
+    --textarea-radius: var(--radius-sm);
+    --textarea-height: --spacing(7);
+    --textarea-padding-inline: --spacing(2);
+    --textarea-font-size: var(--text-xs);
+    @media (pointer: coarse) {
+      --textarea-font-size: var(--text-base);
+    }
+  }
+
+  .textarea--lg {
+    --textarea-radius: var(--radius-lg);
+    --textarea-height: --spacing(11);
+    --textarea-padding-inline: --spacing(3.5);
+    --textarea-font-size: var(--text-base);
+  }
+}