@stisla/style 3.0.0-beta.8

package/dist/list-group/list-group.css

@@ -0,0 +1,261 @@
+/* @stisla/style — List group. Ported from src/scss/components/_list-group.scss. A vertical stack of
+ * rows on a shared rounded surface (nav lists, settings panels, contact rolls). Interactive rows
+ * (a/button) get hover + focus automatically; static rows stay quiet. References the @theme tokens
+ * (colors var(--color-*), spacing/sizes --spacing(n), radius var(--radius-*)); only no-namespace
+ * customs use --st-* (border-width, duration). Knobs are --list-group-*. State via attributes / native
+ * (data-state / aria-current / aria-disabled / :disabled), no is-*. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .list-group {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--list-group-bg, var(--color-surface));
+    color: var(--list-group-color, var(--color-foreground));
+    border: var(--list-group-border-width, var(--st-border-width)) solid
+      var(--list-group-border-color, var(--color-border));
+    border-radius: var(--list-group-radius, var(--radius-lg));
+    /* Clip square inner-row corners to the rounded outer shape (inset focus halos sit inside). */
+    overflow: hidden;
+  }
+
+  /* === Item === */
+  .list-group__item {
+    display: flex;
+    align-items: center;
+    gap: var(--list-group-item-gap, --spacing(3));
+    padding: var(--list-group-item-padding-block, --spacing(3))
+      var(--list-group-item-padding-inline, --spacing(4));
+    color: var(--list-group-color, var(--color-foreground));
+    /* Transparent base lets variant tints + state paints stack on top. */
+    background-color: transparent;
+    /* Inter-row rule — the root border owns the top/bottom edges; first item stays flush. */
+    border-top: var(--st-border-width) solid var(--list-group-divider-color, var(--color-border));
+    position: relative;
+    transition:
+      background-color var(--list-group-transition-duration, var(--transition-duration-fast)) ease,
+      color var(--list-group-transition-duration, var(--transition-duration-fast)) ease;
+
+    &:first-child {
+      border-top: 0;
+    }
+  }
+
+  /* === Interactive rows === <a>/<button> stretch + get hover/focus; static rows stay quiet. */
+  a.list-group__item,
+  button.list-group__item {
+    width: 100%;
+    text-align: inherit;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  /* Hover only on a quiet row — an active or disabled row must not flash the accent surface. */
+  a.list-group__item:hover:not(
+      [data-state="active"],
+      [aria-current="page"],
+      [aria-current="true"],
+      [aria-disabled="true"]
+    ),
+  button.list-group__item:hover:not(
+      [data-state="active"],
+      [aria-current="page"],
+      [aria-current="true"],
+      [aria-disabled="true"]
+    ):not(:disabled) {
+    background-color: var(--list-group-item-bg-hover, var(--color-accent));
+    color: var(--list-group-item-color-hover, var(--color-accent-foreground));
+  }
+
+  a.list-group__item:focus-visible,
+  button.list-group__item:focus-visible {
+    /* Inset halo so the root overflow: hidden doesn't clip it; z-index lifts it over the next divider. */
+    outline: 2px solid var(--list-group-ring, var(--color-ring));
+    outline-offset: -2px;
+    z-index: 1;
+  }
+
+  /* === Selection states === carved out of the hover rule via :not() above. */
+  .list-group__item[data-state="active"],
+  .list-group__item[aria-current="page"],
+  .list-group__item[aria-current="true"] {
+    background-color: var(--list-group-item-bg-active, var(--color-highlight));
+    color: var(--list-group-item-color-active, var(--color-foreground));
+  }
+
+  /* === Disabled === */
+  .list-group__item[aria-disabled="true"],
+  .list-group__item:disabled {
+    color: var(--list-group-item-color-disabled, var(--color-muted-foreground));
+    pointer-events: none;
+    cursor: not-allowed;
+    background-color: transparent;
+  }
+
+  /* === Leading icon === first-child <svg>/<i> pins to a fixed size + currentColor. */
+  .list-group__item > :is(svg, i):first-child {
+    width: var(--list-group-item-icon-size, --spacing(4));
+    height: var(--list-group-item-icon-size, --spacing(4));
+    flex-shrink: 0;
+    color: currentColor;
+  }
+
+  /* === Contextual variants === 10% soft fill. The border mix uses `in oklab` (not oklch) because the
+     surface is neutral: oklch would pull every intent toward red; oklab preserves each intent's hue. */
+  .list-group__item--primary {
+    background-color: color-mix(in oklab, var(--color-primary) 10%, var(--list-group-bg, var(--color-surface)));
+    color: var(--color-foreground);
+  }
+  .list-group__item--success {
+    background-color: color-mix(in oklab, var(--color-success) 10%, var(--list-group-bg, var(--color-surface)));
+    color: var(--color-foreground);
+  }
+  .list-group__item--info {
+    background-color: color-mix(in oklab, var(--color-info) 10%, var(--list-group-bg, var(--color-surface)));
+    color: var(--color-foreground);
+  }
+  .list-group__item--warning {
+    background-color: color-mix(in oklab, var(--color-warning) 10%, var(--list-group-bg, var(--color-surface)));
+    color: var(--color-foreground);
+  }
+  .list-group__item--danger {
+    background-color: color-mix(in oklab, var(--color-danger) 10%, var(--list-group-bg, var(--color-surface)));
+    color: var(--color-foreground);
+  }
+  .list-group__item--neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-foreground);
+  }
+
+  /* === Flush === drop outer border + radius (for parents that already own a frame). */
+  .list-group--flush {
+    --list-group-bg: transparent;
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  /* === Numbered === <ol> auto-counter; Preflight strips list-style, so restore via a counter. */
+  .list-group--numbered {
+    counter-reset: list-group;
+
+    > .list-group__item {
+      counter-increment: list-group;
+
+      &::before {
+        content: counters(list-group, ".") ". ";
+      }
+    }
+  }
+
+  /* === Horizontal === rows side by side; the divider moves from row-top to row-start. */
+  .list-group--horizontal {
+    flex-direction: row;
+
+    > .list-group__item {
+      border-top: 0;
+      border-inline-start: var(--st-border-width) solid var(--list-group-divider-color, var(--color-border));
+
+      &:first-child {
+        border-inline-start: 0;
+      }
+    }
+  }
+
+  /* Responsive horizontal — row layout above the named breakpoint, via Tailwind's `@variant <bp>`
+     (resolves to the theme's breakpoint, not a hardcoded rem). */
+  @variant sm {
+    .list-group--horizontal-sm {
+      flex-direction: row;
+      > .list-group__item {
+        border-top: 0;
+        border-inline-start: var(--st-border-width) solid var(--list-group-divider-color, var(--color-border));
+        &:first-child {
+          border-inline-start: 0;
+        }
+      }
+    }
+  }
+  @variant md {
+    .list-group--horizontal-md {
+      flex-direction: row;
+      > .list-group__item {
+        border-top: 0;
+        border-inline-start: var(--st-border-width) solid var(--list-group-divider-color, var(--color-border));
+        &:first-child {
+          border-inline-start: 0;
+        }
+      }
+    }
+  }
+  @variant lg {
+    .list-group--horizontal-lg {
+      flex-direction: row;
+      > .list-group__item {
+        border-top: 0;
+        border-inline-start: var(--st-border-width) solid var(--list-group-divider-color, var(--color-border));
+        &:first-child {
+          border-inline-start: 0;
+        }
+      }
+    }
+  }
+  @variant xl {
+    .list-group--horizontal-xl {
+      flex-direction: row;
+      > .list-group__item {
+        border-top: 0;
+        border-inline-start: var(--st-border-width) solid var(--list-group-divider-color, var(--color-border));
+        &:first-child {
+          border-inline-start: 0;
+        }
+      }
+    }
+  }
+  @variant 2xl {
+    .list-group--horizontal-2xl {
+      flex-direction: row;
+      > .list-group__item {
+        border-top: 0;
+        border-inline-start: var(--st-border-width) solid var(--list-group-divider-color, var(--color-border));
+        &:first-child {
+          border-inline-start: 0;
+        }
+      }
+    }
+  }
+
+  /* === Card integration === a direct .card > .list-group sheds its own outer chrome so the card owns
+     the frame; edges merge with the card's header bottom / footer top / corner. */
+  .card > .list-group {
+    border-inline-width: 0;
+    border-radius: 0;
+  }
+  .card > .list-group:first-child {
+    border-top-width: 0;
+    border-start-start-radius: calc(var(--card-radius, var(--radius-lg)) - var(--st-border-width));
+    border-start-end-radius: calc(var(--card-radius, var(--radius-lg)) - var(--st-border-width));
+  }
+  .card > .card__header + .list-group {
+    border-top-width: 0;
+  }
+  .card > .list-group:last-child {
+    border-bottom-width: 0;
+    border-end-start-radius: calc(var(--card-radius, var(--radius-lg)) - var(--st-border-width));
+    border-end-end-radius: calc(var(--card-radius, var(--radius-lg)) - var(--st-border-width));
+  }
+  /* A list-group inside a card picks up the card's inline gutter so rows align with header/footer. */
+  .card .list-group {
+    --list-group-item-padding-inline: var(--card-padding-inline, --spacing(5));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .list-group__item {
+      transition: none;
+    }
+  }
+
+  /* Block — fills its container width per SPEC §9 escape ramp. */
+  .list-group--block {
+    width: 100%;
+  }
+}

