@starci/grammar 0.4.12 → 0.5.0

package/dist/offset-pop/styles.css

@@ -1,72 +1,142 @@
 @import "../common/styles.css";
+@import "./components-forms.css";
+@import "./components-overlays.css";
+@import "./components-navigation.css";
 
 @layer starci-grammar-offset-pop {
+    /*
+     * Offset Pop visual DNA is opt-in through OffsetPopGrammarRoot. It supplies a complete,
+     * portable semantic theme (see ./dna.ts, whose values equal these defaults) and feeds every
+     * Common semantic variable Core feeds. Product/UI laws stay out of CSS.
+     */
     .grammar-common-root[data-grammar-family="offset-pop"] {
         color-scheme: light;
 
-        --offset-pop-canvas: #fff8ef;
-        --offset-pop-ink: #1c1524;
-        --offset-pop-muted: #716a76;
-        --offset-pop-surface: #fffdf9;
-        --offset-pop-surface-muted: #f8dbe8;
+        /* Family inks and the offset signature. */
         --offset-pop-pink: #ff3593;
+        --offset-pop-blush: #f8d8e6;
         --offset-pop-yellow: #ffd447;
         --offset-pop-mint: #91e4ca;
-        --offset-pop-blush: #f8d8e6;
         --offset-pop-critical: #e84a5f;
+        --offset-pop-ink: #1c1524;
+        --offset-pop-shadow-ink: #1c1524;
         --offset-pop-outline-width: 2px;
         --offset-pop-shadow-x: 0.25rem;
         --offset-pop-shadow-y: 0.5rem;
-        --offset-pop-shadow-ink: var(--offset-pop-ink);
+
+        /* Semantic theme, the adaptation contract (OFFSET_POP_TOKEN_NAMES). */
+        --offset-pop-accent: #ff3593;
+        --offset-pop-accent-foreground: #1c1524;
+        --offset-pop-focus: #ff3593;
+        --offset-pop-canvas: #fff8ef;
+        --offset-pop-surface: #fffdf9;
+        --offset-pop-surface-secondary: #f8dbe8;
+        --offset-pop-foreground: #1c1524;
+        --offset-pop-muted: #675f6c;
+        --offset-pop-border: #1c1524;
+        --offset-pop-separator: #1c1524;
+        --offset-pop-success: #91e4ca;
+        --offset-pop-success-foreground: #1c1524;
+        --offset-pop-warning: #ffd447;
+        --offset-pop-warning-foreground: #1c1524;
+        --offset-pop-danger: #e84a5f;
+        --offset-pop-danger-foreground: #1c1524;
+        --offset-pop-info: #f8d8e6;
+        --offset-pop-info-foreground: #1c1524;
+        --offset-pop-accent-text: #b8005f;
+        --offset-pop-accent-soft: #f8dbe8;
+        --offset-pop-page-measure: 80rem;
+        --offset-pop-reading-measure: 72ch;
+        --offset-pop-page-inset: var(--grammar-page-inset);
+        --offset-pop-region-gap: var(--grammar-region-gap);
+        --offset-pop-section-gap: var(--grammar-section-gap);
+        --offset-pop-inline-gap: var(--grammar-inline-gap);
+        --offset-pop-row-gap: var(--grammar-row-gap);
         --offset-pop-surface-radius: 1.5rem;
         --offset-pop-control-radius: 1rem;
-        --offset-pop-transition: 140ms cubic-bezier(.2, .8, .2, 1);
-
-        --accent: var(--offset-pop-pink);
-        --accent-foreground: white;
-        --focus: var(--offset-pop-pink);
+        --offset-pop-pill-radius: 999px;
+        --offset-pop-surface-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-y) 0 var(--offset-pop-shadow-ink);
+        --offset-pop-motion-duration: 140ms;
+        --offset-pop-motion-easing: cubic-bezier(.2, .8, .2, 1);
+
+        /* Compatibility names from before the semantic contract. */
+        --offset-pop-surface-muted: var(--offset-pop-surface-secondary);
+        --offset-pop-transition: var(--offset-pop-motion-duration) var(--offset-pop-motion-easing);
+
+        /* HeroUI and Common anatomy resolve through the same DNA. */
+        --accent: var(--offset-pop-accent);
+        --accent-foreground: var(--offset-pop-accent-foreground);
+        --focus: var(--offset-pop-focus);
         --background: var(--offset-pop-canvas);
-        --foreground: var(--offset-pop-ink);
+        --foreground: var(--offset-pop-foreground);
         --surface: var(--offset-pop-surface);
-        --surface-foreground: var(--offset-pop-ink);
-        --surface-secondary: var(--offset-pop-surface-muted);
-        --surface-secondary-foreground: var(--offset-pop-ink);
+        --surface-foreground: var(--offset-pop-foreground);
+        --surface-secondary: var(--offset-pop-surface-secondary);
+        --surface-secondary-foreground: var(--offset-pop-foreground);
         --muted: var(--offset-pop-muted);
-        --border: var(--offset-pop-ink);
-        --separator: var(--offset-pop-ink);
-        --success: var(--offset-pop-mint);
-        --success-foreground: var(--offset-pop-ink);
-        --warning: var(--offset-pop-yellow);
-        --warning-foreground: var(--offset-pop-ink);
-        --danger: var(--offset-pop-critical);
-        --danger-foreground: white;
-        --info: var(--offset-pop-blush);
-        --info-foreground: var(--offset-pop-ink);
+        --border: var(--offset-pop-border);
+        --separator: var(--offset-pop-separator);
+        --success: var(--offset-pop-success);
+        --success-foreground: var(--offset-pop-success-foreground);
+        --warning: var(--offset-pop-warning);
+        --warning-foreground: var(--offset-pop-warning-foreground);
+        --danger: var(--offset-pop-danger);
+        --danger-foreground: var(--offset-pop-danger-foreground);
+        --info: var(--offset-pop-info);
+        --info-foreground: var(--offset-pop-info-foreground);
         --field-background: var(--offset-pop-surface);
-        --field-border: var(--offset-pop-ink);
-        --field-foreground: var(--offset-pop-ink);
+        --field-border: var(--offset-pop-border);
+        --field-foreground: var(--offset-pop-foreground);
         --field-placeholder: var(--offset-pop-muted);
         --radius: var(--offset-pop-control-radius);
         --field-radius: var(--offset-pop-control-radius);
-        --shadow-surface:
-            var(--offset-pop-shadow-x)
-            var(--offset-pop-shadow-y)
-            0
-            var(--offset-pop-shadow-ink);
+        --shadow-surface: var(--offset-pop-surface-shadow);
+
+        /*
+         * The vendor's neutral control fill (secondary and tertiary buttons, tab list, kbd) is the
+         * family's secondary surface, so the text-safe accent on a secondary button clears AA in
+         * both themes instead of reading HeroUI's own light grey.
+         */
+        --default: var(--offset-pop-surface-secondary);
+
+        /*
+         * Accent as TEXT. The pink is a fill and a ring (3.22:1 as text on the canvas), so every
+         * Common place that paints the accent as text reads the text-safe accent instead: the soft
+         * accent pairing (Text tone "accent", current choice/route/section TextAction, disclosure,
+         * selected Sidebar item, accent IconTile) and Markdown links. The soft background is the
+         * secondary surface, on which the text-safe accent still clears AA.
+         */
+        --accent-soft: var(--offset-pop-accent-soft);
+        --accent-soft-foreground: var(--offset-pop-accent-text);
+        --link: var(--offset-pop-accent-text);
 
         color: var(--foreground);
         background: var(--background);
     }
 
