@starci/grammar 0.2.0 → 0.4.1

package/dist/core/styles.css

@@ -1,242 +1,169 @@
-@layer starci-grammar-core {
-    .starci-core-surface-card,
-    .starci-core-surface-list {
-        container-name: starci-core-surface;
-        container-type: inline-size;
-        display: flex;
-        min-width: 0;
-        width: 100%;
-        flex-direction: column;
-        gap: var(--starci-core-section-gap, 0.75rem);
-    }
-
-    .starci-core-surface-label {
-        display: flex;
-        min-width: 0;
-        align-items: baseline;
-        justify-content: space-between;
-        gap: var(--starci-core-inline-gap, 0.5rem);
-    }
-
-    .starci-core-surface-label > :first-child {
-        min-width: 0;
-        margin: 0;
-    }
-
-    .starci-core-surface {
-        position: relative;
-        min-width: 0;
-        overflow: hidden;
-        border-radius: var(--starci-core-surface-radius, 1rem);
-        background: var(--surface, Canvas);
-        color: var(--surface-foreground, CanvasText);
-    }
-
-    .starci-core-surface[data-grammar-surface-depth="top"] {
-        border: 0;
-        box-shadow: var(--starci-core-surface-shadow, var(--shadow-surface, 0 1px 3px rgb(0 0 0 / 0.16)));
-    }
-
-    .starci-core-surface[data-grammar-surface-depth="nested"] {
-        border: 1px solid var(--border, GrayText);
-        box-shadow: none;
-    }
+@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.
+     */
+    .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;
+        --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);
 
-    .starci-core-surface-content {
         min-width: 0;
-        padding: var(--starci-core-surface-inset, 1rem);
-    }
-
-    .starci-core-surface.starci-core-frameless-surface {
-        position: relative;
-        min-width: 0;
-        overflow: visible;
-        border: 0;
-        border-radius: 0;
-        background: transparent;
-        box-shadow: none;
-        color: inherit;
+        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);
     }
 
