@kerfjs/ui 5.0.0-beta.24 → 5.0.0-beta.25

package/ai/component-catalog-v2.json

@@ -433,6 +433,240 @@
         "composition": "generated-permissive-default"
       }
     },
+    {
+      "key": "@kerfjs/ui:nav-stack",
+      "package": "@kerfjs/ui",
+      "id": "nav-stack",
+      "name": "NavStack",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "ordered view stack and stable keys",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "view content and titles",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "push and pop actions",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "focus restoration policy",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "optional persistent bottom toolbar",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireNavStack"],
+        "obligations": ["Use wireNavStack as documented."]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "none",
+          "border": "conditional",
+          "padding": "child",
+          "notes": [
+            "The stack owns its full-height chrome and viewport; each view owns its internal content padding and scrollable content."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "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."
+        ]
+      },
+      "boundaries": {
+        "rootClass": "kui-nav-stack",
+        "publicClasses": [
+          "kui-nav-stack",
+          "kui-nav-stack__chrome",
+          "kui-nav-stack__lead",
+          "kui-nav-stack__back",
+          "kui-nav-stack__back-icon",
+          "kui-nav-stack__title",
+          "kui-nav-stack__actions",
+          "kui-nav-stack__viewport",
+          "kui-nav-stack__view",
+          "kui-nav-stack__view--entering",
+          "kui-nav-stack__view--exiting",
+          "kui-nav-stack__bottom"
+        ],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:split-view",
+      "package": "@kerfjs/ui",
+      "id": "split-view",
+      "name": "SplitView",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "device-class policy",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "selected item and detail-active state",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "list and detail content",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "optional list width and persistence",
+          "owner": "application",
+          "required": false
+        },
+        { "id": "back action", "owner": "application", "required": false }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireResizableRegions", "wireNavStack"],
+        "obligations": ["Use wireNavStack as documented."]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "child",
+          "notes": [
+            "The root owns the two-column split and the list pane owns its separator; list and detail content own their internal padding and scroll behavior."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Give the overall split and both meaningful panes accessible labels.",
+          "Wire the compact back action and optional separator keyboard behavior, and restore focus when controlled navigation replaces a view."
+        ]
+      },
+      "boundaries": {
+        "rootClass": "kui-split-view",
+        "publicClasses": [
+          "kui-split-view",
+          "kui-split-view__list",
+          "kui-resizable-region",
+          "kui-split-view__detail",
+          "kui-split-view--compact"
+        ],
+        "publicTokens": ["--kui-split-view-list-width"]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:tab-scaffold",
+      "package": "@kerfjs/ui",
+      "id": "tab-scaffold",
+      "name": "TabScaffold",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "controlled active tab id",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "tab labels, icons, and content",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "routing and persistence",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "responsive replacement on larger device classes",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireTabScaffold"],
+        "obligations": ["Use wireTabScaffold as documented."]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "The scaffold owns the full-height scene region and safe-area-aware bottom bar; scene content owns its internal geometry."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Give the tablist an accessible label and keep exactly the active tab in the sequential focus order.",
+          "Wire selection through the controlled active id while leaving inactive scenes mounted and hidden."
+        ]
+      },
+      "boundaries": {
+        "rootClass": "kui-tab-scaffold",
+        "publicClasses": [
+          "kui-tab-scaffold",
+          "kui-tab-scaffold__scenes",
+          "kui-tab-scaffold__scene",
+          "kui-tab-scaffold__bar",
+          "kui-tab-scaffold__tab",
+          "kui-tab-scaffold__tab-icon",
+          "kui-tab-scaffold__tab-label"
+        ],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:workbench",
       "package": "@kerfjs/ui",
@@ -489,14 +723,106 @@
           "kui-workbench__rail",
           "kui-workbench__rail--left",
           "kui-workbench__rail--right",
+          "kui-workbench__drawer",
           "kui-workbench__center",
           "kui-workbench__main",
-          "kui-workbench__drawer",
-          "kui-workbench__panel-content"
+          "kui-workbench__panel-content",
+          "kui-workbench__restore"
         ],
         "publicTokens": [
           "--kui-workbench-rail-width",
-          "--kui-workbench-drawer-height"
+          "--kui-workbench-drawer-height",
+          "--kui-workbench-popup-z",
+          "--kui-workbench-overlay-z",
+          "--kui-workbench-overlay-max-width",
+          "--kui-workbench-overlay-max-height",
+          "--kui-workbench-restore-z",
+          "--kui-workbench-restore-inset"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:collapsible-panel",
+      "package": "@kerfjs/ui",
+      "id": "collapsible-panel",
+      "name": "CollapsiblePanel",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "controlled collapsed state",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "panel content and size",
+          "owner": "application",
+          "required": false
+        },
+        { "id": "toggle placement", "owner": "application", "required": false },
+        {
+          "id": "persistence policy",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "compact-device policy",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireSidebar"],
+        "obligations": ["Use wireSidebar as documented."]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "child",
+          "notes": [
+            "The panel owns its dock-edge separator and size track; its child content owns internal padding and scrolling."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Give the panel region and every collapse or restore control an accessible label.",
+          "Keep the restore control outside the disappearing panel and use wireSidebar for focus transfer, Escape, backdrop dismissal, and compact focus trapping."
+        ]
+      },
+      "boundaries": {
+        "rootClass": "kui-collapsible-panel",
+        "publicClasses": [
+          "kui-collapsible-panel",
+          "kui-collapsible-panel--left",
+          "kui-collapsible-panel--right",
+          "kui-collapsible-panel--bottom",
+          "kui-collapsible-panel__content",
+          "kui-collapsible-panel__restore",
+          "kui-collapsible-panel__backdrop",
+          "kui-collapsible-panel__toggle"
+        ],
+        "publicTokens": [
+          "--kui-collapsible-panel-width",
+          "--kui-collapsible-panel-height",
+          "--kui-collapsible-panel-popup-z",
+          "--kui-collapsible-panel-overlay-z",
+          "--kui-collapsible-panel-restore-z",
+          "--kui-collapsible-panel-restore-inset",
+          "--kui-collapsible-panel-backdrop-z"
         ]
       },
       "diagnostics": [],
