@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.51

package/ai/component-catalog.json

@@ -4,6 +4,65 @@
   "package": "@kerfjs/ui",
   "description": "Machine-readable selection, composition, delivery, ownership, and accessibility metadata for Kerf UI and its supported Web Awesome set.",
   "entries": [
+    {
+      "id": "badge",
+      "name": "Badge",
+      "category": "Foundation",
+      "kind": "component",
+      "source": "kerf",
+      "description": "Self-styled, non-interactive status, count, and category metadata configured through semantic tone, appearance, shape, and size props.",
+      "uses": [],
+      "purpose": "Present compact metadata without application-authored badge CSS or consumer styling of component internals.",
+      "publicExports": [
+        "Badge"
+      ],
+      "useWhen": [
+        "Show a short status, count, category, or metadata label whose presentation should be configured rather than restyled."
+      ],
+      "avoidWhen": [
+        "Do not use Badge as a button, link, or removable chip; choose an interactive control with the correct native semantics.",
+        "Do not rely on tone alone to communicate meaning."
+      ],
+      "alternatives": [],
+      "appOwns": [
+        "metadata text",
+        "semantic tone mapping",
+        "accessible label for abbreviated content"
+      ],
+      "variants": [
+        "neutral, brand, pop, success, warning, or danger tone",
+        "quiet, solid, or outline appearance",
+        "pill or rounded shape",
+        "compact or default size",
+        "labeled or decorative duplicate"
+      ],
+      "accessibility": [
+        "Badge is non-interactive. Supply label when visible content is abbreviated, and ariaHidden when it repeats an accessible name owned by the surrounding component.",
+        "Keep meaningful text visible because tone is supplementary."
+      ],
+      "geometry": {
+        "margin": "none",
+        "border": "self",
+        "padding": "self"
+      },
+      "delivery": {
+        "browserImport": "@kerfjs/ui/badge",
+        "manualCssImport": "@kerfjs/ui/badge.css",
+        "sideEffects": [
+          "browser-condition-css"
+        ]
+      },
+      "wiring": [],
+      "publicClasses": [
+        "kui-badge"
+      ],
+      "publicTokens": [],
+      "links": {
+        "catalogRoute": "?component=badge",
+        "documentation": "docs/component-selection.md",
+        "recipe": "docs/component-selection.md#problem-to-component-matrix"
+      }
+    },
     {
       "id": "lucide-icon",
       "name": "LucideIcon",
@@ -197,6 +256,10 @@
         "--kui-toolbar-group-inner-size",
         "--kui-toolbar-group-size",
         "--kui-toolbar-gap",
+        "--kui-safe-area-block-start",
+        "--kui-safe-area-block-end",
+        "--kui-safe-area-inline-start",
+        "--kui-safe-area-inline-end",
         "--kui-radius-s",
         "--kui-radius-m",
         "--kui-radius-l",
@@ -394,6 +457,7 @@
         "accessible labels",
         "header, content, and footer children",
         "which logical boundaries show separators",
+        "which sides may compensate for device safe areas in an app-owned arrangement (safeAreaEdges)",
         "responsive placement and visibility"
       ],
       "variants": [
@@ -414,7 +478,8 @@
         "border": "conditional",
         "padding": "child",
         "notes": [
-          "The pane is unpadded; separators are independently opt-in on logical edges and default off."
+          "The pane is unpadded; separators are independently opt-in on logical edges and default off.",
+          "Safe areas: the root and separators paint through unsafe areas while header, content, and footer pad the sides the pane still reaches (routed by --kui-edge-inset-*); content block insets are scroll padding."
         ]
       },
       "delivery": {
@@ -433,6 +498,10 @@
         "kui-pane__toolbar"
       ],
       "publicTokens": [
+        "--kui-edge-inset-block-end",
+        "--kui-edge-inset-block-start",
+        "--kui-edge-inset-inline-end",
+        "--kui-edge-inset-inline-start",
         "--kui-pane-separator-color",
         "--kui-pane-separator-width"
       ],
@@ -516,7 +585,24 @@
         {
           "export": "wireNavStack",
           "import": "@kerfjs/ui/wire-nav-stack",
-          "required": true
+          "required": true,
+          "stateAttributes": [
+            {
+              "name": "data-nav-chrome-transition",
+              "on": "kui-nav-stack",
+              "meaning": "\"true\" while the chrome cross-fades between the outgoing and incoming view."
+            },
+            {
+              "name": "data-nav-chrome-copy",
+              "on": "kui-nav-stack__chrome-copy",
+              "meaning": "Marks the inert, aria-hidden snapshot of the outgoing chrome shown during the cross-fade."
+            },
+            {
+              "name": "data-nav-exiting",
+              "on": "kui-nav-stack__view",
+              "meaning": "\"true\" on a popped view the helper briefly re-inserts to slide it out."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -619,18 +705,46 @@
         {
           "export": "wireResizableRegions",
           "import": "@kerfjs/ui/wire-resizable-regions",
-          "required": false
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-handle-inset",
+              "on": "kui-resizable-region",
+              "meaning": "Present while a clipping edge clamps the region: the handle and its focus ring sit inside the region instead of overhanging that edge."
+            },
+            {
+              "name": "data-resizing",
+              "on": "kui-resizable-region",
+              "meaning": "\"true\" during an active pointer drag of the handle."
+            }
+          ]
         },
         {
           "export": "wireNavStack",
           "import": "@kerfjs/ui/wire-nav-stack",
-          "required": true
+          "required": true,
+          "stateAttributes": [
+            {
+              "name": "data-nav-chrome-transition",
+              "on": "kui-nav-stack",
+              "meaning": "\"true\" while the chrome cross-fades between the outgoing and incoming view."
+            },
+            {
+              "name": "data-nav-chrome-copy",
+              "on": "kui-nav-stack__chrome-copy",
+              "meaning": "Marks the inert, aria-hidden snapshot of the outgoing chrome shown during the cross-fade."
+            },
+            {
+              "name": "data-nav-exiting",
+              "on": "kui-nav-stack__view",
+              "meaning": "\"true\" on a popped view the helper briefly re-inserts to slide it out."
+            }
+          ]
         }
       ],
       "publicClasses": [
         "kui-split-view",
         "kui-split-view__list",
-        "kui-resizable-region",
         "kui-split-view__detail",
         "kui-split-view--compact"
       ],
@@ -776,6 +890,7 @@
         "slide, fade-slide, or instant content",
         "clipped, scrolling, or popup-visible content",
         "inline, overlay, or hidden responsive presentation",
+        "narrow or compact single-track responsive fill",
         "safe-area restore control"
       ],
       "accessibility": [
@@ -906,7 +1021,24 @@
         {
           "export": "wireSidebar",
           "import": "@kerfjs/ui/wire-sidebar",
-          "required": true
+          "required": true,
+          "stateAttributes": [
+            {
+              "name": "data-collapsible-responsive",
+              "on": "the root passed to wireSidebar",
+              "meaning": "With a deviceClass: \"inline\" on a wide device class, otherwise the compact presentation (\"overlay\" or \"hidden\"). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-collapsible-overlay",
+              "on": "the root passed to wireSidebar",
+              "meaning": "With a deviceClass on a compact device: \"true\" for the overlay presentation, \"false\" for hidden. Absent on a wide device class. Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-morph-preserve",
+              "on": "kui-collapsible-panel__backdrop",
+              "meaning": "Keeps the injected compact-overlay backdrop through the application's re-render; the helper creates and removes the backdrop itself."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -1032,13 +1164,19 @@
       "appOwns": [
         "actions",
         "command availability",
-        "responsive relocation"
+        "responsive relocation",
+        "which screen edges an app bar or bottom bar outside a Pane header or footer claims for device safe areas (safeAreaEdges)"
       ],
       "variants": [
         "bottom divider (default)",
         "no dividers",
         "top/right/bottom/left divider combinations",
-        "centered content"
+        "centered content",
+        "stacked zones at compact or narrow widths",
+        "content-driven wrap that keeps a heading title whole",
+        "center priority for an expanded center control",
+        "trailing groups wrap instead of clipping",
+        "app bar or bottom bar claiming its screen edges (safeAreaEdges)"
       ],
       "accessibility": [
         "Supply a label when the toolbar needs an accessible name."
@@ -1048,7 +1186,8 @@
         "border": "conditional",
         "padding": "self",
         "notes": [
-          "Padding belongs to the toolbar; dividerSides selects any canonical combination of its physical top, right, bottom, and left edges."
+          "Padding belongs to the toolbar; dividerSides selects any canonical combination of its physical top, right, bottom, and left edges.",
+          "Safe areas: a Pane header or footer hands a sole Toolbar its inline edges; an app bar or bottom bar at a screen edge claims its sides with safeAreaEdges and pads each claimed side by the --kui-edge-inset-* context or the full device inset, while its box and dividers paint through."
         ]
       },
       "delivery": {
@@ -1082,17 +1221,19 @@
       "category": "Structure",
       "kind": "component",
       "source": "kerf",
-      "description": "Typed toolbar groups for compact, mixed, selected, dropdown, and avatar controls.",
+      "description": "Typed toolbar groups for buttons, semantic action links, compact mixed controls, selected states, dropdown surfaces, and avatar controls.",
       "uses": [
         "lucide-icon",
         "segmented-control"
       ],
-      "purpose": "Typed toolbar groups for compact, mixed, selected, dropdown, and avatar controls.",
+      "purpose": "Provide complete toolbar action geometry through configuration, including semantic anchors, overflow containment, and dropdown menu insets without application CSS.",
       "publicExports": [
+        "ToolbarActionLink",
         "ToolbarControlGroup"
       ],
       "useWhen": [
         "Group related controls inside a toolbar with a supported visual treatment.",
+        "Use ToolbarActionLink for navigation or external resources that must retain native anchor semantics inside a group.",
         "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."
       ],
@@ -1112,6 +1253,7 @@
       ],
       "appOwns": [
         "actions",
+        "link destination and copy",
         "pressed state",
         "expanded state",
         "avatar image URL"
@@ -1127,6 +1269,9 @@
         "raised, filled, or outline selected chrome",
         "brand, neutral, or pop selected tone",
         "nested dropdown trigger",
+        "standard, compact, or list-zero dropdown menu inset",
+        "visible or horizontally scrollable overflow",
+        "always visible or compact-only responsive visibility",
         "avatar scrim",
         "contained avatar background on a single group or selected multi-button highlight"
       ],
@@ -1147,6 +1292,7 @@
       },
       "wiring": [],
       "publicClasses": [
+        "kui-toolbar-action-link",
         "kui-toolbar-control-group"
       ],
       "publicTokens": [
@@ -1336,9 +1482,21 @@
         "Render toolbar identity or heading text at a supported hierarchy size; pass headingLevel for heading semantics."
       ],
       "avoidWhen": [
-        "Do not omit headingLevel when the text is the page or section heading."
+        "Do not omit headingLevel when the text is the page or section heading.",
+        "Do not use a size below xlarge as a normal-color subsection title: large, default, and small are intentionally quiet toolbar identity text and have no tone option. Use Text with an h2-h6 variant for a content subsection title, or ListHeader for a list or menu section."
+      ],
+      "alternatives": [
+        {
+          "id": "text",
+          "relationship": "semantic-alternative",
+          "when": "Use Text variant h2-h6 for a normal-color subsection title in content rather than toolbar identity."
+        },
+        {
+          "id": "list-header",
+          "relationship": "semantic-alternative",
+          "when": "Use ListHeader for a list or menu section label with a count, badge, action, or disclosure."
+        }
       ],
-      "alternatives": [],
       "appOwns": [
         "text",
         "responsive priority"
@@ -1370,8 +1528,10 @@
       ],
       "publicTokens": [
         "--kui-color-neutral-on-quiet",
+        "--kui-color-text",
+        "--kui-font-2xl",
+        "--kui-font-l",
         "--kui-font-m",
-        "--kui-font-mono",
         "--kui-font-s",
         "--kui-font-xs"
       ],
@@ -1387,12 +1547,14 @@
       "category": "Structure",
       "kind": "component",
       "source": "kerf",
-      "description": "Semantic native paragraph text by default, with heading variants, composable semantic presentation roles, and standard padded content geometry.",
+      "description": "Semantic native paragraph text by default, with heading and inline-span variants plus composable semantic presentation roles.",
       "uses": [],
-      "purpose": "Render paragraph semantics by default or h1 through h6 when selected, while independently configuring quiet or danger tone, compact size, or monospace font and consistently supplying standard geometry.",
-      "publicExports": ["Text"],
+      "purpose": "Render paragraph semantics by default, h1 through h6 when selected, or geometry-free inline secondary text as a span while independently configuring quiet or danger tone, compact size, or monospace font.",
+      "publicExports": [
+        "Text"
+      ],
       "useWhen": [
-        "Render ordinary application headings or paragraphs that should use native document semantics and the standard text-box inset."
+        "Render ordinary application headings or paragraphs with native document semantics, or inline secondary text inside rows, labels, and table cells."
       ],
       "avoidWhen": [
         "Do not use Text for toolbar identity or title content; use ToolbarText inside a Toolbar zone.",
@@ -1417,13 +1579,13 @@
         "document heading hierarchy"
       ],
       "variants": [
-        "p or h1 through h6 semantic variant",
+        "p, h1 through h6, or inline span semantic variant",
         "default, quiet, or danger tone",
         "default or compact size",
         "default or monospace font"
       ],
       "accessibility": [
-        "Text renders a native paragraph by default; choose an h1 through h6 variant by document outline rather than appearance.",
+        "Text renders a native paragraph by default; choose an h1 through h6 variant by document outline rather than appearance, or span for inline secondary text.",
         "Ordinary global, data, and ARIA attributes pass through to the native element.",
         "Choose tone, size, and font independently of the heading level so appearance does not distort the document outline."
       ],
@@ -1432,16 +1594,20 @@
         "border": "self",
         "padding": "self",
         "notes": [
-          "Text resets the native variant's margin and adds a 1px transparent border plus the standard 8px item padding."
+          "Block Text variants reset native margins and add a 1px transparent border plus the standard 8px item padding; span has no margin, border, or padding."
         ]
       },
       "delivery": {
         "browserImport": "@kerfjs/ui/text",
         "manualCssImport": "@kerfjs/ui/text.css",
-        "sideEffects": ["browser-condition-css"]
+        "sideEffects": [
+          "browser-condition-css"
+        ]
       },
       "wiring": [],
-      "publicClasses": ["kui-text"],
+      "publicClasses": [
+        "kui-text"
+      ],
       "publicTokens": [
         "--kui-color-danger-text",
         "--kui-color-text-quiet",
@@ -1457,7 +1623,7 @@
     },
     {
       "id": "headers",
-      "name": "Header composition",
+      "name": "Headers",
       "category": "Structure",
       "kind": "composition",
       "source": "kerf",
@@ -1586,60 +1752,107 @@
     {
       "id": "row",
       "name": "Row",
-    "category": "Structure",
+      "category": "Structure",
       "kind": "component",
       "source": "kerf",
       "description": "A horizontal flex row with physical-axis alignment, side-selectable text/control insets, a typed xs gap by default, flex participation, and opt-in wrapping.",
       "uses": [],
       "purpose": "Arrange related content horizontally with consistent spacing, optional physical-side text/control insets, and explicit left/center/right/full plus top/middle/bottom/full/baseline alignment instead of application-owned flex wrappers.",
-    "publicExports": ["Row"],
+      "publicExports": [
+        "Row"
+      ],
       "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"],
+          "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={space(\"m\")}", "gap={calc(plus(rem(0.25), pct(10)))}"]
+          "examples": [
+            "gap=\"xs\"",
+            "gap={space(\"m\")}",
+            "gap={calc(plus(rem(0.25), pct(10)))}"
+          ]
         },
         {
           "path": "flex",
           "grammar": "flex",
-          "helpers": ["flex"],
-          "shorthands": ["none", "auto", "initial"],
-          "canonicalShorthands": ["none", "auto", "initial"],
+          "helpers": [
+            "flex"
+          ],
+          "shorthands": [
+            "none",
+            "auto",
+            "initial"
+          ],
+          "canonicalShorthands": [
+            "none",
+            "auto",
+            "initial"
+          ],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
-          "examples": ["flex", "flex=\"none\"", "flex={flex(1, 1, rem(20))}"]
+          "examples": [
+            "flex",
+            "flex=\"none\"",
+            "flex={flex(1, 1, rem(20))}"
+          ]
         }
       ],
       "useWhen": [
         "Arrange a group of sibling components horizontally.",
         "Choose physical horizontal distribution and vertical alignment without writing one-off flex CSS.",
         "Use a finite flex keyword or the flex() builder when Row participates in a flexible parent layout.",
-        "Allow a bounded group to wrap while retaining the same typed gap and alignment contract."
-        ,"Apply the standard text or control inset to selected physical sides without an application wrapper."
+        "Allow a bounded group to wrap while retaining the same typed gap and alignment contract.",
+        "Apply the standard text or control inset to selected physical sides without an application wrapper."
       ],
       "avoidWhen": [
         "Do not use Row when content belongs in a semantic list or when a named-zone component such as Toolbar owns the composition.",
         "Do not pass raw CSS strings to gap or flex, mix their distinct grammars, or use s/xl spacing steps without a deliberate exception.",
         "Do not use alignment to replace semantic grouping or responsive relocation."
       ],
