@starci/grammar 0.4.7 → 0.4.9

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 StarCi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 StarCi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,46 +1,46 @@
-# `@starci/grammar`
-
+# `@starci/grammar`
+
 `@starci/grammar` separates one shared, business-free UI contract from sibling visual families.
 Common owns typed props, semantics, renderer anatomy, universal states/scales, and the family
 registry. Core, Heritage, and Offset Pop implement that contract with independently scoped visual
 DNA. The package contains no routes, domain entities, product decisions, or feature-named shells.
-
-## Public entry points
-
+
+## Public entry points
+
 - `@starci/grammar/common` — shared React renderers, presentation-state helpers, and their CSS. Anonymous layout/action owners include `WorkspaceShell`, `Sidebar`, `Link`, and `TextAction`.
 - `@starci/grammar/core` — the StarCi Core family, its scoped root, DNA, and compatibility aliases.
 - `@starci/grammar/heritage` and `@starci/grammar/offset-pop` — sibling family roots,
   conformance receipts, and scoped visual overlays.
 - `@starci/grammar/common/styles.css`, `@starci/grammar/core/styles.css`,
   `@starci/grammar/heritage/styles.css`, and
-  `@starci/grammar/offset-pop/styles.css` — package stylesheets. Short `.css` export aliases are
-  also available.
-
-Install the workspace package while developing locally:
-
-```sh
-npm install ./packages/grammar
-```
-
-Import components from the focused entry point:
-
-```tsx
+  `@starci/grammar/offset-pop/styles.css` — package stylesheets. Short `.css` export aliases are
+  also available.
+
+Install the workspace package while developing locally:
+
+```sh
+npm install ./packages/grammar
+```
+
+Import components from the focused entry point:
+
+```tsx
 import {
   PageContainer,
-  PrimaryRailLayout,
-  SurfaceCard,
+  PrimaryRailLayout,
+  SurfaceCard,
 } from "@starci/grammar/common"
 import { CoreGrammarRoot } from "@starci/grammar/core"
 import "@starci/grammar/core/styles.css"