@@ -573,7 +899,12 @@
       "kind": "component",
       "source": "kerf",
       "parents": { "mode": "any", "entries": [] },
-      "contexts": ["application-chrome", "panel-header"],
+      "contexts": [
+        "application-chrome",
+        "page-header",
+        "panel-header",
+        "dialog-header"
+      ],
       "zones": [
         {
           "id": "leading",
@@ -664,10 +995,7 @@
       "name": "ToolbarControlGroup",
       "kind": "component",
       "source": "kerf",
-      "parents": {
-        "mode": "listed",
-        "entries": ["@kerfjs/ui:toolbar", "@kerfjs/ui:panel-header"]
-      },
+      "parents": { "mode": "listed", "entries": ["@kerfjs/ui:toolbar"] },
       "contexts": ["toolbar-zone"],
       "zones": [
         {
@@ -731,6 +1059,51 @@
         "composition": "docs/component-selection.md#toolbar-composition"
       }
     },
+    {
+      "key": "@kerfjs/ui:surface-scaffold",
+      "package": "@kerfjs/ui",
+      "id": "surface-scaffold",
+      "name": "Surface scaffolds",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        { "id": "open state", "owner": "application", "required": false },
+        { "id": "focus lifecycle", "owner": "application", "required": false },
+        { "id": "dismissal policy", "owner": "application", "required": false },
+        { "id": "content", "owner": "application", "required": false },
+        { "id": "outer placement", "owner": "application", "required": false }
+      ],
+      "wiring": { "required": false, "helpers": [], "obligations": [] },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": { "margin": "parent", "border": "child", "padding": "self" }
+      },
+      "accessibility": {
+        "obligations": [
+          "Supply the wrapped wa-dialog label and retain Web Awesome's native modal and focus behavior.",
+          "Use popup surfaces only for real dropdown menus with named triggers."
+        ]
+      },
+      "boundaries": {
+        "rootClass": "kui-dialog-surface",
+        "publicClasses": ["kui-dialog-surface", "kui-popup-surface"],
+        "publicTokens": [
+          "--kui-radius-l",
+          "--kui-wa-container-inset",
+          "--kui-wa-surface-inset"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:floating-toolbar",
       "package": "@kerfjs/ui",
@@ -858,81 +1231,6 @@
         "composition": "generated-permissive-default"
       }
     },
-    {
-      "key": "@kerfjs/ui:panel-header",
-      "package": "@kerfjs/ui",
-      "id": "panel-header",
-      "name": "PanelHeader",
-      "kind": "component",
-      "source": "kerf",
-      "parents": { "mode": "any", "entries": [] },
-      "contexts": ["page-header", "panel-header", "dialog-header"],
-      "zones": [
-        {
-          "id": "title",
-          "accepts": ["text"],
-          "cardinality": { "min": 1, "max": 1 },
-          "exclusiveWith": []
-        },
-        {
-          "id": "subtitle",
-          "accepts": ["text"],
-          "cardinality": { "min": 0, "max": 1 },
-          "exclusiveWith": []
-        },
-        {
-          "id": "controls",
-          "accepts": ["control"],
-          "cardinality": { "min": 0, "max": "unbounded" },
-          "exclusiveWith": []
-        }
-      ],
-      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
-      "state": [
-        { "id": "placeholder", "owner": "controlled", "required": false }
-      ],
-      "wiring": { "required": false, "helpers": [], "obligations": [] },
-      "responsive": { "owner": "not-applicable", "behaviors": [] },
-      "layout": {
-        "roles": ["structure"],
-        "geometry": { "margin": "none", "border": "child", "padding": "child" }
-      },
-      "accessibility": {
-        "obligations": [
-          "Connect the title id and any provided summary id to the dialog or panel host.",
-          "Pass the trailing actions as a labeled ToolbarControlGroup when the group needs an accessible name.",
-          "For a page/view title pass headingLevel (usually 1) so the title exposes role=heading + aria-level as a heading landmark; omit it for a dialog title, which is referenced via aria-labelledby to titleId."
-        ]
-      },
-      "boundaries": {
-        "rootClass": "kui-panel-header",
-        "publicClasses": [
-          "kui-panel-header",
-          "kui-panel-header__icon",
-          "kui-panel-header__summary"
-        ],
-        "publicTokens": [
-          "--kui-color-brand-fill-quiet",
-          "--kui-color-brand-on-quiet",
-          "--kui-color-text-quiet",
-          "--kui-panel-header-icon-background",
-          "--kui-panel-header-icon-border",
-          "--kui-panel-header-icon-foreground"
-        ]
-      },
-      "diagnostics": [
-        {
-          "id": "KUI-C102",
-          "severity": "error",
-          "when": "the title is absent",
-          "message": "PanelHeader requires a title that names its page, panel, or dialog."
-        }
-      ],
-      "provenance": {
-        "selection": "ai/component-catalog.json",
-        "composition": "docs/component-selection.md#problem-to-component-matrix"
-      }
-    },
     {
       "key": "@kerfjs/ui:value-table",
       "package": "@kerfjs/ui",
@@ -1101,7 +1399,11 @@
           "--kui-layout-item-padding",
           "--kui-layout-pill-radius",
           "--kui-list-header-count-font-size",
-          "--kui-list-header-hover-background"
+          "--kui-list-header-hover-background",
+          "--kui-list-group-divider-color",
+          "--kui-color-brand-on-normal",
+          "--kui-color-danger-fill-normal",
+          "--kui-color-danger-on-normal"
         ]
       },
       "diagnostics": [
@@ -1161,6 +1463,9 @@
           "kui-list-action-row",
           "kui-list-action-row__icon",
           "kui-list-action-row__label",
+          "kui-list-action-row__primary-label",
+          "kui-list-action-row__description",
+          "kui-list-action-row__status",
           "kui-list-action-row__primary",
           "kui-list-action-row__trailing-action"
         ],
