@stisla/style 3.0.0-beta.8

package/dist/avatar-group/avatar-group.css

@@ -0,0 +1,42 @@
+/* @stisla/style — Avatar group. Ported from src/scss/components/_avatar-group.scss. A row of
+ * overlapping .avatar children that reads as a cluster (team row, attendee list). Members keep their
+ * own paint; the group owns the overlap (negative inline margin) and turns the per-avatar ring on so
+ * adjacent shapes read as separate objects. The hovered/focused member lifts so its ring paints over
+ * its neighbor — same z-index ladder as .button-group. References the @theme tokens (colors
+ * var(--color-*), spacing --spacing(n)). Knobs are --avatar-group-*. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .avatar-group {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  /* Turn the ring on for every member (members declare the --avatar-ring-* slots; the group publishes
+     values into them). */
+  .avatar-group > .avatar {
+    --avatar-ring-width: var(--avatar-group-ring-width, 2px);
+    --avatar-ring-color: var(--avatar-group-ring-color, var(--color-background));
+    position: relative;
+  }
+
+  /* Negative inline margin collapses each member onto its left neighbor. */
+  .avatar-group > .avatar + .avatar {
+    margin-inline-start: calc(-1 * var(--avatar-group-overlap, --spacing(2.5)));
+  }
+
+  /* Stacking order — hovered / focused member rises so its ring paints over the following neighbor. */
+  .avatar-group > .avatar:hover {
+    z-index: 1;
+  }
+  .avatar-group > .avatar:focus-visible {
+    z-index: 2;
+  }
+
+  /* === Overflow tail === a plain .avatar member; this modifier just retunes its paint to read as
+   * "more" rather than a missing portrait. */
+  .avatar-group__more {
+    --avatar-bg: var(--color-surface-3);
+    --avatar-color: var(--color-muted-foreground);
+  }
+}

package/dist/badge/badge.css

@@ -0,0 +1,74 @@
+/* @stisla/style — Badge. Ported from src/scss/components/_badge.scss. References the Tailwind
+ * @theme tokens: colors var(--color-*), spacing --spacing(n), type var(--text-*) /
+ * var(--font-weight-*), radius literal pill. Knobs are --badge-* (fallback-default). Intent
+ * modifiers publish --badge-tone + set the filled --badge-bg / --badge-color; .badge--soft reads
+ * --badge-tone for a tinted variant. Pill by default; set --badge-radius to flatten. @layer components. */
+
+@layer components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: --spacing(1);
+    min-height: var(--badge-min-height, --spacing(5.5));
+    padding-block: var(--badge-padding-block, --spacing(0.5));
+    padding-inline: var(--badge-padding-inline, --spacing(2));
+    font-family: inherit;
+    font-size: var(--badge-font-size, var(--text-xs));
+    font-weight: var(--badge-font-weight, var(--font-weight-medium));
+    line-height: var(--leading-none);
+    color: var(--badge-color, var(--color-neutral-foreground));
+    background: var(--badge-bg, var(--color-neutral));
+    border-radius: var(--badge-radius, 9999px);
+    white-space: nowrap;
+  }
+
+  /* Inline icons scale to the badge's font size (same convention as .button). */
+  .badge :is(svg, i, .badge__icon) {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+
+  /* === Intent modifiers — filled defaults ===
+   * Each intent publishes --badge-tone (consumed by .badge--soft below) and sets the filled
+   * --badge-bg / --badge-color. */
+  .badge--primary {
+    --badge-tone: var(--color-primary);
+    --badge-bg: var(--color-primary);
+    --badge-color: var(--color-primary-foreground);
+  }
+  .badge--success {
+    --badge-tone: var(--color-success);
+    --badge-bg: var(--color-success);
+    --badge-color: var(--color-success-foreground);
+  }
+  .badge--warning {
+    --badge-tone: var(--color-warning);
+    --badge-bg: var(--color-warning);
+    --badge-color: var(--color-warning-foreground);
+  }
+  .badge--danger {
+    --badge-tone: var(--color-danger);
+    --badge-bg: var(--color-danger);
+    --badge-color: var(--color-danger-foreground);
+  }
+  .badge--info {
+    --badge-tone: var(--color-info);
+    --badge-bg: var(--color-info);
+    --badge-color: var(--color-info-foreground);
+  }
+
+  /* === Soft modifier ===
+   * Tinted bg (15%) + solid tone text. Reads --badge-tone (set by an intent modifier, or the
+   * muted-foreground default for a bare .badge--soft). Does NOT redefine --badge-tone — that
+   * would clobber the intent and break .badge--soft.badge--primary. The tone is a runtime var,
+   * so tint with color-mix (same precedent as .button--soft), not the compile-time --alpha(). */
+  .badge--soft {
+    --badge-bg: color-mix(
+      in oklch,
+      var(--badge-tone, var(--color-muted-foreground)) 15%,
+      transparent
+    );
+    --badge-color: var(--badge-tone, var(--color-muted-foreground));
+  }
+}