package/dist/media/media.css

@@ -0,0 +1,115 @@
+/* @stisla/style — Media. Ported from src/scss/components/_media.scss. Two-column media-object row:
+ * figure (icon / avatar / image) on the inline-start, text column, action on the inline-end. A
+ * multipurpose row primitive (user lists, settings, notifications, files). The flush modifier strips
+ * the border + bg for stacks (typically inside a .card with separators). References the @theme tokens
+ * (colors var(--color-*), spacing/sizes --spacing(n), type var(--text-*) / var(--leading-*) /
+ * var(--font-weight-*), radius var(--radius-*)); only no-namespace customs use --st-* (border-width,
+ * duration). Knobs are --media-*. State via attributes ([data-highlighted], :hover/:focus-visible on
+ * an interactive host), no is-*. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .media {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--media-gap, --spacing(3));
+    padding: var(--media-padding-block, --spacing(4)) var(--media-padding-inline, --spacing(4));
+    color: var(--media-color, var(--color-foreground));
+    background: var(--media-bg, var(--color-surface));
+    border: var(--media-border-width, var(--st-border-width)) solid
+      var(--media-border-color, var(--color-border));
+    border-radius: var(--media-radius, var(--radius-md));
+  }
+
+  /* === Modifiers === */
+
+  /* Strip chrome — the host parent owns the frame, so a stack of rows reads as one surface. */
+  .media--flush {
+    --media-bg: transparent;
+    --media-border-width: 0;
+    --media-radius: 0;
+  }
+
+  /* Lay parts top-to-bottom; the action's inline-end pin makes no sense on a column, so clear it. */
+  .media--vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .media--vertical > .media__action {
+    margin-inline-start: 0;
+  }
+
+  /* === Interactive === when the row's root is itself the interactive surface (<a>/<button>), it
+   * earns hover + focus paint. Bg-tint only — .media carries three pinned text colors, so the row
+   * washes to a subtle accent and the type stays as-is. [data-highlighted] is the keyboard-nav hook. */
+  a.media,
+  button.media {
+    cursor: pointer;
+    transition: background-color var(--transition-duration-fast) ease;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  a.media:hover,
+  button.media:hover,
+  .media[data-highlighted] {
+    background: var(--media-bg-hover, var(--color-accent));
+  }
+
+  .media:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: -2px;
+  }
+
+  /* === Parts === */
+
+  .media__figure {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* A bare <svg>/<i> dropped into the figure (no .icon-box / .avatar wrapper) pins to a sensible
+     size so rows align. :only-child gate so a multi-child figure keeps its own sizing. */
+  .media__figure > :is(svg, i):only-child {
+    width: --spacing(4.5);
+    height: --spacing(4.5);
+    flex-shrink: 0;
+  }
+
+  .media__content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    gap: --spacing(0.5);
+  }
+
+  .media__title {
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-tight);
+    color: var(--color-foreground);
+  }
+
+  .media__description {
+    color: var(--color-muted-foreground);
+    line-height: var(--leading-normal);
+  }
+
+  .media__meta {
+    font-size: var(--text-xs);
+    line-height: var(--leading-snug);
+    color: var(--color-muted-foreground);
+  }
+
+  .media__action {
+    display: inline-flex;
+    align-items: center;
+    gap: --spacing(2);
+    margin-inline-start: auto;
+    flex-shrink: 0;
+  }
+}

