@stisla/style 3.0.0-beta.8

package/dist/card/card.css

@@ -0,0 +1,219 @@
+/* @stisla/style — Card. Ported from src/scss/components/_card.scss. References the @theme
+ * tokens: colors var(--color-*), 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). Knobs are --card-* (fallback-default). @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* Fallback-default knobs: nothing set on the base, so a scope / inline retunes any of them.
+     --card-radius + --card-padding-inline are read by the parts (header / body / footer /
+     image / overlay), so their defaults repeat at those read sites. */
+  .card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    color: var(--card-color, var(--color-foreground));
+    background: var(--card-bg, var(--color-surface));
+    border: var(--card-border-width, var(--st-border-width)) solid
+      var(--card-border-color, var(--color-border));
+    border-radius: var(--card-radius, var(--radius-lg));
+    box-shadow: var(--card-shadow, var(--shadow-md));
+  }
+
+  /* Drop the shadow so the card reads as a frame rather than a raised surface. The border
+     stays on by default. */
+  .card--flat {
+    --card-shadow: none;
+  }
+
+  /* === Parts ============================================================
+   * Body is flex column + gap so .card__title / __subtitle / __text don't need
+   * component-level margins. Parent owns the rhythm; children stay margin-zero (same model
+   * as .alert). */
+  .card__body {
+    display: flex;
+    flex-direction: column;
+    gap: --spacing(2);
+    padding: var(--card-padding-block, --spacing(5))
+      var(--card-padding-inline, --spacing(5));
+  }
+
+  .card__header {
+    min-height: var(--card-header-height, --spacing(15));
+    padding: 0 var(--card-padding-inline, --spacing(5));
+    border-bottom: var(--st-border-width) solid var(--color-border);
+  }
+
+  .card__header,
+  .card__heading {
+    display: flex;
+    align-items: center;
+    gap: --spacing(2);
+  }
+
+  /* Trailing action slot in the header (holds a link, a button, a menu trigger). The auto
+     margin is on the slot itself, so leading content packs to the start and only the action
+     moves to the end. Matches .alert__action / .page__action. */
+  .card__action {
+    display: inline-flex;
+    align-items: center;
+    gap: --spacing(2);
+    margin-inline-start: auto;
+  }
+
+  /* Round the top corners when the header is the card's first child, so a filled (--alt)
+     header fills the card's rounded top instead of showing square corners (the card carries
+     no overflow: hidden). Inner radius (outer − border) keeps it concentric with the border,
+     matching the image + footer. */
+  .card__header:first-child {
+    border-start-start-radius: calc(
+      var(--card-radius, var(--radius-lg)) -
+        var(--card-border-width, var(--st-border-width))
+    );
+    border-start-end-radius: calc(
+      var(--card-radius, var(--radius-lg)) -
+        var(--card-border-width, var(--st-border-width))
+    );
+  }
+
+  /* Opt the header onto the alt surface to mirror the footer's contrast. Composes with
+     .card__header: <div class="card__header card__header--alt">. */
+  .card__header--alt {
+    background: var(--color-surface-2);
+  }
+
+  .card__header--compact {
+    --card-header-height: --spacing(11.5);
+  }
+
+  /* Flex breaks the inline strut leak: inline children get a fresh formatting context as flex
+     items, so their own line-height takes effect instead of the body's dictating the line-box.
+     Aligns gap behavior with .card__header too. */
+  .card__footer {
+    display: flex;
+    align-items: center;
+    gap: --spacing(2);
+    padding: --spacing(3) var(--card-padding-inline, --spacing(5));
+    background: var(--color-surface-2);
+    border-top: var(--st-border-width) solid var(--color-border);
+    border-radius: 0 0
+      calc(
+        var(--card-radius, var(--radius-lg)) -
+          var(--card-border-width, var(--st-border-width))
+      )
+      calc(
+        var(--card-radius, var(--radius-lg)) -
+          var(--card-border-width, var(--st-border-width))
+      );
+  }
+
+  .card__title {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-tight);
+  }
+
+  .card__subtitle {
+    font-size: var(--text-sm);
+    color: var(--color-muted-foreground);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* .card__text — no per-element rules. Sibling rhythm comes from .card__body's gap;
+     .card__overlay's color: inherit (below) still applies. */
+
+  .card__link {
+    color: var(--color-primary);
+    text-decoration: none;
+
+    & + .card__link {
+      margin-inline-start: --spacing(4);
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* Image position-aware. .card carries no overflow: hidden (focus rings, sticky headers, and
+     overflowing menus must escape), so the image rounds its own corners at whichever edge it
+     meets the card. It rounds to the card's INNER radius (outer − border width) so the curve
+     sits concentric with the border, matching table-in-card / toggle-group / tabs. */
+  .card__image {
+    display: block;
+    width: 100%;
+    height: auto;
+
+    &:first-child {
+      border-radius: calc(
+          var(--card-radius, var(--radius-lg)) -
+            var(--card-border-width, var(--st-border-width))
+        )
+        calc(
+          var(--card-radius, var(--radius-lg)) -
+            var(--card-border-width, var(--st-border-width))
+        )
+        0 0;
+    }
+    &:last-child {
+      border-radius: 0 0
+        calc(
+          var(--card-radius, var(--radius-lg)) -
+            var(--card-border-width, var(--st-border-width))
+        )
+        calc(
+          var(--card-radius, var(--radius-lg)) -
+            var(--card-border-width, var(--st-border-width))
+        );
+    }
+    &:only-child {
+      border-radius: calc(
+        var(--card-radius, var(--radius-lg)) -
+          var(--card-border-width, var(--st-border-width))
+      );
+    }
+  }
+
+  /* Overlay card: the image is the full-bleed background under .card__overlay, not an
+     image-above-body, so it rounds ALL four corners (overriding the top-only :first-child rule
+     above) to fill the card's whole rounded frame. */
+  .card:has(> .card__overlay) > .card__image {
+    border-radius: calc(
+      var(--card-radius, var(--radius-lg)) -
+        var(--card-border-width, var(--st-border-width))
+    );
+  }
+
+  /* Overlay sits over a .card__image (or any background sibling). Positions absolute over the
+     image; default text color is the theme-independent overlay foreground because overlays
+     land on photos. */
+  .card__overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    padding: var(--card-padding-block, --spacing(5))
+      var(--card-padding-inline, --spacing(5));
+    color: var(--color-overlay-foreground);
+
+    .card__title,
+    .card__subtitle,
+    .card__text {
+      color: inherit;
+    }
+  }
+
+  /* Block — fills its container width per SPEC §9 escape ramp. */
+  .card--block {
+    width: 100%;
+  }
+
+  /* A flushed .media row inside a card reads as a continuous row of the card's surface: pick up the
+     card gutter so the row's inline edges align with the header/footer, and drop the radius (the card
+     already owns rounded corners). */
+  .card > .media--flush {
+    --media-padding-inline: var(--card-padding-inline, --spacing(5));
+    --media-padding-block: var(--card-padding-block, --spacing(5));
+    border-radius: 0;
+  }
+}

package/dist/carousel/carousel.css

@@ -0,0 +1,170 @@
+/* @stisla/style — Carousel. Ported from src/scss/components/_carousel.scss. A slide region whose
+ * motion is driven by Embla (the JS layer writes transform on .carousel__track); this CSS owns the
+ * chrome only — rounded viewport, control chips, indicator dots, caption gradient. Embla reads our
+ * own .carousel__* elements (it imposes no class vocabulary), so this is NOT lib-coupled — one file.
+ * Overlay chrome reads the theme-independent --color-overlay / --color-overlay-foreground pair so it
+ * stays consistent over arbitrary slide imagery in light + dark. References the @theme tokens: colors
+ * var(--color-*), sizes/spacing --spacing(n), radius var(--radius-*); only no-namespace customs use
+ * --st-* (duration). Knobs are --carousel-*. State via [data-state] / [aria-disabled], never is-*.
+ * Slide motion ships with the JS layer. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .carousel {
+    position: relative;
+    width: 100%;
+  }
+
+  .carousel:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 4px;
+  }
+
+  /* === Viewport + track + slide === */
+  .carousel__viewport {
+    overflow: hidden;
+    border-radius: var(--carousel-radius, var(--radius-lg));
+    aspect-ratio: var(--carousel-aspect-ratio, 16 / 9);
+  }
+
+  /* Embla writes the translate transform; this just hosts the slides. */
+  .carousel__track {
+    display: flex;
+    height: 100%;
+  }
+
+  .carousel__slide {
+    flex: 0 0 100%;
+    min-width: 0;
+    position: relative;
+    padding-inline-start: var(--carousel-slide-gap, 0);
+  }
+
+  .carousel__slide > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* .carousel--no-aspect lets the viewport size to slide content (e.g. text cards) instead of locking
+     to 16:9; the slide itself sets the height. */
+  .carousel--no-aspect .carousel__viewport {
+    aspect-ratio: auto;
+  }
+
+  /* === Controls (prev/next) === */
+  .carousel__control {
+    position: absolute;
+    inset-block-start: 50%;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--carousel-control-size, --spacing(9));
+    height: var(--carousel-control-size, --spacing(9));
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: var(--carousel-control-bg, color-mix(in oklch, var(--color-overlay) 70%, transparent));
+    color: var(--carousel-control-color, var(--color-overlay-foreground));
+    box-shadow: var(--carousel-control-shadow, 0 1px 2px color-mix(in oklch, var(--color-overlay) 30%, transparent));
+    cursor: pointer;
+    transform: translateY(-50%);
+    transition: background-color var(--carousel-transition-duration, var(--transition-duration-normal)) ease;
+  }
+
+  .carousel__control:hover {
+    background: var(--carousel-control-bg-hover, var(--color-overlay));
+  }
+
+  .carousel__control:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  .carousel__control[aria-disabled="true"],
+  .carousel__control:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .carousel__control > svg,
+  .carousel__control > i,
+  .carousel__control > [data-lucide] {
+    width: --spacing(4.5);
+    height: --spacing(4.5);
+  }
+
+  .carousel__control--prev {
+    inset-inline-start: var(--carousel-control-inset, --spacing(3));
+  }
+
+  .carousel__control--next {
+    inset-inline-end: var(--carousel-control-inset, --spacing(3));
+  }
+
+  /* === Indicators === */
+  .carousel__indicators {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: var(--carousel-indicators-inset, --spacing(3.5));
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    gap: var(--carousel-indicator-gap, --spacing(1.5));
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    pointer-events: none;
+  }
+
+  .carousel__indicator {
+    width: var(--carousel-indicator-size, --spacing(1.5));
+    height: var(--carousel-indicator-size, --spacing(1.5));
+    padding: 0;
+    border: 0;
+    border-radius: 9999px;
+    background: var(--carousel-indicator-bg, color-mix(in oklch, var(--color-overlay-foreground) 50%, transparent));
+    cursor: pointer;
+    pointer-events: auto;
+    transition:
+      width var(--carousel-transition-duration, var(--transition-duration-normal)) ease,
+      background-color var(--carousel-transition-duration, var(--transition-duration-normal)) ease;
+  }
+
+  .carousel__indicator:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  .carousel__indicator[data-state="active"] {
+    width: var(--carousel-indicator-width-active, --spacing(5));
+    background: var(--carousel-indicator-bg-active, var(--color-overlay-foreground));
+  }
+
+  /* === Caption === the slide owns the rounded clip, so the caption can run edge-to-edge. */
+  .carousel__caption {
+    position: absolute;
+    inset-block: auto 0;
+    inset-inline: 0;
+    padding: var(--carousel-caption-padding-block, --spacing(5))
+      var(--carousel-caption-padding-inline, --spacing(5));
+    background: var(
+      --carousel-caption-bg,
+      linear-gradient(to bottom, transparent, color-mix(in oklch, var(--color-overlay) 70%, transparent))
+    );
+    color: var(--carousel-caption-color, var(--color-overlay-foreground));
+    pointer-events: none;
+  }
+
+  .carousel__caption > * {
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .carousel__control,
+    .carousel__indicator {
+      transition: none;
+    }
+  }
+}

