@kerfjs/ui 5.0.0-beta.29 → 5.0.0-beta.30

package/ai/component-catalog-v2.schema.json

@@ -45,6 +45,14 @@
       "required": ["id", "accepts", "cardinality", "exclusiveWith"],
       "properties": {
         "id": { "type": "string", "minLength": 1 },
+        "jsx": {
+          "type": "object",
+          "required": ["prop"],
+          "properties": {
+            "prop": { "type": "string", "minLength": 1 }
+          },
+          "additionalProperties": false
+        },
         "accepts": { "$ref": "#/$defs/stringList" },
         "cardinality": { "$ref": "#/$defs/cardinality" },
         "exclusiveWith": { "$ref": "#/$defs/stringList" }
@@ -211,6 +219,10 @@
           "properties": { "obligations": { "$ref": "#/$defs/stringList" } },
           "additionalProperties": false
         },
+        "cssValueProps": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/cssValueProp" }
+        },
         "boundaries": {
           "type": "object",
           "required": ["rootClass", "publicClasses", "publicTokens"],
@@ -242,6 +254,45 @@
         }
       },
       "additionalProperties": false
+    },
+    "cssValueProp": {
+      "type": "object",
+      "required": [
+        "path",
+        "grammar",
+        "helpers",
+        "shorthands",
+        "canonicalShorthands",
+        "exceptionalShorthands",
+        "rawPolicy",
+        "examples"
+      ],
+      "properties": {
+        "path": {
+          "type": "string",
+          "pattern": "^[A-Za-z][A-Za-z0-9]*(?:\\[\\]\\.[A-Za-z][A-Za-z0-9]*)?$"
+        },
+        "grammar": {
+          "enum": [
+            "length",
+            "size",
+            "flex",
+            "color",
+            "declarations",
+            "media-query",
+            "pixels"
+          ]
+        },
+        "helpers": { "$ref": "#/$defs/stringList" },
+        "nonStandaloneHelpers": { "$ref": "#/$defs/stringList" },
+        "shorthands": { "$ref": "#/$defs/stringList" },
+        "canonicalShorthands": { "$ref": "#/$defs/stringList" },
+        "exceptionalShorthands": { "$ref": "#/$defs/stringList" },
+        "rawPolicy": { "enum": ["forbid", "allow", "unsafe-only"] },
+        "unsafeHelper": { "type": "string", "minLength": 1 },
+        "examples": { "$ref": "#/$defs/stringList" }
+      },
+      "additionalProperties": false
     }
   }
 }

package/ai/component-catalog.json