-    .starci-core-frameless-surface > .starci-core-surface-content {
-        padding: 0;
-    }
-
-    [data-grammar-scroll="contained"] {
-        max-height: var(--starci-core-contained-max-height, none);
+    /* StarCi labelled surfaces paint one material box around label and content. */
+    .grammar-common-root[data-grammar-family="core"]
+        .starci-core-surface-card[data-grammar-surface-labelled="true"][data-grammar-frame="bounded"] {
         overflow: hidden;
+        border-radius: var(--starci-core-surface-radius, 1rem);
+        background: var(--starci-core-surface, var(--surface, Canvas));
+        box-shadow: var(--starci-core-surface-shadow, var(--shadow-surface, none));
     }
 
-    [data-grammar-scroll="contained"] > .starci-core-surface-content {
-        min-height: 0;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-    }
-
-    [data-grammar-whole-action] {
-        position: absolute;
-        z-index: 1;
-        inset: 0;
-        border: 0;
-        border-radius: inherit;
-        background: transparent;
-        color: inherit;
-        cursor: pointer;
-    }
-
-    [data-grammar-whole-action]:focus-visible {
-        outline: 2px solid var(--focus, Highlight);
-        outline-offset: -2px;
-    }
-
-    [data-grammar-whole-action][aria-disabled="true"],
-    [data-grammar-whole-action]:disabled {
-        cursor: not-allowed;
-    }
-
-    [data-grammar-state="unavailable"] {
-        opacity: var(--starci-core-disabled-opacity, 0.55);
-    }
-
-    [data-grammar-state="pending"] {
-        cursor: progress;
-    }
-
-    .starci-core-list-shell {
-        padding: 0;
-    }
-
-    .starci-core-static-list {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        flex-direction: column;
-        list-style: none;
-    }
-
-    .starci-core-owned-collection {
-        min-width: 0;
-    }
-
-    .starci-core-surface-footer {
-        min-width: 0;
-    }
-
-    .starci-core-static-row,
-    .starci-core-empty-row {
-        display: flex;
-        min-width: 0;
-        margin: 0;
-        align-items: flex-start;
-        gap: var(--starci-core-row-gap, 0.75rem);
-        padding: var(--starci-core-row-inset, 1rem);
-    }
-
-    .starci-core-static-row + .starci-core-static-row {
-        border-top: 1px solid var(--separator, var(--border, GrayText));
-    }
-
-    .starci-core-static-row-copy {
-        display: flex;
-        min-width: 0;
-        flex: 1;
-        flex-direction: column;
-        gap: var(--starci-core-copy-gap, 0.25rem);
-    }
-
-    .starci-core-static-row-copy > :last-child:not(:first-child) {
-        color: var(--muted, GrayText);
-    }
-
-    [data-grammar-state-mark="check"] {
-        width: 1.25rem;
-        height: 1.25rem;
-        flex: none;
-        color: var(--success, #15803d);
-    }
-
-    .starci-core-rail {
-        container-name: starci-core-rail;
-        container-type: inline-size;
-        width: 100%;
-        min-width: 0;
-    }
-
-    .starci-core-rail[data-grammar-rail-width="compact"] {
-        max-width: var(--starci-core-rail-compact, 16rem);
-    }
-
-    .starci-core-rail[data-grammar-collapse="collapsed"] {
-        max-width: var(--starci-core-rail-collapsed, 4rem);
-    }
-
-    .starci-core-rail[data-grammar-rail-width="standard"] {
-        max-width: var(--starci-core-rail-standard, 20rem);
-    }
-
-    .starci-core-rail[data-grammar-rail-width="wide"] {
-        max-width: var(--starci-core-rail-wide, 24rem);
-    }
-
-    .starci-core-rail-frame {
-        display: flex;
-        min-width: 0;
-        max-height: calc(100dvh - var(--starci-core-rail-offset, 5.5rem) - 1.5rem);
-        flex-direction: column;
-        gap: var(--starci-core-rail-gap, 1rem);
-    }
-
-    .starci-core-rail[data-grammar-rail-mode="sticky"] .starci-core-rail-frame {
-        position: sticky;
-        top: var(--starci-core-rail-offset, 5.5rem);
-    }
-
-    .starci-core-rail-body {
-        min-height: 0;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-    }
-
-    .starci-core-rail-footer {
-        flex: none;
+    .grammar-common-root[data-grammar-family="core"]
+        .starci-core-surface-card[data-grammar-surface-labelled="true"][data-grammar-frame="bounded"]
+        > [data-grammar-surface-label] {
+        padding: var(--starci-core-surface-inset, 1rem) var(--starci-core-surface-inset, 1rem) 0;
     }
 
-    .starci-core-rail :where(button, [role="button"]) {
-        min-inline-size: 44px;
-        min-block-size: 44px;
+    .grammar-common-root[data-grammar-family="core"]
+        .starci-core-surface-card[data-grammar-surface-labelled="true"][data-grammar-frame="bounded"]
+        > [data-grammar-frame="bounded"],
+    .grammar-common-root[data-grammar-family="core"]
+        .starci-core-surface-card[data-grammar-surface-labelled="true"][data-grammar-frame="bounded"]
+        > [data-grammar-highlight="true"]
+        > [data-grammar-frame="bounded"] {
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
     }
 
-    @container starci-core-surface (max-width: 28rem) {
-        .starci-core-surface-label {
-            align-items: flex-start;
-            flex-direction: column;
-        }
-
-        .starci-core-static-row {
-            gap: var(--starci-core-row-gap-compact, 0.5rem);
+@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);
         }
     }
 
-    @container starci-core-rail (max-width: 18rem) {
-        .starci-core-rail-frame {
-            gap: var(--starci-core-rail-gap-compact, 0.75rem);
+    @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;
         }
     }
+}
 
-    @media (max-width: 47.999rem) {
-        .starci-core-rail[data-grammar-rail-mode="sticky"] .starci-core-rail-frame {
-            position: static;
-            max-height: none;
-        }
-
-        .starci-core-rail-body {
-            overflow-y: visible;
-        }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        [data-grammar-motion="animated"] {
-            scroll-behavior: auto;
-        }
-    }
-}

package/dist/heritage/index.d.ts

@@ -0,0 +1,27 @@
+import { type GrammarRootProps } from "../common/index.js";
+/** Resolved institutional identity; destination behavior remains with the consumer. */
+export type HeritageBrandProps = {
+    readonly name: string;
+    readonly descriptor: string;
+    readonly logo: {
+        readonly src: string;
+        readonly width: number;
+        readonly height: number;
+    };
+};
+/** Official product-neutral Heritage family contract. */
+export declare const heritageGrammar: import("../common/registry.js").GrammarFamilyContract<"heritage", {
+    readonly Brand: import("react").FunctionComponent<HeritageBrandProps>;
+}>;
+export declare const heritageRuleConformance: Readonly<{
+    familyId: string;
+    inheritedCommonRules: readonly string[];
+    familyEvidence: Readonly<{
+        [x: string]: readonly string[];
+    }>;
+}>;
+export declare const HeritageGrammarRoot: ({ className, theme, ...props }: GrammarRootProps) => import("react").JSX.Element;
+export declare const HeritageButton: (props: import("../common/renderers.js").ButtonProps) => import("react").JSX.Element;
+export declare const HeritageHeading: ({ children, level, scale, isSkeleton, isVisuallyHidden, }: import("../common/renderers.js").HeadingProps) => import("react").JSX.Element;
+export declare const HeritageBrand: import("react").FunctionComponent<HeritageBrandProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/heritage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/heritage/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,gBAAgB,EACxB,MAAM,oBAAoB,CAAA;AAG3B,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE;QACX,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;QACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;QACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAC1B,CAAA;CACJ,CAAA;AAoBD,yDAAyD;AACzD,eAAO,MAAM,eAAe;;EAc1B,CAAA;AAWF,eAAO,MAAM,uBAAuB;;;;;;EAIlC,CAAA;AAEF,eAAO,MAAM,mBAAmB,mFAAyC,CAAA;AACzE,eAAO,MAAM,cAAc,sFAAoC,CAAA;AAC/D,eAAO,MAAM,eAAe,2IAAqC,CAAA;AACjE,eAAO,MAAM,aAAa,uDAAmC,CAAA"}

package/dist/heritage/index.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COMMON_GRAMMAR_COMPONENTS, COMMON_UI_RULE_IDS, defineGrammarFamily, defineGrammarRuleConformance, } from "../common/index.js";
+import { createElement } from "react";
+const HeritageGrammarRootRenderer = (props) => {
+    const CommonGrammarRoot = COMMON_GRAMMAR_COMPONENTS.GrammarRoot;
+    return createElement(CommonGrammarRoot, { ...props, "data-grammar-family": "heritage" });
+};
+/** Family extension for non-interactive brand content inside a consumer-owned destination. */
+const HeritageBrandRenderer = ({ name, descriptor, logo }) => (_jsxs("span", { "data-family-component": "Brand", children: [_jsx("span", { "data-family-part": "brand-mark", "aria-hidden": "true", children: _jsx("img", { src: logo.src, alt: "", width: logo.width, height: logo.height }) }), _jsxs("span", { "data-family-part": "brand-copy", children: [_jsx("strong", { children: name }), _jsx("span", { children: descriptor })] })] }));
+/** Official product-neutral Heritage family contract. */
+export const heritageGrammar = defineGrammarFamily({
+    id: "heritage",
+    styles: {
+        entrypoint: "@starci/grammar/heritage/styles.css",
+        scope: { attribute: "data-grammar-family", value: "heritage" },
+    },
+    components: {
+        replacements: {
+            GrammarRoot: HeritageGrammarRootRenderer,
+        },
+        extensions: {
+            Brand: HeritageBrandRenderer,
+        },
+    },
+});
+const HERITAGE_FAMILY_EVIDENCE = {
+    "A11Y-4": ["Brand is non-interactive and its supplied image is decorative."],
+    "BOUNDARY-1": ["Heritage surfaces bind material only through emitted Common surface hooks."],
+    "COLOR-5": ["Heritage owns scoped light, dark, system, and forced-color variables."],
+    "FOCUS-1": ["Heritage binds the shared visible focus variable without replacing focus ownership."],
+    "GAP-2": ["Brand anatomy uses the invariant Common spacing tokens."],
+    "MEDIA-6": ["Brand receives approved logo identity; asset generation remains outside Grammar."],
+};
+export const heritageRuleConformance = defineGrammarRuleConformance({
+    familyId: "heritage",
+    inheritedCommonRules: COMMON_UI_RULE_IDS.filter((rule) => !(rule in HERITAGE_FAMILY_EVIDENCE)),
+    familyEvidence: HERITAGE_FAMILY_EVIDENCE,
+});
+export const HeritageGrammarRoot = heritageGrammar.components.GrammarRoot;
+export const HeritageButton = heritageGrammar.components.Button;
+export const HeritageHeading = heritageGrammar.components.Heading;
+export const HeritageBrand = heritageGrammar.components.Brand;
+//# sourceMappingURL=index.js.map