package/dist/checkbox/checkbox.css

@@ -0,0 +1,98 @@
+/* @stisla/style — Checkbox. Ported from src/scss/components/_checkbox.scss + the form-check-base
+ * mixin. Native <input type="checkbox"> styled as a small square box. References the @theme tokens
+ * (colors var(--color-*), spacing --spacing(n)); only no-namespace customs use --st-* (border-width).
+ * Knobs are --checkbox-* (fallback-default). @layer components.
+ *
+ * The shared check base (size, border, focus halo, validation, disabled) is DUPLICATED here with the
+ * --checkbox-* namespace — plain CSS has no parameterized mixin. Keep in sync with radio.css.
+ * NOTE: the box radius default is --spacing(1) (4px) — the radius scale is sm/md/lg only (no xs tier),
+ * and the box is intentionally tighter than --radius-sm. Override via --checkbox-radius. State is native
+ * (:checked / :indeterminate / :disabled / :focus-visible / [aria-invalid] / :user-invalid), no is-*.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .checkbox {
+    flex-shrink: 0;
+    width: var(--checkbox-size, --spacing(4));
+    height: var(--checkbox-size, --spacing(4));
+    margin: 0;
+    vertical-align: middle;
+    background-color: var(--checkbox-bg, var(--color-surface));
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    border: var(--checkbox-border-width, var(--st-border-width)) solid
+      var(--checkbox-border-color, var(--color-border-strong));
+    border-radius: var(--checkbox-radius, --spacing(1));
+    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 / indeterminate / disabled (each owns
+       its own border color, and hovering a checked box shouldn't dim its primary border to gray). */
+    &:hover:not(
+        :disabled,
+        :focus-visible,
+        :checked,
+        :indeterminate,
+        [aria-invalid="true"],
+        :user-invalid
+      ) {
+      border-color: color-mix(
+        in oklch,
+        var(--color-border-strong) 80%,
+        var(--color-foreground)
+      );
+    }
+
+    /* Validation — touches the border only; the fill (transparent unchecked, primary checked) stays
+       independent so the "selected" signal stays readable. */
+    &[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 / indeterminate — solid primary fill, indicator painted via background-image. The SVG
+       glyph is literal white because data: URLs can't read CSS vars; white = --color-primary-foreground
+       in both default themes. Override --checkbox-indicator with a custom SVG to recolor. */
+    &:checked,
+    &:indeterminate {
+      background-color: var(--checkbox-bg-checked, var(--color-primary));
+      border-color: var(--checkbox-bg-checked, var(--color-primary));
+      background-image: var(--checkbox-indicator);
+    }
+    &:checked {
+      --checkbox-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3 8.5 6.5 12 13 5' stroke='white' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    }
+    &:indeterminate {
+      --checkbox-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='3' y1='8' x2='13' y2='8' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+}

package/dist/chunk-K45KLI3Y.js

@@ -0,0 +1,74 @@
+// src/composer.ts
+var camelToKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+var resolveTuneValue = (v) => v.startsWith("--") ? `var(${v})` : v;
+function composer(config) {
+  const { base, variants = {}, defaultVariants = {}, knobPrefix } = config;
+  return function compose(props = {}) {
+    const classes = [base];
+    for (const name in variants) {
+      const raw = props[name] ?? defaultVariants[name];
+      if (raw == null || raw === false) continue;
+      const key = raw === true ? "true" : String(raw);
+      const cls = variants[name]?.[key];
+      if (cls) classes.push(cls);
+    }
+    const style = {};
+    if (props.tune && knobPrefix) {
+      for (const k in props.tune) {
+        const val = props.tune[k];
+        if (val == null) continue;
+        style[`--${knobPrefix}-${camelToKebab(k)}`] = resolveTuneValue(val);
+      }
+    }
+    if (props.className) classes.push(props.className);
+    return { className: classes.join(" "), style };
+  };
+}
+
+// src/button/config.ts
+var button = composer({
+  base: "button",
+  variants: {
+    tone: {
+      primary: "button--primary",
+      danger: "button--danger",
+      neutral: "button--neutral",
+      tertiary: "button--tertiary"
+    },
+    shape: {
+      outline: "button--outline",
+      ghost: "button--ghost",
+      soft: "button--soft"
+    },
+    size: { sm: "button--sm", md: "", lg: "button--lg", xl: "button--xl" },
+    iconOnly: { true: "button--icon-only" },
+    iconRound: { true: "button--icon-round" },
+    block: { true: "button--block" },
+    wrap: { true: "button--wrap" }
+  },
+  defaultVariants: { size: "md" },
+  knobPrefix: "button",
+  knobs: [
+    "gap",
+    "height",
+    "paddingInline",
+    "fontSize",
+    "fontWeight",
+    "color",
+    "bg",
+    "tone",
+    "bgHover",
+    "bgActive",
+    "borderWidth",
+    "borderColor",
+    "rimMix",
+    "radius",
+    "bevel",
+    "iconSize"
+  ]
+});
+
+export {
+  composer,
+  button
+};

package/dist/collapsible/collapsible.css

@@ -0,0 +1,36 @@
+/* @stisla/style — Collapsible. Ported from src/scss/components/_collapsible.scss. The CSS half of the
+ * height-animation primitive: a closed region drops out of flow, and while the JS behavior layer is
+ * mid-transition it keeps the region displayed so the height tween is visible. State lives in
+ * [data-state="open|closed"]; the transient mid-animation flag is [data-collapsing] (recast from
+ * the legacy transient class to an attribute per the no-is-* convention). The [data-collapsing]
+ * transition rule is GLOBAL (not scoped to .collapsible) so the JS layer can set it on ANY animated
+ * region — a standalone .collapsible, but also a borrowed body like .accordion__body / a sidebar
+ * submenu. Composers own their own closed-hide rule; the .collapsible closed rule below is for
+ * standalone use. Only no-namespace customs use --st-* (duration). Knob: --collapsible-transition-duration.
+ * @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* Closed and not mid-animation → fully removed from flow. The :not([data-collapsing]) guard keeps
+     the region visible while the behavior layer runs the close transition; display:none only takes
+     over once the flag clears. */
+  .collapsible[data-state="closed"]:not([data-collapsing]) {
+    display: none;
+  }
+
+  /* The behavior layer adds [data-collapsing] for the duration of an open/close, sets an explicit
+     height before and after a reflow, and the transition spec lives here (not inline) so a same-task
+     property + transition change can't fall through to the previous (none) computation. GLOBAL on
+     purpose — applies to whatever element the JS animates (composers borrow it for their own body). */
+  [data-collapsing] {
+    transition-property: height;
+    transition-duration: var(--collapsible-transition-duration, var(--transition-duration-normal));
+    transition-timing-function: ease;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-collapsing] {
+      transition-duration: 0s;
+    }
+  }
+}