@stisla/style 3.0.0-beta.8 → 3.0.0-beta.9

package/dist/card/card.css

@@ -83,7 +83,7 @@
     background: var(--color-surface-2);
   }
 
-  .card__header--compact {
+  .card__header--sm {
     --card-header-height: --spacing(11.5);
   }
 

package/dist/components.css

@@ -0,0 +1,58 @@
+/* @stisla/style — component barrel. Explicit @import of every component's raw CSS (grouping only,
+ * no compilation). This is the single list the precompiled @stisla/css bundle compiles, and what a
+ * build-from-source consumer imports to get everything at once:
+ *   @import "tailwindcss"; @import "@stisla/style/theme.css"; @import "@stisla/style/components.css";
+ * To compose a subset instead, drop this barrel and @import only the components you want. */
+@import "./accordion/accordion.css";
+@import "./alert/alert.css";
+@import "./autocomplete/autocomplete.css";
+@import "./avatar/avatar.css";
+@import "./avatar-group/avatar-group.css";
+@import "./badge/badge.css";
+@import "./breadcrumb/breadcrumb.css";
+@import "./button/button.css";
+@import "./button-group/button-group.css";
+@import "./card/card.css";
+@import "./carousel/carousel.css";
+@import "./checkbox/checkbox.css";
+@import "./collapsible/collapsible.css";
+@import "./combobox/combobox.css";
+@import "./combobox/combobox.tomselect.css";
+@import "./dialog/dialog.css";
+@import "./drawer/drawer.css";
+@import "./empty-state/empty-state.css";
+@import "./field/field.css";
+@import "./icon-box/icon-box.css";
+@import "./illustration/illustration.css";
+@import "./indicator/indicator.css";
+@import "./input/input.css";
+@import "./input-group/input-group.css";
+@import "./kbd/kbd.css";
+@import "./link/link.css";
+@import "./list-group/list-group.css";
+@import "./media/media.css";
+@import "./menu/menu.css";
+@import "./meter/meter.css";
+@import "./navbar/navbar.css";
+@import "./page/page.css";
+@import "./pagination/pagination.css";
+@import "./placeholders/placeholders.css";
+@import "./popover/popover.css";
+@import "./progress/progress.css";
+@import "./radio/radio.css";
+@import "./scroll-area/scroll-area.css";
+@import "./scroll-area/scroll-area.overlayscrollbars.css";
+@import "./select/select.css";
+@import "./separator/separator.css";
+@import "./sidebar/sidebar.css";
+@import "./slider/slider.css";
+@import "./spinner/spinner.css";
+@import "./switch/switch.css";
+@import "./table/table.css";
+@import "./tabs/tabs.css";
+@import "./textarea/textarea.css";
+@import "./timeline/timeline.css";
+@import "./toast/toast.css";
+@import "./toggle/toggle.css";
+@import "./toggle-group/toggle-group.css";
+@import "./tooltip/tooltip.css";

package/dist/dialog/dialog.css

@@ -166,13 +166,13 @@
   }
 
   /* === Size modifiers === retune the panel width cap only. */
-  .dialog--compact {
+  .dialog--sm {
     --dialog-width: --spacing(80);
   }
-  .dialog--roomy {
+  .dialog--lg {
     --dialog-width: --spacing(160);
   }
-  .dialog--spacious {
+  .dialog--xl {
     --dialog-width: --spacing(240);
   }
 

package/dist/navbar/navbar.css

@@ -13,7 +13,8 @@
     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));
+    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));
   }
@@ -42,7 +43,10 @@
     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)));
+    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;
@@ -59,9 +63,19 @@
     background-color: transparent;
     color: var(--navbar-color, var(--color-foreground));
     border: 0;
-    border-radius: var(--navbar-button-radius, calc(var(--radius-md) - --spacing(1)));
+    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;
+    transition: background-color
+      var(--navbar-transition-duration, var(--transition-duration-fast)) ease;
+  }
+
+  .navbar__toggle :is(svg, i) {
+    width: var(--navbar-toggle-icon-size, --spacing(5));
+    height: var(--navbar-toggle-icon-size, --spacing(5));
+    flex-shrink: 0;
   }
 
   .navbar__toggle:hover,
@@ -93,14 +107,19 @@
     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)));
+    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;
+      background-color
+        var(--navbar-transition-duration, var(--transition-duration-fast)) ease,
+      color var(--navbar-transition-duration, var(--transition-duration-fast))
+        ease;
   }
 
   .navbar__button:hover,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stisla/style",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.0-beta.9",
   "description": "Stisla framework-agnostic style layer — the Tailwind @theme foundation (theme.css) + pure-JS composer + per-component configs + compiled component CSS. Zero framework deps.",
   "license": "MIT",
   "type": "module",
@@ -13,8 +13,9 @@
       "types": "./dist/button/index.d.ts",
       "import": "./dist/button/index.js"
     },
-    "./button.css": "./dist/button/button.css",
     "./theme.css": "./src/theme.css",
