@starci/grammar 0.2.0 → 0.3.0

package/dist/core/styles.css

@@ -1,6 +1,85 @@
 @layer starci-grammar-core {
+    .starci-core-form-page {
+        display: flex;
+        min-height: 100dvh;
+        padding: 1.5rem 1rem;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+
+    .starci-core-form-scroll-viewport {
+        width: 100%;
+        max-height: calc(100dvh - 3rem);
+        overscroll-behavior: contain;
+    }
+
+    .starci-core-form-surface {
+        display: flex;
+        width: min(100%, var(--starci-core-form-measure, 30rem));
+        min-width: 0;
+        flex-direction: column;
+        gap: var(--starci-core-section-gap, 0.75rem);
+    }
+
+    .starci-core-form-surface--compact {
+        width: min(100%, var(--starci-core-form-compact-measure, 28rem));
+    }
+
+    .starci-core-form-surface > .card {
+        max-height: calc(100dvh - 3rem);
+        overflow: hidden !important;
+        padding: 0 !important;
+    }
+
+    .starci-core-form-field {
+        display: flex;
+        min-width: 0;
+        flex-direction: column;
+        gap: var(--starci-core-field-gap, 0.5rem);
+    }
+
+    .starci-core-form-label--screen-reader {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .starci-core-horizontal-scroll-region {
+        width: 100%;
+        min-width: 0;
+        padding-block: 0.25rem;
+        overscroll-behavior-inline: contain;
+    }
+
+    .starci-core-horizontal-scroll-region > * {
+        width: max-content;
+        min-width: max-content;
+    }
+
+    @media (min-width: 40rem) {
+        .starci-core-form-page {
+            padding-block: 2.5rem;
+        }
+
+        .starci-core-form-scroll-viewport {
+            max-height: calc(100dvh - 5rem);
+        }
+
+        .starci-core-form-surface > .card {
+            max-height: calc(100dvh - 5rem);
+        }
+    }
+
     .starci-core-surface-card,
-    .starci-core-surface-list {
+    .starci-core-surface-list,
+    .starci-core-surface-accordion-card {
         container-name: starci-core-surface;
         container-type: inline-size;
         display: flex;
@@ -28,50 +107,51 @@
         min-width: 0;
         overflow: hidden;
         border-radius: var(--starci-core-surface-radius, 1rem);
-        background: var(--surface, Canvas);
-        color: var(--surface-foreground, CanvasText);
+        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)));
+        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);
+        border: 1px solid var(--border, GrayText);
         box-shadow: none;
     }
 
-    .starci-core-surface-content {
+    .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;
-    }
-
-    .starci-core-frameless-surface > .starci-core-surface-content {
-        padding: 0;
-    }
-
-    [data-grammar-scroll="contained"] {
-        max-height: var(--starci-core-contained-max-height, none);
-        overflow: hidden;
-    }
-
-    [data-grammar-scroll="contained"] > .starci-core-surface-content {
-        min-height: 0;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-    }
+    }
+
+    .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;
+    }
+
+    .starci-core-frameless-surface > .starci-core-surface-content {
+        padding: 0;
+    }
+
+    [data-grammar-scroll="contained"] {
+        max-height: var(--starci-core-contained-max-height, calc(100dvh - 3rem));
+        overflow: hidden;
+    }
+
+    [data-grammar-scroll="contained"] > .scroll-shadow--vertical {
+        width: 100%;
+        max-height: inherit;
+        min-height: 0;
+        overscroll-behavior: contain;
+    }
 
     [data-grammar-whole-action] {
         position: absolute;
@@ -85,7 +165,7 @@
     }
 
     [data-grammar-whole-action]:focus-visible {
-        outline: 2px solid var(--focus, Highlight);
+        outline: 2px solid var(--focus, Highlight);
         outline-offset: -2px;
     }
 
@@ -102,25 +182,37 @@
         cursor: progress;
     }
 
+    .starci-core-leading-number {
+        display: inline-block;
+        flex: none;
+        min-width: 1.25rem;
+        color: var(--muted, GrayText);
+        font-size: 0.875rem;
+        font-variant-numeric: tabular-nums;
+        line-height: 1.25rem;
+        text-align: end;
+        white-space: nowrap;
+    }
+
     .starci-core-list-shell {
         padding: 0;
     }
 
