@stisla/style 3.0.0-beta.8

package/dist/meter/meter.css

@@ -0,0 +1,124 @@
+/* @stisla/style — Meter. Ported from src/scss/components/_meter.scss. A bar visualizing a value within
+ * a known range (storage used, score vs target) — static measurement, vs progress's work-in-motion.
+ * Shares progress's anatomy but drops the in-motion modifiers and adds segmented stacking + an optional
+ * legend. References the @theme tokens (colors var(--color-*), spacing/sizes --spacing(n), type
+ * var(--text-*) / var(--font-weight-*) / var(--leading-*)). Knobs are --meter-*; sizes compact/roomy →
+ * sm/lg; pill radius literal 9999px. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .meter {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    column-gap: --spacing(4);
+    row-gap: var(--meter-header-gap, --spacing(1));
+  }
+
+  /* === Caption === */
+  .meter__label {
+    grid-column: 1;
+    font-size: var(--meter-label-font-size, var(--text-sm));
+    font-weight: var(--meter-label-font-weight, var(--font-weight-medium));
+    color: var(--meter-label-color, var(--color-foreground));
+    line-height: var(--leading-snug);
+  }
+  .meter__value {
+    grid-column: 2;
+    font-size: var(--meter-label-font-size, var(--text-sm));
+    color: var(--meter-value-color, var(--color-muted-foreground));
+    line-height: var(--leading-snug);
+  }
+
+  /* === Track === flex row so multiple bars sit side by side; the segment gap doesn't apply at edges. */
+  .meter__track {
+    grid-column: 1 / -1;
+    display: flex;
+    gap: var(--meter-segment-gap, 1px);
+    height: var(--meter-height, --spacing(2));
+    background-color: var(--meter-bg, var(--color-neutral));
+    border-radius: var(--meter-radius, 9999px);
+    overflow: hidden;
+  }
+
+  /* === Bar === sized by inline width %; default 0 so an unsized bar stays out of the way. */
+  .meter__bar {
+    display: block;
+    width: 0;
+    height: 100%;
+    background-color: var(--meter-bar-bg, var(--color-primary));
+    flex-shrink: 0;
+  }
+
+  /* === Intent modifiers === */
+  .meter__bar--primary {
+    --meter-bar-bg: var(--color-primary);
+  }
+  .meter__bar--success {
+    --meter-bar-bg: var(--color-success);
+  }
+  .meter__bar--warning {
+    --meter-bar-bg: var(--color-warning);
+  }
+  .meter__bar--danger {
+    --meter-bar-bg: var(--color-danger);
+  }
+  .meter__bar--info {
+    --meter-bar-bg: var(--color-info);
+  }
+
+  /* === Legend === optional row beneath the track; each dot reuses --meter-bar-bg. */
+  .meter__legend {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--meter-legend-item-gap, --spacing(3.5));
+    row-gap: --spacing(1);
+    margin-block-start: var(--meter-legend-row-gap, --spacing(2));
+    font-size: var(--meter-legend-font-size, var(--text-xs));
+    color: var(--meter-legend-color, var(--color-muted-foreground));
+    line-height: var(--leading-snug);
+  }
+
+  .meter__legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: --spacing(1.5);
+  }
+
+  .meter__legend-dot {
+    display: inline-block;
+    width: var(--meter-legend-dot-size, --spacing(2));
+    height: var(--meter-legend-dot-size, --spacing(2));
+    background-color: var(--meter-bar-bg, var(--color-primary));
+    border-radius: 9999px;
+    flex-shrink: 0;
+  }
+  .meter__legend-dot--primary {
+    --meter-bar-bg: var(--color-primary);
+  }
+  .meter__legend-dot--success {
+    --meter-bar-bg: var(--color-success);
+  }
+  .meter__legend-dot--warning {
+    --meter-bar-bg: var(--color-warning);
+  }
+  .meter__legend-dot--danger {
+    --meter-bar-bg: var(--color-danger);
+  }
+  .meter__legend-dot--info {
+    --meter-bar-bg: var(--color-info);
+  }
+
+  /* === Size modifiers (base = md) === */
+  .meter--sm {
+    --meter-height: --spacing(1);
+  }
+  .meter--lg {
+    --meter-height: --spacing(4);
+  }
+
+  /* Block — fills its container width per SPEC §9 escape ramp. */
+  .meter--block {
+    width: 100%;
+  }
+}