+    "./components.css": "./dist/components.css",
+    "./*.css": "./dist/*/*.css",
     "./package.json": "./package.json"
   },
   "files": [

package/src/theme.css

@@ -4,9 +4,9 @@
  *   colors → var(--color-*)   type → var(--text-*) / var(--leading-*) / var(--font-weight-*)
  *   radius → var(--radius-*)  shadow → var(--shadow-*)   spacing → --spacing(n)
  *   tint   → --alpha(var(--color-x) / N%)
- * z-index + duration ride Tailwind's namespaces (--z-index-*, --transition-duration-*) in a
- * @theme static block: that generates z-* / duration-* utilities AND force-emits the vars so our
- * raw var() refs resolve. Only border-width has no namespace slot, so it stays --st-*.
+ * z-index + duration ride Tailwind's namespaces (--z-index-*, --transition-duration-*), declared
+ * inline below with everything else; components reference them via raw var(), which keeps each
+ * referenced token in the output. Only border-width has no namespace slot, so it stays --st-*.
  * Dark mode overrides --color-* in a scope.
  *
  * This file is a PURE @theme — it does NOT import Tailwind. Tailwind is pulled in once by the
@@ -56,9 +56,20 @@
   --color-ring: var(--color-primary);
 
   /* Geometry — our tuned radius + shadow (override Tailwind's defaults; spacing/type stay) */
-  --radius-sm: 0.65rem;
-  --radius-md: 0.75rem;
-  --radius-lg: 1rem;
+  /* --radius is the single knob: a theme generator scales the whole ramp by rewriting it.
+     The steps keep our tuned curve as multipliers, so sm/md/lg stay pixel-identical to the
+     old literals (1rem * 0.65 = 0.65rem, etc.). We override Tailwind's full scale — not just
+     sm/md/lg — so the knob governs every tier and the ramp stays monotonic above lg.
+     Pills stay at 50%/9999px, off this knob. */
+  --radius: 1rem;
+  --radius-xs: calc(var(--radius) * 0.4);
+  --radius-sm: calc(var(--radius) * 0.65);
+  --radius-md: calc(var(--radius) * 0.75);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.5);
+  --radius-2xl: calc(var(--radius) * 2);
+  --radius-3xl: calc(var(--radius) * 3);
+  --radius-4xl: calc(var(--radius) * 4);
   --shadow-sm:
     0 1px 2px 0 color-mix(in oklch, black 5%, transparent),
     0 1px 3px 0 color-mix(in oklch, black 4%, transparent);
@@ -81,37 +92,16 @@
     "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
     "Liberation Mono", monospace;
 
-  /* Line-height scale — re-declared with Tailwind's default values (not changed). Tailwind v4 only
-     emits a theme var to :root when a UTILITY uses it; our components reference var(--leading-*) in
-     raw component CSS, and no leading-* utility is used anywhere, so without this they'd be
-     tree-shaken away and every `line-height: var(--leading-*)` would fall back to the inherited 1.5.
-     Declaring them here forces emission so the component line-heights actually apply. */
+  /* Line-height scale (Tailwind's default values, declared so the scale is ours to tune). */
   --leading-none: 1;
   --leading-tight: 1.25;
   --leading-snug: 1.375;
   --leading-normal: 1.5;
-}
-
-@variant dark {
-  --color-background: oklch(0.155 0 0);
-  --color-foreground: oklch(0.97 0 0);
-  --color-surface: oklch(0.18 0 0);
-  --color-surface-2: oklch(0.21 0 0);
-  --color-surface-3: oklch(0.23 0 0);
-  --color-border: oklch(0.25 0 0);
-  --color-border-strong: oklch(0.32 0 0);
-  --color-muted-foreground: oklch(0.72 0 0);
-  --color-neutral: oklch(0.27 0 0);
-  --color-neutral-foreground: oklch(0.97 0 0);
-  --color-accent: oklch(0.26 0 0);
-  --color-accent-foreground: oklch(0.97 0 0);
-}
 
-/* z-index + duration scales — Tailwind owns these namespaces, so naming them --z-index-* /
- * --transition-duration-* generates utilities (z-modal, duration-fast, …). `static` forces
- * unconditional emission: our component CSS references them via raw var(), which Tailwind can't
- * see, so without `static` a zero-utility-usage var would be tree-shaken (the --leading-* trap). */
-@theme static {
+  /* z-index + duration scales — Tailwind owns these namespaces, so naming them --z-index-* /
+     --transition-duration-* generates the matching utilities; components also reference them via
+     raw var(). Unused steps simply don't appear in the precompiled bundle (they stay in source for
+     build-from-source consumers). */
   --z-index-base: 0;
   --z-index-dropdown: 1000;
   --z-index-sticky: 1020;
@@ -126,6 +116,23 @@
   --transition-duration-slow: 320ms;
 }
 
+:root {
+  @variant dark {
+    --color-background: oklch(0.155 0 0);
+    --color-foreground: oklch(0.97 0 0);
+    --color-surface: oklch(0.18 0 0);
+    --color-surface-2: oklch(0.21 0 0);
+    --color-surface-3: oklch(0.23 0 0);
+    --color-border: oklch(0.25 0 0);
+    --color-border-strong: oklch(0.32 0 0);
+    --color-muted-foreground: oklch(0.72 0 0);
+    --color-neutral: oklch(0.27 0 0);
+    --color-neutral-foreground: oklch(0.97 0 0);
+    --color-accent: oklch(0.26 0 0);
+    --color-accent-foreground: oklch(0.97 0 0);
+  }
+}
+
 /* Single global default border thickness — NOT a scale, so no Tailwind namespace fits
  * (--border-width-* needs named steps; a bare --border-width generates nothing). Stays --st-*. */
 :root {