@stisla/style 3.0.0-beta.8

package/dist/toggle-group/toggle-group.css

@@ -0,0 +1,87 @@
+/* @stisla/style — Toggle group. Ported from src/scss/components/_toggle-group.scss. A pill container
+ * hosting a row (or column) of .toggle children. The container owns the frame (rim + radius + bg);
+ * members go ghost-rest (no individual rims) so the cluster reads as one segmented control. Members
+ * get a concentric inner radius (outer − padding). References the @theme tokens (colors var(--color-*),
+ * spacing/sizes --spacing(n), radius var(--radius-*)); only no-namespace customs use --st-*
+ * (border-width). Knobs are --toggle-group-*; sizes compact/roomy → sm/lg. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* === Shared base === container chrome + member overrides (horizontal + vertical). */
+  .toggle-group,
+  .toggle-group--vertical {
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    vertical-align: middle;
+    padding: var(--toggle-group-padding-block, --spacing(0.5))
+      var(--toggle-group-padding-inline, --spacing(0.5));
+    gap: var(--toggle-group-gap, --spacing(0.5));
+    background: var(--toggle-group-bg, transparent);
+    border: var(--toggle-group-border-width, var(--st-border-width)) solid
+      var(--toggle-group-border-color, var(--color-border));
+    border-radius: var(--toggle-group-radius, var(--radius-md));
+
+    /* Member toggles — concentric inner radius + ghost rest (the parent rim owns the frame). */
+    > .toggle {
+      --toggle-radius: calc(
+        var(--toggle-group-radius, var(--radius-md)) -
+          var(--toggle-group-padding-inline, --spacing(0.5))
+      );
+      --toggle-bg: transparent;
+      --toggle-border-color: transparent;
+    }
+  }
+
+  /* === Horizontal === outer height locked; children fill via flex stretch + height: 100% (box model
+     handles the inner-area math). Scoped via :not(--vertical) so it doesn't leak into vertical mode. */
+  .toggle-group:not(.toggle-group--vertical) {
+    height: var(--toggle-group-height, --spacing(9));
+
+    /* Overflow → scroll, not squish: cap at the container and scroll horizontally (hidden scrollbar;
+       the half-clipped trailing segment is the "more this way" cue). */
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    > .toggle {
+      height: 100%;
+      flex-shrink: 0;
+    }
+
+    /* Icon-only inside the group: width follows the stretched cross-axis so the chip stays square. */
+    > .toggle--icon-only {
+      width: auto;
+      aspect-ratio: 1;
+    }
+  }
+
+  /* === Vertical === stacked column reading as a menu list; block-level so it fills its parent width.
+     Members keep a compact menu-list height, full-width, start-aligned. */
+  .toggle-group--vertical {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: auto;
+
+    > .toggle {
+      --toggle-height: --spacing(8);
+      width: 100%;
+      justify-content: flex-start;
+      text-align: start;
+    }
+  }
+
+  /* === Sizes (base = md) === outer container scales; padding + gap stay so the inner area tracks it. */
+  .toggle-group--sm {
+    --toggle-group-radius: var(--radius-sm);
+    --toggle-group-height: --spacing(7);
+  }
+  .toggle-group--lg {
+    --toggle-group-radius: var(--radius-lg);
+    --toggle-group-height: --spacing(11);
+  }
+}

package/dist/tooltip/tooltip.css