package/dist/navbar/navbar.css

@@ -0,0 +1,170 @@
+/* @stisla/style — Navbar. Ported from src/scss/components/_navbar.scss. A Stisla-original top bar: a
+ * brand mark, a row of nav links, and trailing extras in a flex row; below the lg breakpoint the nav
+ * and extras fold into a column behind a hamburger toggle. Driven by Stisla's own JS (a
+ * [data-navbar-toggle] click flips [data-state] on .navbar__menu), so its classes are Stisla-native
+ * BEM — not lib-coupled. References the @theme tokens: colors var(--color-*), sizes/spacing
+ * --spacing(n), type var(--leading-*), radius var(--radius-*); only no-namespace customs use --st-*
+ * (duration). Knobs are --navbar-*. State via [data-state] / [aria-disabled], never is-*. The mobile
+ * toggle ships with the JS layer. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .navbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--navbar-gap, --spacing(3));
+    padding: var(--navbar-padding-block, --spacing(2.5)) var(--navbar-padding-inline, --spacing(4));
+    background-color: var(--navbar-bg, var(--color-background));
+    color: var(--navbar-color, var(--color-foreground));
+  }
+
+  /* Container-inside-navbar — when the inner row is wrapped in a .container, the bar's inline padding
+     zeroes out and the container takes over the clamp; padding-block rides the container so the bar
+     height matches a paddingless bar. */
+  .navbar:has(> .container),
+  .navbar:has(> .container-fluid) {
+    --navbar-padding-inline: 0;
+  }
+
+  .navbar > .container,
+  .navbar > .container-fluid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--navbar-gap, --spacing(3));
+    padding-block: var(--navbar-padding-block, --spacing(2.5));
+  }
+
+  /* Brand — wordmark / logo. Hard height + line-height 1 matches the button chip geometry so the row
+     reads as one band; same inline inset as a button chip so brand text sits on the button x-grid. */
+  .navbar__brand {
+    display: inline-flex;
+    align-items: center;
+    height: var(--navbar-button-height, --spacing(9));
+    padding-block: var(--navbar-brand-padding-block, 0);
+    padding-inline: var(--navbar-brand-padding-inline, var(--navbar-button-padding-inline, --spacing(3)));
+    color: var(--navbar-color, var(--color-foreground));
+    line-height: var(--leading-none);
+    text-decoration: none;
+  }
+
+  /* Toggle — square hamburger; hidden by default, shown below lg. */
+  .navbar__toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--navbar-toggle-size, --spacing(9));
+    height: var(--navbar-toggle-size, --spacing(9));
+    padding: 0;
+    background-color: transparent;
+    color: var(--navbar-color, var(--color-foreground));
+    border: 0;
+    border-radius: var(--navbar-button-radius, calc(var(--radius-md) - --spacing(1)));
+    cursor: pointer;
+    transition: background-color var(--navbar-transition-duration, var(--transition-duration-fast)) ease;
+  }
+
+  .navbar__toggle:hover,
+  .navbar__toggle:focus-visible {
+    background-color: var(--navbar-button-bg-hover, var(--color-accent));
+    color: var(--navbar-button-color-hover, var(--color-accent-foreground));
+  }
+
+  /* Menu — collapsing wrapper. Above lg, a transparent flex row beside the brand; below lg it folds. */
+  .navbar__menu {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--navbar-gap, --spacing(3));
+  }
+
+  /* Nav — link list; reboot zeroes the ul margin/padding + list-style, only the flex layout is set. */
+  .navbar__nav {
+    display: flex;
+    align-items: center;
+    gap: var(--navbar-button-gap, --spacing(1));
+  }
+
+  /* Button — ghost chip; soft accent on hover/focus, highlight when it marks the current page. Hard
+     height + line-height 1 keeps the chip a clean band regardless of font metrics. */
+  .navbar__button {
+    display: inline-flex;
+    align-items: center;
+    height: var(--navbar-button-height, --spacing(9));
+    padding-block: var(--navbar-button-padding-block, 0);
+    padding-inline: var(--navbar-button-padding-inline, --spacing(3));
+    border-radius: var(--navbar-button-radius, calc(var(--radius-md) - --spacing(1)));
+    background-color: transparent;
+    color: var(--navbar-button-color, var(--color-foreground));
+    line-height: var(--leading-none);
+    text-decoration: none;
+    transition:
+      background-color var(--navbar-transition-duration, var(--transition-duration-fast)) ease,
+      color var(--navbar-transition-duration, var(--transition-duration-fast)) ease;
+  }
+
+  .navbar__button:hover,
+  .navbar__button:focus-visible {
+    background-color: var(--navbar-button-bg-hover, var(--color-accent));
+    color: var(--navbar-button-color-hover, var(--color-accent-foreground));
+  }
+
+  .navbar__button[data-state="active"] {
+    background-color: var(--navbar-button-bg-active, var(--color-highlight));
+    color: var(--navbar-button-color-active, var(--color-highlight-foreground));
+  }
+
+  .navbar__button[aria-disabled="true"] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  /* === Above the collapse breakpoint (Tailwind `lg`) === nav grabs the leading edge so siblings
+     (search, status, action) fall to the trailing edge. */
+  @variant lg {
+    .navbar__nav {
+      margin-inline-end: auto;
+    }
+  }
+
+  /* === Below the collapse breakpoint (Tailwind `max-lg`) === the menu folds behind the toggle. */
+  @variant max-lg {
+    .navbar__toggle {
+      display: inline-flex;
+      margin-inline-start: auto;
+    }
+
+    .navbar__menu {
+      display: none;
+      flex: 1 0 100%;
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .navbar__menu[data-state="open"] {
+      display: flex;
+    }
+
+    .navbar__nav {
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    .navbar__button {
+      width: 100%;
+    }
+  }
+
+  /* Block — fills its container width per the SPEC escape ramp. */
+  .navbar--block {
+    width: 100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .navbar__button,
+    .navbar__toggle {
+      transition-duration: 0.01ms;
+    }
+  }
+}

package/dist/page/page.css

@@ -0,0 +1,95 @@
+/* @stisla/style — Page. Ported from src/scss/components/_page.scss. A pure-CSS layout primitive for
+ * what sits inside <main>: a flex-column flow whose row-gap owns the rhythm, so header / sections /
+ * section-headers are siblings with zero outer margin (the reboot already zeroes h1–h6 + p). Opinionated
+ * heading cadences (--title h3-ish, --section-title h5-ish) let consumers drop the recurring heading
+ * utility. References the @theme tokens: colors var(--color-*), spacing --spacing(n), type
+ * var(--text-*) / var(--leading-*) / var(--font-weight-*). Knobs are --page-* (fallback-default, so a
+ * scope retunes any gap and it cascades — custom props inherit). @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* The frame is the flow when used without a container; .page__body re-establishes the section
+     rhythm for the container-nested case. */
+  .page,
+  .page__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--page-section-gap, --spacing(6));
+  }
+
+  /* Header — flex row, heading leading, optional actions trailing; wraps actions to a new line on
+     narrow viewports. space-between is the fallback for the two-bare-children case; with a headline
+     group present its flex: 1 1 auto pushes actions to the end. */
+  .page__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--page-header-gap, --spacing(4));
+  }
+
+  /* Heading group — title + description stack with a small gap; flex: 1 1 auto grows it into the row,
+     min-width: 0 keeps a long title wrapping instead of forcing actions off-screen. */
+  .page__headline {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--page-heading-gap, --spacing(1));
+    min-width: 0;
+  }
+
+  /* Title — opinionated h3-ish cadence. */
+  .page__title {
+    font-size: var(--page-title-font-size, var(--text-xl));
+    font-weight: var(--page-title-font-weight, var(--font-weight-semibold));
+    line-height: var(--leading-tight);
+  }
+
+  /* Description — optional muted helper copy under the title (muted baked in, like other __description
+     slots). */
+  .page__description {
+    font-size: var(--page-description-font-size, var(--text-sm));
+    font-weight: var(--page-description-font-weight, var(--font-weight-normal));
+    line-height: var(--leading-normal);
+    color: var(--page-description-color, var(--color-muted-foreground));
+  }
+
+  /* Actions slot — shared by .page__header and .page__section-header; flex-shrink: 0 keeps a
+     multi-button row from squishing (the header's wrap drops it to the next line instead). */
+  .page__action {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--page-action-gap, --spacing(2));
+  }
+
+  /* Section — mini-layout per block; the .page parent owns the inter-section rhythm. */
+  .page__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--page-section-inner-gap, --spacing(4));
+  }
+
+  /* Section header — the header recipe at a tighter scale; shares .page__action. */
+  .page__section-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--page-section-header-gap, --spacing(3));
+  }
+
+  /* Section title — opinionated h5-ish cadence. */
+  .page__section-title {
+    font-size: var(--page-section-title-font-size, var(--text-lg));
+    font-weight: var(--page-section-title-font-weight, var(--font-weight-semibold));
+    line-height: var(--leading-snug);
+  }
+
+  /* Section description — the section-scale counterpart to .page__description. */
+  .page__section-description {
+    font-size: var(--page-section-description-font-size, var(--text-sm));
+    font-weight: var(--page-section-description-font-weight, var(--font-weight-normal));
+    line-height: var(--leading-normal);
+    color: var(--page-section-description-color, var(--color-muted-foreground));
+  }
+}

