@starci/grammar 0.1.0 → 0.2.0

package/dist/core/styles.css

@@ -1,193 +1,242 @@
-@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;
+@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;
+    }
+
+    .starci-core-surface-content {
+        min-width: 0;
+        padding: var(--starci-core-surface-inset, 1rem);
     }
 
-    .starci-core-surface {
+    .starci-core-surface.starci-core-frameless-surface {
         position: relative;
         min-width: 0;
-        overflow: hidden;
-        border-radius: var(--starci-core-surface-radius, 1rem);
-        background: var(--surface);
-        color: var(--surface-foreground);
-    }
-
-    .starci-core-surface[data-grammar-surface-depth="top"] {
-        border: 0;
-        box-shadow: var(--starci-core-surface-shadow, var(--shadow-surface));
-    }
-
-    .starci-core-surface[data-grammar-surface-depth="nested"] {
-        border: 1px solid var(--border);
-        box-shadow: none;
-    }
-
-    .starci-core-surface-content {
-        min-width: 0;
-        padding: var(--starci-core-surface-inset, 1rem);
-    }
-
-    [data-grammar-whole-action] {
-        position: absolute;
-        z-index: 1;
-        inset: 0;
+        overflow: visible;
         border: 0;
-        border-radius: inherit;
+        border-radius: 0;
         background: transparent;
+        box-shadow: none;
         color: inherit;
-        cursor: pointer;
-    }
-
-    [data-grammar-whole-action]:focus-visible {
-        outline: 2px solid var(--focus);
-        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 {
+    .starci-core-frameless-surface > .starci-core-surface-content {
         padding: 0;
     }
 
-    .starci-core-static-list {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        flex-direction: column;
-        list-style: none;
+    [data-grammar-scroll="contained"] {
+        max-height: var(--starci-core-contained-max-height, none);
+        overflow: hidden;
     }
 
-    .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);
+    [data-grammar-scroll="contained"] > .starci-core-surface-content {
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
     }
-
-    .starci-core-static-row + .starci-core-static-row {
-        border-top: 1px solid var(--separator);
+
+    [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-static-row-copy {
-        display: flex;
+    .starci-core-owned-collection {
         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);
     }
 
-    [data-grammar-state-mark="check"] {
-        width: 1.25rem;
-        height: 1.25rem;
-        flex: none;
-        color: var(--success);
-    }
-
-    .starci-core-rail {
-        container-name: starci-core-rail;
-        container-type: inline-size;
-        width: 100%;
+    .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-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;
-    }
-
+        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;
     }
 
-    @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);
-        }
-    }
-
-    @container starci-core-rail (max-width: 18rem) {
-        .starci-core-rail-frame {
-            gap: var(--starci-core-rail-gap-compact, 0.75rem);
-        }
-    }
-
+    .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 {
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
+        .starci-core-static-row {
+            gap: var(--starci-core-row-gap-compact, 0.5rem);
+        }
+    }
+
+    @container starci-core-rail (max-width: 18rem) {
+        .starci-core-rail-frame {
+            gap: var(--starci-core-rail-gap-compact, 0.75rem);
+        }
+    }
+
     @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;
+        .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/offset-pop/index.d.ts

@@ -27,7 +27,7 @@ export declare const OFFSET_POP_COMPLEX_CASES: readonly ["nested-surface-keeps-o
 /** One installable Grammar bundle: Core owns anatomy; Offset Pop owns only visual treatment. */
 export declare const offsetPopGrammar: Readonly<{
     id: "offset-pop";
-    version: "1.0.0";
+    version: "1.1.0";
     extends: readonly {
         id: string;
         version: string;
@@ -60,16 +60,16 @@ export declare const offsetPopGrammar: Readonly<{
             key: "core.surface-card";
             version: string;
             spec: Readonly<{
-                readonly version: "1.0.0";
+                readonly version: "1.1.0";
                 readonly layer: "branch";
                 readonly slots: readonly ["external-label", "content", "whole-action"];
                 readonly stateInputs: readonly ["neutral", "informative", "affirmative", "cautionary", "negative", "pending", "unavailable"];
-                readonly variableAxes: readonly ["surface-depth", "state-treatment", "action-mode", "container-response"];
+                readonly variableAxes: readonly ["surface-depth", "state-treatment", "action-mode", "label-end", "frame-mode", "scroll-mode", "container-response"];
                 readonly extensionPolicy: {
-                    readonly allowedAxes: readonly ["surface-depth", "state-treatment", "container-response"];
+                    readonly allowedAxes: readonly ["surface-depth", "state-treatment", "label-end", "frame-mode", "scroll-mode", "container-response"];
                     readonly forbiddenChanges: readonly ["anatomy", "closed-invariant", "owner-substitution"];
                 };
-                readonly closedInvariants: readonly ["label-outside-surface", "nested-border-xor-shadow", "one-content-owner", "whole-action-is-overlay", "neutral-state-only"];
+                readonly closedInvariants: readonly ["label-outside-surface", "nested-border-xor-shadow", "one-content-owner", "whole-action-is-overlay", "frameless-has-no-surface-shell", "contained-scroll-has-one-scroll-owner", "neutral-state-only"];
             }>;
             base: Readonly<{
                 key: string;
@@ -83,16 +83,16 @@ export declare const offsetPopGrammar: Readonly<{
             key: "core.surface-list-card";
             version: string;
             spec: Readonly<{
-                readonly version: "1.0.0";
+                readonly version: "1.1.0";
                 readonly layer: "branch";
-                readonly slots: readonly ["external-label", "single-list-shell", "static-row"];
+                readonly slots: readonly ["external-label", "single-list-shell", "single-collection-shell", "static-row", "interactive-row", "footer"];
                 readonly stateInputs: readonly ["neutral", "informative", "affirmative", "cautionary", "negative", "pending", "unavailable"];
-                readonly variableAxes: readonly ["surface-depth", "state-treatment", "row-count", "container-response"];
+                readonly variableAxes: readonly ["surface-depth", "state-treatment", "row-count", "row-mode", "label-visibility", "footer-mode", "container-response"];
                 readonly extensionPolicy: {
-                    readonly allowedAxes: readonly ["surface-depth", "state-treatment", "container-response"];
+                    readonly allowedAxes: readonly ["surface-depth", "state-treatment", "row-mode", "label-visibility", "footer-mode", "container-response"];
                     readonly forbiddenChanges: readonly ["anatomy", "closed-invariant", "owner-substitution"];
                 };
-                readonly closedInvariants: readonly ["one-list-one-shell", "rows-separated-by-dividers", "affirmative-row-uses-one-check", "nested-border-xor-shadow", "static-rows-have-no-action", "neutral-state-only"];
+                readonly closedInvariants: readonly ["one-list-one-shell", "one-collection-one-shell", "rows-separated-by-dividers", "affirmative-row-uses-one-check", "nested-border-xor-shadow", "static-rows-have-no-action", "interactive-rows-own-their-actions", "hidden-label-retains-accessible-name", "footer-follows-collection", "neutral-state-only"];
             }>;
             base: Readonly<{
                 key: string;
@@ -106,16 +106,16 @@ export declare const offsetPopGrammar: Readonly<{
             key: "core.rail";
             version: string;
             spec: Readonly<{
-                readonly version: "1.0.0";
+                readonly version: "1.1.0";
                 readonly layer: "branch";
-                readonly slots: readonly ["heading", "body", "footer"];
+                readonly slots: readonly ["heading", "body", "footer", "content-landmark"];
                 readonly stateInputs: readonly ["neutral", "informative", "affirmative", "cautionary", "negative", "pending", "unavailable"];
-                readonly variableAxes: readonly ["rail-mode", "rail-width", "state-treatment", "container-response"];
+                readonly variableAxes: readonly ["landmark-mode", "rail-mode", "rail-width", "collapse-mode", "motion-mode", "state-treatment", "container-response"];
                 readonly extensionPolicy: {
-                    readonly allowedAxes: readonly ["rail-width", "state-treatment", "container-response"];
+                    readonly allowedAxes: readonly ["landmark-mode", "rail-width", "collapse-mode", "motion-mode", "state-treatment", "container-response"];
                     readonly forbiddenChanges: readonly ["anatomy", "closed-invariant", "owner-substitution"];
                 };
-                readonly closedInvariants: readonly ["one-rail-landmark", "sticky-disabled-on-narrow-viewport", "body-remains-reachable", "footer-follows-body", "neutral-state-only"];
+                readonly closedInvariants: readonly ["one-rail-landmark", "sticky-disabled-on-narrow-viewport", "body-remains-reachable", "footer-follows-body", "content-landmark-is-not-wrapped-by-a-second-landmark", "collapsed-navigation-retains-accessible-names", "reduced-motion-removes-interpolation-not-state-change", "neutral-state-only"];
             }>;
             base: Readonly<{
                 key: string;
@@ -153,16 +153,16 @@ export declare const offsetPopGrammar: Readonly<{
         key: "core.surface-card";
         version: string;
         spec: Readonly<{
-            readonly version: "1.0.0";
+            readonly version: "1.1.0";
             readonly layer: "branch";
             readonly slots: readonly ["external-label", "content", "whole-action"];
             readonly stateInputs: readonly ["neutral", "informative", "affirmative", "cautionary", "negative", "pending", "unavailable"];
-            readonly variableAxes: readonly ["surface-depth", "state-treatment", "action-mode", "container-response"];
+            readonly variableAxes: readonly ["surface-depth", "state-treatment", "action-mode", "label-end", "frame-mode", "scroll-mode", "container-response"];
             readonly extensionPolicy: {
-                readonly allowedAxes: readonly ["surface-depth", "state-treatment", "container-response"];
+                readonly allowedAxes: readonly ["surface-depth", "state-treatment", "label-end", "frame-mode", "scroll-mode", "container-response"];
                 readonly forbiddenChanges: readonly ["anatomy", "closed-invariant", "owner-substitution"];
             };
-            readonly closedInvariants: readonly ["label-outside-surface", "nested-border-xor-shadow", "one-content-owner", "whole-action-is-overlay", "neutral-state-only"];
+            readonly closedInvariants: readonly ["label-outside-surface", "nested-border-xor-shadow", "one-content-owner", "whole-action-is-overlay", "frameless-has-no-surface-shell", "contained-scroll-has-one-scroll-owner", "neutral-state-only"];
         }>;
         base: Readonly<{
             key: string;
@@ -175,16 +175,16 @@ export declare const offsetPopGrammar: Readonly<{
         key: "core.surface-list-card";
         version: string;
         spec: Readonly<{
-            readonly version: "1.0.0";
+            readonly version: "1.1.0";
             readonly layer: "branch";
-            readonly slots: readonly ["external-label", "single-list-shell", "static-row"];
+            readonly slots: readonly ["external-label", "single-list-shell", "single-collection-shell", "static-row", "interactive-row", "footer"];
             readonly stateInputs: readonly ["neutral", "informative", "affirmative", "cautionary", "negative", "pending", "unavailable"];
-            readonly variableAxes: readonly ["surface-depth", "state-treatment", "row-count", "container-response"];
+            readonly variableAxes: readonly ["surface-depth", "state-treatment", "row-count", "row-mode", "label-visibility", "footer-mode", "container-response"];
             readonly extensionPolicy: {
-                readonly allowedAxes: readonly ["surface-depth", "state-treatment", "container-response"];
+                readonly allowedAxes: readonly ["surface-depth", "state-treatment", "row-mode", "label-visibility", "footer-mode", "container-response"];
                 readonly forbiddenChanges: readonly ["anatomy", "closed-invariant", "owner-substitution"];
             };
-            readonly closedInvariants: readonly ["one-list-one-shell", "rows-separated-by-dividers", "affirmative-row-uses-one-check", "nested-border-xor-shadow", "static-rows-have-no-action", "neutral-state-only"];
+            readonly closedInvariants: readonly ["one-list-one-shell", "one-collection-one-shell", "rows-separated-by-dividers", "affirmative-row-uses-one-check", "nested-border-xor-shadow", "static-rows-have-no-action", "interactive-rows-own-their-actions", "hidden-label-retains-accessible-name", "footer-follows-collection", "neutral-state-only"];
         }>;
         base: Readonly<{
             key: string;
@@ -197,16 +197,16 @@ export declare const offsetPopGrammar: Readonly<{
         key: "core.rail";
         version: string;
         spec: Readonly<{
-            readonly version: "1.0.0";
+            readonly version: "1.1.0";
             readonly layer: "branch";
-            readonly slots: readonly ["heading", "body", "footer"];
+            readonly slots: readonly ["heading", "body", "footer", "content-landmark"];
             readonly stateInputs: readonly ["neutral", "informative", "affirmative", "cautionary", "negative", "pending", "unavailable"];
-            readonly variableAxes: readonly ["rail-mode", "rail-width", "state-treatment", "container-response"];
+            readonly variableAxes: readonly ["landmark-mode", "rail-mode", "rail-width", "collapse-mode", "motion-mode", "state-treatment", "container-response"];
             readonly extensionPolicy: {
-                readonly allowedAxes: readonly ["rail-width", "state-treatment", "container-response"];
+                readonly allowedAxes: readonly ["landmark-mode", "rail-width", "collapse-mode", "motion-mode", "state-treatment", "container-response"];
                 readonly forbiddenChanges: readonly ["anatomy", "closed-invariant", "owner-substitution"];
             };
-            readonly closedInvariants: readonly ["one-rail-landmark", "sticky-disabled-on-narrow-viewport", "body-remains-reachable", "footer-follows-body", "neutral-state-only"];
+            readonly closedInvariants: readonly ["one-rail-landmark", "sticky-disabled-on-narrow-viewport", "body-remains-reachable", "footer-follows-body", "content-landmark-is-not-wrapped-by-a-second-landmark", "collapsed-navigation-retains-accessible-names", "reduced-motion-removes-interpolation-not-state-change", "neutral-state-only"];
         }>;
         base: Readonly<{
             key: string;

package/dist/offset-pop/index.js

@@ -54,8 +54,8 @@ export const OFFSET_POP_COMPLEX_CASES = Object.freeze([
 /** One installable Grammar bundle: Core owns anatomy; Offset Pop owns only visual treatment. */
 export const offsetPopGrammar = Object.freeze({
     id: "offset-pop",
-    version: "1.0.0",
-    extends: Object.freeze([{ id: "core", version: "1.0.0" }]),
+    version: "1.1.0",
+    extends: Object.freeze([{ id: "core", version: "1.1.0" }]),
     contracts: Object.freeze({
         ...CORE_COMPONENT_CONTRACTS,
         [offsetPopVisualTreatmentContract.key]: offsetPopVisualTreatmentContract,