-    .starci-core-static-list {
+    .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-owned-collection {
+        min-width: 0;
+    }
+
+    .starci-core-surface-footer {
+        min-width: 0;
+    }
 
     .starci-core-static-row,
     .starci-core-empty-row {
@@ -133,7 +225,255 @@
     }
 
     .starci-core-static-row + .starci-core-static-row {
-        border-top: 1px solid var(--separator, var(--border, GrayText));
+        border-top: 1px solid var(--separator, var(--border, GrayText));
+    }
+
+    .starci-core-list-shell[data-grammar-hover="invariant"] .starci-core-static-row:hover {
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+        transform: none;
+    }
+
+    .starci-core-accordion-shell {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .starci-core-accordion-shell-frameless {
+        overflow: visible;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+    }
+
+    .starci-core-accordion-row {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .starci-core-accordion-row + .starci-core-accordion-row {
+        border-top: 1px solid var(--separator, var(--border, GrayText));
+    }
+
+    .starci-core-accordion-heading {
+        margin: 0;
+    }
+
+    .starci-core-accordion-trigger {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        min-height: 44px;
+        padding: var(--starci-core-row-inset, 1rem);
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        text-align: left;
+        transform: none;
+    }
+
+    .starci-core-accordion-trigger:hover,
+    .starci-core-accordion-trigger[data-hovered="true"] {
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+        transform: none;
+    }
+
+    .starci-core-accordion-trigger:disabled {
+        cursor: default;
+    }
+
+    .starci-core-accordion-panel {
+        width: 100%;
+        min-width: 0;
+        padding: 0 var(--starci-core-row-inset, 1rem) var(--starci-core-row-inset, 1rem);
+    }
+
+    .starci-core-markdown-article {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+        gap: 1rem;
+        color: inherit;
+        font-size: 0.875rem;
+        line-height: 1.65;
+        overflow-wrap: anywhere;
+    }
+
+    .starci-core-markdown-article[data-grammar-markdown-measure="compact"] {
+        max-width: 72ch;
+        gap: 0.75rem;
+    }
+
+    .starci-core-markdown-article > :first-child {
+        margin-top: 0;
+    }
+
+    .starci-core-markdown-article > :last-child {
+        margin-bottom: 0;
+    }
+
+    .starci-core-markdown-article :where(h1, h2, h3, h4) {
+        margin: 1.5rem 0 0.625rem;
+        color: inherit;
+        font-weight: 600;
+        line-height: 1.3;
+    }
+
+    .starci-core-markdown-article h1 { font-size: 1.5rem; }
+    .starci-core-markdown-article h2 { font-size: 1.25rem; }
+    .starci-core-markdown-article h3 { font-size: 1.125rem; }
+    .starci-core-markdown-article h4 { font-size: 1rem; }
+
+    .starci-core-markdown-article :where(p, ul, ol, blockquote, pre, table) {
+        margin: 0;
+    }
+
+    .starci-core-markdown-article :where(ul, ol) {
+        padding-inline-start: 1.5rem;
+    }
+
+    .starci-core-markdown-article ul { list-style: disc; }
+    .starci-core-markdown-article ol { list-style: decimal; }
+
+    .starci-core-markdown-article strong { font-weight: 600; }
+    .starci-core-markdown-article em { font-style: italic; }
+
+    .starci-core-markdown-article li + li {
+        margin-top: 0.375rem;
+    }
+
+    .starci-core-markdown-article :not(pre) > code {
+        display: inline;
+        padding: 0.125rem 0.375rem;
+        border: 1px solid var(--border, GrayText);
+        border-radius: 999px;
+        background: var(--muted-surface, color-mix(in srgb, CanvasText 7%, Canvas));
+        color: inherit;
+        font: 500 0.875rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
+        white-space: break-spaces;
+    }
+
+    .starci-core-markdown-article pre,
+    .starci-core-fenced-code-block pre {
+        max-width: 100%;
+        margin: 0;
+        padding: 1rem;
+        overflow-x: auto;
+        border: 1px solid var(--border, GrayText);
+        border-radius: 0.75rem;
+        background: var(--code-surface, color-mix(in srgb, CanvasText 6%, Canvas));
+        color: inherit;
+        overscroll-behavior-inline: contain;
+    }
+
+    .starci-core-markdown-article pre code,
+    .starci-core-fenced-code-block pre code {
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: 400 0.875rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
+        white-space: pre;
+    }
+
+    .starci-core-fenced-code-block {
+        width: 100%;
+        min-width: 0;
+        margin: 0 0 1rem;
+    }
+
+    .starci-core-fenced-code-header {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        padding: 0 0 0.5rem;
+        color: var(--muted, GrayText);
+    }
+
+    .starci-core-fenced-code-header :where(button) {
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+    }
+
+    [data-grammar-fenced-code-highlight="true"] {
+        width: 100%;
+        min-width: 0;
+        overflow-x: auto;
+        border: 1px solid var(--border, GrayText);
+        border-radius: 0.75rem;
+        background: var(--code-surface, color-mix(in srgb, CanvasText 6%, Canvas));
+        overscroll-behavior-inline: contain;
+    }
+
+    [data-grammar-fenced-code-highlight="true"] pre {
+        width: max-content;
+        min-width: 100%;
+        padding: 1rem;
+        border: 0;
+        border-radius: 0;
+        background: transparent !important;
+    }
+
+    .starci-core-markdown-article blockquote {
+        padding-inline-start: 1rem;
+        border-inline-start: 3px solid var(--border, GrayText);
+        color: var(--muted, GrayText);
+    }
+
+    .starci-core-markdown-article table,
+    .starci-core-markdown-table-frame {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        overscroll-behavior-inline: contain;
+    }
+
+    .starci-core-markdown-article table {
+        border-collapse: collapse;
+    }
+
+    .starci-core-markdown-table-frame {
+        min-width: 0;
+        border: 1px solid var(--border, GrayText);
+        border-radius: 0.75rem;
+        background: var(--code-surface, color-mix(in srgb, CanvasText 4%, Canvas));
+        box-shadow: none;
+    }
+
+    .starci-core-markdown-article hr {
+        width: 100%;
+        margin: 1rem 0;
+        border: 0;
+        border-top: 1px solid var(--separator, var(--border, GrayText));
+    }
+
+    .starci-core-markdown-article :where(th, td) {
+        min-width: 8rem;
+        padding: 0.625rem 0.75rem;
+        border-bottom: 1px solid var(--separator, var(--border, GrayText));
+        text-align: start;
+        vertical-align: top;
+    }
+
+    .starci-core-markdown-article a {
+        color: var(--link, LinkText);
+        text-decoration: underline;
+        text-underline-offset: 0.15em;
     }
 
     .starci-core-static-row-copy {
@@ -145,14 +485,14 @@
     }
 
     .starci-core-static-row-copy > :last-child:not(:first-child) {
-        color: var(--muted, GrayText);
+        color: var(--muted, GrayText);
     }
 
     [data-grammar-state-mark="check"] {
         width: 1.25rem;
         height: 1.25rem;
         flex: none;
-        color: var(--success, #15803d);
+        color: var(--success, #15803d);
     }
 
     .starci-core-rail {
@@ -162,13 +502,13 @@
         min-width: 0;
     }
 
-    .starci-core-rail[data-grammar-rail-width="compact"] {
+    .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-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);
@@ -197,14 +537,30 @@
         overscroll-behavior: contain;
     }
 
-    .starci-core-rail-footer {
-        flex: none;
-    }
-
-    .starci-core-rail :where(button, [role="button"]) {
-        min-inline-size: 44px;
-        min-block-size: 44px;
-    }
+    .starci-core-rail[data-grammar-rail-height="fill"],
+    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-frame,
+    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-body {
+        height: 100%;
+        min-height: 0;
+    }
+
+    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-frame {
+        max-height: none;
+    }
+
+    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-body {
+        flex: 1 1 0%;
+        overflow: hidden;
+    }
+
+    .starci-core-rail-footer {
+        flex: none;
+    }
+
+    .starci-core-rail :where(button, [role="button"]) {
+        min-inline-size: 44px;
+        min-block-size: 44px;
+    }
 
     @container starci-core-surface (max-width: 28rem) {
         .starci-core-surface-label {
@@ -223,7 +579,7 @@
         }
     }
 
-    @media (max-width: 47.999rem) {
+    @media (max-width: 47.999rem) {
         .starci-core-rail[data-grammar-rail-mode="sticky"] .starci-core-rail-frame {
             position: static;
             max-height: none;
@@ -232,11 +588,11 @@
         .starci-core-rail-body {
             overflow-y: visible;
         }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        [data-grammar-motion="animated"] {
-            scroll-behavior: auto;
-        }
-    }
-}
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-grammar-motion="animated"] {
+            scroll-behavior: auto;
+        }
+    }
+}

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@starci/grammar",
-  "version": "0.2.0",
-  "description": "Business-neutral StarCi UI contracts and versioned Grammar bundles.",
+  "version": "0.3.0",
+  "description": "Business-neutral StarCi React components and the Offset Pop visual layer.",
   "keywords": [
     "starci",
     "design-system",
-    "ui-contracts",
     "grammar"
   ],
   "repository": {
@@ -39,10 +38,6 @@
     },
     "./core.css": "./dist/core/styles.css",
     "./core/styles.css": "./dist/core/styles.css",
-    "./offset-pop": {
-      "types": "./dist/offset-pop/index.d.ts",
-      "import": "./dist/offset-pop/index.js"
-    },
     "./offset-pop.css": "./dist/offset-pop/styles.css",
     "./offset-pop/styles.css": "./dist/offset-pop/styles.css",
     "./package.json": "./package.json"
@@ -50,14 +45,15 @@
   "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/offset-pop/index.test.mjs && vitest run --config vitest.config.ts src/core/styles.spec.ts src/offset-pop/styles.spec.ts",
+    "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/core/styles.spec.ts src/core/scrollable-surfaces.spec.tsx src/offset-pop/styles.spec.ts",
     "prepack": "npm run typecheck && npm test"
   },
   "engines": {
     "node": ">=20"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "@heroui/react": ">=3.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",