+    /* A real dark theme: its own canvas, surfaces and inks, not an inverted light one. */
     .grammar-common-root[data-grammar-family="offset-pop"][data-grammar-theme="dark"] {
         color-scheme: dark;
 
-        --offset-pop-canvas: #17121d;
         --offset-pop-ink: #fff8ef;
-        --offset-pop-muted: #c8bdca;
-        --offset-pop-surface: #251d2c;
-        --offset-pop-surface-muted: #3b2936;
         --offset-pop-shadow-ink: #050306;
+        --offset-pop-canvas: #17121d;
+        --offset-pop-surface: #251d2c;
+        --offset-pop-surface-secondary: #3b2936;
+        --offset-pop-foreground: #fff8ef;
+        --offset-pop-muted: #c8bdca;
+        --offset-pop-border: #fff8ef;
+        --offset-pop-separator: #fff8ef;
+        --offset-pop-success: #91e4ca;
+        --offset-pop-success-foreground: #1c1524;
+        --offset-pop-warning: #ffd447;
+        --offset-pop-warning-foreground: #1c1524;
+        --offset-pop-danger: #e84a5f;
+        --offset-pop-danger-foreground: #1c1524;
+        --offset-pop-info: #f8d8e6;
+        --offset-pop-info-foreground: #1c1524;
+        --offset-pop-accent-text: #ff7ab8;
+        --offset-pop-accent-soft: #3b2936;
     }
 
     .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Heading"][data-scale="display"] {