package/dist/pagination/pagination.css

@@ -0,0 +1,125 @@
+/* @stisla/style — Pagination. Ported from src/scss/components/_pagination.scss. A row of standalone
+ * page chips. Rest transparent; hover paints accent; current page (data-state="active" /
+ * aria-current="page") paints highlight. Heights match the .button cadence. References the @theme
+ * tokens (colors var(--color-*), spacing/sizes --spacing(n), type var(--text-*) / var(--leading-*),
+ * radius var(--radius-*)); only no-namespace customs use --st-* (border-width, duration). Knobs are
+ * --pagination-*; sizes compact/roomy → sm/lg. State via attributes / native :disabled, no is-*.
+ * @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--pagination-gap, --spacing(1));
+    font-size: var(--pagination-font-size, var(--text-sm));
+    /* Strip default list chrome — works whether root is <ul>/<ol>/<div>. */
+    padding-inline-start: 0;
+    list-style: none;
+  }
+
+  /* === Chip === hard height + min-width === height so a single glyph lands square. */
+  .pagination__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--pagination-button-inner-gap, --spacing(1.5));
+    height: var(--pagination-button-height, --spacing(9));
+    min-width: var(--pagination-button-height, --spacing(9));
+    padding-block: var(--pagination-button-padding-block, 0);
+    padding-inline: var(--pagination-button-padding-inline, --spacing(3));
+    background-color: var(--pagination-button-bg, transparent);
+    color: var(--pagination-button-color, var(--color-foreground));
+    border: var(--pagination-button-border-width, var(--st-border-width)) solid
+      var(--pagination-button-border-color, transparent);
+    border-radius: var(--pagination-button-radius, var(--radius-md));
+    text-decoration: none;
+    font: inherit;
+    font-size: inherit;
+    line-height: var(--leading-none);
+    cursor: default;
+    transition:
+      background-color var(--pagination-transition-duration, var(--transition-duration-fast)) ease,
+      color var(--pagination-transition-duration, var(--transition-duration-fast)) ease;
+
+    /* Icon — 1em scales with font-size so --sm shrinks icons proportionally (no per-size override). */
+    > :is(svg, i) {
+      width: 1em;
+      height: 1em;
+      flex-shrink: 0;
+    }
+  }
+
+  /* Interactive chips opt in via element selector; <span> edge markers stay quiet. */
+  a.pagination__button,
+  button.pagination__button {
+    cursor: pointer;
+  }
+
+  a.pagination__button:focus-visible,
+  button.pagination__button:focus-visible {
+    outline: 2px solid var(--pagination-button-ring, var(--color-ring));
+    outline-offset: 2px;
+  }
+
+  /* Hover only on a quiet chip — an active or disabled chip must not flash the accent surface. */
+  a.pagination__button:hover:not([data-state="active"], [aria-current="page"], [aria-disabled="true"]),
+  button.pagination__button:hover:not([data-state="active"], [aria-current="page"], [aria-disabled="true"]):not(:disabled) {
+    background-color: var(--pagination-button-bg-hover, var(--color-accent));
+    color: var(--pagination-button-color-hover, var(--color-accent-foreground));
+  }
+
+  /* === Current page === */
+  .pagination__button[data-state="active"],
+  .pagination__button[aria-current="page"] {
+    background-color: var(--pagination-button-bg-active, var(--color-highlight));
+    color: var(--pagination-button-color-active, var(--color-highlight-foreground));
+    border-color: var(--pagination-button-bg-active, var(--color-highlight));
+  }
+
+  /* === Disabled === */
+  .pagination__button[aria-disabled="true"],
+  .pagination__button:disabled {
+    color: var(--pagination-button-color-disabled, var(--color-muted-foreground));
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  /* === Ellipsis === non-interactive truncation marker; same footprint, no hover/focus/border. */
+  .pagination__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--pagination-button-height, --spacing(9));
+    min-width: var(--pagination-button-height, --spacing(9));
+    color: var(--pagination-button-color-disabled, var(--color-muted-foreground));
+    pointer-events: none;
+    user-select: none;
+  }
+
+  /* === Size modifiers (base = md) === */
+  .pagination--sm {
+    --pagination-button-height: --spacing(7);
+    --pagination-button-padding-inline: --spacing(2);
+    --pagination-font-size: var(--text-xs);
+  }
+  .pagination--lg {
+    --pagination-button-height: --spacing(11);
+    --pagination-button-padding-inline: --spacing(4);
+    --pagination-font-size: var(--text-base);
+  }
+
+  /* === Alignment === */
+  .pagination--center {
+    justify-content: center;
+  }
+  .pagination--end {
+    justify-content: flex-end;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pagination__button {
+      transition: none;
+    }
+  }
+}