package/dist/heritage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/heritage/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EACH,yBAAyB,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,4BAA4B,GAG/B,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAarC,MAAM,2BAA2B,GAA+C,CAAC,KAAK,EAAE,EAAE;IACtF,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,WAAW,CAAA;IAC/D,OAAO,aAAa,CAAC,iBAAiB,EAAE,EAAE,GAAG,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,CAAC,CAAA;AAC5F,CAAC,CAAA;AAED,8FAA8F;AAC9F,MAAM,qBAAqB,GAAiD,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACxG,yCAA4B,OAAO,aAC/B,mCAAuB,YAAY,iBAAa,MAAM,YAClD,cAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAI,GAClE,EACP,oCAAuB,YAAY,aAC/B,2BAAS,IAAI,GAAU,EACvB,yBAAO,UAAU,GAAQ,IACtB,IACJ,CACV,CAAA;AAED,yDAAyD;AACzD,MAAM,CAAC,MAAM,eAAe,GAAG,mBAAmB,CAAC;IAC/C,EAAE,EAAE,UAAU;IACd,MAAM,EAAE;QACJ,UAAU,EAAE,qCAAqC;QACjD,KAAK,EAAE,EAAE,SAAS,EAAE,qBAAqB,EAAE,KAAK,EAAE,UAAU,EAAE;KACjE;IACD,UAAU,EAAE;QACR,YAAY,EAAE;YACV,WAAW,EAAE,2BAA2B;SAC3C;QACD,UAAU,EAAE;YACR,KAAK,EAAE,qBAAqB;SAC/B;KACJ;CACJ,CAAC,CAAA;AAEF,MAAM,wBAAwB,GAAG;IAC7B,QAAQ,EAAE,CAAC,gEAAgE,CAAC;IAC5E,YAAY,EAAE,CAAC,4EAA4E,CAAC;IAC5F,SAAS,EAAE,CAAC,uEAAuE,CAAC;IACpF,SAAS,EAAE,CAAC,qFAAqF,CAAC;IAClG,OAAO,EAAE,CAAC,yDAAyD,CAAC;IACpE,SAAS,EAAE,CAAC,kFAAkF,CAAC;CACzF,CAAA;AAEV,MAAM,CAAC,MAAM,uBAAuB,GAAG,4BAA4B,CAAC;IAChE,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,wBAAwB,CAAC,CAAC;IAC9F,cAAc,EAAE,wBAAwB;CAC3C,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC,UAAU,CAAC,WAAW,CAAA;AACzE,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC,UAAU,CAAC,MAAM,CAAA;AAC/D,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,UAAU,CAAC,OAAO,CAAA;AACjE,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC,UAAU,CAAC,KAAK,CAAA"}