@@ -82,7 +152,27 @@
     }
 
     .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Text"][data-tone="accent"] {
-        color: var(--accent);
+        color: var(--offset-pop-accent-text);
+    }
+
+    /* Common paints these two with the fill accent itself; the family routes their TEXT to the text-safe one. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-section-header] .starci-core-section-eyebrow {
+        color: var(--offset-pop-accent-text);
+    }
+
+    /* The current tab keeps its pink underline (non-text, a decision mark); only the label reads the text-safe accent. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="TextAction"][data-appearance="tab"][data-current="true"] {
+        border-block-end-color: var(--offset-pop-accent);
+        color: var(--offset-pop-accent-text);
+    }
+
+    /*
+     * Every other Common rule that paints the accent as TEXT (link, current tab, bottom-nav and
+     * step, eyebrow) reads the text-safe accent too: the family re-declares the accent on those
+     * elements, so a rule the family does not restyle still never paints pink body-size text.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] :is(.starci-core-link, .starci-core-section-eyebrow, .starci-core-text-action[data-appearance="tab"][data-current="true"], .starci-core-bottom-nav-item, .starci-core-step-marker) {
+        --accent: var(--offset-pop-accent-text);
     }
 
     .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Button"] {
@@ -94,7 +184,7 @@
 
     .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Badge"] {
         border: var(--offset-pop-outline-width) solid var(--border);
-        border-radius: 999px;
+        border-radius: var(--offset-pop-pill-radius);
         color: var(--foreground);
         font-weight: 800;
     }
@@ -130,25 +220,38 @@
         letter-spacing: -.015em;
     }
 
+    /*
+     * A scrollable SurfaceListCard renders its collection AS the vertical scroll region, and the
+     * family layer outranks Common, so clipping it would override Common's overflow-y: auto
+     * (OVERFLOW-3) and stop the list scrolling. Only a list that does not scroll is clipped here.
+     */
     .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-list] {
-        overflow: clip;
         border-radius: calc(var(--offset-pop-surface-radius) - var(--offset-pop-outline-width));
     }
 