-
-export const ProductSurface = () => (
+
+export const ProductSurface = () => (
   <CoreGrammarRoot>
-    <PageContainer>
-      <PrimaryRailLayout
-        primary={<SurfaceCard ariaLabel="Main">...</SurfaceCard>}
-        rail={<SurfaceCard ariaLabel="Progress">...</SurfaceCard>}
-      />
-    </PageContainer>
+    <PageContainer>
+      <PrimaryRailLayout
+        primary={<SurfaceCard ariaLabel="Main">...</SurfaceCard>}
+        rail={<SurfaceCard ariaLabel="Progress">...</SurfaceCard>}
+      />
+    </PageContainer>
   </CoreGrammarRoot>
 )
 ```
@@ -56,24 +56,24 @@ Heritage and Offset Pop replace only the neutral family root; every other Common
 contract is inherited. Each family stylesheet imports Common anatomy directly and never imports a
 sibling family stylesheet.
 
-`IncludedMark` is the purpose-named 20px outlined circle-check for included offering content; it
-inherits foreground and never claims completion. `SurfaceCopyGroup` packages Core's compact `0.5rem`
-title/explanation rhythm. A `SurfaceCard` without `wholeAction` identifies itself as `static`, which
-is the appropriate comparison surface when its short facts must remain visible together.
-
+`IncludedMark` is the purpose-named 20px outlined circle-check for included offering content; it
+inherits foreground and never claims completion. `SurfaceCopyGroup` packages Core's compact `0.5rem`
+title/explanation rhythm. A `SurfaceCard` without `wholeAction` identifies itself as `static`, which
+is the appropriate comparison surface when its short facts must remain visible together.
+
 Common components accept ordinary typed React props and keep semantic DOM and accessibility behavior.
 The application translates business data into those props; a family changes presentation only.
 `MediaFrame` presents an already selected asset and never decides whether to generate one. The
 machine-checkable `COMMON_UI_RULE_IDS`/`defineGrammarRuleConformance` boundary verifies that each
 family accounts for the canonical UI X-n catalog without copying the laws into package code.
-
-## Package checks
-
-```sh
-npm run typecheck
-npm test
-npm pack --dry-run
-```
-
-The package requires Node.js 20 or newer and has peer dependencies on React 18+ and
-`@heroui/react` 3.2+.
+
+## Package checks
+
+```sh
+npm run typecheck
+npm test
+npm pack --dry-run
+```
+
+The package requires Node.js 20 or newer and has peer dependencies on React 18+ and
+`@heroui/react` 3.2+.

package/dist/common/styles.css

@@ -1195,10 +1195,17 @@
     }
 
     @container starci-core-primary-rail (max-width: 32rem) {
+        /*
+         * Collapsed to a column, the header stays a region boundary, not a tighter internal
+         * rhythm - `PrimaryRailLayout` and `WorkspaceShell` both hold `--starci-core-region-gap`
+         * across every collapse tier and only ever change track/area, never the gap itself. The
+         * stamped `data-contract="GAP-5"` on this root must stay true here too, so this rule may
+         * change direction and alignment but not the gap value.
+         */
         .starci-core-section-header {
             align-items: flex-start;
             flex-direction: column;
-            gap: 0.75rem;
+            gap: var(--starci-core-region-gap, 1.5rem);
         }
     }
 

package/dist/core/branch/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/Tabs/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUpF,mEAAmE;AACnE,MAAM,MAAM,OAAO,GAAG;IAClB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAC/B,CAAA;AAED,8EAA8E;AAC9E,MAAM,MAAM,SAAS,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,4FAA4F;IAC5F,QAAQ,CAAC,eAAe,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IAClD,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACnC,CAAA;AAED,qFAAqF;AACrF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,gCAgDpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/Tabs/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUpF,mEAAmE;AACnE,MAAM,MAAM,OAAO,GAAG;IAClB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAC/B,CAAA;AAED,8EAA8E;AAC9E,MAAM,MAAM,SAAS,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,4FAA4F;IAC5F,QAAQ,CAAC,eAAe,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IAClD,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACnC,CAAA;AAED,qFAAqF;AACrF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,gCAwEpC,CAAA"}

package/dist/core/branch/Tabs/index.js

@@ -10,19 +10,47 @@ export const Tabs = (props) => {
     const frameRef = useRef(null);
     useEffect(() => setIsClientReady(true), []);
     useLayoutEffect(() => {
-        if (!isClientReady || props.panelId === undefined)
+        const frame = frameRef.current;
+        const panelId = props.panelId;
+        if (!isClientReady || frame === null || panelId === undefined)
             return;
-        frameRef.current?.querySelectorAll("[data-grammar-tab-id]").forEach((identity) => {
-            const itemId = identity.dataset.grammarTabId;
-            const tab = identity.closest("[role='tab']");
-            if (itemId !== undefined && tab !== null)
-                tab.setAttribute("aria-controls", props.panelId?.(itemId) ?? "");
-        });
-    }, [isClientReady, props.items, props.panelId]);
+        // HeroUI's collection may mount or update after this layout effect. Observe
+        // only the owned relationship, preserving the actual vendor value for cleanup.
+        const relationships = new Map();
+        const syncPanelIds = () => {
+            frame.querySelectorAll("[data-grammar-tab-id]").forEach((identity) => {
+                const itemId = identity.dataset.grammarTabId;
+                const tab = identity.closest("[role='tab']");
+                if (itemId === undefined || tab === null)
+                    return;
+                const current = tab.getAttribute("aria-controls");
+                const previous = relationships.get(tab);
+                const expected = panelId(itemId);
+                const original = previous !== undefined && current === previous.applied ? previous.original : current;
+                relationships.set(tab, { original, applied: expected });
+                if (current !== expected)
+                    tab.setAttribute("aria-controls", expected);
+            });
+        };
+        const observer = new MutationObserver(syncPanelIds);
+        observer.observe(frame, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-controls", "data-grammar-tab-id"] });
+        syncPanelIds();
+        return () => {
+            observer.disconnect();
+            relationships.forEach(({ original, applied }, tab) => {
+                if (tab.getAttribute("aria-controls") !== applied)
+                    return;
+                if (original === null)
+                    tab.removeAttribute("aria-controls");
+                else
+                    tab.setAttribute("aria-controls", original);
+            });
+        };
+    }, [isClientReady, props.items, props.panelId, props.selectedKey]);
     const inset = props.inset ?? "none";
     const frameContract = inset === "page" ? "PADDING-5" : undefined;
     if (!isClientReady)
         return _jsx("div", { "aria-hidden": "true", className: tabsFrameClassName, "data-contract": frameContract, "data-grammar-tabs": "true", "data-grammar-tabs-client": "pending", "data-grammar-tabs-inset": inset, style: { minHeight: "3rem" } });
-    return _jsx("div", { ref: frameRef, className: tabsFrameClassName, "data-contract": frameContract, "data-grammar-tabs": "true", "data-grammar-tabs-client": "ready", "data-grammar-tabs-inset": inset, "data-grammar-tab-labels": props.labelVisibility ?? "responsive", children: _jsx(HorizontalScrollRegion, { className: tabsScrollClassName, "data-contract": "OVERFLOW-4", "data-grammar-tabs-overflow": "scroll", hideScrollBar: true, children: _jsx(HeroTabs, { variant: "secondary", selectedKey: props.selectedKey, onSelectionChange: (key) => props.onSelect?.(String(key)), className: tabsClassName ?? "", "data-contract": "FLOW-2", children: _jsx(HeroTabs.ListContainer, { children: _jsx(HeroTabs.List, { "aria-label": props.label, children: props.items.map((item) => (_jsxs(HeroTabs.Tab, { id: item.id, "aria-label": item.label, "aria-controls": props.panelId?.(item.id), "data-contract": "PADDING-3", children: [_jsxs("span", { className: tabContentClassName, "data-contract": "GAP-2", "data-grammar-tab-id": item.id, children: [item.leading, _jsx("span", { className: tabLabelClassName, style: props.labelVisibility === "always" ? { display: "inline" } : undefined, children: item.label })] }), _jsx(HeroTabs.Indicator, {})] }, item.id))) }) }) }) }) });
+    return _jsx("div", { ref: frameRef, className: tabsFrameClassName, "data-contract": frameContract, "data-grammar-tabs": "true", "data-grammar-tabs-client": "ready", "data-grammar-tabs-inset": inset, "data-grammar-tab-labels": props.labelVisibility ?? "responsive", children: _jsx(HorizontalScrollRegion, { className: tabsScrollClassName, "data-contract": "OVERFLOW-4", "data-grammar-tabs-overflow": "scroll", hideScrollBar: true, children: _jsx(HeroTabs, { variant: "secondary", selectedKey: props.selectedKey, onSelectionChange: (key) => props.onSelect?.(String(key)), className: tabsClassName ?? "", "data-contract": "FLOW-2", children: _jsx(HeroTabs.ListContainer, { children: _jsx(HeroTabs.List, { "aria-label": props.label, children: props.items.map((item) => (_jsxs(HeroTabs.Tab, { id: item.id, "aria-label": item.label, "data-contract": "PADDING-3", children: [_jsxs("span", { className: tabContentClassName, "data-contract": "GAP-2", "data-grammar-tab-id": item.id, children: [item.leading, _jsx("span", { className: tabLabelClassName, style: props.labelVisibility === "always" ? { display: "inline" } : undefined, children: item.label })] }), _jsx(HeroTabs.Indicator, {})] }, item.id))) }) }) }) }) });
 };
 //# sourceMappingURL=index.js.map

package/dist/core/branch/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/branch/Tabs/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/branch/Tabs/index.tsx"],"names":[],"mappings":"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"}

package/dist/core/styles.css

@@ -1,97 +1,97 @@
 @import "../common/styles.css";
 
 @layer starci-grammar-core {
-    /*
-     * StarCi visual DNA is opt-in through GrammarRoot. It supplies a complete,
-     * portable semantic theme while keeping product/UI laws out of CSS.
-     */
+    /*
+     * StarCi visual DNA is opt-in through GrammarRoot. It supplies a complete,
+     * portable semantic theme while keeping product/UI laws out of CSS.
+     */
     .grammar-common-root[data-grammar-family="core"] {
-        color-scheme: light;
-
-        --starci-core-accent: #7547ff;
-        --starci-core-accent-foreground: oklch(100% 0 0);
-        --starci-core-focus: #7248ff;
-        --starci-core-canvas: oklch(97.02% 0.0015 354.13);
-        --starci-core-surface: oklch(100% 0.0008 354.13);
-        --starci-core-surface-secondary: oklch(95.24% 0.0012 354.13);
-        --starci-core-foreground: oklch(21.03% 0.0015 354.13);
-        --starci-core-muted: oklch(55.17% 0.003 354.13);
-        --starci-core-border: oklch(90% 0.0015 354.13);
-        --starci-core-separator: oklch(92% 0.0015 354.13);
-        --starci-core-success: oklch(73.29% 0.1941 162.85);
-        --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
-        --starci-core-warning: oklch(78.19% 0.159 84.37);
-        --starci-core-warning-foreground: oklch(21.03% 0.0059 84.37);
-        --starci-core-danger: oklch(65.32% 0.2335 37.78);
-        --starci-core-danger-foreground: oklch(99.11% 0 0);
-        --starci-core-info: oklch(72% 0.17 250);
-        --starci-core-info-foreground: oklch(21.03% 0.0059 250);
-        --starci-core-page-measure: 80rem;
-        --starci-core-reading-measure: 72ch;
+        color-scheme: light;
+
+        --starci-core-accent: #7547ff;
+        --starci-core-accent-foreground: oklch(100% 0 0);
+        --starci-core-focus: #7248ff;
+        --starci-core-canvas: oklch(97.02% 0.0015 354.13);
+        --starci-core-surface: oklch(100% 0.0008 354.13);
+        --starci-core-surface-secondary: oklch(95.24% 0.0012 354.13);
+        --starci-core-foreground: oklch(21.03% 0.0015 354.13);
+        --starci-core-muted: oklch(55.17% 0.003 354.13);
+        --starci-core-border: oklch(90% 0.0015 354.13);
+        --starci-core-separator: oklch(92% 0.0015 354.13);
+        --starci-core-success: oklch(73.29% 0.1941 162.85);
+        --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
+        --starci-core-warning: oklch(78.19% 0.159 84.37);
+        --starci-core-warning-foreground: oklch(21.03% 0.0059 84.37);
+        --starci-core-danger: oklch(65.32% 0.2335 37.78);
+        --starci-core-danger-foreground: oklch(99.11% 0 0);
+        --starci-core-info: oklch(72% 0.17 250);
+        --starci-core-info-foreground: oklch(21.03% 0.0059 250);
+        --starci-core-page-measure: 80rem;
+        --starci-core-reading-measure: 72ch;
         --starci-core-page-inset: var(--grammar-page-inset);
         --starci-core-region-gap: var(--grammar-region-gap);
         --starci-core-section-gap: var(--grammar-section-gap);
         --starci-core-inline-gap: var(--grammar-inline-gap);
         --starci-core-row-gap: var(--grammar-row-gap);
-        --starci-core-surface-radius: 1rem;
-        --starci-core-control-radius: 0.75rem;
-        --starci-core-pill-radius: 999px;
-        --starci-core-surface-shadow: 0 8px 28px oklch(21.03% 0.0059 354.13 / 0.07);
-        --starci-core-motion-duration: 180ms;
-        --starci-core-motion-easing: cubic-bezier(0.2, 0, 0, 1);
-
-        /* HeroUI and existing Grammar anatomy resolve through the same DNA. */
-        --accent: var(--starci-core-accent);
-        --accent-foreground: var(--starci-core-accent-foreground);
-        --focus: var(--starci-core-focus);
-        --background: var(--starci-core-canvas);
-        --foreground: var(--starci-core-foreground);
-        --surface: var(--starci-core-surface);
-        --surface-foreground: var(--starci-core-foreground);
-        --surface-secondary: var(--starci-core-surface-secondary);
-        --surface-secondary-foreground: var(--starci-core-foreground);
-        --muted: var(--starci-core-muted);
-        --border: var(--starci-core-border);
-        --separator: var(--starci-core-separator);
-        --success: var(--starci-core-success);
-        --success-foreground: var(--starci-core-success-foreground);
-        --warning: var(--starci-core-warning);
-        --warning-foreground: var(--starci-core-warning-foreground);
-        --danger: var(--starci-core-danger);
-        --danger-foreground: var(--starci-core-danger-foreground);
-        --info: var(--starci-core-info);
-        --info-foreground: var(--starci-core-info-foreground);
-        --field-background: var(--starci-core-surface);
-        --field-border: transparent;
-        --field-foreground: var(--starci-core-foreground);
-        --field-placeholder: var(--starci-core-muted);
-        --radius: var(--starci-core-control-radius);
-        --field-radius: var(--starci-core-control-radius);
-        --shadow-surface: var(--starci-core-surface-shadow);
-
-        min-width: 0;
-        background: var(--starci-core-canvas);
-        color: var(--starci-core-foreground);
-        font-family: var(--starci-font-sans, ui-sans-serif, system-ui, sans-serif);
-    }
-
+        --starci-core-surface-radius: 1rem;
+        --starci-core-control-radius: 0.75rem;
+        --starci-core-pill-radius: 999px;
+        --starci-core-surface-shadow: 0 8px 28px oklch(21.03% 0.0059 354.13 / 0.07);
+        --starci-core-motion-duration: 180ms;
+        --starci-core-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+
+        /* HeroUI and existing Grammar anatomy resolve through the same DNA. */
+        --accent: var(--starci-core-accent);
+        --accent-foreground: var(--starci-core-accent-foreground);
+        --focus: var(--starci-core-focus);
+        --background: var(--starci-core-canvas);
+        --foreground: var(--starci-core-foreground);
+        --surface: var(--starci-core-surface);
+        --surface-foreground: var(--starci-core-foreground);
+        --surface-secondary: var(--starci-core-surface-secondary);
+        --surface-secondary-foreground: var(--starci-core-foreground);
+        --muted: var(--starci-core-muted);
+        --border: var(--starci-core-border);
+        --separator: var(--starci-core-separator);
+        --success: var(--starci-core-success);
+        --success-foreground: var(--starci-core-success-foreground);
+        --warning: var(--starci-core-warning);
+        --warning-foreground: var(--starci-core-warning-foreground);
+        --danger: var(--starci-core-danger);
+        --danger-foreground: var(--starci-core-danger-foreground);
+        --info: var(--starci-core-info);
+        --info-foreground: var(--starci-core-info-foreground);
+        --field-background: var(--starci-core-surface);
+        --field-border: transparent;
+        --field-foreground: var(--starci-core-foreground);
+        --field-placeholder: var(--starci-core-muted);
+        --radius: var(--starci-core-control-radius);
+        --field-radius: var(--starci-core-control-radius);
+        --shadow-surface: var(--starci-core-surface-shadow);
+
+        min-width: 0;
+        background: var(--starci-core-canvas);
+        color: var(--starci-core-foreground);
+        font-family: var(--starci-font-sans, ui-sans-serif, system-ui, sans-serif);
+    }
+
     .grammar-common-root[data-grammar-family="core"][data-grammar-theme="dark"] {
-        color-scheme: dark;
-        --starci-core-canvas: oklch(12% 0.0015 354.13);
-        --starci-core-surface: oklch(21.03% 0.003 354.13);
-        --starci-core-surface-secondary: oklch(25.7% 0.0023 354.13);
-        --starci-core-foreground: oklch(99.11% 0.0015 354.13);
-        --starci-core-muted: oklch(70.5% 0.003 354.13);
-        --starci-core-border: oklch(28% 0.0015 354.13);
-        --starci-core-separator: oklch(25% 0.0015 354.13);
-        --starci-core-success: oklch(73.29% 0.1941 162.85);
-        --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
-        --starci-core-warning: oklch(82.03% 0.1392 88.38);
-        --starci-core-warning-foreground: oklch(21.03% 0.0059 88.38);
-        --starci-core-danger: oklch(59.4% 0.1973 36.67);
-        --starci-core-danger-foreground: oklch(99.11% 0 0);
-        --starci-core-info: oklch(72% 0.17 250);
-        --starci-core-info-foreground: oklch(21.03% 0.0059 250);
+        color-scheme: dark;
+        --starci-core-canvas: oklch(12% 0.0015 354.13);
+        --starci-core-surface: oklch(21.03% 0.003 354.13);
+        --starci-core-surface-secondary: oklch(25.7% 0.0023 354.13);
+        --starci-core-foreground: oklch(99.11% 0.0015 354.13);
+        --starci-core-muted: oklch(70.5% 0.003 354.13);
+        --starci-core-border: oklch(28% 0.0015 354.13);
+        --starci-core-separator: oklch(25% 0.0015 354.13);
+        --starci-core-success: oklch(73.29% 0.1941 162.85);
+        --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
+        --starci-core-warning: oklch(82.03% 0.1392 88.38);
+        --starci-core-warning-foreground: oklch(21.03% 0.0059 88.38);
+        --starci-core-danger: oklch(59.4% 0.1973 36.67);
+        --starci-core-danger-foreground: oklch(99.11% 0 0);
+        --starci-core-info: oklch(72% 0.17 250);
+        --starci-core-info-foreground: oklch(21.03% 0.0059 250);
     }
 
     /* StarCi labelled surfaces paint one material box around label and content. */
@@ -121,49 +121,49 @@
         background: transparent;
         box-shadow: none;
     }
-
-@media (prefers-color-scheme: dark) {
+
+@media (prefers-color-scheme: dark) {
         .grammar-common-root[data-grammar-family="core"][data-grammar-theme="system"] {
-            color-scheme: dark;
-            --starci-core-canvas: oklch(12% 0.0015 354.13);
-            --starci-core-surface: oklch(21.03% 0.003 354.13);
-            --starci-core-surface-secondary: oklch(25.7% 0.0023 354.13);
-            --starci-core-foreground: oklch(99.11% 0.0015 354.13);
-            --starci-core-muted: oklch(70.5% 0.003 354.13);
-            --starci-core-border: oklch(28% 0.0015 354.13);
-            --starci-core-separator: oklch(25% 0.0015 354.13);
-            --starci-core-success: oklch(73.29% 0.1941 162.85);
-            --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
-            --starci-core-warning: oklch(82.03% 0.1392 88.38);
-            --starci-core-warning-foreground: oklch(21.03% 0.0059 88.38);
-            --starci-core-danger: oklch(59.4% 0.1973 36.67);
-            --starci-core-danger-foreground: oklch(99.11% 0 0);
-            --starci-core-info: oklch(72% 0.17 250);
-            --starci-core-info-foreground: oklch(21.03% 0.0059 250);
-        }
-    }
-
-    @media (forced-colors: active) {
+            color-scheme: dark;
+            --starci-core-canvas: oklch(12% 0.0015 354.13);
+            --starci-core-surface: oklch(21.03% 0.003 354.13);
+            --starci-core-surface-secondary: oklch(25.7% 0.0023 354.13);
+            --starci-core-foreground: oklch(99.11% 0.0015 354.13);
+            --starci-core-muted: oklch(70.5% 0.003 354.13);
+            --starci-core-border: oklch(28% 0.0015 354.13);
+            --starci-core-separator: oklch(25% 0.0015 354.13);
+            --starci-core-success: oklch(73.29% 0.1941 162.85);
+            --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
+            --starci-core-warning: oklch(82.03% 0.1392 88.38);
+            --starci-core-warning-foreground: oklch(21.03% 0.0059 88.38);
+            --starci-core-danger: oklch(59.4% 0.1973 36.67);
+            --starci-core-danger-foreground: oklch(99.11% 0 0);
+            --starci-core-info: oklch(72% 0.17 250);
+            --starci-core-info-foreground: oklch(21.03% 0.0059 250);
+        }
+    }
+
+    @media (forced-colors: active) {
         .grammar-common-root[data-grammar-family="core"] {
-            --starci-core-accent: Highlight;
-            --starci-core-focus: Highlight;
-            --starci-core-canvas: Canvas;
-            --starci-core-surface: Canvas;
-            --starci-core-surface-secondary: Canvas;
-            --starci-core-foreground: CanvasText;
-            --starci-core-muted: GrayText;
-            --starci-core-border: CanvasText;
-            --starci-core-separator: CanvasText;
-            --starci-core-success: CanvasText;
-            --starci-core-success-foreground: Canvas;
-            --starci-core-warning: CanvasText;
-            --starci-core-warning-foreground: Canvas;
-            --starci-core-danger: CanvasText;
-            --starci-core-danger-foreground: Canvas;
-            --starci-core-info: CanvasText;
-            --starci-core-info-foreground: Canvas;
-            --starci-core-surface-shadow: none;
-        }
-    }
-}
-
+            --starci-core-accent: Highlight;
+            --starci-core-focus: Highlight;
+            --starci-core-canvas: Canvas;
+            --starci-core-surface: Canvas;
+            --starci-core-surface-secondary: Canvas;
+            --starci-core-foreground: CanvasText;
+            --starci-core-muted: GrayText;
+            --starci-core-border: CanvasText;
+            --starci-core-separator: CanvasText;
+            --starci-core-success: CanvasText;
+            --starci-core-success-foreground: Canvas;
+            --starci-core-warning: CanvasText;
+            --starci-core-warning-foreground: Canvas;
+            --starci-core-danger: CanvasText;
+            --starci-core-danger-foreground: Canvas;
+            --starci-core-info: CanvasText;
+            --starci-core-info-foreground: Canvas;
+            --starci-core-surface-shadow: none;
+        }
+    }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starci/grammar",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Reusable StarCi React components, compositions, and packaged visual DNA.",
   "keywords": [
     "starci",