package/dist/breadcrumb/breadcrumb.css

@@ -0,0 +1,71 @@
+/* @stisla/style — Breadcrumb. Ported from src/scss/components/_breadcrumb.scss. A trail of links
+ * showing where the user is in the hierarchy. The trail stays muted and lifts toward body color on
+ * hover; the last crumb (aria-current="page") gets full emphasis. Divider is a Unicode chevron via
+ * ::before (inherits the crumb color, so it themes/retints for free). References the @theme tokens
+ * (colors var(--color-*), spacing/sizes --spacing(n), radius var(--radius-*)); only no-namespace
+ * customs use --st-* (border-width). Knobs are --breadcrumb-*. State via aria-current, no is-*.
+ * @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--breadcrumb-gap, --spacing(2));
+    padding: var(--breadcrumb-padding-block, 0) var(--breadcrumb-padding-inline, 0);
+    font-size: var(--breadcrumb-font-size, inherit);
+    background: var(--breadcrumb-bg, transparent);
+    border-radius: var(--breadcrumb-radius, 0);
+    color: var(--breadcrumb-color, var(--color-muted-foreground));
+  }
+
+  .breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--breadcrumb-gap, --spacing(2));
+
+    > a {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--breadcrumb-gap, --spacing(2));
+      color: inherit;
+      text-decoration: none;
+      transition: color var(--transition-duration-fast) ease;
+
+      &:hover {
+        color: var(--breadcrumb-color-hover, var(--color-foreground));
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--color-ring);
+        outline-offset: 2px;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    /* Leading/trailing icon — fixed size, tracks currentColor through every state. */
+    > :is(svg, i),
+    > a > :is(svg, i) {
+      width: var(--breadcrumb-icon-size, --spacing(4));
+      height: var(--breadcrumb-icon-size, --spacing(4));
+      flex-shrink: 0;
+    }
+
+    &[aria-current="page"] {
+      color: var(--breadcrumb-color-active, var(--color-foreground));
+    }
+
+    /* Divider — chevron on every crumb past the first. Default "›" lives as the var() fallback (NOT a
+       declaration on .breadcrumb) so a per-instance override on the wrapper wins. */
+    + .breadcrumb__item::before {
+      content: var(--breadcrumb-divider, "›");
+      color: var(--breadcrumb-color, var(--color-muted-foreground));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .breadcrumb__item > a {
+      transition: none;
+    }
+  }
+}

package/dist/button/button.css