package/dist/menu/menu.css

@@ -0,0 +1,237 @@
+/* @stisla/style — Menu. Ported from src/scss/components/_menu.scss (Base UI anatomy: root / trigger /
+ * popup / item). A floating surface of rows; the trigger is just a .button (no own class). The shared
+ * Sass menu-* mixins are expanded inline here with the --menu-* prefix (no shared base file — each
+ * surface owns its knobs). State lives in [data-state]/[data-highlighted]/[aria-*] attributes.
+ * 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-dropdown).
+ * The scroll-lock hook html[data-menu-open] is an attribute, recast from the legacy is-* class per
+ * the no-is-* convention. Positioning + keyboard nav (Floating UI) ship with the JS layer. @layer
+ * components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .menu {
+    position: relative;
+    /* inline-flex (not inline-block) so the wrapper isn't pulled into inline-baseline alignment
+       inside a flex parent. The single trigger child drives the wrapper height; the absolutely
+       positioned popup adds no contribution. */
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  /* position: fixed (not absolute) so the popup escapes any ancestor with overflow: hidden; the JS
+     layer computes top/left in viewport coordinates to match. The surface (padding / type / fill /
+     rim / radius / shadow) is the expanded menu-surface mixin. */
+  .menu__popup {
+    padding: var(--menu-padding-block, --spacing(1)) var(--menu-padding-inline, --spacing(1));
+    font-size: var(--menu-font-size, var(--text-sm));
+    line-height: var(--leading-normal);
+    color: var(--menu-color, var(--color-foreground));
+    background-color: var(--menu-bg, var(--color-surface));
+    border: var(--menu-border-width, var(--st-border-width)) solid
+      var(--menu-border-color, var(--color-border));
+    border-radius: var(--menu-radius, var(--radius-md));
+    box-shadow: var(--menu-shadow, var(--shadow-md));
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--menu-z-index, var(--z-index-dropdown));
+    display: none;
+    flex-direction: column;
+    gap: var(--menu-gap, --spacing(0.5));
+    min-width: var(--menu-min-width, --spacing(40));
+    max-width: max-content;
+    margin: 0;
+    list-style: none;
+    opacity: 0;
+    transform: translateY(calc(--spacing(1) * -1));
+    transition:
+      opacity var(--menu-transition-duration, var(--transition-duration-fast)) ease,
+      transform var(--menu-transition-duration, var(--transition-duration-fast)) ease;
+    outline: none;
+  }
+
+  .menu__popup[data-state="open"] {
+    display: flex;
+    opacity: 1;
+    transform: none;
+  }
+
+  /* The JS layer caps the popup max-height to the viewport; with column flex, flex-shrink would
+     squish children, so pin them at natural size and let overflow-y scroll instead. */
+  .menu__popup > * {
+    flex-shrink: 0;
+  }
+
+  /* === Item === (expanded menu-item mixin). Concentric inner radius = popup radius − inline gutter. */
+  .menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--menu-item-gap, --spacing(2));
+    width: 100%;
+    min-height: var(--menu-item-min-height, --spacing(8));
+    padding: var(--menu-item-padding-block, --spacing(0.5)) var(--menu-item-padding-inline, --spacing(3));
+    font: inherit;
+    color: var(--menu-color, var(--color-foreground));
+    text-align: start;
+    text-decoration: none;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(
+      --menu-item-radius,
+      calc(var(--menu-radius, var(--radius-md)) - var(--menu-padding-inline, --spacing(1)))
+    );
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--transition-duration-fast) ease,
+      color var(--transition-duration-fast) ease;
+  }
+
+  /* Hover (mouse) + [data-highlighted] (keyboard nav) both paint accent; native :focus is excluded
+     so two highlight indicators don't compete. */
+  .menu__item:hover,
+  .menu__item[data-highlighted] {
+    color: var(--menu-item-color-hover, var(--color-accent-foreground));
+    background-color: var(--menu-item-bg-hover, var(--color-accent));
+  }
+
+  .menu__item:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: -2px;
+  }
+
+  /* Persistent selected — the currently-applied choice. Hover does not override it, so the active row
+     stays highlighted even on hover. */
+  .menu__item[aria-current="true"],
+  .menu__item[data-state="active"],
+  .menu__item[aria-current="true"]:hover,
+  .menu__item[aria-current="true"][data-highlighted],
+  .menu__item[data-state="active"]:hover,
+  .menu__item[data-state="active"][data-highlighted] {
+    color: var(--menu-item-color-active, var(--color-highlight-foreground));
+    background-color: var(--menu-item-bg-active, var(--color-highlight));
+  }
+
+  /* Disabled — :disabled covers <button>, [aria-disabled] covers <a>; pointer-events kills hover. */
+  .menu__item:disabled,
+  .menu__item[aria-disabled="true"] {
+    color: var(--menu-item-color-disabled, var(--color-muted-foreground));
+    background-color: transparent;
+    pointer-events: none;
+  }
+
+  /* Destructive — color flips to danger; hover uses a soft danger tint so it never matches the
+     standard accent fill. */
+  .menu__item--danger {
+    color: var(--menu-item-color-danger, var(--color-danger));
+  }
+
+  .menu__item--danger:hover,
+  .menu__item--danger[data-highlighted] {
+    color: var(--menu-item-color-danger, var(--color-danger));
+    background-color: var(
+      --menu-item-bg-danger-hover,
+      color-mix(in oklch, var(--color-danger) 12%, transparent)
+    );
+  }
+
+  /* === Slots === leading icon, pinned size, color tracks the row text (inherit) so it follows every
+     state automatically. */
+  .menu__item > :is(svg, i),
+  .menu__icon {
+    width: var(--menu-item-icon-size, --spacing(4));
+    height: var(--menu-item-icon-size, --spacing(4));
+    flex-shrink: 0;
+    color: var(--menu-item-icon-color, inherit);
+  }
+
+  /* Indicator slot — leading check for checkbox/radio items; footprint always reserved (visibility,
+     not display) so mixed checked/unchecked menus stay column-aligned. */
+  .menu__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--menu-item-icon-size, --spacing(4));
+    height: var(--menu-item-icon-size, --spacing(4));
+    flex-shrink: 0;
+    color: inherit;
+    visibility: hidden;
+  }
+
+  .menu__item[data-state="checked"] .menu__indicator,
+  .menu__item[aria-checked="true"] .menu__indicator {
+    visibility: visible;
+  }
+
+  /* Trailing keyboard-shortcut chip — auto-margin pins it to the row end; inheritance keeps it
+     readable under hover/active paint. */
+  .menu__shortcut {
+    margin-inline-start: auto;
+    font-size: var(--menu-shortcut-font-size, var(--text-xs));
+    color: var(--menu-shortcut-color, var(--color-muted-foreground));
+    letter-spacing: 0.02em;
+  }
+
+  .menu__item:hover .menu__shortcut,
+  .menu__item[data-highlighted] .menu__shortcut,
+  .menu__item[aria-current="true"] .menu__shortcut,
+  .menu__item[data-state="active"] .menu__shortcut {
+    color: inherit;
+  }
+
+  /* === Group label === */
+  .menu__group-label {
+    display: flex;
+    align-items: center;
+    padding: var(--menu-group-label-padding-block, --spacing(1))
+      var(--menu-group-label-padding-inline, --spacing(3));
+    margin: 0;
+    font-size: var(--menu-group-label-font-size, var(--text-xs));
+    font-weight: var(--menu-group-label-font-weight, var(--font-weight-semibold));
+    color: var(--menu-group-label-color, var(--color-muted-foreground));
+    text-transform: none;
+    white-space: nowrap;
+  }
+
+  /* === Group === optional role="group" wrapper; tightens rhythm so its label sits flush against its
+     items without an extra row of menu gap. */
+  .menu__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--menu-gap, --spacing(0.5));
+  }
+
+  /* === Separator === */
+  .menu__separator {
+    height: 0;
+    margin: var(--menu-separator-margin-block, --spacing(2)) 0;
+    border: 0;
+    border-top: var(--st-border-width) solid var(--menu-separator-color, var(--color-border));
+    opacity: 1;
+  }
+
+  /* === Media integration === a borrowed .media row (role="menuitem") is flush, so it zeroed its own
+     radius; re-round it to the same concentric token .menu__item uses so its hover wash clips to the
+     matching curve. Both read the same token, so a --menu-radius / padding retune flows to both. */
+  .menu__popup .media--flush {
+    --media-radius: var(
+      --menu-item-radius,
+      calc(var(--menu-radius, var(--radius-md)) - var(--menu-padding-inline, --spacing(1)))
+    );
+  }
+}
+
+/* === Scroll lock === applied to <html> while any menu is open; the popup is position: fixed, so
+   without this the page would scroll under it and the JS would reposition every frame. */
+html[data-menu-open] {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .menu__popup,
+  .menu__item {
+    transition: none;
+  }
+}