-    "alternatives": [
-      {
-        "id": "list",
-        "relationship": "axis-alternative",
-        "when": "Use List when the main layout axis is vertical."
-      },
-      {
-        "id": "toolbar",
-        "relationship": "semantic-alternative",
-        "when": "Use Toolbar when content belongs to named leading, center, and trailing application-chrome zones."
-      }
-    ],
+      "alternatives": [
+        {
+          "id": "list",
+          "relationship": "axis-alternative",
+          "when": "Use List when the main layout axis is vertical."
+        },
+        {
+          "id": "toolbar",
+          "relationship": "semantic-alternative",
+          "when": "Use Toolbar when content belongs to named leading, center, and trailing application-chrome zones."
+        }
+      ],
       "appOwns": [
         "child semantics and content",
         "alignment and wrapping policy",
@@ -1652,7 +1865,9 @@
         "typed CssLength gap",
         "boolean, finite-keyword, or typed CssFlex flex",
         "nowrap or wrapping",
-        "top/right/bottom/left text and control inset combinations"
+        "top/right/bottom/left text and control inset combinations",
+        "fill: the layout root fills a definite-height parent",
+        "rootAttributes: safe data-* metadata on the root"
       ],
       "accessibility": [
         "Row adds layout only and no grouping role; children retain responsibility for native or ARIA semantics.",
@@ -1669,11 +1884,18 @@
       "delivery": {
         "browserImport": "@kerfjs/ui/row",
         "manualCssImport": "@kerfjs/ui/row.css",
-        "sideEffects": ["browser-condition-css"]
+        "sideEffects": [
+          "browser-condition-css"
+        ]
       },
       "wiring": [],
-      "publicClasses": ["kui-row"],
-      "publicTokens": ["--kui-layout-item-gap", "--kui-row-gap"],
+      "publicClasses": [
+        "kui-row"
+      ],
+      "publicTokens": [
+        "--kui-layout-item-gap",
+        "--kui-row-gap"
+      ],
       "links": {
         "catalogRoute": "?component=row",
         "documentation": "docs/layout.md",
@@ -1689,28 +1911,75 @@
       "description": "A fixed positive number of evenly distributed minmax columns with a typed xs gap by default and optional flex participation.",
       "uses": [],
       "purpose": "Arrange related siblings in equal-width columns without repeating application-owned grid-template-columns CSS.",
-      "publicExports": ["Grid"],
+      "publicExports": [
+        "Grid"
+      ],
       "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"],
+          "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=\"m\"", "gap={space(\"m\")}", "gap={calc(plus(rem(0.25), pct(10)))}"]
+          "examples": [
+            "gap=\"m\"",
+            "gap={space(\"m\")}",
+            "gap={calc(plus(rem(0.25), pct(10)))}"
+          ]
         },
         {
           "path": "flex",
           "grammar": "flex",
-          "helpers": ["flex"],
-          "shorthands": ["none", "auto", "initial"],
-          "canonicalShorthands": ["none", "auto", "initial"],
+          "helpers": [
+            "flex"
+          ],
+          "shorthands": [
+            "none",
+            "auto",
+            "initial"
+          ],
+          "canonicalShorthands": [
+            "none",
+            "auto",
+            "initial"
+          ],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
-          "examples": ["flex", "flex=\"none\"", "flex={flex(1, 1, rem(20))}"]
+          "examples": [
+            "flex",
+            "flex=\"none\"",
+            "flex={flex(1, 1, rem(20))}"
+          ]
         }
       ],
       "useWhen": [
@@ -1750,7 +2019,9 @@
         "any positive safe-integer equal-track count",
         "named none/2xs/xs/s/m/l/xl token gap",
         "typed CssLength gap",
-        "boolean, finite-keyword, or typed CssFlex flex"
+        "boolean, finite-keyword, or typed CssFlex flex",
+        "fill: the layout root fills a definite-height parent",
+        "rootAttributes: safe data-* metadata on the root"
       ],
       "accessibility": [
         "Grid adds layout only and no grid role; children retain responsibility for native or ARIA semantics.",
@@ -1767,11 +2038,18 @@
       "delivery": {
         "browserImport": "@kerfjs/ui/grid",
         "manualCssImport": "@kerfjs/ui/grid.css",
-        "sideEffects": ["browser-condition-css"]
+        "sideEffects": [
+          "browser-condition-css"
+        ]
       },
       "wiring": [],
-      "publicClasses": ["kui-grid"],
-      "publicTokens": ["--kui-grid-gap", "--kui-layout-item-gap"],
+      "publicClasses": [
+        "kui-grid"
+      ],
+      "publicTokens": [
+        "--kui-grid-gap",
+        "--kui-layout-item-gap"
+      ],
       "links": {
         "catalogRoute": "?component=grid",
         "documentation": "docs/layout.md",
@@ -1787,29 +2065,92 @@
       "description": "A decorative, non-shrinking fixed gap or flexible main-axis spacer with typed physical width and height.",
       "uses": [],
       "purpose": "Express an intentional empty dimension or consume remaining flex space without application-owned spacer markup or raw CSS lengths.",
-      "publicExports": ["Spacer"],
+      "publicExports": [
+        "Spacer"
+      ],
       "cssValueProps": [
         {
           "path": "width",
           "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"],
+          "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": ["width=\"m\"", "width={space(\"m\")}", "width={calc(plus(rem(0.25), pct(10)))}"]
+          "examples": [
+            "width=\"m\"",
+            "width={space(\"m\")}",
+            "width={calc(plus(rem(0.25), pct(10)))}"
+          ]
         },
         {
           "path": "height",
           "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"],
+          "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": ["height=\"xs\"", "height={rem(1)}"]
+          "examples": [
+            "height=\"xs\"",
+            "height={rem(1)}"
+          ]
         }
       ],
       "useWhen": [
@@ -1859,10 +2200,14 @@
       "delivery": {
         "browserImport": "@kerfjs/ui/spacer",
         "manualCssImport": "@kerfjs/ui/spacer.css",
-        "sideEffects": ["browser-condition-css"]
+        "sideEffects": [
+          "browser-condition-css"
+        ]
       },
       "wiring": [],
-      "publicClasses": ["kui-spacer"],
+      "publicClasses": [
+        "kui-spacer"
+      ],
       "publicTokens": [],
       "links": {
         "catalogRoute": "?component=spacer",
@@ -1899,23 +2244,67 @@
         {
           "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"],
+          "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)))}"]
+          "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"],
+          "helpers": [
+            "flex"
+          ],
+          "shorthands": [
+            "none",
+            "auto",
+            "initial"
+          ],
+          "canonicalShorthands": [
+            "none",
+            "auto",
+            "initial"
+          ],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
-          "examples": ["flex=\"none\"", "flex={flex(1, 1, rem(20))}"]
+          "examples": [
+            "flex=\"none\"",
+            "flex={flex(1, 1, rem(20))}"
+          ]
         }
       ],
       "useWhen": [
@@ -1923,8 +2312,8 @@
         "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.",
-        "Apply the standard text or control inset to selected physical sides without an application wrapper."
-        ,"Align children horizontally or distribute them vertically with the same physical alignment vocabulary as Row."
+        "Apply the standard text or control inset to selected physical sides without an application wrapper.",
+        "Align children horizontally or distribute them vertically with the same physical alignment vocabulary as Row."
       ],
       "avoidWhen": [
         "Do not use List as semantic list markup; use ul/ol when list semantics are required and apply layout deliberately.",
@@ -1947,7 +2336,9 @@
         "left/center/right/full horizontal alignment",
         "top/middle/bottom/full vertical alignment",
         "top/right/bottom/left divider combinations",
-        "top/right/bottom/left text and control inset combinations"
+        "top/right/bottom/left text and control inset combinations",
+        "fill: the layout root fills a definite-height parent",
+        "rootAttributes: safe data-* metadata on the root"
       ],
       "accessibility": [
         "List adds layout only and no list role; children retain responsibility for their native or ARIA semantics.",
@@ -1992,11 +2383,12 @@
       "source": "kerf",
       "description": "Configurable section headings with full-width or shrink-wrapped inline presentation, semantic count/status indicators, density, group dividers, a logical-end action, disclosure states, and protected native-popover trigger metadata.",
       "uses": [
+        "badge",
         "lucide-icon",
         "disclosure-arrow",
         "text"
       ],
-      "purpose": "Fill the available section width by default, or shrink-wrap without outer geometry when inline, while splitting a dormant title and mutually exclusive semantic count or legacy badge from an optional logical-end action with an 18px visual; disclosure mode renders the title cluster as a button with a default production DisclosureArrow.",
+      "purpose": "Fill the available section width by default, or shrink-wrap without outer geometry when inline, while splitting a dormant title and mutually exclusive semantic count or badge from an optional logical-end action with an 18px visual; disclosure mode renders the title cluster as a button with a default production DisclosureArrow.",
       "publicExports": [
         "ListHeader"
       ],
@@ -2055,16 +2447,12 @@
         "kui-list-header",
         "kui-list-header__action",
         "kui-list-header__action-layer",
-        "kui-list-header__badge",
-        "kui-list-header__count",
         "kui-list-header__label",
         "kui-list-header__title",
         "kui-list-header__toggle"
       ],
       "publicTokens": [
         "--kui-color-neutral-border-quiet",
-        "--kui-color-neutral-fill-quiet",
-        "--kui-color-neutral-on-quiet",
         "--kui-focus-ring",
         "--kui-font-xs",
         "--kui-list-header-action-icon-size",
@@ -2072,15 +2460,8 @@
         "--kui-layout-inline-margin",
         "--kui-layout-item-gap",
         "--kui-layout-item-padding",
-        "--kui-layout-pill-radius",
-        "--kui-list-header-count-font-size",
         "--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"
+        "--kui-list-group-divider-color"
       ],
       "links": {
         "catalogRoute": "?component=list-header",
@@ -2112,7 +2493,9 @@
           "canonicalShorthands": [],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
-          "examples": ["className=\"app-row\""]
+          "examples": [
+            "className=\"app-row\""
+          ]
         }
       ],
       "useWhen": [
@@ -2238,7 +2621,9 @@
           "canonicalShorthands": [],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
-          "examples": ["className=\"app-row\""]
+          "examples": [
+            "className=\"app-row\""
+          ]
         }
       ],
       "useWhen": [
@@ -2443,7 +2828,7 @@
     },
     {
       "id": "application-tabs",
-      "name": "Application tabs composition",
+      "name": "Application tabs",
       "category": "Navigation",
       "kind": "composition",
       "source": "kerf",
@@ -2451,7 +2836,9 @@
       "uses": [
         "tabs",
         "tab-bar",
-        "toolbar-control-group"
+        "toolbar-control-group",
+        "text",
+        "wa-card"
       ],
       "purpose": "Show AppTab and TabBar in a complete controlled composition.",
       "publicExports": [],
@@ -2601,12 +2988,12 @@
       "category": "Navigation",
       "kind": "component",
       "source": "kerf",
-      "description": "Controlled tab strips with typed rail, segmented, and inspector presentation plus intrinsic or fill allocation.",
+      "description": "Controlled tab strips with typed presentation and allocation, a scroll-owning tab region, an optional adjacent trailing action, and a separately pinned far-edge end action.",
       "uses": [
         "tabs",
         "toolbar-control-group"
       ],
-      "purpose": "Controlled tab strips with typed rail, segmented, and inspector presentation plus intrinsic or fill allocation.",
+      "purpose": "Controlled tab strips whose tabs shrink and scroll while fixed leading, trailing, and far-edge end actions remain visible.",
       "publicExports": [
         "TabBar",
         "wireTabBars",
@@ -2647,7 +3034,8 @@
         "reorderable",
         "rail, segmented, and inspector presentation",
         "intrinsic or fill allocation",
-        "separate or adjacent trailing action"
+        "separate or adjacent trailing action",
+        "far-edge end action"
       ],
       "accessibility": [
         "Keep exactly one selected tab at tabindex 0 and preserve the wiring keyboard model."
@@ -2655,7 +3043,10 @@
       "geometry": {
         "margin": "none",
         "border": "self",
-        "padding": "self"
+        "padding": "self",
+        "notes": [
+          "TabBar owns inline flex allocation: tabs shrink and scroll, an adjacent trailing action follows the tab strip, and the end action stays pinned at the far edge; leading, trailing, and end actions do not shrink."
+        ]
       },
       "delivery": {
         "browserImport": "@kerfjs/ui/tab-bar",
@@ -2668,7 +3059,24 @@
         {
           "export": "wireTabBars",
           "import": "@kerfjs/ui/wire-tab-bars",
-          "required": true
+          "required": true,
+          "stateAttributes": [
+            {
+              "name": "data-tab-dragging",
+              "on": "AppTab (data-component=\"app-tab\")",
+              "meaning": "\"true\" on the tab being dragged."
+            },
+            {
+              "name": "data-tab-drop-position",
+              "on": "AppTab (data-component=\"app-tab\")",
+              "meaning": "\"before\" or \"after\" on the tab under the pointer: where the dragged tab would land."
+            },
+            {
+              "name": "data-tab-autoscroll",
+              "on": "kui-tab-bar__tabs",
+              "meaning": "\"start\" or \"end\" while a drag near that edge auto-scrolls the strip."
+            }
+          ]
         },
         {
           "export": "reorderTabs",
@@ -2680,7 +3088,8 @@
         "kui-tab-bar",
         "kui-tab-bar__leading",
         "kui-tab-bar__tabs",
-        "kui-tab-bar__trailing"
+        "kui-tab-bar__trailing",
+        "kui-tab-bar__end"
       ],
       "publicTokens": [
         "--kui-tab-bar-background",
@@ -2871,7 +3280,19 @@
         {
           "export": "wireTokenSearchFields",
           "import": "@kerfjs/ui/wire-token-search-fields",
-          "required": true
+          "required": true,
+          "stateAttributes": [
+            {
+              "name": "data-token-search-text",
+              "on": "the text span inside kui-token-search__editor",
+              "meaning": "Marks the plain-text span the helper inserts when the editor is emptied."
+            },
+            {
+              "name": "data-empty",
+              "on": "the text span inside kui-token-search__editor",
+              "meaning": "\"true\" on that span while it holds no text."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -2985,7 +3406,19 @@
         {
           "export": "wireResizableRegions",
           "import": "@kerfjs/ui/wire-resizable-regions",
-          "required": true
+          "required": true,
+          "stateAttributes": [
+            {
+              "name": "data-handle-inset",
+              "on": "kui-resizable-region",
+              "meaning": "Present while a clipping edge clamps the region: the handle and its focus ring sit inside the region instead of overhanging that edge."
+            },
+            {
+              "name": "data-resizing",
+              "on": "kui-resizable-region",
+              "meaning": "\"true\" during an active pointer drag of the handle."
+            }
+          ]
         },
         {
           "export": "clampRegionSize",
@@ -3011,6 +3444,7 @@
         "--kui-color-text-link",
         "--kui-focus-ring",
         "--kui-radius-s",
+        "--kui-resizable-region-edge-extent",
         "--kui-resizable-region-handle-active-color",
         "--kui-resizable-region-handle-color",
         "--kui-resizable-region-overlay-z",
@@ -3042,23 +3476,27 @@
       "publicExports": [
         "Select",
         "uiColor",
-        "colorVar"
+        "colorVar",
+        "foregroundColorVar"
       ],
       "cssValueProps": [
         {
           "path": "choices[].color",
           "grammar": "color",
-          "helpers": ["uiColor", "colorVar"],
+          "helpers": [
+            "uiColor",
+            "foregroundColorVar"
+          ],
           "shorthands": [],
           "canonicalShorthands": [],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
-          "examples": ["color: uiColor(\"success\")", "color: colorVar(\"--app-choice-color\")"]
+          "examples": ["color: uiColor(\"success-on-quiet\")", "color: foregroundColorVar(\"--app-choice-color\")"]
         }
       ],
       "useWhen": [
         "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."
+        "Color an optional choice icon with a CssForegroundColor: uiColor() with a foreground token such as success-on-quiet, or foregroundColorVar() for an app-owned property. Fill tokens such as success are backgrounds that leave the icon nearly invisible, so they, lengths, raw color strings, and unqualified colorVar() values are rejected."
       ],
       "avoidWhen": [
         "Do not use for commands or a small choice set that should stay visible."
@@ -3146,7 +3584,7 @@
     },
     {
       "id": "feedback",
-      "name": "Feedback composition",
+      "name": "Feedback",
       "category": "Feedback",
       "kind": "composition",
       "source": "kerf",
@@ -3223,6 +3661,7 @@
       "source": "kerf",
       "description": "Polite status and assertive alert feedback with semantic tones, plus non-status pop emphasis for featured or novel content.",
       "uses": [
+        "badge",
         "lucide-icon"
       ],
       "purpose": "Present persistent inline feedback or attractive non-status emphasis with a named semantic tone.",
@@ -3289,7 +3728,6 @@
       "publicClasses": [
         "kui-state-banner",
         "kui-state-banner__action",
-        "kui-state-banner__badge",
         "kui-state-banner__copy",
         "kui-state-banner__detail",
         "kui-state-banner__icon"
@@ -3321,8 +3759,6 @@
         "--kui-state-banner-action-background",
         "--kui-state-banner-action-hover-background",
         "--kui-state-banner-background",
-        "--kui-state-banner-badge-background",
-        "--kui-state-banner-badge-foreground",
         "--kui-state-banner-border",
         "--kui-state-banner-danger-background",
         "--kui-state-banner-danger-border",
@@ -3511,35 +3947,92 @@
         {
           "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"],
+          "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\""]
+          "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"],
+          "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)}"]
+          "examples": [
+            "height={em(1.5)}"
+          ]
         },
         {
           "path": "radius",
           "grammar": "length",
-          "helpers": ["px", "rem", "em", "pct", "space", "lengthVar", "calc"],
-          "nonStandaloneHelpers": ["plus"],
+          "helpers": [
+            "px",
+            "rem",
+            "em",
+            "pct",
+            "space",
+            "lengthVar",
+            "calc"
+          ],
+          "nonStandaloneHelpers": [
+            "plus"
+          ],
           "shorthands": [],
           "canonicalShorthands": [],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
-          "examples": ["radius={px(999)}"]
+          "examples": [
+            "radius={px(999)}"
+          ]
         }
       ],
       "useWhen": [
@@ -6353,13 +6846,17 @@
       "source": "kerf",
       "purpose": "Toolbar, navigation, content, and inspector shell with controlled resizing and explicit pane scroll owners.",
       "uses": [
+        "pane",
         "toolbar",
         "toolbar-text",
         "toolbar-control-group",
+        "row",
+        "grid",
+        "resize",
         "list-header",
         "list-item",
-        "resize",
         "value-table",
+        "lucide-icon",
         "layout"
       ],
       "useWhen": [
@@ -6396,10 +6893,15 @@
       "source": "kerf",
       "purpose": "Navigation sections with icon and iconless rows, a content-item surface, disclosure, and pane footer actions.",
       "uses": [
+        "pane",
         "list-header",
         "list-item",
+        "list",
+        "text",
         "toolbar",
-        "toolbar-control-group"
+        "toolbar-control-group",
+        "lucide-icon",
+        "layout"
       ],
       "useWhen": [
         "A workspace sidebar needs the shared toolbar/content/footer pane model, 24px major section rhythm, and 44px row and utility-action targets."
@@ -6438,6 +6940,9 @@
         "toolbar",
         "toolbar-control-group",
         "toolbar-text",
+        "list",
+        "list-inset-text",
+        "text",
         "state-banner",
         "layout"
       ],
@@ -6473,14 +6978,17 @@
       "category": "Recipes",
       "kind": "recipe",
       "source": "kerf",
-      "purpose": "Production modal containing a Toolbar heading, navigable record master list, and ValueTable detail.",
+      "purpose": "Production modal whose labeled Web Awesome header frames a SplitView record list and ValueTable detail, becoming a full-screen drill-down on compact devices.",
       "uses": [
-        "toolbar",
-        "toolbar-control-group",
-        "toolbar-text",
+        "surface-scaffold",
+        "split-view",
+        "nav-stack",
+        "row",
+        "list",
         "list-header",
         "list-item",
         "value-table",
+        "lucide-icon",
         "wa-dialog",
         "wa-button"
       ],
@@ -6493,11 +7001,12 @@
       "appOwns": [
         "open state",
         "selected record",
+        "pushed compact detail",
         "dismiss policy",
         "record actions"
       ],
       "accessibility": [
-        "Web Awesome owns modal focus and Escape; the application adapter restores the invoking control after hide, and Toolbar plus ToolbarText supply the visible hierarchy."
+        "Web Awesome owns modal focus, Escape, and the labeled header with its close control; the application adapter restores the invoking control after hide, and the compact NavStack back control returns to the list."
       ],
       "delivery": {
         "sideEffects": [
@@ -6520,8 +7029,11 @@
       "purpose": "One visible publishing-form surface with Toolbar heading hierarchy, fields and actions on the shared 8px control gutter, 24px major rhythm, and a conditional StateBanner as its only nested semantic surface.",
       "uses": [
         "toolbar",
-        "toolbar-control-group",
         "toolbar-text",
+        "list",
+        "list-inset-text",
+        "text",
+        "row",
         "select",
         "state-banner",
         "wa-input",
@@ -6564,9 +7076,12 @@
       "source": "kerf",
       "purpose": "Deterministic loading, empty, populated, stale refresh, and error states around one stable list workspace.",
       "uses": [
+        "pane",
         "toolbar",
         "toolbar-control-group",
         "toolbar-text",
+        "list-item",
+        "row",
         "state-banner",
         "empty-state",
         "loading-spinner",
@@ -6611,7 +7126,11 @@
         "toolbar-control-group",
         "segmented-control",
         "select",
-        "lucide-icon"
+        "lucide-icon",
+        "grid",
+        "list",
+        "list-inset-text",
+        "text"
       ],
       "useWhen": [
         "A dense workspace toolbar mixes a few distinct control semantics."
@@ -6648,8 +7167,12 @@
       "source": "kerf",
       "purpose": "A push/pop navigation stack drill-down with animated slides and a live device class.",
       "uses": [
+        "nav-stack",
+        "list",
         "list-header",
         "list-item",
+        "row",
+        "text",
         "lucide-icon",
         "layout"
       ],
@@ -6687,9 +7210,13 @@
       "source": "kerf",
       "purpose": "A record inspector whose per-record values load asynchronously — every value-bearing component takes a shared placeholder flag, so the same chrome renders a faithful loading state and then the populated record.",
       "uses": [
+        "pane",
         "toolbar",
         "toolbar-control-group",
         "toolbar-text",
+        "list-inset-text",
+        "text",
+        "list",
         "value-table",
         "select",
         "segmented-control",
@@ -6732,11 +7259,20 @@
       "source": "kerf",
       "purpose": "A mini app frame whose left navigation rail and bottom activity drawer are standalone CollapsiblePanels driven by wireSidebar: per-side collapse/expand toggles, focus move-in and restore, a dismissable compact overlay, and per-panel persistence.",
       "uses": [
+        "collapsible-panel",
+        "pane",
+        "row",
+        "list",
+        "grid",
         "list-header",
         "list-item",
+        "text",
         "toolbar",
         "toolbar-control-group",
-        "toolbar-text"
+        "toolbar-text",
+        "value-table",
+        "lucide-icon",
+        "layout"
       ],
       "useWhen": [
         "A rail or drawer must collapse and expand outside a full Workbench shell, keeping the app's collapsed signals, sizes, and content while the wire owns toggle, focus, the compact overlay, and persistence."