@@ -0,0 +1,95 @@
+/* @stisla/style — Tooltip. Ported from src/scss/components/_tooltip.scss. An inverse-surface chip
+ * (bg = foreground, text = background) positioned by the JS layer (Floating UI), shown via
+ * [data-state="open"] + [data-placement]. References the @theme tokens: colors var(--color-*),
+ * sizes/spacing --spacing(n), type var(--text-*) / var(--leading-*), radius var(--radius-*),
+ * shadow var(--shadow-*). Only no-namespace customs use --st-* (duration, z-index); z-index routes
+ * through the z-index scale (--z-index-tooltip, the top tier). Knobs are --tooltip-*. State via
+ * data-* attributes, never is-*. Positioning behavior ships with the JS layer. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .tooltip {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--tooltip-z-index, var(--z-index-tooltip));
+    display: none;
+    max-width: var(--tooltip-max-width, --spacing(60));
+    margin: 0;
+    pointer-events: none;
+    opacity: 0;
+    /* Resting transform = "above the trigger, easing up from below"; the per-side rules below flip
+       the direction so the entrance always reads as moving away from the anchored edge. */
+    transform: translateY(--spacing(1));
+    transition:
+      opacity var(--tooltip-transition-duration, var(--transition-duration-fast)) ease,
+      transform var(--tooltip-transition-duration, var(--transition-duration-fast)) ease;
+  }
+
+  .tooltip[data-state="open"] {
+    display: block;
+    opacity: 1;
+    transform: none;
+  }
+
+  /* Per-placement resting transform — Floating UI's resolved placement (which may differ from the
+     requested side after flip()) sets [data-placement], so the entrance tracks the anchored edge. */
+  .tooltip[data-placement^="bottom"] {
+    transform: translateY(calc(--spacing(1) * -1));
+  }
+  .tooltip[data-placement^="left"] {
+    transform: translateX(--spacing(1));
+  }
+  .tooltip[data-placement^="right"] {
+    transform: translateX(calc(--spacing(1) * -1));
+  }
+  .tooltip[data-placement^="bottom"][data-state="open"],
+  .tooltip[data-placement^="left"][data-state="open"],
+  .tooltip[data-placement^="right"][data-state="open"] {
+    transform: none;
+  }
+
+  /* === Inner === the visible chip; holds the bg / padding / radius so the arrow can overlap its
+     edge cleanly while .tooltip itself stays a positioning shell. */
+  .tooltip__inner {
+    padding: var(--tooltip-padding-block, --spacing(1.5))
+      var(--tooltip-padding-inline, --spacing(2.5));
+    font-size: var(--tooltip-font-size, var(--text-xs));
+    line-height: var(--tooltip-line-height, var(--leading-snug));
+    color: var(--tooltip-color, var(--color-background));
+    text-align: center;
+    background-color: var(--tooltip-bg, var(--color-foreground));
+    border-radius: var(--tooltip-radius, var(--radius-sm));
+    box-shadow: var(--tooltip-shadow, var(--shadow-sm));
+    word-wrap: break-word;
+  }
+
+  /* === Arrow === a small square rotated 45°; JS sets the along-axis offset, these rules pin the
+     cross-axis so half the diamond sits inside the chip and half sticks out as the point. */
+  .tooltip__arrow {
+    position: absolute;
+    width: var(--tooltip-arrow-size, --spacing(2));
+    height: var(--tooltip-arrow-size, --spacing(2));
+    background-color: var(--tooltip-bg, var(--color-foreground));
+    transform: rotate(45deg);
+  }
+
+  .tooltip[data-placement^="top"] .tooltip__arrow {
+    bottom: calc(var(--tooltip-arrow-size, --spacing(2)) * -0.5);
+  }
+  .tooltip[data-placement^="bottom"] .tooltip__arrow {
+    top: calc(var(--tooltip-arrow-size, --spacing(2)) * -0.5);
+  }
+  .tooltip[data-placement^="left"] .tooltip__arrow {
+    right: calc(var(--tooltip-arrow-size, --spacing(2)) * -0.5);
+  }
+  .tooltip[data-placement^="right"] .tooltip__arrow {
+    left: calc(var(--tooltip-arrow-size, --spacing(2)) * -0.5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip {
+      transition: none;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@stisla/style",
+  "version": "3.0.0-beta.8",
+  "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",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "import": "./dist/button/index.js"
+    },
+    "./button.css": "./dist/button/button.css",
+    "./theme.css": "./src/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/theme.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "devDependencies": {
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stisla/stisla.git",
+    "directory": "next/packages/style"
+  },
+  "homepage": "https://github.com/stisla/stisla#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/copy-css.mjs"
+  }
+}

package/src/theme.css