+    /* A scroll region already clips its rows to that radius through its own overflow. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-list]:not([data-grammar-scroll-region]) {
+        overflow: clip;
+    }
+
     .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-row] {
-        border-block-end: var(--offset-pop-outline-width) solid var(--separator);
         background: transparent;
     }
 
-    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-row]:last-child {
-        border-block-end: 0;
+    /*
+     * One seam per pair of rows (BOUNDARY-3). Common draws it as the between-rows top edge; the
+     * family repaints that SAME edge at its outline width instead of adding a second one below each
+     * row, so a seam is exactly one 2px line and the first and last rows have no outer edge.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-row] + [data-grammar-row] {
+        border-block-start: var(--offset-pop-outline-width) solid var(--separator);
     }
 
     .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-state-mark] {
         color: var(--success-foreground);
         background: var(--success);
         border: var(--offset-pop-outline-width) solid var(--border);
-        border-radius: 999px;
+        border-radius: var(--offset-pop-pill-radius);
     }
 
     .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-rail] {
@@ -178,8 +281,13 @@
         transform: translate(0.25rem, 0.25rem);
     }
 
-    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-surface-card][data-slot="card"] [data-grammar-frame="bounded"][data-slot="card-content"]:has([data-grammar-whole-action]:focus-visible),
-    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-row]:focus-within {
+    /*
+     * `[data-grammar-row]` is StaticStateRow's hook, a non-interactive row whose label and
+     * description are strings, so it carries no hover or focus treatment. Rows that ARE interactive
+     * (ListBox options, Select/ComboBox options, selectable DataTable rows) are the pointer and focus
+     * target themselves and take theirs from the vendor state attributes in the component sheets.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-surface-card][data-slot="card"] [data-grammar-frame="bounded"][data-slot="card-content"]:has([data-grammar-whole-action]:focus-visible) {
         outline: 2px solid var(--focus);
         outline-offset: 0.25rem;
     }
@@ -193,10 +301,6 @@
         transform: translateY(0.25rem);
     }
 
-    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-row]:has(:is(a, button):hover) {
-        background: color-mix(in srgb, var(--offset-pop-yellow) 32%, transparent);
-    }
-
     .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-state="affirmative"] {
         --offset-pop-state-color: var(--success);
     }
@@ -217,9 +321,13 @@
         box-shadow: inset 0.25rem 0 0 var(--offset-pop-state-color, transparent);
     }
 
+    /*
+     * Unavailable is not disabled: its copy is still content, so it reads in the muted ink (AA)
+     * instead of fading the whole row to ~2.3:1. The lift and the state colour edge go away.
+     */
     .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-state="unavailable"] {
         box-shadow: none;
-        opacity: .56;
+        color: var(--muted);
         transform: none;
         cursor: not-allowed;
     }
@@ -237,6 +345,7 @@
 
     @media (prefers-reduced-motion: reduce) {
         .grammar-common-root[data-grammar-family="offset-pop"] {
+            --offset-pop-motion-duration: 0ms;
             --offset-pop-transition: 0ms linear;
         }
 
@@ -252,28 +361,60 @@
         .grammar-common-root[data-grammar-family="offset-pop"][data-grammar-theme="system"] {
             color-scheme: dark;
 
-            --offset-pop-canvas: #17121d;
             --offset-pop-ink: #fff8ef;
-            --offset-pop-muted: #c8bdca;
-            --offset-pop-surface: #251d2c;
-            --offset-pop-surface-muted: #3b2936;
             --offset-pop-shadow-ink: #050306;
+            --offset-pop-canvas: #17121d;
+            --offset-pop-surface: #251d2c;
+            --offset-pop-surface-secondary: #3b2936;
+            --offset-pop-foreground: #fff8ef;
+            --offset-pop-muted: #c8bdca;
+            --offset-pop-border: #fff8ef;
+            --offset-pop-separator: #fff8ef;
+            --offset-pop-success: #91e4ca;
+            --offset-pop-success-foreground: #1c1524;
+            --offset-pop-warning: #ffd447;
+            --offset-pop-warning-foreground: #1c1524;
+            --offset-pop-danger: #e84a5f;
+            --offset-pop-danger-foreground: #1c1524;
+            --offset-pop-info: #f8d8e6;
+            --offset-pop-info-foreground: #1c1524;
+            --offset-pop-accent-text: #ff7ab8;
+            --offset-pop-accent-soft: #3b2936;
         }
     }
 
