@starci/grammar 0.5.4 → 0.7.0

package/dist/heritage/styles.css

@@ -88,6 +88,13 @@
         box-shadow: none;
     }
 
+    /* The ink band (SurfaceCard treatment="ink", 0.6.0) keeps its ink ground over the family's paper surface. */
+    .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-treatment="ink"] {
+        border-color: var(--grammar-ink-band);
+        background: var(--grammar-ink-band);
+        color: var(--grammar-ink-band-foreground);
+    }
+
     .grammar-common-root[data-grammar-family="heritage"] [data-grammar-surface-label] {
         color: var(--heritage-green-900);
         font-family: var(--heritage-display);

package/dist/offset-pop/components-navigation.css

@@ -220,6 +220,16 @@
         border-block-start: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
     }
 
+    /*
+     * A stat strip divides its cells on the inline axis, in the same ink line. Common draws that edge only at
+     * 48rem and wider (its border style); the family re-inks its width and colour, so no width query is added.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DescriptionList"][data-grammar-description-layout="stat-strip"][data-grammar-description-divided="true"] [data-grammar-description-pair] + [data-grammar-description-pair] {
+        border-block-start: 0;
+        border-inline-start-width: var(--offset-pop-outline-width);
+        border-inline-start-color: var(--offset-pop-ink);
+    }
+
     .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DescriptionList"] dt {
         color: var(--foreground);
         font-weight: 800;

package/dist/offset-pop/styles.css

@@ -214,6 +214,32 @@
         background: var(--surface-secondary);
     }
 
+    /*
+     * The ink band (SurfaceCard treatment="ink", 0.6.0) is painted on the family ink with the canvas on
+     * it - the pink stays the decision accent (ACCENT-1). The ink flips to cream in the dark theme, so the
+     * band's quiet inks are mixes of the canvas into the ink (both directions stay AA: muted 72% is
+     * about 8:1), not the lightness lift Common uses for a dark accent.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-surface-card][data-slot="card"] [data-grammar-frame="bounded"][data-slot="card-content"][data-grammar-surface-treatment="ink"] {
+        --grammar-ink-band: var(--offset-pop-ink);
+        --grammar-ink-band-foreground: var(--offset-pop-canvas);
+        --grammar-ink-band-muted: color-mix(in oklab, var(--offset-pop-canvas) 72%, var(--offset-pop-ink));
+        --grammar-ink-band-separator: color-mix(in oklab, var(--offset-pop-canvas) 18%, var(--offset-pop-ink));
+        --grammar-ink-band-plate: color-mix(in oklab, var(--offset-pop-canvas) 10%, var(--offset-pop-ink));
+        --grammar-ink-band-orbit: color-mix(in oklab, var(--offset-pop-canvas) 20%, var(--offset-pop-ink));
+        --success-soft-foreground: color-mix(in oklab, var(--offset-pop-mint) 45%, var(--offset-pop-canvas));
+        --warning-soft-foreground: color-mix(in oklab, var(--offset-pop-yellow) 45%, var(--offset-pop-canvas));
+        --danger-soft-foreground: color-mix(in oklab, var(--offset-pop-critical) 45%, var(--offset-pop-canvas));
+        border-color: var(--offset-pop-ink);
+        color: var(--grammar-ink-band-foreground);
+        background: var(--grammar-ink-band);
+    }
+
+    /* On the ink band the eyebrow is the band's muted ink, not the text-safe pink (which is tuned for the canvas). */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-surface-treatment="ink"] [data-grammar-section-header] .starci-core-section-eyebrow {
+        color: var(--grammar-ink-band-muted);
+    }
+
     .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-surface-label] {
         color: var(--foreground);
         font-weight: 800;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starci/grammar",
-  "version": "0.5.4",
+  "version": "0.7.0",
   "description": "Reusable StarCi React components, compositions, and packaged visual DNA.",
   "keywords": [
     "starci",
@@ -60,7 +60,7 @@
   "scripts": {
     "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": "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/primitive/PinnedActionBar/index.spec.tsx src/core/branch/SurfaceCard/ink.spec.ts src/core/data-component.spec.tsx src/core/OtpInput.spec.tsx src/core/field-variant.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",