package/dist/placeholders/placeholders.css

@@ -0,0 +1,58 @@
+/* @stisla/style — Placeholders. Ported from src/scss/components/_placeholders.scss. A skeleton
+ * stand-in for content that hasn't loaded: apply .placeholder to any inline element and size it with
+ * a width utility or inline style. References the @theme tokens: colors var(--color-*), radius
+ * var(--radius-*). Knobs are --placeholder-* (fallback-default). The 1em height is font-relative on
+ * purpose (the bar scales with its text); the wave mask stops and the 2s ambient loops are bespoke
+ * (no token). Sizes --compact/--roomy → --sm/--lg. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .placeholder {
+    display: inline-block;
+    min-height: var(--placeholder-height, 1em);
+    vertical-align: middle;
+    cursor: wait;
+    background: var(--placeholder-bg, var(--color-muted-foreground));
+    opacity: var(--placeholder-opacity, 0.5);
+    border-radius: var(--placeholder-radius, var(--radius-sm));
+  }
+
+  /* === Sizes (base = md) === */
+  .placeholder--sm {
+    --placeholder-height: 0.75em;
+  }
+  .placeholder--lg {
+    --placeholder-height: 1.5em;
+  }
+
+  /* === Animations === modifiers on the bar itself; reduced motion stops them (a paused bar still
+     reads as "not loaded" from its shape, so the animation is decoration). */
+  .placeholder--glow {
+    animation: st-placeholder-glow 2s ease-in-out infinite;
+  }
+
+  .placeholder--wave {
+    mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.65) 75%, #000 95%);
+    mask-size: 200% 100%;
+    animation: st-placeholder-wave 2s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .placeholder--glow,
+    .placeholder--wave {
+      animation: none;
+    }
+  }
+}
+
+@keyframes st-placeholder-glow {
+  50% {
+    opacity: 0.2;
+  }
+}
+
+@keyframes st-placeholder-wave {
+  100% {
+    mask-position: -200% 0%;
+  }
+}