+    /* The theme-qualified selector outranks the dark and system blocks, so system colours win in every theme. */
     @media (forced-colors: active) {
-        .grammar-common-root[data-grammar-family="offset-pop"] {
-            --offset-pop-canvas: Canvas;
-            --offset-pop-ink: CanvasText;
-            --offset-pop-muted: GrayText;
-            --offset-pop-surface: Canvas;
-            --offset-pop-surface-muted: Canvas;
+        .grammar-common-root[data-grammar-family="offset-pop"],
+        .grammar-common-root[data-grammar-family="offset-pop"][data-grammar-theme] {
             --offset-pop-pink: Highlight;
+            --offset-pop-blush: Canvas;
             --offset-pop-yellow: Canvas;
             --offset-pop-mint: Canvas;
-            --offset-pop-blush: Canvas;
             --offset-pop-critical: CanvasText;
+            --offset-pop-ink: CanvasText;
             --offset-pop-shadow-ink: CanvasText;
+            --offset-pop-accent: Highlight;
+            --offset-pop-accent-foreground: HighlightText;
+            --offset-pop-focus: Highlight;
+            --offset-pop-canvas: Canvas;
+            --offset-pop-surface: Canvas;
+            --offset-pop-surface-secondary: Canvas;
+            --offset-pop-foreground: CanvasText;
+            --offset-pop-muted: GrayText;
+            --offset-pop-border: CanvasText;
+            --offset-pop-separator: CanvasText;
+            --offset-pop-success: CanvasText;
+            --offset-pop-success-foreground: Canvas;
+            --offset-pop-warning: CanvasText;
+            --offset-pop-warning-foreground: Canvas;
+            --offset-pop-danger: CanvasText;
+            --offset-pop-danger-foreground: Canvas;
+            --offset-pop-info: CanvasText;
+            --offset-pop-info-foreground: Canvas;
+            --offset-pop-accent-text: CanvasText;
+            --offset-pop-accent-soft: Canvas;
+            --offset-pop-surface-shadow: none;
             --shadow-surface: none;
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starci/grammar",
-  "version": "0.4.12",
+  "version": "0.5.0",
   "description": "Reusable StarCi React components, compositions, and packaged visual DNA.",
   "keywords": [
     "starci",
@@ -9,19 +9,24 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/starci-lab/starci-academy-fe.git",
+    "url": "git+https://github.com/starci183/starci-skills.git",
     "directory": "packages/grammar"
   },
   "bugs": {
-    "url": "https://github.com/starci-lab/starci-academy-fe/issues"
+    "url": "https://github.com/starci183/starci-skills/issues"
   },
-  "homepage": "https://github.com/starci-lab/starci-academy-fe/tree/main/packages/grammar#readme",
+  "homepage": "https://github.com/starci183/starci-skills/tree/main/packages/grammar#readme",
   "type": "module",
   "sideEffects": [
     "./dist/**/*.css"
   ],
   "files": [
     "dist",
+    "!dist/stories",
+    "!dist/__test__",
+    "!dist/**/*.stories.*",
+    "!dist/**/*.spec.*",
+    "!dist/**/*.test.*",
     "README.md",
     "LICENSE"
   ],
@@ -53,10 +58,14 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "node scripts/clean.mjs && tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
-    "typecheck": "tsc -p tsconfig.build.json --noEmit",
-    "test": "npm run build && node --test src/common/index.test.mjs src/core/index.test.mjs src/package-boundary.test.mjs && vitest run --config vitest.config.ts src/shipped-geometry.spec.ts src/core/shipped-claims.spec.tsx src/common/conformance.spec.ts src/common/styles.spec.ts src/core/family.spec.tsx src/core/styles.spec.ts src/core/surface-card-family.spec.tsx src/core/scrollable-surfaces.spec.tsx src/core/primitive/Badge/index.spec.tsx src/core/primitive/Button/index.spec.tsx src/core/primitive/Divider/index.spec.tsx src/core/primitive/Heading/index.spec.tsx src/core/primitive/Icon/index.spec.tsx src/core/primitive/IconButton/index.spec.tsx src/core/primitive/IconTile/index.spec.tsx src/core/primitive/Input/index.spec.tsx src/core/primitive/PressableField/index.spec.tsx src/core/primitive/Progress/index.spec.tsx src/core/primitive/Text/index.spec.tsx src/core/primitive/TextAction/index.spec.tsx src/core/primitive/Label/index.spec.tsx src/core/primitive/RankArtwork/index.spec.tsx src/core/composite/EmptyNotice/index.spec.tsx src/core/branch/Tabs/index.spec.tsx src/core/branch/Subnav/index.spec.tsx src/core/branch/Tooltip/index.spec.tsx src/core/composition/NavigationFeatureNav/index.spec.tsx src/core/composition/NavigationFeatureNav/styles.spec.ts src/core/composition/Sidebar/index.spec.tsx src/core/composition/Sidebar/styles.spec.ts src/core/composition/collapse.spec.tsx src/core/composition/WorkspaceShell/index.spec.tsx src/core/composition/ChatWorkspace/index.spec.tsx src/heritage/index.spec.tsx src/heritage/styles.spec.ts src/offset-pop/index.spec.tsx src/offset-pop/render.spec.tsx src/offset-pop/styles.spec.ts",
-    "prepack": "npm run typecheck && npm test"
+    "build": "node scripts/clean.mjs && tsc -p tsconfig.build.json && node scripts/copy-css.mjs && node scripts/build-stamp.mjs",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit && tsc -p tsconfig.stories.json",
+    "test": "npm run build && node --test src/common/index.test.mjs src/core/index.test.mjs src/offset-pop/index.test.mjs src/package-boundary.test.mjs && vitest run --config vitest.config.ts src/shipped-geometry.spec.ts src/core/shipped-claims.spec.tsx src/common/conformance.spec.ts src/common/styles.spec.ts src/core/family.spec.tsx src/core/styles.spec.ts src/core/surface-card-family.spec.tsx src/core/scrollable-surfaces.spec.tsx src/core/primitive/Badge/index.spec.tsx src/core/primitive/Button/index.spec.tsx src/core/primitive/Divider/index.spec.tsx src/core/primitive/Heading/index.spec.tsx src/core/primitive/Icon/index.spec.tsx src/core/primitive/IconButton/index.spec.tsx src/core/primitive/IconTile/index.spec.tsx src/core/primitive/Input/index.spec.tsx src/core/primitive/PressableField/index.spec.tsx src/core/primitive/Progress/index.spec.tsx src/core/primitive/Text/index.spec.tsx src/core/primitive/TextAction/index.spec.tsx src/core/primitive/Label/index.spec.tsx src/core/primitive/RankArtwork/index.spec.tsx src/core/composite/EmptyNotice/index.spec.tsx src/core/branch/Tabs/index.spec.tsx src/core/branch/Subnav/index.spec.tsx src/core/branch/Subnav/styles.spec.ts src/core/branch/Tooltip/index.spec.tsx src/core/composition/NavigationFeatureNav/index.spec.tsx src/core/composition/NavigationFeatureNav/styles.spec.ts src/core/composition/Sidebar/index.spec.tsx src/core/composition/Sidebar/styles.spec.ts src/core/composition/collapse.spec.tsx src/core/composition/WorkspaceShell/index.spec.tsx src/core/composition/ChatWorkspace/index.spec.tsx src/heritage/index.spec.tsx src/heritage/styles.spec.ts src/offset-pop/index.spec.tsx src/offset-pop/render.spec.tsx src/offset-pop/styles.spec.ts src/offset-pop/family.spec.tsx src/offset-pop/shipped-claims.spec.tsx src/offset-pop/surface-card-family.spec.tsx src/offset-pop/scrollable-surfaces.spec.tsx src/offset-pop/conformance.spec.ts src/core/branch/Accordion/index.spec.tsx src/core/branch/AlertDialog/index.spec.tsx src/core/branch/Calendar/index.spec.tsx src/core/branch/ComboBox/index.spec.tsx src/core/branch/DataTable/index.spec.tsx src/core/branch/DatePicker/index.spec.tsx src/core/branch/DateRangePicker/index.spec.tsx src/core/branch/Dialog/index.spec.tsx src/core/branch/Disclosure/index.spec.tsx src/core/branch/Drawer/index.spec.tsx src/core/branch/DropdownMenu/index.spec.tsx src/core/branch/ListBox/index.spec.tsx src/core/branch/Popover/index.spec.tsx src/core/branch/Select/index.spec.tsx src/core/branch/Toast/index.spec.tsx src/core/composite/Alert/index.spec.tsx src/core/composite/AvatarGroup/index.spec.tsx src/core/composite/Breadcrumbs/index.spec.tsx src/core/composite/ButtonGroup/index.spec.tsx src/core/composite/CheckboxGroup/index.spec.tsx src/core/composite/DescriptionList/index.spec.tsx src/core/composite/Fieldset/index.spec.tsx src/core/composite/Form/index.spec.tsx src/core/composite/Pagination/index.spec.tsx src/core/composite/RadioGroup/index.spec.tsx src/core/composite/SegmentedControl/index.spec.tsx src/core/composite/Stepper/index.spec.tsx src/core/composite/TagGroup/index.spec.tsx src/core/composite/Timeline/index.spec.tsx src/core/composition/BottomNav/index.spec.tsx src/core/composition/Footer/index.spec.tsx src/core/composition/TopBar/index.spec.tsx src/core/primitive/Avatar/index.spec.tsx src/core/primitive/Checkbox/index.spec.tsx src/core/primitive/CloseButton/index.spec.tsx src/core/primitive/DateField/index.spec.tsx src/core/primitive/Field/index.spec.tsx src/core/primitive/FileDropzone/index.spec.tsx src/core/primitive/Image/index.spec.tsx src/core/primitive/Kbd/index.spec.tsx src/core/primitive/Link/index.spec.tsx src/core/primitive/Meter/index.spec.tsx src/core/primitive/NumberField/index.spec.tsx src/core/primitive/ProgressCircle/index.spec.tsx src/core/primitive/Rating/index.spec.tsx src/core/primitive/SearchField/index.spec.tsx src/core/primitive/Skeleton/index.spec.tsx src/core/primitive/Slider/index.spec.tsx src/core/primitive/Spinner/index.spec.tsx src/core/primitive/Switch/index.spec.tsx src/core/primitive/Textarea/index.spec.tsx src/core/primitive/TimeField/index.spec.tsx src/offset-pop/components-forms.spec.ts src/offset-pop/components-navigation.spec.ts src/offset-pop/components-overlays.spec.ts src/core/branch/SurfaceCard/index.spec.tsx src/core/branch/SurfaceListCard/index.spec.tsx src/core/branch/SurfaceAccordionCard/index.spec.tsx src/core/branch/Rail/index.spec.tsx src/core/branch/MarkdownArticle/index.spec.tsx src/core/composite/VerticalScrollRegion/index.spec.tsx src/core/primitive/SectionHeader/index.spec.tsx src/core/OtpInput.spec.tsx src/stories/catalog.spec.ts",
+    "test:a11y": "vitest run --config vitest.a11y.config.ts",
+    "pack:check": "npm run build && node --test src/package-boundary.test.mjs",
+    "prepack": "npm run typecheck && npm test",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "engines": {
     "node": ">=20"
@@ -69,7 +78,22 @@
     "@types/react": "^19.0.0",
     "react": "^19.0.0",
     "typescript": "^5.0.0",
-    "vitest": "^4.1.11"
+    "vitest": "^4.1.11",
+    "storybook": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@chromatic-com/storybook": "latest",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-mcp": "^10.6.0",
+    "eslint-plugin-storybook": "^10.6.0",
+    "@vitest/browser-playwright": "^4",
+    "@vitest/coverage-v8": "^4",
+    "jsdom": "^30",
+    "playwright": "latest",
+    "@testing-library/react": "^16",
+    "react-dom": "^19.0.0",
+    "@internationalized/date": "^3.12.4"
   },
   "license": "MIT",
   "publishConfig": {