@@ -1171,6 +1476,8 @@
           "--kui-color-neutral-fill-normal",
           "--kui-color-neutral-fill-quiet",
           "--kui-color-neutral-on-normal",
+          "--kui-color-neutral-on-quiet",
+          "--kui-color-neutral-border-quiet",
           "--kui-focus-ring",
           "--kui-layout-inline-margin",
           "--kui-layout-item-gap",
@@ -1185,7 +1492,9 @@
           "--kui-list-action-row-selected-background",
           "--kui-list-action-row-selected-border",
           "--kui-list-action-row-selected-color",
-          "--kui-list-action-row-trailing-hover-background"
+          "--kui-list-action-row-trailing-hover-background",
+          "--kui-list-group-divider-color",
+          "--kui-font-xs"
         ]
       },
       "diagnostics": [],
@@ -1233,6 +1542,9 @@
           "kui-list-item",
           "kui-list-item__icon",
           "kui-list-item__label",
+          "kui-list-item__primary-label",
+          "kui-list-item__description",
+          "kui-list-item__status",
           "kui-list-item__trailing"
         ],
         "publicTokens": [
@@ -1240,11 +1552,14 @@
           "--kui-color-neutral-fill-quiet",
           "--kui-color-neutral-on-normal",
           "--kui-color-neutral-on-quiet",
+          "--kui-color-neutral-border-quiet",
           "--kui-focus-ring",
           "--kui-list-item-color",
           "--kui-list-item-hover-background",
           "--kui-list-item-selected-background",
           "--kui-list-item-selected-color",
+          "--kui-list-group-divider-color",
+          "--kui-font-xs",
           "--kui-layout-inline-margin",
           "--kui-layout-item-gap",
           "--kui-layout-item-padding",
@@ -1354,7 +1669,8 @@
           "id": "application data attribute values",
           "owner": "application",
           "required": false
-        }
+        },
+        { "id": "outer placement", "owner": "application", "required": false }
       ],
       "wiring": { "required": false, "helpers": [], "obligations": [] },
       "responsive": { "owner": "not-applicable", "behaviors": [] },