package/dist/heritage/styles.css

@@ -0,0 +1,165 @@
+@import "../common/styles.css";
+
+@layer starci-grammar-heritage {
+    .grammar-common-root[data-grammar-family="heritage"] {
+        color-scheme: light;
+
+        --heritage-green-900: oklch(29% 0.085 147);
+        --heritage-green-700: oklch(42% 0.12 147);
+        --heritage-ink: oklch(18% 0.018 145);
+        --heritage-muted: oklch(49% 0.018 145);
+        --heritage-ivory: oklch(97.5% 0.014 96);
+        --heritage-paper: oklch(99.3% 0.005 96);
+        --heritage-line: oklch(88% 0.012 110);
+        --heritage-display: Georgia, "Times New Roman", serif;
+        --heritage-sans: "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif;
+
+        --accent: var(--heritage-green-700);
+        --accent-foreground: white;
+        --focus: var(--heritage-green-700);
+        --background: var(--heritage-ivory);
+        --foreground: var(--heritage-ink);
+        --surface: var(--heritage-paper);
+        --surface-foreground: var(--heritage-ink);
+        --surface-secondary: var(--heritage-ivory);
+        --surface-secondary-foreground: var(--heritage-ink);
+        --muted: var(--heritage-muted);
+        --border: var(--heritage-line);
+        --separator: var(--heritage-line);
+        --success: var(--heritage-green-700);
+        --success-foreground: white;
+        --warning: oklch(76% 0.13 82);
+        --warning-foreground: var(--heritage-ink);
+        --danger: oklch(55% 0.18 28);
+        --danger-foreground: white;
+        --info: oklch(70% 0.09 235);
+        --info-foreground: var(--heritage-ink);
+        --field-background: var(--heritage-paper);
+        --field-border: var(--heritage-line);
+        --field-foreground: var(--heritage-ink);
+        --field-placeholder: var(--heritage-muted);
+        --radius: 0;
+        --field-radius: 0;
+        --shadow-surface: 0 1.5rem 4rem rgb(16 68 37 / 12%);
+
+        color: var(--foreground);
+        background: var(--background);
+        font-family: var(--heritage-sans);
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"][data-grammar-theme="dark"] {
+        color-scheme: dark;
+
+        --heritage-green-900: oklch(88% 0.08 147);
+        --heritage-green-700: oklch(74% 0.12 147);
+        --heritage-ink: oklch(96% 0.01 96);
+        --heritage-muted: oklch(75% 0.018 110);
+        --heritage-ivory: oklch(16% 0.018 145);
+        --heritage-paper: oklch(21% 0.018 145);
+        --heritage-line: oklch(38% 0.025 145);
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-grammar-surface-card][data-slot="card"] {
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-grammar-surface-card][data-slot="card"] [data-grammar-frame="bounded"][data-slot="card-content"],
+    .grammar-common-root[data-grammar-family="heritage"] [data-grammar-surface] {
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        background: var(--surface);
+        box-shadow: var(--shadow-surface);
+        color: var(--surface-foreground);
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-grammar-surface-card][data-slot="card"] [data-grammar-frame="bounded"][data-slot="card-content"][data-grammar-surface-depth="nested"],
+    .grammar-common-root[data-grammar-family="heritage"] [data-grammar-surface][data-grammar-surface-depth="nested"] {
+        background: var(--surface-secondary);
+        box-shadow: none;
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-grammar-surface-label] {
+        color: var(--heritage-green-900);
+        font-family: var(--heritage-display);
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-family-component="Brand"] {
+        display: inline-flex;
+        min-height: 3.5rem;
+        align-items: center;
+        gap: var(--grammar-row-gap);
+        text-align: start;
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-family-part="brand-mark"] {
+        display: grid;
+        inline-size: 3.5rem;
+        block-size: 3.5rem;
+        overflow: hidden;
+        flex: 0 0 auto;
+        place-items: center;
+        border-radius: 50%;
+        background: white;
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-family-part="brand-mark"] img {
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: cover;
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-family-part="brand-copy"] {
+        display: grid;
+        gap: 0.125rem;
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-family-part="brand-copy"] strong {
+        color: var(--heritage-green-900);
+        font-family: var(--heritage-display);
+        font-size: 1rem;
+        font-weight: 800;
+        letter-spacing: .125em;
+    }
+
+    .grammar-common-root[data-grammar-family="heritage"] [data-family-part="brand-copy"] span {
+        color: var(--heritage-muted);
+        font-size: .75rem;
+        font-weight: 650;
+        letter-spacing: .0625em;
+        text-transform: uppercase;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .grammar-common-root[data-grammar-family="heritage"][data-grammar-theme="system"] {
+            color-scheme: dark;
+
+            --heritage-green-900: oklch(88% 0.08 147);
+            --heritage-green-700: oklch(74% 0.12 147);
+            --heritage-ink: oklch(96% 0.01 96);
+            --heritage-muted: oklch(75% 0.018 110);
+            --heritage-ivory: oklch(16% 0.018 145);
+            --heritage-paper: oklch(21% 0.018 145);
+            --heritage-line: oklch(38% 0.025 145);
+        }
+    }
+
+    @media (forced-colors: active) {
+        .grammar-common-root[data-grammar-family="heritage"] {
+            --heritage-green-900: CanvasText;
+            --heritage-green-700: Highlight;
+            --heritage-ink: CanvasText;
+            --heritage-muted: GrayText;
+            --heritage-ivory: Canvas;
+            --heritage-paper: Canvas;
+            --heritage-line: CanvasText;
+            --shadow-surface: none;
+        }
+
+        .grammar-common-root[data-grammar-family="heritage"] [data-family-part="brand-mark"] {
+            border: 1px solid CanvasText;
+            background: Canvas;
+        }
+    }
+}