@@ -0,0 +1,318 @@
+/* @stisla/style — Button. Ported from src/scss/components/_btn.scss. References the Tailwind
+ * @theme tokens: colors var(--color-*), spacing --spacing(n), type var(--text-*) /
+ * var(--font-weight-*) / var(--leading-*), radius var(--radius-*). Only no-namespace customs
+ * use --st-* (border-width, duration). Knobs are --button-* (fallback-default). @layer components. */
+
+@layer components {
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--button-gap, --spacing(2));
+    height: var(--button-height, --spacing(9)); /* md */
+    padding-block: var(--button-padding-block, 0);
+    padding-inline: var(--button-padding-inline, --spacing(3));
+    font-family: inherit;
+    font-size: var(--button-font-size, var(--text-sm));
+    font-weight: var(--button-font-weight, var(--font-weight-medium));
+    line-height: var(--leading-none);
+    color: var(--button-color);
+    background: var(--button-bg, var(--button-tone));
+    border: var(--button-border-width, var(--st-border-width)) solid
+      var(
+        --button-border-color,
+        color-mix(
+          in oklch,
+          var(--button-tone) var(--button-rim-mix, 85%),
+          black
+        )
+      );
+    border-radius: var(--button-radius, var(--radius-md));
+    box-shadow: var(--button-bevel, inset 0 1px 0 rgba(255, 255, 255, 0.15));
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition:
+      background-color var(--transition-duration-fast) ease,
+      border-color var(--transition-duration-fast) ease,
+      color var(--transition-duration-fast) ease,
+      box-shadow var(--transition-duration-fast) ease;
+
+    &:hover {
+      background: var(
+        --button-bg-hover,
+        color-mix(in oklch, var(--button-tone) 88%, black)
+      );
+    }
+    &:active,
+    &[aria-pressed="true"],
+    &[data-state="active"] {
+      background: var(
+        --button-bg-active,
+        color-mix(in oklch, var(--button-tone) 78%, black)
+      );
+    }
+    &:focus-visible {
+      outline: 2px solid var(--color-ring);
+      outline-offset: 2px;
+    }
+    &:disabled,
+    &[aria-disabled="true"] {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.55;
+    }
+  }
+
+  .button :is(svg, i, .button__icon) {
+    width: var(--button-icon-size, --spacing(4));
+    height: var(--button-icon-size, --spacing(4));
+    flex-shrink: 0;
+  }
+
+  /* === Sizes (base = md) === */
+  .button--sm {
+    --button-height: --spacing(7);
+    --button-padding-inline: --spacing(2.5);
+    --button-font-size: var(--text-sm);
+    --button-radius: var(--radius-sm);
+  }
+  .button--lg {
+    --button-height: --spacing(11);
+    --button-padding-inline: --spacing(4);
+    --button-radius: var(--radius-lg);
+  }
+  .button--xl {
+    --button-height: --spacing(13);
+    --button-padding-inline: --spacing(5);
+    --button-font-size: var(--text-base);
+    --button-radius: var(--radius-lg);
+  }
+
+  /* === Icon shapes === */
+  .button--icon-only {
+    --button-padding-inline: 0;
+    width: var(--button-height, --spacing(9));
+  }
+  .button--icon-round {
+    border-radius: 9999px;
+  }
+
+  /* === Wrap / block === */
+  .button--wrap {
+    height: auto;
+    min-height: var(--button-height, --spacing(9));
+    --button-padding-block: --spacing(1.5);
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    line-height: var(--leading-tight);
+  }
+  .button--block {
+    display: flex;
+    width: 100%;
+  }
+
+  /* === Tones — filled === */
+  .button--primary {
+    --button-tone: var(--color-primary);
+    --button-color: var(--color-primary-foreground);
+  }
+  .button--danger {
+    --button-tone: var(--color-danger);
+    --button-color: var(--color-danger-foreground);
+  }
+  .button--neutral {
+    --button-tone: var(--color-foreground);
+    --button-bg: var(--color-neutral);
+    --button-color: var(--color-neutral-foreground);
+    --button-border-color: color-mix(
+      in oklch,
+      var(--color-neutral) var(--button-rim-mix, 85%),
+      var(--color-muted-foreground)
+    );
+
+    &:hover {
+      background: var(
+        --button-bg-hover,
+        color-mix(in oklch, var(--color-neutral) 88%, black)
+      );
+    }
+    &:active,
+    &[aria-pressed="true"],
+    &[data-state="active"] {
+      background: var(
+        --button-bg-active,
+        color-mix(in oklch, var(--color-neutral) 78%, black)
+      );
+    }
+  }
+  .button--tertiary {
+    --button-tone: var(--color-foreground);
+    --button-color: var(--color-background);
+
+    &:hover {
+      background: var(
+        --button-bg-hover,
+        color-mix(
+          in oklch,
+          var(--color-foreground) 88%,
+          var(--color-background)
+        )
+      );
+    }
+    &:active,
+    &[aria-pressed="true"],
+    &[data-state="active"] {
+      background: var(
+        --button-bg-active,
+        color-mix(
+          in oklch,
+          var(--color-foreground) 78%,
+          var(--color-background)
+        )
+      );
+    }
+  }
+
+  /* === Shapes === */
+  .button--outline {
+    --button-bg: transparent;
+    --button-color: var(--button-tone);
+    --button-border-color: var(--button-tone);
+    --button-bevel: none;
+
+    &:hover {
+      background: var(
+        --button-bg-hover,
+        color-mix(in oklch, var(--button-tone) 14%, transparent)
+      );
+    }
+    &:active,
+    &[aria-pressed="true"],
+    &[data-state="active"] {
+      background: var(
+        --button-bg-active,
+        color-mix(in oklch, var(--button-tone) 22%, transparent)
+      );
+    }
+  }
+  .button--ghost {
+    --button-bg: transparent;
+    --button-color: var(--button-tone);
+    --button-border-color: transparent;
+    --button-bevel: none;
+
+    &:hover {
+      background: var(
+        --button-bg-hover,
+        color-mix(in oklch, var(--button-tone) 18%, transparent)
+      );
+    }
+    &:active,
+    &[aria-pressed="true"],
+    &[data-state="active"] {
+      background: var(
+        --button-bg-active,
+        color-mix(in oklch, var(--button-tone) 26%, transparent)
+      );
+    }
+  }
+  .button--soft {
+    --button-bg: color-mix(in oklch, var(--button-tone) 12%, transparent);
+    --button-color: var(--button-tone);
+    --button-border-color: transparent;
+    --button-bevel: none;
+
+    &:hover {
+      background: var(
+        --button-bg-hover,
+        color-mix(in oklch, var(--button-tone) 20%, transparent)
+      );
+    }
+    &:active,
+    &[aria-pressed="true"],
+    &[data-state="active"] {
+      background: var(
+        --button-bg-active,
+        color-mix(in oklch, var(--button-tone) 28%, transparent)
+      );
+    }
+  }
+
+  /* === Neutral × shape === */
+  .button--outline.button--neutral {
+    --button-border-color: var(--color-border);
+    &:hover {
+      background: var(--button-bg-hover, var(--color-accent));
+    }
+    &:active,
+    &[aria-pressed="true"],
+    &[data-state="active"] {
+      background: var(
+        --button-bg-active,
+        color-mix(in oklch, var(--color-accent) 92%, var(--color-foreground))
+      );
+    }
+  }
+  .button--ghost.button--neutral {
+    &:hover {
+      background: var(--button-bg-hover, var(--color-accent));
+    }
+    &:active,
+    &[aria-pressed="true"],
+    &[data-state="active"] {
+      background: var(
+        --button-bg-active,
+        color-mix(in oklch, var(--color-accent) 92%, var(--color-foreground))
+      );
+    }
+  }
+
+  /* === Loading — styled off aria-busy === */
+  .button[aria-busy="true"] {
+    cursor: progress;
+    pointer-events: none;
+
+    & > :is(svg, i, .button__icon) {
+      display: none;
+    }
+    &::before {
+      content: "";
+      display: inline-block;
+      flex-shrink: 0;
+      width: var(--button-icon-size, --spacing(4));
+      height: var(--button-icon-size, --spacing(4));
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: st-button-spin 0.75s linear infinite;
+    }
+  }
+
+  /* === Flush === */
+  .button--flush-start {
+    margin-inline-start: calc(-1 * var(--button-padding-inline, --spacing(3)));
+  }
+  .button--flush-end {
+    margin-inline-end: calc(-1 * var(--button-padding-inline, --spacing(3)));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+  .button[aria-busy="true"]::before {
+    animation-duration: 3s;
+  }
+}
+
+@keyframes st-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/button/index.d.ts