@@ -1570,7 +1886,7 @@
         "obligations": [
           "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.",
-          "Wire Enter to submit without inserting a contenteditable line break and preserve focus plus the text-relative caret across controlled keyboard chip deletion; visual wrapping remains available.",
+          "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."
         ]
       },
@@ -1664,7 +1980,8 @@
           "kui-resizable-region",
           "kui-resizable-region__content",
           "kui-resizable-region__handle",
-          "kui-resizable-region__handle-icon"
+          "kui-resizable-region__handle-icon",
+          "kui-resizable-region__restore"
         ],
         "publicTokens": [
           "--kui-color-border",
@@ -1674,6 +1991,10 @@
           "--kui-radius-s",
           "--kui-resizable-region-handle-active-color",
           "--kui-resizable-region-handle-color",
+          "--kui-resizable-region-overlay-z",
+          "--kui-resizable-region-popup-z",
+          "--kui-resizable-region-restore-inset",
+          "--kui-resizable-region-restore-z",
           "--kui-resizable-region-separator-color",
           "--kui-resizable-region-size"
         ]
@@ -1717,7 +2038,9 @@
       },
       "accessibility": {
         "obligations": [
-          "Verify the live value, standard events, focus, and rendered output."
+          "Verify the live value, standard events, focus, and rendered output.",
+          "A nonempty label names the internal combobox; otherwise ariaLabel supplies a visually hidden label without adding control height, including custom selected content.",
+          "Hint text is visible below the control through Web Awesome's native hint relationship; placeholderText remains the empty value inside the closed control."
         ]
       },
       "boundaries": {
@@ -1726,6 +2049,7 @@
           "kui-select",
           "kui-select--custom-selected",
           "kui-select--fit-menu",
+          "kui-select--label-hidden",
           "kui-select__custom-selected",
           "kui-select__group",
           "kui-select__group--separated",
@@ -4364,7 +4688,7 @@
       },
       "accessibility": {
         "obligations": [
-          "Web Awesome owns modal focus and Escape; the application adapter restores the invoking control after hide, and PanelHeader supplies the visible hierarchy."
+          "Web Awesome owns modal focus and Escape; the application adapter restores the invoking control after hide, and Toolbar plus ToolbarText supply the visible hierarchy."
         ]
       },
       "boundaries": {
@@ -4411,7 +4735,7 @@
       },
       "accessibility": {
         "obligations": [
-          "The form references PanelHeader's title and summary ids; production fields own labels and help; invalid submission creates an assertive persistent StateBanner while successful submission creates a polite persistent banner."
+          "The form references its ToolbarText title and supporting-summary ids; production fields own labels and help; invalid submission creates an assertive persistent StateBanner while successful submission creates a polite persistent banner."
         ]
       },
       "boundaries": {

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

@@ -222,7 +222,8 @@
               ]
             },
             "publicClasses": { "$ref": "#/$defs/stringList" },
-            "publicTokens": { "$ref": "#/$defs/stringList" }
+            "publicTokens": { "$ref": "#/$defs/stringList" },
+            "publicParts": { "$ref": "#/$defs/stringList" }
           },
           "additionalProperties": false
         },