@@ -0,0 +1,151 @@
+/* @stisla/style — THE theme/foundation layer. Tailwind v4 @theme: one definition emits the CSS
+ * variables (referenced in our component CSS) AND generates the utilities. There is no parallel
+ * token system — components read these theme vars directly:
+ *   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-*.
+ * 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
+ * consumer (or by the @stisla/css build), then this file is imported after it:
+ *   @import "tailwindcss";
+ *   @import "@stisla/style/theme.css"; */
+
+@theme {
+  /* Drop Tailwind's default palette; ship only semantic colors. */
+  --color-*: initial;
+
+  /* Intent (5 pairs) */
+  --color-primary: oklch(0.639 0.1844 257.69);
+  --color-primary-foreground: oklch(1 0 0);
+  --color-success: oklch(0.6966 0.1853 149.54);
+  --color-success-foreground: oklch(1 0 0);
+  --color-warning: oklch(0.7697 0.1645 70.61);
+  --color-warning-foreground: oklch(0.27 0 0);
+  --color-danger: oklch(0.6155 0.2229 26.82);
+  --color-danger-foreground: oklch(1 0 0);
+  --color-info: oklch(0.677589 0.148143 238.1044);
+  --color-info-foreground: oklch(1 0 0);
+
+  /* Surface (8) */
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.27 0 0);
+  --color-surface: oklch(1 0 0);
+  --color-surface-2: oklch(0.98 0 0);
+  --color-surface-3: oklch(0.97 0 0);
+  --color-border: oklch(0.95 0 0);
+  --color-border-strong: oklch(0.93 0 0);
+  --color-muted-foreground: oklch(0.52 0 0);
+
+  /* Overlay (theme-independent chrome) */
+  --color-overlay: oklch(0.155 0 0);
+  --color-overlay-foreground: oklch(0.98 0 0);
+
+  /* Interactional */
+  --color-neutral: oklch(0.91 0 0);
+  --color-neutral-foreground: oklch(0.27 0 0); /* = foreground (light) */
+  --color-accent: oklch(0.96 0 0);
+  --color-accent-foreground: oklch(0.27 0 0);
+  --color-highlight: color-mix(in oklch, var(--color-primary) 12%, transparent);
+  --color-highlight-foreground: var(--color-primary);
+
+  /* Focus */
+  --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;
+  --shadow-sm:
+    0 1px 2px 0 color-mix(in oklch, black 5%, transparent),
+    0 1px 3px 0 color-mix(in oklch, black 4%, transparent);
+  --shadow-md:
+    0 2px 6px -1px color-mix(in oklch, black 5%, transparent),
+    0 8px 16px -4px color-mix(in oklch, black 6%, transparent);
+  --shadow-lg:
+    0 4px 12px -2px color-mix(in oklch, black 6%, transparent),
+    0 16px 36px -8px color-mix(in oklch, black 9%, transparent);
+  --shadow-xl:
+    0 8px 24px -4px color-mix(in oklch, black 7%, transparent),
+    0 24px 56px -12px color-mix(in oklch, black 12%, transparent);
+
+  /* Type families */
+  --font-sans:
+    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono:
+    "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. */
+  --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-base: 0;
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1020;
+  --z-index-overlay: 1030;
+  --z-index-modal: 1040;
+  --z-index-popover: 1050;
+  --z-index-toast: 1060;
+  --z-index-tooltip: 1070;
+
+  --transition-duration-fast: 120ms;
+  --transition-duration-normal: 200ms;
+  --transition-duration-slow: 320ms;
+}
+
+/* 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 {
+  --st-border-width: 1px;
+}
+
+/* Base — default body copy is 14px (Stisla's long-standing default), set on <body> so the
+ * root stays at the browser default and 1rem = 16px: the spacing scale and every rem-based
+ * token remain anchored to 16px. Components set their own font-size (var(--text-sm) etc.);
+ * this governs only bare/inherited text and demo content. (Reboot concern — may move to a
+ * dedicated reboot layer later; theme.css is the one file every consumer imports, so it lives
+ * here for now.) */
+@layer base {
+  body {
+    font-size: var(--text-sm);
+    font-family: var(--font-sans);
+    background: var(--color-background);
+    color: var(--color-foreground);
+  }
+}
+
+/* Class-based dark mode for utilities (both hooks Stisla supports). */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));