@@ -271,7 +271,8 @@
       ],
       "variants": [
         "light",
-        "dark"
+        "dark",
+        "increased contrast"
       ],
       "accessibility": [
         "Preserve semantic contrast relationships and the visible focus ring when overriding foundation colors."
@@ -317,6 +318,7 @@
         "--kui-layout-content-gap",
         "--kui-layout-control-gap",
         "--kui-layout-metadata-gap",
+        "--kui-layout-highlight-inset",
         "--kui-layout-rounded-radius",
         "--kui-layout-pill-radius",
         "--kui-toolbar-group-inner-size",
@@ -353,6 +355,16 @@
         "--kui-color-brand-on-normal",
         "--kui-color-brand-on-loud",
         "--kui-color-brand-on-fill",
+        "--kui-color-pop-fill-loud",
+        "--kui-color-pop-fill-quiet",
+        "--kui-color-pop-fill-normal",
+        "--kui-color-pop-border-quiet",
+        "--kui-color-pop-border-normal",
+        "--kui-color-pop-border-loud",
+        "--kui-color-pop-on-quiet",
+        "--kui-color-pop-on-normal",
+        "--kui-color-pop-on-loud",
+        "--kui-color-pop-on-fill",
         "--kui-color-success-fill-loud",
         "--kui-color-success-fill-quiet",
         "--kui-color-success-fill-normal",
@@ -386,6 +398,8 @@
         "--kui-color-border-quiet",
         "--kui-color-accent",
         "--kui-color-accent-text",
+        "--kui-color-pop",
+        "--kui-color-pop-text",
         "--kui-color-success",
         "--kui-color-success-text",
         "--kui-color-warning",
@@ -561,7 +575,7 @@
       "category": "Structure",
       "kind": "component",
       "source": "kerf",
-      "description": "A controlled one-pane navigation stack that keeps prior views mounted and animates push and pop transitions.",
+      "description": "A controlled one-pane navigation stack that keeps prior views mounted, slides content on push and pop, cross-fades per-view chrome, and moves/restores focus.",
       "uses": [
         "toolbar-text"
       ],
@@ -595,18 +609,20 @@
         "ordered view stack and stable keys",
         "view content and titles",
         "push and pop actions",
-        "focus restoration policy",
-        "optional persistent bottom toolbar"
+        "preferred initial focus targets when DOM order is insufficient",
+        "per-view bottom toolbar content or a persistent fallback"
       ],
       "variants": [
         "single root view",
         "pushed detail view",
         "toolbar hidden",
-        "persistent bottom toolbar"
+        "per-view bottom toolbar",
+        "persistent bottom-toolbar fallback"
       ],
       "accessibility": [
         "Give the stack region an accessible label and every back control a stable action label.",
-        "Wire pop behavior and restore focus to the control that opened the departing view after the controlled rerender."
+        "Use wireNavStack so each controlled push moves focus into the new top view and each pop restores the revealed view's remembered descendant.",
+        "Mark a preferred initial heading or control with data-nav-focus when the first enabled focusable descendant is not the right target."
       ],
       "geometry": {
         "margin": "none",
@@ -633,6 +649,11 @@
       "publicClasses": [
         "kui-nav-stack",
         "kui-nav-stack__chrome",
+        "kui-nav-stack__bottom",
+        "kui-nav-stack__chrome--entering",
+        "kui-nav-stack__chrome-copy",
+        "kui-nav-stack__chrome-copy--bottom",
+        "kui-nav-stack__chrome-copy--exiting",
         "kui-nav-stack__lead",
         "kui-nav-stack__back",
         "kui-nav-stack__back-icon",
@@ -641,10 +662,11 @@
         "kui-nav-stack__viewport",
         "kui-nav-stack__view",
         "kui-nav-stack__view--entering",
-        "kui-nav-stack__view--exiting",
-        "kui-nav-stack__bottom"
+        "kui-nav-stack__view--exiting"
+      ],
+      "publicTokens": [
+        "--kui-nav-stack-transition-duration"
       ],
-      "publicTokens": [],
       "links": {
         "catalogRoute": "?component=nav-stack",
         "documentation": "docs/nav-stack.md",
@@ -1198,7 +1220,8 @@
       ],
       "useWhen": [
         "Group related controls inside a toolbar with a supported visual treatment.",
-        "Fill it with plain <button> controls (the group styles > button fully); use wa-button only for a Web Awesome feature such as a wa-dropdown popup trigger."
+        "Fill it with plain <button> controls (the group styles > button fully); use wa-button only for a Web Awesome feature such as a wa-dropdown popup trigger.",
+        "For an avatar control, set content=avatar and avatarImage instead of inserting an img; one button paints the group and multiple buttons paint only the pressed highlight."
       ],
       "avoidWhen": [
         "Do not use merely to align unrelated buttons or to imitate an exclusive choice.",
@@ -1217,7 +1240,8 @@
       "appOwns": [
         "actions",
         "pressed state",
-        "expanded state"
+        "expanded state",
+        "avatar image URL"
       ],
       "variants": [
         "contained",
@@ -1228,9 +1252,10 @@
         "comfortable or tight density",
         "icon, text, mixed, or avatar content",
         "raised, filled, or outline selected chrome",
-        "brand or neutral selected tone",
+        "brand, neutral, or pop selected tone",
         "nested dropdown trigger",
-        "avatar scrim"
+        "avatar scrim",
+        "contained avatar background on a single group or selected multi-button highlight"
       ],
       "accessibility": [
         "Name the group when its relationship is not evident from context."
@@ -1253,6 +1278,10 @@
       ],
       "publicTokens": [
         "--kui-color-brand-on-quiet",
+        "--kui-color-pop-border-normal",
+        "--kui-color-pop-fill-normal",
+        "--kui-color-pop-on-normal",
+        "--kui-color-pop-on-quiet",
         "--kui-color-neutral-border-loud",
         "--kui-color-neutral-border-normal",
         "--kui-color-neutral-fill-loud",
@@ -1298,10 +1327,12 @@
         "PopupSurface"
       ],
       "useWhen": [
-        "A Web Awesome dialog or dropdown needs a standard size, presentation, body/footer inset, or list-compatible menu inset."
+        "A Web Awesome dialog or dropdown needs a standard size, presentation, body/footer inset, or list-compatible menu inset.",
+        "A dialog body should compose rows, sections, or aligned bare prose through List and ListInsetText."
       ],
       "avoidWhen": [
-        "Do not use it as a generic layout wrapper or to replace application-owned modal state and focus lifecycle."
+        "Do not use it as a generic layout wrapper or to replace application-owned modal state and focus lifecycle.",
+        "Do not stack a dialog body inset around children that already own List or content-item geometry; use bodyInset none."
       ],
       "alternatives": [],
       "appOwns": [
@@ -1611,7 +1642,7 @@
       "category": "Navigation",
       "kind": "component",
       "source": "kerf",
-      "description": "A stretch-aligned vertical stack with optional gap, flex growth, vertical scrolling, and independently selectable divider edges.",
+      "description": "A stretch-aligned vertical stack with optional typed token/length gap, flex growth, vertical scrolling, and independently selectable divider edges.",
       "uses": [
         "list-header",
         "list-action-row",
@@ -1619,26 +1650,63 @@
       ],
       "purpose": "Standardize vertical component layout and its scroll/divider ownership instead of repeating ad-hoc flex-column wrappers.",
       "publicExports": [
-        "List"
+        "List",
+        "px",
+        "rem",
+        "em",
+        "pct",
+        "space",
+        "lengthVar",
+        "plus",
+        "calc",
+        "flex"
+      ],
+      "cssValueProps": [
+        {
+          "path": "gap",
+          "grammar": "length",
+          "helpers": ["px", "rem", "em", "pct", "space", "lengthVar", "calc"],
+          "nonStandaloneHelpers": ["plus"],
+          "shorthands": ["none", "2xs", "xs", "s", "m", "l", "xl"],
+          "canonicalShorthands": ["none", "2xs", "xs", "m", "l"],
+          "exceptionalShorthands": ["s", "xl"],
+          "rawPolicy": "forbid",
+          "examples": ["gap=\"xs\"", "gap={rem(0.25)}", "gap={calc(plus(rem(0.25), pct(10)))}"]
+        },
+        {
+          "path": "flex",
+          "grammar": "flex",
+          "helpers": ["flex"],
+          "shorthands": ["none", "auto", "initial"],
+          "canonicalShorthands": ["none", "auto", "initial"],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": ["flex=\"none\"", "flex={flex(1, 1, rem(20))}"]
+        }
       ],
       "useWhen": [
         "Arrange component rows or sections in a vertical stretch-aligned stack.",
-        "Let one bounded list own vertical scrolling, flex growth, or one or more physical-edge dividers."
+        "Let one bounded list own vertical scrolling, flex growth, or one or more physical-edge dividers.",
+        "Choose a finite gap shorthand such as xs or m, or compose a typed length with @kerfjs/ui/css-values when the spacing scale is insufficient.",
+        "Use a finite flex keyword or the flex() builder when List participates in flexible layout."
       ],
       "avoidWhen": [
         "Do not use List as semantic list markup; use ul/ol when list semantics are required and apply layout deliberately.",
-        "Do not create nested scroll owners or use divider sides as a substitute for meaningful grouping."
+        "Do not create nested scroll owners or use divider sides as a substitute for meaningful grouping.",
+        "Do not pass raw CSS strings to gap or flex, mix their distinct grammars, or use the off-rhythm s/xl spacing steps without a deliberate exception."
       ],
       "alternatives": [],
       "appOwns": [
         "child semantics and content",
         "the bounded height needed for scrolling",
-        "gap, flex, and divider choices"
+        "typed gap, flex, and divider choices"
       ],
       "variants": [
         "no gap",
-        "standard or custom gap",
-        "boolean or custom flex",
+        "standard boolean gap",
+        "named none/2xs/xs/s/m/l/xl token gap",
+        "typed CssLength gap",
+        "boolean, finite-keyword, or typed CssFlex flex",
         "scrollable",
         "top/right/bottom/left divider combinations"
       ],
@@ -1722,7 +1790,7 @@
         "toggle",
         "placeholder (loading)",
         "compact density",
-        "neutral, accent, or danger indicator tone",
+        "neutral, accent, pop, or danger indicator tone",
         "before, after, or paired group divider"
       ],
       "accessibility": [
@@ -1768,6 +1836,8 @@
         "--kui-list-header-hover-background",
         "--kui-list-group-divider-color",
         "--kui-color-brand-on-normal",
+        "--kui-color-pop-fill-normal",
+        "--kui-color-pop-on-normal",
         "--kui-color-danger-fill-normal",
         "--kui-color-danger-on-normal"
       ],
@@ -1792,11 +1862,24 @@
       "publicExports": [
         "ListActionRow"
       ],
+      "cssValueProps": [
+        {
+          "path": "style",
+          "grammar": "declarations",
+          "helpers": [],
+          "shorthands": [],
+          "canonicalShorthands": [],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": ["className=\"app-row\""]
+        }
+      ],
       "useWhen": [
         "A navigation or item row needs both a primary selectable action and an independently focusable trailing action."
       ],
       "avoidWhen": [
-        "Use ListItem when trailing content is dormant metadata; use AppTab only for tablist semantics and ToolbarControlGroup only for toolbar controls."
+        "Use ListItem when trailing content is dormant metadata; use AppTab only for tablist semantics and ToolbarControlGroup only for toolbar controls.",
+        "Do not inject declaration strings; use className, public tokens, and cataloged component props for application styling."
       ],
       "alternatives": [
         {
@@ -1896,7 +1979,7 @@
       "category": "Navigation",
       "kind": "component",
       "source": "kerf",
-      "description": "Configurable native-button navigation rows with structured labels, status/busy metadata, density, group dividers, and protected domain metadata hooks.",
+      "description": "Configurable native-button navigation rows with structured labels, status/busy metadata, density, group dividers, protected domain metadata hooks, and rounded-boundary overflow clipping.",
       "uses": [
         "lucide-icon",
         "loading-spinner"
@@ -1905,11 +1988,24 @@
       "publicExports": [
         "ListItem"
       ],
+      "cssValueProps": [
+        {
+          "path": "style",
+          "grammar": "declarations",
+          "helpers": [],
+          "shorthands": [],
+          "canonicalShorthands": [],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": ["className=\"app-row\""]
+        }
+      ],
       "useWhen": [
-        "Render a selectable, disabled, trailing, or multiline sidebar/navigation action row."
+        "Render a selectable, disabled, trailing, or multiline sidebar/navigation action row whose descendants must remain clipped to the rounded row boundary."
       ],
       "avoidWhen": [
-        "Do not use for an ordinary inline link, form button, isolated ARIA menuitem, or an interactive trailing action; use ListActionRow for sibling row actions."
+        "Do not use for an ordinary inline link, form button, isolated ARIA menuitem, or an interactive trailing action; use ListActionRow for sibling row actions.",
+        "Do not inject declaration strings; use className, public tokens, and cataloged component props for application styling."
       ],
       "alternatives": [
         {
@@ -2095,6 +2191,61 @@
         "recipe": "docs/component-selection.md#problem-to-component-matrix"
       }
     },
+    {
+      "id": "application-tabs",
+      "name": "Application tabs composition",
+      "category": "Navigation",
+      "kind": "composition",
+      "source": "kerf",
+      "description": "Controlled document tabs with application-owned state and panels.",
+      "uses": [
+        "tabs",
+        "tab-bar",
+        "toolbar-control-group"
+      ],
+      "purpose": "Show AppTab and TabBar in a complete controlled composition.",
+      "publicExports": [],
+      "useWhen": [
+        "Compose application state, panels, actions, overflow, and reordering around TabBar and AppTab."
+      ],
+      "avoidWhen": [
+        "Use SegmentedControl instead for a compact local choice."
+      ],
+      "alternatives": [],
+      "appOwns": [
+        "ordered tabs",
+        "selected tab",
+        "tabpanels",
+        "add and close policy",
+        "routing and persistence"
+      ],
+      "variants": [
+        "overflow",
+        "keyboard and pointer reordering",
+        "adding and closing documents"
+      ],
+      "accessibility": [
+        "Keep one selected tab synchronized with one named tabpanel and retain the wireTabBars disposer."
+      ],
+      "geometry": {
+        "margin": "child",
+        "border": "child",
+        "padding": "child"
+      },
+      "delivery": {
+        "sideEffects": [
+          "css"
+        ]
+      },
+      "wiring": [],
+      "publicClasses": [],
+      "publicTokens": [],
+      "links": {
+        "catalogRoute": "?component=application-tabs",
+        "documentation": "docs/accessibility.md",
+        "recipe": "docs/accessibility.md#tabs"
+      }
+    },
     {
       "id": "tabs",
       "name": "AppTab",
@@ -2440,7 +2591,7 @@
       ],
       "accessibility": [
         "Announce result changes when useful and keep tokens atomic during editing.",
-        "Keep leading and trailing controls aligned to the first text line while content wraps.",
+        "Keep leading and trailing controls aligned to the first text line while content wraps. Managed Clear restores replacement focus before the next input task, preserving immediate typing and later focus handoffs without a frame delay.",
         "Wire Enter to submit without inserting a contenteditable line break and preserve focus plus the text-relative caret across controlled keyboard chip deletion before the next keystroke. Select All deletion preserves managed open state and replacement focus; persist both edited query and tokens. Visual wrapping remains available.",
         "In collapsible mode, wireTokenSearchFields manages this by default: activating the trigger reveals the searchbox and moves focus into it, Escape on an empty field collapses and returns focus to the trigger, and focus leaving an empty field collapses it; each behavior is individually opt-out."
       ],
@@ -2639,10 +2790,25 @@
       ],
       "purpose": "Controlled Web Awesome select with typed form, toolbar, navigation, compact, icon-only, truncating, hint, and grouped-choice presentations.",
       "publicExports": [
-        "Select"
+        "Select",
+        "uiColor",
+        "colorVar"
+      ],
+      "cssValueProps": [
+        {
+          "path": "choices[].color",
+          "grammar": "color",
+          "helpers": ["uiColor", "colorVar"],
+          "shorthands": [],
+          "canonicalShorthands": [],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": ["color: uiColor(\"success\")", "color: colorVar(\"--app-choice-color\")"]
+        }
       ],
       "useWhen": [
-        "Choose a controlled value from a moderate or long list, including grouped and icon-bearing choices."
+        "Choose a controlled value from a moderate or long list, including grouped and icon-bearing choices.",
+        "Color an optional choice icon with uiColor() or colorVar(); the CssColor contract intentionally rejects lengths and raw color strings."
       ],
       "avoidWhen": [
         "Do not use for commands or a small choice set that should stay visible."
@@ -2804,11 +2970,11 @@
       "category": "Feedback",
       "kind": "component",
       "source": "kerf",
-      "description": "Polite status and assertive alert feedback with semantic tones.",
+      "description": "Polite status and assertive alert feedback with semantic tones, plus non-status pop emphasis for featured or novel content.",
       "uses": [
         "lucide-icon"
       ],
-      "purpose": "Polite status and assertive alert feedback with semantic tones.",
+      "purpose": "Present persistent inline feedback or attractive non-status emphasis with a named semantic tone.",
       "publicExports": [
         "StateBanner"
       ],
@@ -2816,7 +2982,8 @@
         "Place persistent inline semantic status beside affected work."
       ],
       "avoidWhen": [
-        "Do not use for an absent-content screen or transient confirmation."
+        "Do not use for an absent-content screen or transient confirmation.",
+        "Do not use pop as a substitute for success, warning, or danger."
       ],
       "alternatives": [
         {
@@ -2842,6 +3009,7 @@
       "variants": [
         "neutral",
         "info",
+        "pop",
         "success",
         "warning",
         "danger",
@@ -2879,6 +3047,9 @@
         "--kui-color-brand-border-quiet",
         "--kui-color-brand-fill-quiet",
         "--kui-color-brand-on-fill",
+        "--kui-color-pop-border-normal",
+        "--kui-color-pop-fill-quiet",
+        "--kui-color-pop-on-fill",
         "--kui-color-danger-border-quiet",
         "--kui-color-danger-fill-quiet",
         "--kui-color-danger-on-quiet",
@@ -2910,6 +3081,9 @@
         "--kui-state-banner-info-background",
         "--kui-state-banner-info-border",
         "--kui-state-banner-info-foreground",
+        "--kui-state-banner-pop-background",
+        "--kui-state-banner-pop-border",
+        "--kui-state-banner-pop-foreground",
         "--kui-state-banner-neutral-background",
         "--kui-state-banner-neutral-border",
         "--kui-state-banner-neutral-foreground",
@@ -3082,13 +3256,50 @@
       "publicExports": [
         "Skeleton"
       ],
+      "cssValueProps": [
+        {
+          "path": "width",
+          "grammar": "size",
+          "helpers": ["px", "rem", "em", "pct", "space", "lengthVar", "calc"],
+          "nonStandaloneHelpers": ["plus"],
+          "shorthands": ["auto", "min-content", "max-content", "fit-content"],
+          "canonicalShorthands": ["auto", "min-content", "max-content", "fit-content"],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": ["width={em(12)}", "width=\"fit-content\""]
+        },
+        {
+          "path": "height",
+          "grammar": "size",
+          "helpers": ["px", "rem", "em", "pct", "space", "lengthVar", "calc"],
+          "nonStandaloneHelpers": ["plus"],
+          "shorthands": ["auto", "min-content", "max-content", "fit-content"],
+          "canonicalShorthands": ["auto", "min-content", "max-content", "fit-content"],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": ["height={em(1.5)}"]
+        },
+        {
+          "path": "radius",
+          "grammar": "length",
+          "helpers": ["px", "rem", "em", "pct", "space", "lengthVar", "calc"],
+          "nonStandaloneHelpers": ["plus"],
+          "shorthands": [],
+          "canonicalShorthands": [],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": ["radius={px(999)}"]
+        }
+      ],
       "useWhen": [
         "Stand in for a value that is still loading, on its own or via a component's placeholder prop, keeping the surrounding layout stable.",
-        "Placeholder a custom or free-text slot with the same visual the components' placeholder mode uses."
+        "Placeholder a custom or free-text slot with the same visual the components' placeholder mode uses.",
+        "Set width and height with typed length builders or finite intrinsic-size keywords; set radius with a typed length."
       ],
       "avoidWhen": [
         "Do not use for known progress or a busy spinner; use LoadingSpinner.",
-        "Do not animate it or use it as decorative filler."
+        "Do not animate it or use it as decorative filler.",
+        "Do not pass raw CSS strings or cross property grammars into width, height, or radius."
       ],
       "alternatives": [
         {
@@ -3104,7 +3315,8 @@
       "variants": [
         "block",
         "lines",
-        "labeled"
+        "labeled",
+        "typed width, height, and radius"
       ],
       "accessibility": [
         "Decorative by default (aria-hidden); pass label to announce it as an image. A component in placeholder mode marks itself aria-busy and disables its own controls."
@@ -4135,6 +4347,9 @@
       ],
       "recommendation": "supported",
       "alternatives": [],
+      "publicClasses": [
+        "hide-actions"
+      ],
       "geometry": {
         "margin": "none",
         "border": "child",

package/ai/component-catalog.schema.json

@@ -40,6 +40,7 @@
         "accessibility": { "type": "array", "items": { "type": "string" } },
         "publicClasses": { "type": "array", "items": { "type": "string" }, "uniqueItems": true },
         "publicTokens": { "type": "array", "items": { "type": "string" }, "uniqueItems": true },
+        "cssValueProps": { "type": "array", "items": { "$ref": "#/$defs/cssValueProp" }, "uniqueItems": true },
         "geometry": { "$ref": "#/$defs/geometry" },
         "delivery": { "$ref": "#/$defs/delivery" },
         "links": { "$ref": "#/$defs/links" }
@@ -60,6 +61,28 @@
     "geometryOwner": {
       "enum": ["self", "parent", "child", "none", "conditional"]
     },
+    "cssValueProp": {
+      "type": "object",
+      "required": ["path", "grammar", "helpers", "shorthands", "canonicalShorthands", "exceptionalShorthands", "rawPolicy", "examples"],
+      "properties": {
+        "path": { "type": "string", "pattern": "^[A-Za-z][A-Za-z0-9]*(?:\\[\\]\\.[A-Za-z][A-Za-z0-9]*)?$" },
+        "grammar": { "enum": ["length", "size", "flex", "color", "declarations", "media-query", "pixels"] },
+        "helpers": { "$ref": "#/$defs/stringList" },
+        "nonStandaloneHelpers": { "$ref": "#/$defs/stringList" },
+        "shorthands": { "$ref": "#/$defs/stringList" },
+        "canonicalShorthands": { "$ref": "#/$defs/stringList" },
+        "exceptionalShorthands": { "$ref": "#/$defs/stringList" },
+        "rawPolicy": { "enum": ["forbid", "allow", "unsafe-only"] },
+        "unsafeHelper": { "type": "string", "minLength": 1 },
+        "examples": { "$ref": "#/$defs/stringList" }
+      },
+      "additionalProperties": false
+    },
+    "stringList": {
+      "type": "array",
+      "items": { "type": "string", "minLength": 1 },
+      "uniqueItems": true
+    },
     "alternative": {
       "type": "object",
       "required": ["id", "relationship"],