@@ -0,0 +1 @@
+export { c as button } from '../config-CARtrJ7I.js';

package/dist/button/index.js

@@ -0,0 +1,6 @@
+import {
+  button
+} from "../chunk-K45KLI3Y.js";
+export {
+  button
+};

package/dist/button-group/button-group.css

@@ -0,0 +1,108 @@
+/* @stisla/style — Button group. Ported from src/scss/components/_button-group.scss. A row (or column)
+ * of .button members that shares chrome so the cluster reads as one control: outer corners round,
+ * inner corners square, adjacent borders dedupe into a single seam. .button-group owns layout; member
+ * .button keeps its own paint. Purely visual grouping — no state hooks, no JS. (For press toggles /
+ * segmented control, see toggle / toggle-group.)
+ *
+ * Renamed from the legacy .btn-group → .button-group, members .btn → .button, and child knobs
+ * --btn-* → --button-* (full-word BEM, ARCHITECTURE §11). References the @theme tokens; only
+ * no-namespace customs use --st-* (border-width). @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .button-group,
+  .button-group--vertical {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+
+    /* Members participate in stacking so the seam-dedupe negative margin doesn't bury hover / focus /
+       active borders under the next sibling. Inner corners square; outer edges re-rounded below. */
+    > .button {
+      position: relative;
+      flex: 0 1 auto;
+      border-radius: 0;
+      /* Soften the rim mix on filled tones so an internal seam (two adjacent rims overlapping at the
+         -1px margin) reads as a quiet divider, not a hard frame. Outline/ghost/soft bypass this. */
+      --button-rim-mix: 92%;
+    }
+
+    /* Lift the interactive member above its neighbors so its border + ring clear the seam dedupe:
+       focus on top, then active, then transient hover. */
+    > .button:hover {
+      z-index: 1;
+    }
+    > .button[aria-pressed="true"],
+    > .button[data-state="active"] {
+      z-index: 2;
+    }
+    > .button:focus-visible {
+      z-index: 3;
+    }
+  }
+
+  /* === Horizontal seams === negative inline margin collapses adjacent borders into one seam. */
+  .button-group {
+    > .button + .button {
+      margin-inline-start: calc(-1 * var(--st-border-width));
+    }
+    > .button:first-child {
+      border-start-start-radius: var(--button-group-radius, var(--radius-md));
+      border-end-start-radius: var(--button-group-radius, var(--radius-md));
+    }
+    > .button:last-child {
+      border-start-end-radius: var(--button-group-radius, var(--radius-md));
+      border-end-end-radius: var(--button-group-radius, var(--radius-md));
+    }
+  }
+
+  /* === Vertical seams === same dedupe rotated 90°. */
+  .button-group--vertical {
+    flex-direction: column;
+    align-items: stretch;
+
+    > .button + .button {
+      margin-block-start: calc(-1 * var(--st-border-width));
+    }
+    > .button:first-child {
+      border-start-start-radius: var(--button-group-radius, var(--radius-md));
+      border-start-end-radius: var(--button-group-radius, var(--radius-md));
+    }
+    > .button:last-child {
+      border-end-start-radius: var(--button-group-radius, var(--radius-md));
+      border-end-end-radius: var(--button-group-radius, var(--radius-md));
+    }
+  }
+
+  /* === Sizes (base = md) — retune the child .button's vars in modifier scope; no per-size vars on
+   * the group itself, so members stay consistent with standalone .button--sm / .button--lg. */
+  .button-group--sm {
+    --button-group-radius: var(--radius-sm);
+
+    > .button {
+      --button-height: --spacing(7);
+      --button-padding-inline: --spacing(2.5);
+      --button-font-size: var(--text-xs);
+      --button-radius: var(--radius-sm);
+    }
+  }
+
+  .button-group--lg {
+    --button-group-radius: var(--radius-lg);
+
+    > .button {
+      --button-height: --spacing(11);
+      --button-padding-inline: --spacing(4);
+      --button-font-size: var(--text-base);
+      --button-radius: var(--radius-lg);
+    }
+  }
+
+  /* === Toolbar === a separate block: gaps multiple .button-group children apart without inline flex
+   * utilities at each call site. */
+  .button-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--button-toolbar-gap, --spacing(2));
+  }
+}