@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/ai/component-composition.json

@@ -160,7 +160,8 @@
       },
       "accessibility": {
         "obligations": [
-          "Decorative icons are aria-hidden; meaningful icons require a label."
+          "Decorative icons are aria-hidden; meaningful icons require a label.",
+          "title adds an SVG <title> as hover text over the whole icon box (a transparent hit box fills the 24-unit view box); with label, the label stays the name, and alone the title names the icon."
         ]
       },
       "cssValueProps": [],
@@ -410,6 +411,7 @@
           "--kui-color-danger-on-fill",
           "--kui-focus-ring",
           "--kui-shadow-s",
+          "--kui-shadow-m",
           "--kui-shadow-l"
         ]
       },
@@ -671,7 +673,7 @@
       ],
       "wiring": {
         "required": false,
-        "helpers": ["wireScrollDividers"],
+        "helpers": ["wireScrollDividers", "wirePaneChrome"],
         "obligations": [],
         "stateAttributes": [
           {
@@ -1909,7 +1911,7 @@
         "obligations": [
           "Name the group when its relationship is not evident from context.",
           "A disabled native button (disabled, or aria-disabled=\"true\" when it must stay focusable) dims to half opacity with the not-allowed cursor and no hover surface; a disabled raw wa-button paints no hover surface either. Do not add disabled styling yourself.",
-          "Name an icon-only button or link with aria-label, not title. Once any help-tag installer is imported (select/register, popup-menu/register, or help-tags/register), it shows an aria-hidden Web Awesome help tag repeating that name after a 500ms hover and at once on keyboard focus, hidden on a press and on Escape, and never joins aria-labelledby. A native title keeps the browser tooltip and gets no second tag.",
+          "Name an icon-only button or link with aria-label, not title. Once any help-tag installer is imported (select/register, popup-menu/register, or help-tags/register), it shows an aria-hidden help tag repeating that name after a 500ms hover and at once on keyboard focus, hidden on a press and on Escape, and never joins aria-labelledby. A native title keeps the browser tooltip and gets no second tag.",
           "In an overlay Pane header (headerPresentation=\"overlay\"), overlay NavStack chrome (chromePresentation=\"overlay\") or bottom toolbar (bottomToolbarPresentation=\"overlay\"), or a DialogSurface floating header's header-actions (headerPresentation=\"floating\"), a default-tone group (not dark-toned, not an avatar scrim) takes --kui-color-text for its controls, so they keep WCAG AA over content passing beneath the translucent chrome material.",
           "A dark-toned group's hover paints a 14% surface wash over its loud fill, on one control of a group or across a lone control's whole group, so the on-loud icon keeps at least 3:1 over a light page and well above it in dark."
         ]
@@ -2011,10 +2013,26 @@
       "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": "open state (openDialog and closeDialog)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "whether a close request may proceed (cancel kui-request-close to keep the dialog open; the panel pulses)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "dismissal policy (lightDismiss)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "content, heading, header actions, and footer",
+          "owner": "application",
+          "required": false
+        },
         { "id": "outer placement", "owner": "application", "required": false },
         {
           "id": "whether core kerfjs/overlay dialogs presented as bottom sheets take this package's geometry and slide (import @kerfjs/ui/overlay-sheet.css; exitClass 'kui-overlay-sheet-exit' for the slide out; the kui-overlay-sheet-resizable class plus wireOverlaySheets for a resize grabber)",
@@ -2035,10 +2053,11 @@
       },
       "accessibility": {
         "obligations": [
-          "Supply the wrapped wa-dialog label and retain Web Awesome's native modal and focus behavior.",
+          "DialogSurface is a native <dialog> opened modally (showModal): it is in the top layer, the rest of the page is inert, focus stays inside, and it returns to the opener on close. Focus starts on an autofocus element, otherwise on the panel.",
+          "Name it with label (also its title text) or labelledBy (the id of a heading, such as a ToolbarText). The close button is named Close (closeLabel) and Escape asks to close; the cancelable kui-request-close event reports source close-button, escape, or backdrop.",
           "Name a PopoverDialogSurface with label or labelledBy, and describe it with describedBy (rendered as aria-describedby), usually a title ToolbarText descriptionId.",
           "A floating header's title uses the normal text color, which keeps WCAG AA over the 80% raised chrome material on any content; the material turns opaque under prefers-reduced-transparency, prefers-contrast: more, forced colors, or without backdrop-filter.",
-          "A resizable bottom sheet's grabber is a focusable horizontal separator (\"Resize sheet\") with aria-valuemin, aria-valuenow, and aria-valuemax in visible px; the arrow keys, Page Up/Down, Home, and End resize it, and its slide motion falls back to Web Awesome's under prefers-reduced-motion.",
+          "A resizable bottom sheet's grabber is a focusable horizontal separator (\"Resize sheet\") with aria-valuemin, aria-valuenow, and aria-valuemax in visible px; the arrow keys, Page Up/Down, Home, and End resize it, and its slide motion is skipped under prefers-reduced-motion.",
           "Use popup surfaces only for real dropdown menus with named triggers."
         ]
       },
@@ -2148,6 +2167,12 @@
         "rootClass": "kui-dialog-surface",
         "publicClasses": [
           "kui-dialog-surface",
+          "kui-dialog-surface__body",
+          "kui-dialog-surface__close",
+          "kui-dialog-surface__footer",
+          "kui-dialog-surface__header",
+          "kui-dialog-surface__header-actions",
+          "kui-dialog-surface__title",
           "kui-popover-dialog-surface",
           "kui-popup-surface"
         ],
@@ -2169,6 +2194,216 @@
         "composition": "generated-permissive-default"
       }
     },
+    {
+      "key": "@kerfjs/ui:list-detail-dialog",
+      "package": "@kerfjs/ui",
+      "id": "list-detail-dialog",
+      "name": "ListDetailDialog",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "open state (openDialog and closeDialog)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "device-class policy (compact)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "selected item and, on compact devices, detailActive and the back action (nav-back)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "list and detail content, their titles, toolbar controls, and footers",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "dismissal policy (lightDismiss)",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": ["wireNavStack"],
+        "obligations": [],
+        "stateAttributes": [
+          {
+            "name": "data-nav-chrome-transition",
+            "on": "kui-nav-stack",
+            "helper": "wireNavStack",
+            "meaning": "\"true\" while the chrome cross-fades between the outgoing and incoming view."
+          },
+          {
+            "name": "data-nav-chrome-copy",
+            "on": "kui-nav-stack__chrome-copy",
+            "helper": "wireNavStack",
+            "meaning": "Marks the inert, aria-hidden snapshot of the outgoing chrome shown during the cross-fade."
+          },
+          {
+            "name": "data-nav-revealed",
+            "on": "kui-nav-stack__view",
+            "helper": "wireNavStack",
+            "meaning": "\"true\" on the preserved, aria-hidden previous view while an incoming view slides over it."
+          },
+          {
+            "name": "data-nav-exiting",
+            "on": "kui-nav-stack__view",
+            "helper": "wireNavStack",
+            "meaning": "\"true\" on a popped view the helper briefly re-inserts to slide it out."
+          },
+          {
+            "name": "data-chrome-overlay",
+            "on": "kui-nav-stack",
+            "helper": "wireNavStack",
+            "meaning": "measured once the helper has measured the compact stack's overlay chrome (compactStack.chromePresentation: overlay) and published its border-box height on the stack root. Re-applied if a re-render drops it."
+          },
+          {
+            "name": "data-bottom-toolbar-overlay",
+            "on": "kui-nav-stack",
+            "helper": "wireNavStack",
+            "meaning": "measured once the helper has measured the compact stack's overlay bottom toolbar (compactStack.bottomToolbarPresentation: overlay) and published its border-box height on the stack root. Re-applied if a re-render drops it."
+          }
+        ]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "parent",
+          "border": "self",
+          "padding": "child",
+          "notes": [
+            "The dialog draws no header and no body inset; each column is a Pane that owns its chrome and content insets, and the column divider runs the dialog's full height."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "It is a native modal <dialog> named by label: the page is inert, focus stays inside, Escape asks to close, and focus returns to the opener on close.",
+          "On roomy devices the detail title is a level-2 heading; every presentation keeps a close control named Close (closeLabel), and the compact back control is named by backLabel."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": null,
+        "publicClasses": [],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:workbench-dialog",
+      "package": "@kerfjs/ui",
+      "id": "workbench-dialog",
+      "name": "WorkbenchDialog",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "open state (openDialog and closeDialog)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "device-class policy (compact), and starting the rails collapsed on compact devices",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "each rail's collapsed state and toggle actions (wireWorkbench closes an overlay rail on Escape or an outside press)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the work area, rail content, actions, and bottom toolbar",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "dismissal policy (lightDismiss)",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": ["wireWorkbench"],
+        "obligations": [],
+        "stateAttributes": [
+          {
+            "name": "data-responsive-overlay-active",
+            "on": "kui-workbench__rail and kui-workbench__drawer",
+            "helper": "wireWorkbench",
+            "meaning": "Present while a panel's numeric responsiveOverlayAt threshold applies to the Workbench width; the same measurement drives overlay layout and collapsed-state transitions."
+          },
+          {
+            "name": "data-numeric-overlays",
+            "on": "kui-workbench",
+            "helper": "wireWorkbench",
+            "meaning": "Space-separated left, right, drawer, rail-open, and open tokens mirror numeric overlay state for local CSS invalidation. Absent when no numeric overlay is active."
+          },
+          {
+            "name": "data-handle-inset",
+            "on": "kui-workbench__rail",
+            "helper": "wireWorkbench",
+            "meaning": "Written by the shared resize wiring when the work-area minimum or a parent clamp holds a rail's maximum near its size. It carries no Workbench styling; the Workbench handle stays at the rail's inner edge."
+          },
+          {
+            "name": "data-resizing",
+            "on": "kui-workbench__rail",
+            "helper": "wireWorkbench",
+            "meaning": "Present on a resizable rail or the drawer while a pointer drag resizes it."
+          }
+        ]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "parent",
+          "border": "self",
+          "padding": "child",
+          "notes": [
+            "The dialog draws no header and no body inset; the Workbench's work area and rails own their chrome and content insets, and the rail dividers run the dialog's full height."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "It is a native modal <dialog> named by label: the page is inert, focus stays inside, Escape asks to close, and focus returns to the opener on close.",
+          "The title is a level-2 heading; the close control is named Close (closeLabel) and stays the outermost trailing control. An open overlay rail takes focus, keeps Tab inside it, and closes on Escape before the dialog does."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": null,
+        "publicClasses": [],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:floating-toolbar",
       "package": "@kerfjs/ui",
@@ -3836,7 +4071,8 @@
           "An ordinary item adds no role or name; pass ariaLabel only when the item is a distinct named region (it then renders role=\"region\").",
           "focusTarget makes the item a programmatic focus target (tabindex=\"-1\", never a tab stop), such as a NavStack view's data-nav-focus target.",
           "The frame is decorative and never the only signal of state.",
-          "selectionMode=\"multiple\" renders a focusable row with aria-selected and a gridcell for nested controls; place it in a labeled List selectionMode=\"multiple\" grid. wireContentItems moves focus among rows with Up/Down and Home/End while nested controls retain those keys. Guard the app's delegated card action with isContentItemActivation so a nested control does not select the row."
+          "selectionMode=\"multiple\" renders a focusable row with aria-selected and a gridcell for nested controls; place it in a labeled List selectionMode=\"multiple\" grid. wireContentItems moves focus among rows with Up/Down and Home/End while nested controls retain those keys. Enter and Space activate the card with a click that carries the key's Shift, Ctrl, and Cmd state, so one delegated click handler implements range and toggle selection for pointer and keyboard alike. Guard the app's delegated card action with isContentItemActivation so a nested control does not select the row.",
+          "In a multi-select List or Grid, wireContentItems keeps one roving Tab stop (the last focused row, else the first selected, else the first enabled) across re-renders. A gridRow item is a row with a gridcell and no aria-selected or Tab stop; arrow keys skip it and its controls stay reachable by Tab."
         ]
       },
       "cssValueProps": [],
@@ -3866,27 +4102,34 @@
       }
     },
     {
-      "key": "@kerfjs/ui:application-tabs",
+      "key": "@kerfjs/ui:disclosure",
       "package": "@kerfjs/ui",
-      "id": "application-tabs",
-      "name": "Application Tabs",
-      "kind": "composition",
+      "id": "disclosure",
+      "name": "Disclosure",
+      "kind": "component",
       "source": "kerf",
       "parents": { "mode": "any", "entries": [] },
       "contexts": ["application-ui"],
       "zones": [],
       "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
       "state": [
-        { "id": "ordered tabs", "owner": "application", "required": false },
-        { "id": "selected tab", "owner": "application", "required": false },
-        { "id": "tabpanels", "owner": "application", "required": false },
         {
-          "id": "add and close policy",
+          "id": "the title, detail, and content",
           "owner": "application",
           "required": false
         },
         {
-          "id": "routing and persistence",
+          "id": "the initial open state, and closing it from code (element.open = false)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the exclusive group name",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "reacting to the native toggle event (captured, through toggleAction)",
           "owner": "application",
           "required": false
         }
@@ -3899,19 +4142,33 @@
       },
       "responsive": { "owner": "not-applicable", "behaviors": [] },
       "layout": {
-        "roles": ["navigation"],
-        "geometry": { "margin": "child", "border": "child", "padding": "child" }
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "self",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "The root takes the content-item geometry (8px inline margin, a 1px border, 8px padding); the content starts on the title's text column."
+          ]
+        }
       },
       "accessibility": {
         "obligations": [
-          "Keep one selected tab synchronized with one named tabpanel and retain the wireTabBars disposer."
+          "The native summary is a button that Enter and Space toggle and that reports its expanded state; the DisclosureArrow is decorative.",
+          "Keep the title a short, meaningful name for the hidden content; the open state survives re-renders because the platform owns it."
         ]
       },
       "cssValueProps": [],
       "boundaries": {
-        "rootClass": null,
-        "publicClasses": [],
-        "publicTokens": []
+        "rootClass": "kui-disclosure",
+        "publicClasses": [
+          "kui-disclosure",
+          "kui-disclosure__summary",
+          "kui-disclosure__title",
+          "kui-disclosure__detail",
+          "kui-disclosure__content"
+        ],
+        "publicTokens": ["--kui-disclosure-arrow-size"]
       },
       "diagnostics": [],
       "provenance": {
@@ -3920,18 +4177,72 @@
       }
     },
     {
-      "key": "@kerfjs/ui:tabs",
+      "key": "@kerfjs/ui:application-tabs",
       "package": "@kerfjs/ui",
-      "id": "tabs",
-      "name": "AppTab",
-      "kind": "component",
+      "id": "application-tabs",
+      "name": "Application Tabs",
+      "kind": "composition",
       "source": "kerf",
-      "parents": { "mode": "listed", "entries": ["@kerfjs/ui:tab-bar"] },
-      "contexts": ["tabpanel-navigation"],
-      "zones": [
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        { "id": "ordered tabs", "owner": "application", "required": false },
+        { "id": "selected tab", "owner": "application", "required": false },
+        { "id": "tabpanels", "owner": "application", "required": false },
         {
-          "id": "leading-decoration",
-          "jsx": { "prop": "leading" },
+          "id": "add and close policy",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "routing and persistence",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["navigation"],
+        "geometry": { "margin": "child", "border": "child", "padding": "child" }
+      },
+      "accessibility": {
+        "obligations": [
+          "Keep one selected tab synchronized with one named tabpanel and retain the wireTabBars disposer."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": null,
+        "publicClasses": [],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:tabs",
+      "package": "@kerfjs/ui",
+      "id": "tabs",
+      "name": "TabBarItem",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "listed", "entries": ["@kerfjs/ui:tab-bar"] },
+      "contexts": ["tabpanel-navigation"],
+      "zones": [
+        {
+          "id": "leading-decoration",
+          "jsx": { "prop": "leading" },
           "accepts": ["dormant-decoration"],
           "cardinality": { "min": 0, "max": 1 },
           "exclusiveWith": []
@@ -3989,28 +4300,28 @@
       },
       "cssValueProps": [],
       "boundaries": {
-        "rootClass": "kui-app-tab",
+        "rootClass": "kui-tab-bar-item",
         "publicClasses": [
-          "kui-app-tab",
-          "kui-app-tab__close",
-          "kui-app-tab__close-icon",
-          "kui-app-tab__name",
-          "kui-app-tab__select",
-          "kui-app-tab__trailing"
+          "kui-tab-bar-item",
+          "kui-tab-bar-item__close",
+          "kui-tab-bar-item__close-icon",
+          "kui-tab-bar-item__name",
+          "kui-tab-bar-item__select",
+          "kui-tab-bar-item__trailing"
         ],
         "publicTokens": [
-          "--kui-app-tab-attention-color",
-          "--kui-app-tab-color",
-          "--kui-app-tab-drop-indicator",
-          "--kui-app-tab-drop-target-background",
-          "--kui-app-tab-drop-target-color",
-          "--kui-app-tab-drop-target-ring",
-          "--kui-app-tab-hover-background",
-          "--kui-app-tab-pinned-background",
-          "--kui-app-tab-pinned-hover-background",
-          "--kui-app-tab-selected-background",
-          "--kui-app-tab-selected-border",
-          "--kui-app-tab-selected-color",
+          "--kui-tab-bar-item-attention-color",
+          "--kui-tab-bar-item-color",
+          "--kui-tab-bar-item-drop-indicator",
+          "--kui-tab-bar-item-drop-target-background",
+          "--kui-tab-bar-item-drop-target-color",
+          "--kui-tab-bar-item-drop-target-ring",
+          "--kui-tab-bar-item-hover-background",
+          "--kui-tab-bar-item-pinned-background",
+          "--kui-tab-bar-item-pinned-hover-background",
+          "--kui-tab-bar-item-selected-background",
+          "--kui-tab-bar-item-selected-border",
+          "--kui-tab-bar-item-selected-color",
           "--kui-color-brand-border-normal",
           "--kui-color-brand-on-quiet",
           "--kui-color-neutral-border-normal",
@@ -4072,8 +4383,8 @@
       ],
       "children": {
         "mode": "listed",
-        "concepts": ["app-tab"],
-        "requiredConcepts": ["app-tab"]
+        "concepts": ["tab-bar-item"],
+        "requiredConcepts": ["tab-bar-item"]
       },
       "state": [
         { "id": "selected-tab", "owner": "controlled", "required": true }
@@ -4088,13 +4399,13 @@
         "stateAttributes": [
           {
             "name": "data-tab-dragging",
-            "on": "AppTab (data-component=\"app-tab\")",
+            "on": "TabBarItem (data-component=\"tab-bar-item\")",
             "helper": "wireTabBars",
             "meaning": "\"true\" on the tab being dragged."
           },
           {
             "name": "data-tab-drop-position",
-            "on": "AppTab (data-component=\"app-tab\")",
+            "on": "TabBarItem (data-component=\"tab-bar-item\")",
             "helper": "wireTabBars",
             "meaning": "\"before\" or \"after\" on the tab under the pointer: where the dragged tab would land."
           },
@@ -4265,9 +4576,11 @@
       "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
       "state": [{ "id": "value", "owner": "controlled", "required": false }],
       "wiring": {
-        "required": false,
-        "helpers": [],
-        "obligations": [],
+        "required": true,
+        "helpers": ["wireChoiceChips"],
+        "obligations": [
+          "Gives a multiple: true group its listbox selection: pointer and keyboard gestures, roving focus, aria-selected, hidden form inputs, and a change event on the group. Radio and toggle groups use native inputs and need no wiring."
+        ],
         "stateAttributes": []
       },
       "responsive": { "owner": "not-applicable", "behaviors": [] },
@@ -4309,10 +4622,262 @@
       }
     },
     {
-      "key": "@kerfjs/ui:composer",
+      "key": "@kerfjs/ui:color-swatches",
+      "package": "@kerfjs/ui",
+      "id": "color-swatches",
+      "name": "ColorSwatches",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the palette and its color names",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the chosen value (read it on change through action)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the field name and form association",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "The group takes the shared block-content inset (a transparent 1px border and 8px padding), so its label sits on the text column; each swatch keeps 4px of room for its ring, pulled back at the row's edges."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "It is a native radio group: Tab reaches it once and the arrow keys move the choice; each radio is named by its color label, also shown as the swatch's hover hint.",
+          "The chosen swatch wears a ring in the text color set off by a gap, so the choice never depends on hue; forced colors draw it in Highlight."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-color-swatches",
+        "publicClasses": [
+          "kui-color-swatches",
+          "kui-color-swatches__label",
+          "kui-color-swatches__list",
+          "kui-color-swatches__swatch",
+          "kui-color-swatches__input",
+          "kui-color-swatches__dot"
+        ],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:color-picker",
+      "package": "@kerfjs/ui",
+      "id": "color-picker",
+      "name": "ColorPicker",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the value and mode (update them from onChange and re-render)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "presets and samples, and adding to samples on addSampleAction",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the field name and form association",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireColorPickers"],
+        "obligations": ["Use wireColorPickers as documented."],
+        "stateAttributes": [
+          {
+            "name": "data-shown",
+            "on": "kui-color-picker__channel",
+            "helper": "wireColorPickers",
+            "meaning": "The text a channel, hex, or opacity field last showed, so leaving an unedited field commits nothing."
+          },
+          {
+            "name": "data-count",
+            "on": "kui-color-picker__channels",
+            "helper": "wireColorPickers",
+            "meaning": "How many channel fields the current model shows (1 for Grayscale, 3 otherwise)."
+          }
+        ]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "The panel takes the shared block-content inset and a 320px maximum width; its rows are 12px apart."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The area is a slider named Saturation and Brightness with a spoken value; the arrow keys move it (Shift for 10% steps), Page Up and Down change brightness, Home and End saturation.",
+          "Hue and opacity are native range inputs; every field is named (Red, Hue, Hex Color, Opacity); the picker is a named group."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-color-picker",
+        "publicClasses": [
+          "kui-color-picker",
+          "kui-color-picker__surface",
+          "kui-color-picker__area",
+          "kui-color-picker__area-thumb",
+          "kui-color-picker__hue",
+          "kui-color-picker__opacity",
+          "kui-color-picker__controls",
+          "kui-color-picker__mode-wrap",
+          "kui-color-picker__mode-icon",
+          "kui-color-picker__mode",
+          "kui-color-picker__tool",
+          "kui-color-picker__channels",
+          "kui-color-picker__hex-row",
+          "kui-color-picker__field",
+          "kui-color-picker__field-label",
+          "kui-color-picker__field--hex"
+        ],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:color-field",
+      "package": "@kerfjs/ui",
+      "id": "color-field",
+      "name": "ColorField",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the value and model (update them from onChange and re-render)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "per-field picker presets and samples (wireColorFields pickers)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the field name and form association",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireColorFields"],
+        "obligations": ["Use wireColorFields as documented."],
+        "stateAttributes": [
+          {
+            "name": "data-value",
+            "on": "kui-color-field",
+            "helper": "wireColorFields",
+            "meaning": "The committed color, updated by the wiring until the app re-renders, so reopening the picker starts from the last edit."
+          },
+          {
+            "name": "data-mode",
+            "on": "kui-color-field",
+            "helper": "wireColorFields",
+            "meaning": "The committed color model, updated the same way as data-value."
+          }
+        ]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "The trigger matches TextField's box, label, hint, and error geometry."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The trigger is a button named by the label and the current hex value, with aria-haspopup dialog and aria-expanded; the hint and error describe it.",
+          "The picker opens in a non-modal AnchoredSurface named by the label; Escape or a press outside closes it and focus returns to the trigger."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-color-field",
+        "publicClasses": [
+          "kui-color-field",
+          "kui-color-field__label",
+          "kui-color-field__required",
+          "kui-color-field__trigger",
+          "kui-color-field__swatch",
+          "kui-color-field__hex",
+          "kui-color-field__chevron",
+          "kui-color-field__hint",
+          "kui-color-field__error"
+        ],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:message-composer",
       "package": "@kerfjs/ui",
-      "id": "composer",
-      "name": "Composer",
+      "id": "message-composer",
+      "name": "MessageComposer",
       "kind": "component",
       "source": "kerf",
       "parents": { "mode": "any", "entries": [] },
@@ -4330,7 +4895,7 @@
       "state": [{ "id": "value", "owner": "controlled", "required": false }],
       "wiring": {
         "required": false,
-        "helpers": ["wireComposers"],
+        "helpers": ["wireMessageComposers"],
         "obligations": [],
         "stateAttributes": []
       },
@@ -4347,21 +4912,21 @@
       },
       "cssValueProps": [],
       "boundaries": {
-        "rootClass": "kui-composer",
-        "publicClasses": ["kui-composer"],
+        "rootClass": "kui-message-composer",
+        "publicClasses": ["kui-message-composer"],
         "publicTokens": []
       },
       "diagnostics": [],
       "provenance": {
         "selection": "ai/component-catalog.json",
-        "composition": "docs/accessibility.md#composer"
+        "composition": "docs/accessibility.md#messagecomposer"
       }
     },
     {
-      "key": "@kerfjs/ui:token-search-field",
+      "key": "@kerfjs/ui:search-field",
       "package": "@kerfjs/ui",
-      "id": "token-search-field",
-      "name": "TokenSearchField",
+      "id": "search-field",
+      "name": "SearchField",
       "kind": "component",
       "source": "kerf",
       "parents": { "mode": "any", "entries": [] },
@@ -4390,28 +4955,29 @@
       ],
       "wiring": {
         "required": true,
-        "helpers": ["wireTokenSearchFields"],
+        "helpers": ["wireSearchFields"],
         "obligations": [
           "Retain and invoke the disposer.",
-          "Use readTokenSearchField for DOM-owned text."
+          "Use readSearchField for DOM-owned text.",
+          "With a managed model, read model.state.peek() (never model.state.value) in the host render and bind model.result as a signal hole; the field itself re-renders only when model.structure changes, not per keystroke."
         ],
         "stateAttributes": [
           {
-            "name": "data-token-search-text",
-            "on": "the text span inside kui-token-search__editor",
-            "helper": "wireTokenSearchFields",
+            "name": "data-search-field-text",
+            "on": "the text span inside kui-search-field__editor",
+            "helper": "wireSearchFields",
             "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",
-            "helper": "wireTokenSearchFields",
+            "on": "the text span inside kui-search-field__editor",
+            "helper": "wireSearchFields",
             "meaning": "\"true\" on that span while it holds no text."
           },
           {
             "name": "data-placeholder-visible",
-            "on": "the kui-token-search root",
-            "helper": "wireTokenSearchFields",
+            "on": "the kui-search-field root",
+            "helper": "wireSearchFields",
             "meaning": "Tracks whether the DOM-owned editor is empty so its placeholder stays outside the editable area."
           }
         ]
@@ -4426,25 +4992,25 @@
           "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. 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.",
-          "The form-field presentation associates its visible label and optional hint with the searchbox, exposes aria-required when required, and lets wireTokenSearchFields focus the editor from a label click. The app validates required input."
+          "In collapsible mode, wireSearchFields 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.",
+          "The form-field presentation associates its visible label and optional hint with the searchbox, exposes aria-required when required, and lets wireSearchFields focus the editor from a label click. The app validates required input."
         ]
       },
       "cssValueProps": [],
       "boundaries": {
-        "rootClass": "kui-token-search",
+        "rootClass": "kui-search-field",
         "publicClasses": [
-          "kui-token-search",
-          "kui-token-search__clear",
-          "kui-token-search__editor",
-          "kui-token-search__expand",
-          "kui-token-search__leading",
-          "kui-token-search__token",
-          "kui-token-search__token-edit",
-          "kui-token-search__token-remove",
-          "kui-token-search__suggestions",
-          "kui-token-search__suggestion",
-          "kui-token-search__trailing"
+          "kui-search-field",
+          "kui-search-field__clear",
+          "kui-search-field__editor",
+          "kui-search-field__expand",
+          "kui-search-field__leading",
+          "kui-search-field__token",
+          "kui-search-field__token-edit",
+          "kui-search-field__token-remove",
+          "kui-search-field__suggestions",
+          "kui-search-field__suggestion",
+          "kui-search-field__trailing"
         ],
         "publicTokens": [
           "--kui-color-brand-fill-normal",
@@ -4458,50 +5024,114 @@
           "--kui-font-s",
           "--kui-font-xs",
           "--kui-radius-pill",
-          "--kui-token-search-background",
-          "--kui-token-search-border",
-          "--kui-token-search-editor-min-width",
-          "--kui-token-search-line-size",
-          "--kui-token-search-token-background",
-          "--kui-token-search-token-foreground",
-          "--kui-token-search-expanded-width"
+          "--kui-search-field-background",
+          "--kui-search-field-border",
+          "--kui-search-field-editor-min-width",
+          "--kui-search-field-line-size",
+          "--kui-search-field-token-background",
+          "--kui-search-field-token-foreground",
+          "--kui-search-field-expanded-width"
         ]
       },
       "diagnostics": [
         {
           "id": "KUI-C105",
           "severity": "error",
-          "when": "wireTokenSearchFields is absent",
-          "message": "TokenSearchField requires its public wiring helper for keyboard and collapsible behavior."
+          "when": "wireSearchFields is absent",
+          "message": "SearchField requires its public wiring helper for keyboard and collapsible behavior."
         }
       ],
       "provenance": {
         "selection": "ai/component-catalog.json",
-        "composition": "docs/accessibility.md#tokensearchfield"
+        "composition": "docs/accessibility.md#searchfield"
       }
     },
     {
-      "key": "@kerfjs/ui:resize",
+      "key": "@kerfjs/ui:tag-field",
       "package": "@kerfjs/ui",
-      "id": "resize",
-      "name": "ResizableRegion",
+      "id": "tag-field",
+      "name": "TagField",
       "kind": "component",
       "source": "kerf",
       "parents": { "mode": "any", "entries": [] },
-      "contexts": ["adjustable-pane-boundary"],
+      "contexts": ["application-ui"],
       "zones": [],
       "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
-      "state": [{ "id": "size", "owner": "controlled", "required": true }],
+      "state": [
+        {
+          "id": "the tag list (update it from onChange and re-render)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "validation and normalization (normalize) and showing refusals (onReject, error)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the field name and form association",
+          "owner": "application",
+          "required": false
+        }
+      ],
       "wiring": {
         "required": true,
-        "helpers": ["wireResizableRegions"],
-        "obligations": [
-          "Retain and invoke the disposer.",
-          "Persist committed size in the application when persistence is required."
-        ],
-        "stateAttributes": [
-          {
-            "name": "data-handle-inset",
+        "helpers": ["wireTagFields"],
+        "obligations": ["Use wireTagFields as documented."],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "child",
+          "border": "child",
+          "padding": "child",
+          "notes": [
+            "The SearchField form-field presentation draws the label, frame, chips, and hint; TagField adds no geometry of its own."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The editor is named by the visible label and described by the hint or error; each chip has an edit button (its label) and a remove button named for the tag.",
+          "Enter or a delimiter adds the typed text, Backspace at the start removes the last tag, ArrowLeft and ArrowRight move between chips and the editor, and Backspace or Delete on a focused chip removes it."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-tag-field",
+        "publicClasses": ["kui-tag-field"],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:resize",
+      "package": "@kerfjs/ui",
+      "id": "resize",
+      "name": "ResizableRegion",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["adjustable-pane-boundary"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [{ "id": "size", "owner": "controlled", "required": true }],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireResizableRegions"],
+        "obligations": [
+          "Retain and invoke the disposer.",
+          "Persist committed size in the application when persistence is required."
+        ],
+        "stateAttributes": [
+          {
+            "name": "data-handle-inset",
             "on": "kui-resizable-region",
             "helper": "wireResizableRegions",
             "meaning": "Present while a clipping edge clamps the region: the handle and its focus ring sit inside the region instead of overhanging that edge."
@@ -4596,91 +5226,539 @@
       "contexts": ["controlled-value-selection"],
       "zones": [],
       "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
-      "state": [{ "id": "value", "owner": "controlled", "required": true }],
+      "state": [{ "id": "value", "owner": "controlled", "required": true }],
+      "wiring": {
+        "required": true,
+        "helpers": ["@kerfjs/ui/select/register"],
+        "obligations": [
+          "Import the registration module once in the application."
+        ],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": { "margin": "none", "border": "self", "padding": "self" }
+      },
+      "accessibility": {
+        "obligations": [
+          "Verify the live value, standard events, focus, and rendered output.",
+          "The trigger is a native button with role=\"combobox\", aria-haspopup=\"listbox\", and aria-expanded. A nonempty label names it (the visible label is aria-hidden text beside it); otherwise ariaLabel names it without adding control height, including custom selected content.",
+          "Hint text is visible below the control and is the trigger's aria-description; placeholderText remains the empty value inside the closed control.",
+          "Import select/register once: it defines the form-associated kui-select root (value, name, form submission, and form reset) and wires every Select in the document. The listbox opens below the trigger in the top layer, flipping above when short and capped at the viewport edges. Do not add consumer popup timing or position repairs.",
+          "Keyboard: Enter, Space, ArrowDown, or ArrowUp on the trigger opens on the chosen option (Home/End on the first/last), and typing opens on a matching label; in the listbox the arrows move and wrap, Home/End jump, typing a label's first letters moves to it, Enter or Space chooses, Escape closes and returns focus to the trigger, and Tab closes and continues from the trigger.",
+          "With multiple, the listbox (aria-multiselectable) stays open while choices toggle (pointer, Enter, or Space) and closes on an outside press, Escape, or Tab; each chosen option shows a check, and the closed control summarizes the chosen labels in choice order.",
+          "Disabled choices stay visible with aria-disabled but cannot be chosen; disabledReason is their title. A multiple Select can opt in to localized select-all and clear buttons below the listbox, which skip disabled choices and publish ordinary change events for changed values.",
+          "A multiple icon-only trigger shows its fixed triggerIcon and, while any choice is chosen, an aria-hidden count Badge; the trigger's accessible name ends with the chosen labels in choice order, and its value text stays empty.",
+          "Once registered, an icon-only trigger (single or multiple) shows an aria-hidden help tag repeating its accessible name (a single Select adds its current choice) after a 500ms hover and at once on keyboard focus; it hides while the listbox is open, on a press, and on Escape, and never joins aria-labelledby. Do not add a title or another tooltip."
+        ]
+      },
+      "cssValueProps": [
+        {
+          "path": "choices[].color",
+          "grammar": "color",
+          "helpers": ["uiColor", "foregroundColorVar", "foregroundColor"],
+          "shorthands": [],
+          "canonicalShorthands": [],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": [
+            "color: uiColor(\"success-on-quiet\")",
+            "color: foregroundColorVar(\"--app-choice-color\")",
+            "color: foregroundColor(\"rebeccapurple\")"
+          ]
+        }
+      ],
+      "boundaries": {
+        "rootClass": "kui-select",
+        "publicClasses": [
+          "kui-select",
+          "kui-select--custom-selected",
+          "kui-select--fit-menu",
+          "kui-select__custom-selected",
+          "kui-select__custom-selected-content",
+          "kui-select__group",
+          "kui-select__group--separated",
+          "kui-select__group-title",
+          "kui-select__icon",
+          "kui-select__listbox",
+          "kui-select__option",
+          "kui-select__popup",
+          "kui-select__trigger",
+          "kui-select__value"
+        ],
+        "publicTokens": [
+          "--kui-color-neutral-border-quiet",
+          "--kui-color-neutral-on-quiet",
+          "--kui-disclosure-icon-scale",
+          "--kui-font-2xs",
+          "--kui-select-selected-color",
+          "--kui-select-selected-font-size",
+          "--kui-select-selected-font-weight",
+          "--kui-select-trigger-max-width"
+        ]
+      },
+      "diagnostics": [
+        {
+          "id": "KUI-C107",
+          "severity": "error",
+          "when": "the registration import is absent",
+          "message": "Select requires @kerfjs/ui/select/register once per application."
+        }
+      ],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "README.md#web-awesome-theme"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:combobox",
+      "package": "@kerfjs/ui",
+      "id": "combobox",
+      "name": "Combobox",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the suggestions and the committed values",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "normalizing and validating created values",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "clearing the field after a commit",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireComboboxes"],
+        "obligations": [
+          "Filters suggestions, moves the active option, and reports commits; without it the list never opens."
+        ],
+        "stateAttributes": [
+          {
+            "name": "data-value",
+            "on": "the create option (kui-combobox__option[data-create])",
+            "helper": "wireComboboxes",
+            "meaning": "The typed text the create option would commit; rewritten as the person types."
+          },
+          {
+            "name": "data-placement",
+            "on": "kui-combobox__listbox",
+            "helper": "wireComboboxes",
+            "meaning": "The side the open listbox was placed on (bottom-start, or top-start after a flip when the field is near the viewport's bottom)."
+          }
+        ]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "Label and hint sit on the value's text column (1px border + 8px padding); the 44px field matches a themed wa-input."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Native input with role=combobox, aria-autocomplete=list, aria-expanded, aria-controls, and aria-activedescendant; options are role=option in a listbox. The visible label is a real label; the hint is aria-describedby.",
+          "The suggestion listbox is a manual popover in the top layer, placed below the field at its width and flipped when short, so a clipping or scrolling ancestor (an AnchoredSurface, a dialog, a scrolling List) never cuts it off."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-combobox",
+        "publicClasses": [
+          "kui-combobox",
+          "kui-combobox__label",
+          "kui-combobox__hint",
+          "kui-combobox__control",
+          "kui-combobox__input",
+          "kui-combobox__listbox",
+          "kui-combobox__option"
+        ],
+        "rootElement": "div",
+        "publicTokens": [
+          "--kui-color-neutral-on-quiet",
+          "--kui-color-text-quiet",
+          "--kui-color-neutral-border-normal",
+          "--kui-color-text",
+          "--kui-color-surface",
+          "--kui-color-surface-raised",
+          "--kui-color-text-link",
+          "--kui-color-brand-fill-quiet",
+          "--kui-font-xs",
+          "--kui-font-s",
+          "--kui-layout-item-padding",
+          "--kui-layout-rounded-radius",
+          "--kui-shadow-l",
+          "--kui-space-2xs",
+          "--kui-space-xs"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:text-field",
+      "package": "@kerfjs/ui",
+      "id": "text-field",
+      "name": "TextField",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        { "id": "value", "owner": "application", "required": false },
+        {
+          "id": "validation and error copy",
+          "owner": "application",
+          "required": false
+        },
+        { "id": "hint copy", "owner": "application", "required": false },
+        {
+          "id": "what a cleared field means",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": ["wireTextFields"],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "Label, hint, and error sit on the value's text column (1px border + 8px padding); the 44px box matches Button and Select, and compact matches their compact 33px."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The whole field is a <label> around a native <input> or <textarea>, so clicking anywhere on it focuses the field; the input is named by label (aria-label, with the visible label text hidden from assistive technology so the clear button and count stay out of the name) or by ariaLabel. Focus shows the standard focus ring around the box.",
+          "The hint and error are visible below the field and form the input's aria-description; an error also sets aria-invalid=\"true\". The clear button is a native button named by clearLabel (default Clear), hidden while the field is empty, and returns focus to the field.",
+          "Compact text grows to 16px on coarse-pointer touch screens so iOS does not zoom on focus."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-text-field",
+        "publicClasses": [
+          "kui-text-field",
+          "kui-text-field__label",
+          "kui-text-field__required",
+          "kui-text-field__box",
+          "kui-text-field__icon",
+          "kui-text-field__input",
+          "kui-text-field__clear",
+          "kui-text-field__hint",
+          "kui-text-field__error",
+          "kui-text-field__footer",
+          "kui-text-field__count"
+        ],
+        "rootElement": "label",
+        "publicTokens": [
+          "--kui-color-neutral-on-quiet",
+          "--kui-color-neutral-border-normal",
+          "--kui-color-danger-border-loud",
+          "--kui-color-danger-on-quiet",
+          "--kui-color-text",
+          "--kui-color-text-quiet",
+          "--kui-color-surface",
+          "--kui-focus-ring",
+          "--kui-font-m",
+          "--kui-font-s",
+          "--kui-font-xs",
+          "--kui-layout-item-padding",
+          "--kui-layout-rounded-radius",
+          "--kui-radius-circle"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:checkbox",
+      "package": "@kerfjs/ui",
+      "id": "checkbox",
+      "name": "Checkbox",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "checked and indeterminate state",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "validation and error copy",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "what a change does",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": ["wireCheckboxes"],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "none",
+          "notes": [
+            "A 20px box (18px compact) 8px (7px) before its label; hint and error align with the label text."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "A native <input type=\"checkbox\"> inside its <label>, invisibly over the drawn box, so the label names it and pointer, keyboard, touch exploration, and forms reach the real control; Space toggles it and focus shows the focus ring on the box.",
+          "The hint and error form the input's aria-description; an error sets aria-invalid=\"true\" and the danger border. indeterminate sets the native indeterminate property through wireCheckboxes, so assistive technology reports a mixed state."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-checkbox",
+        "publicClasses": [
+          "kui-checkbox",
+          "kui-checkbox__row",
+          "kui-checkbox__control",
+          "kui-checkbox__input",
+          "kui-checkbox__box",
+          "kui-checkbox__label",
+          "kui-checkbox__hint",
+          "kui-checkbox__error"
+        ],
+        "rootElement": "div",
+        "publicTokens": [
+          "--kui-color-brand-fill-loud",
+          "--kui-color-brand-on-loud",
+          "--kui-color-neutral-border-normal",
+          "--kui-color-surface",
+          "--kui-color-text",
+          "--kui-color-text-quiet",
+          "--kui-color-danger-border-loud",
+          "--kui-color-danger-on-quiet",
+          "--kui-focus-ring",
+          "--kui-font-m",
+          "--kui-font-s",
+          "--kui-font-xs"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:radio-group",
+      "package": "@kerfjs/ui",
+      "id": "radio-group",
+      "name": "RadioGroup",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        { "id": "value", "owner": "application", "required": false },
+        {
+          "id": "choices and their copy",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "validation and error copy",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "none",
+          "border": "none",
+          "padding": "self",
+          "notes": [
+            "The label and hint sit on the text column (1px + 8px); the choices sit on the 8px control column, 12px apart."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "A native <fieldset role=\"radiogroup\"> named by its legend (label) or ariaLabel; each choice is a native radio inside its <label>, invisibly over the drawn circle. The browser owns the interaction: one Tab stop, arrow keys move and select, and the checked radio submits its value under name.",
+          "The group's hint and error form its aria-description; an error sets aria-invalid on the group and the danger border on each circle. required sets each radio's native required and aria-required on the group. A choice's hint is that radio's aria-description."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-radio-group",
+        "publicClasses": [
+          "kui-radio-group",
+          "kui-radio-group__label",
+          "kui-radio-group__choices",
+          "kui-radio-group__choice",
+          "kui-radio-group__row",
+          "kui-radio-group__control",
+          "kui-radio-group__input",
+          "kui-radio-group__circle",
+          "kui-radio-group__choice-label",
+          "kui-radio-group__choice-hint",
+          "kui-radio-group__hint",
+          "kui-radio-group__error"
+        ],
+        "rootElement": "fieldset",
+        "publicTokens": [
+          "--kui-color-brand-fill-loud",
+          "--kui-color-neutral-border-normal",
+          "--kui-color-surface",
+          "--kui-color-text",
+          "--kui-color-text-quiet",
+          "--kui-color-danger-border-loud",
+          "--kui-color-danger-on-quiet",
+          "--kui-focus-ring",
+          "--kui-font-m",
+          "--kui-font-s",
+          "--kui-font-xs",
+          "--kui-color-neutral-on-quiet",
+          "--kui-layout-item-padding"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:switch",
+      "package": "@kerfjs/ui",
+      "id": "switch",
+      "name": "Switch",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        { "id": "checked state", "owner": "application", "required": false },
+        {
+          "id": "applying the setting",
+          "owner": "application",
+          "required": false
+        }
+      ],
       "wiring": {
-        "required": true,
-        "helpers": ["@kerfjs/ui/select/register"],
-        "obligations": [
-          "Import the registration module once in the application."
-        ],
+        "required": false,
+        "helpers": [],
+        "obligations": [],
         "stateAttributes": []
       },
       "responsive": { "owner": "not-applicable", "behaviors": [] },
       "layout": {
         "roles": ["controls"],
-        "geometry": { "margin": "none", "border": "self", "padding": "self" }
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "none",
+          "notes": [
+            "A 35×20 track (31.5×18 compact) 8px (7px) before its label; the hint aligns with the label text."
+          ]
+        }
       },
       "accessibility": {
         "obligations": [
-          "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.",
-          "Import select/register once; its scoped lifecycle adapter keeps the latest open/close request authoritative across animation reversals, canceled transitions, and removal. Do not add consumer popup timing or position repairs.",
-          "With multiple, the popup stays open while choices toggle (pointer, Enter, or Space) and closes on an outside press, Escape, or focus leaving; each chosen option shows a check, and the closed control summarizes the chosen labels in choice order.",
-          "Disabled choices stay visible but cannot be selected; disabledReason exposes a tooltip. A multiple Select can opt in to localized select-all and clear buttons, which skip disabled choices and publish ordinary input/change events for changed values.",
-          "A multiple icon-only trigger shows its fixed triggerIcon and, while any choice is chosen, an aria-hidden count Badge; the combobox's accessible name ends with the chosen labels in choice order, and its hidden value stays empty.",
-          "Once registered, an icon-only trigger (single or multiple) shows an aria-hidden Web Awesome help tag repeating its accessible name (a single Select adds its current choice) after a 500ms hover and at once on keyboard focus; it hides while the popup is open, on a press, and on Escape, and never joins aria-labelledby. Do not add a title or another tooltip."
+          "A native <input type=\"checkbox\" role=\"switch\"> inside its <label>, invisibly over the drawn track, so the label names it and assistive technology announces on or off; Space toggles it and focus shows the focus ring on the track. The hint is its aria-description. The thumb's slide is skipped when reduced motion is preferred."
         ]
       },
-      "cssValueProps": [
-        {
-          "path": "choices[].color",
-          "grammar": "color",
-          "helpers": ["uiColor", "foregroundColorVar", "foregroundColor"],
-          "shorthands": [],
-          "canonicalShorthands": [],
-          "exceptionalShorthands": [],
-          "rawPolicy": "forbid",
-          "examples": [
-            "color: uiColor(\"success-on-quiet\")",
-            "color: foregroundColorVar(\"--app-choice-color\")",
-            "color: foregroundColor(\"rebeccapurple\")"
-          ]
-        }
-      ],
+      "cssValueProps": [],
       "boundaries": {
-        "rootClass": "kui-select",
+        "rootClass": "kui-switch",
         "publicClasses": [
-          "kui-select",
-          "kui-select--custom-selected",
-          "kui-select--fit-menu",
-          "kui-select--label-hidden",
-          "kui-select__custom-selected",
-          "kui-select__custom-selected-content",
-          "kui-select__group",
-          "kui-select__group--separated",
-          "kui-select__group-title",
-          "kui-select__icon"
+          "kui-switch",
+          "kui-switch__row",
+          "kui-switch__control",
+          "kui-switch__input",
+          "kui-switch__track",
+          "kui-switch__thumb",
+          "kui-switch__label",
+          "kui-switch__hint"
         ],
+        "rootElement": "div",
         "publicTokens": [
-          "--kui-color-neutral-border-quiet",
-          "--kui-color-neutral-on-quiet",
-          "--kui-disclosure-icon-scale",
-          "--kui-font-2xs",
-          "--kui-select-selected-color",
-          "--kui-select-selected-font-size",
-          "--kui-select-selected-font-weight",
-          "--kui-select-trigger-max-width"
+          "--kui-color-brand-fill-loud",
+          "--kui-color-neutral-border-normal",
+          "--kui-color-surface",
+          "--kui-color-text",
+          "--kui-color-text-quiet",
+          "--kui-focus-ring",
+          "--kui-font-m",
+          "--kui-font-s",
+          "--kui-font-xs"
         ]
       },
-      "diagnostics": [
-        {
-          "id": "KUI-C107",
-          "severity": "error",
-          "when": "the registration import is absent",
-          "message": "Select requires @kerfjs/ui/select/register once per application."
-        }
-      ],
+      "diagnostics": [],
       "provenance": {
         "selection": "ai/component-catalog.json",
-        "composition": "README.md#web-awesome-theme"
+        "composition": "generated-permissive-default"
       }
     },
     {
-      "key": "@kerfjs/ui:combobox",
+      "key": "@kerfjs/ui:slider",
       "package": "@kerfjs/ui",
-      "id": "combobox",
-      "name": "Combobox",
+      "id": "slider",
+      "name": "Slider",
       "kind": "component",
       "source": "kerf",
       "parents": { "mode": "any", "entries": [] },
@@ -4689,35 +5767,26 @@
       "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
       "state": [
         {
-          "id": "the suggestions and the committed values",
+          "id": "the value (read it on input or change through action) and re-rendering with it",
           "owner": "application",
           "required": false
         },
         {
-          "id": "normalizing and validating created values",
+          "id": "min, max, step, and ticks",
           "owner": "application",
           "required": false
         },
         {
-          "id": "clearing the field after a commit",
+          "id": "the label, hint, and unit",
           "owner": "application",
           "required": false
         }
       ],
       "wiring": {
-        "required": true,
-        "helpers": ["wireComboboxes"],
-        "obligations": [
-          "Filters suggestions, moves the active option, and reports commits; without it the list never opens."
-        ],
-        "stateAttributes": [
-          {
-            "name": "data-value",
-            "on": "the create option (kui-combobox__option[data-create])",
-            "helper": "wireComboboxes",
-            "meaning": "The typed text the create option would commit; rewritten as the person types."
-          }
-        ]
+        "required": false,
+        "helpers": ["wireSliders"],
+        "obligations": [],
+        "stateAttributes": []
       },
       "responsive": { "owner": "not-applicable", "behaviors": [] },
       "layout": {
@@ -4727,46 +5796,30 @@
           "border": "self",
           "padding": "self",
           "notes": [
-            "Label and hint sit on the value's text column (1px border + 8px padding); the 44px field matches a themed wa-input."
+            "It fills the available width with the shared block-content inset (a transparent 1px border and 8px padding), so its label sits on the text column."
           ]
         }
       },
       "accessibility": {
         "obligations": [
-          "Native input with role=combobox, aria-autocomplete=list, aria-expanded, aria-controls, and aria-activedescendant; options are role=option in a listbox. The visible label is a real label; the hint is aria-describedby."
+          "It is a native range input: arrow keys, Page Up and Down, Home, and End step it, and the platform announces its value (with a unit, as aria-valuetext).",
+          "The label names it, the hint describes it, and the readout is hidden from assistive technology because the input already reports its value; forced colors draw a Highlight fill on a GrayText track."
         ]
       },
       "cssValueProps": [],
       "boundaries": {
-        "rootClass": "kui-combobox",
+        "rootClass": "kui-slider",
         "publicClasses": [
-          "kui-combobox",
-          "kui-combobox__label",
-          "kui-combobox__hint",
-          "kui-combobox__control",
-          "kui-combobox__input",
-          "kui-combobox__listbox",
-          "kui-combobox__option"
+          "kui-slider",
+          "kui-slider__header",
+          "kui-slider__label",
+          "kui-slider__value",
+          "kui-slider__input",
+          "kui-slider__ticks",
+          "kui-slider__tick",
+          "kui-slider__hint"
         ],
-        "rootElement": "div",
-        "publicTokens": [
-          "--kui-combobox-z-index",
-          "--kui-color-neutral-on-quiet",
-          "--kui-color-text-quiet",
-          "--kui-color-neutral-border-normal",
-          "--kui-color-text",
-          "--kui-color-surface",
-          "--kui-color-surface-raised",
-          "--kui-color-text-link",
-          "--kui-color-brand-fill-quiet",
-          "--kui-font-xs",
-          "--kui-font-s",
-          "--kui-layout-item-padding",
-          "--kui-layout-rounded-radius",
-          "--kui-shadow-l",
-          "--kui-space-2xs",
-          "--kui-space-xs"
-        ]
+        "publicTokens": []
       },
       "diagnostics": [],
       "provenance": {
@@ -4851,6 +5904,11 @@
           "owner": "application",
           "required": false
         },
+        {
+          "id": "the checked state of checkbox choices, which the menu reports as requested in its kui-menu-select event",
+          "owner": "application",
+          "required": false
+        },
         {
           "id": "reactions to the menu opening or closing",
           "owner": "application",
@@ -4875,8 +5933,9 @@
       },
       "accessibility": {
         "obligations": [
-          "An icon-only trigger requires label, rendered as visually hidden slotted text because a Web Awesome button takes its accessible name from its content; a trigger with visible text is named by that text. The context anchor stays out of the accessibility tree. The open menu takes the trigger's name (the context or icon-only label, or the visible text), and each submenu takes its parent item's label, so a screen reader announces a named menu and getByRole('menu', { name }) finds it. Web Awesome provides menu roles, nested arrow-key navigation, typeahead, and Escape.",
-          "Once registered, an icon-only trigger shows its label as an aria-hidden Web Awesome help tag after a 500ms hover and at once on keyboard focus; it hides while the menu is open, on a press, and on Escape, and never joins aria-labelledby. Do not add a title or another tooltip."
+          "The trigger is a native button with aria-haspopup=\"menu\" and aria-expanded; an icon-only trigger requires label, rendered as visually hidden text inside the button, and a trigger with visible text is named by that text. The context anchor stays out of the accessibility tree. The open menu (role=\"menu\") takes the trigger's name, each submenu takes its parent item's label, and a heading names the role=\"group\" that holds its items, so a screen reader announces named menus and getByRole('menu', { name }) finds them. Items are menuitem or menuitemcheckbox buttons with aria-checked and aria-disabled.",
+          "Keyboard: Enter, Space, or ArrowDown on the trigger opens on the first item (ArrowUp on the last); ArrowUp/ArrowDown move and wrap past disabled items, Home/End jump, and typing a label's first letters moves to it; Enter or Space chooses; ArrowRight opens a submenu on its first item and ArrowLeft returns to the parent item (mirrored right to left); Escape closes the current level and returns focus to its opener; Tab closes the menu and continues from the trigger.",
+          "Once registered, an icon-only trigger shows its label as an aria-hidden help tag after a 500ms hover and at once on keyboard focus; it hides while the menu is open, on a press, and on Escape, and never joins aria-labelledby. Do not add a title or another tooltip."
         ]
       },
       "cssValueProps": [],
@@ -4884,7 +5943,10 @@
         "rootClass": "kui-popup-menu",
         "publicClasses": [
           "kui-popup-menu",
+          "kui-popup-menu__trigger",
           "kui-popup-menu__label",
+          "kui-popup-menu__menu",
+          "kui-popup-menu__item",
           "kui-popup-menu__details",
           "kui-popup-menu__context-anchor"
         ],
@@ -4897,10 +5959,10 @@
       }
     },
     {
-      "key": "@kerfjs/ui:icon-button",
+      "key": "@kerfjs/ui:button",
       "package": "@kerfjs/ui",
-      "id": "icon-button",
-      "name": "IconButton",
+      "id": "button",
+      "name": "Button",
       "kind": "component",
       "source": "kerf",
       "parents": { "mode": "any", "entries": [] },
@@ -4909,72 +5971,16 @@
       "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
       "state": [
         {
-          "id": "the delegated action",
-          "owner": "application",
-          "required": false
-        },
-        {
-          "id": "the accessible name",
+          "id": "the label and its delegated action",
           "owner": "application",
           "required": false
         },
         {
-          "id": "appearance, variant, and size choice",
-          "owner": "application",
-          "required": false
-        }
-      ],
-      "wiring": {
-        "required": false,
-        "helpers": [],
-        "obligations": [],
-        "stateAttributes": []
-      },
-      "responsive": { "owner": "not-applicable", "behaviors": [] },
-      "layout": {
-        "roles": ["controls"],
-        "geometry": { "margin": "none", "border": "self", "padding": "self" }
-      },
-      "accessibility": {
-        "obligations": [
-          "label is required and names the button through its LucideIcon (role img), since the button shows no text."
-        ]
-      },
-      "cssValueProps": [],
-      "boundaries": {
-        "rootClass": "kui-icon-button",
-        "publicClasses": ["kui-icon-button"],
-        "rootElement": "wa-button",
-        "publicTokens": []
-      },
-      "diagnostics": [],
-      "provenance": {
-        "selection": "ai/component-catalog.json",
-        "composition": "generated-permissive-default"
-      }
-    },
-    {
-      "key": "@kerfjs/ui:icon-toggle-button",
-      "package": "@kerfjs/ui",
-      "id": "icon-toggle-button",
-      "name": "IconToggleButton",
-      "kind": "component",
-      "source": "kerf",
-      "parents": { "mode": "any", "entries": [] },
-      "contexts": ["application-ui"],
-      "zones": [],
-      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
-      "state": [
-        {
-          "id": "the pressed state and its delegated action",
+          "id": "what a press does while loading",
           "owner": "application",
           "required": false
         },
-        {
-          "id": "the accessible name",
-          "owner": "application",
-          "required": false
-        }
+        { "id": "form ownership", "owner": "application", "required": false }
       ],
       "wiring": {
         "required": false,
@@ -4989,28 +5995,41 @@
       },
       "accessibility": {
         "obligations": [
-          "Native button with aria-pressed and a required aria-label; with help tags registered it shows that label on hover and keyboard focus."
+          "A native <button> (type=\"button\" unless set) or, with href, an <a>; its label names it, or ariaLabel when the label is not enough. Focus shows the standard focus ring.",
+          "Loading shows a spinner in place of the label, which still names the button, and sets aria-busy=\"true\". A disabled link drops its href and reports aria-disabled=\"true\".",
+          "With pressed, it is a toggle: aria-pressed reports the state, and the pressed look adds a doubled outline (secondary and plain) or a darkened fill with an inset ring (primary), so the state never relies on hue alone; forced-colors mode paints it Highlight. An icon-only Button is named by ariaLabel, and help tags show that name on hover and keyboard focus. A title gives native hover text that says more than the name and replaces the help tag."
         ]
       },
       "cssValueProps": [],
       "boundaries": {
-        "rootClass": "kui-icon-toggle-button",
+        "rootClass": "kui-button",
         "publicClasses": [
-          "kui-icon-toggle-button",
-          "kui-icon-toggle-button__face"
+          "kui-button",
+          "kui-button__icon",
+          "kui-button__label",
+          "kui-button__spinner"
         ],
         "rootElement": "button",
         "publicTokens": [
-          "--kui-color-neutral-border-normal",
-          "--kui-color-neutral-fill-normal",
+          "--kui-color-neutral-fill-loud",
+          "--kui-color-neutral-on-loud",
+          "--kui-color-neutral-fill-quiet",
           "--kui-color-neutral-on-quiet",
-          "--kui-color-surface",
+          "--kui-color-neutral-border-loud",
+          "--kui-color-brand-fill-loud",
+          "--kui-color-brand-on-loud",
+          "--kui-color-brand-fill-quiet",
           "--kui-color-brand-on-quiet",
-          "--kui-shadow-s",
+          "--kui-color-brand-border-loud",
+          "--kui-color-danger-fill-loud",
+          "--kui-color-danger-on-loud",
+          "--kui-color-danger-fill-quiet",
+          "--kui-color-danger-on-quiet",
+          "--kui-color-danger-border-loud",
           "--kui-focus-ring",
-          "--kui-layout-pill-radius",
-          "--kui-layout-rounded-radius",
-          "--kui-layout-highlight-inset"
+          "--kui-font-m",
+          "--kui-font-s",
+          "--kui-layout-rounded-radius"
         ]
       },
       "diagnostics": [],
@@ -5353,7 +6372,143 @@
       "diagnostics": [],
       "provenance": {
         "selection": "ai/component-catalog.json",
-        "composition": "docs/component-selection.md#problem-to-component-matrix"
+        "composition": "docs/component-selection.md#problem-to-component-matrix"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:toast",
+      "package": "@kerfjs/ui",
+      "id": "toast",
+      "name": "Toast",
+      "kind": "composition",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "when to show a toast and its message",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "duration, variant, and replace mode",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "an app-owned container with data-placement=\"top\" for top-edge stacking",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "dismissing a persistent (duration 0) toast",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["feedback"],
+        "geometry": {
+          "margin": "self",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "The region insets 16px from the viewport edge plus the safe area and caps its width at 480px; toasts stack with an 8px gap."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The core region is an aria-live polite region and each toast is role status, so assistive technology announces it without moving focus.",
+          "Toasts dismiss themselves after four seconds by default; give longer messages a longer duration, and never rely on a toast for the only path to an action.",
+          "The entrance and exit only fade under prefers-reduced-motion or the static-effects switch, and forced colors draw a CanvasText border on Canvas."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kerf-toasts",
+        "publicClasses": ["kerf-toasts", "kerf-toast", "kui-toast-exit"],
+        "placeableClasses": ["kerf-toasts", "kerf-toast", "kui-toast-exit"],
+        "publicTokens": ["--kui-overlay-toast-z-index"]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:tooltip",
+      "package": "@kerfjs/ui",
+      "id": "tooltip",
+      "name": "Tooltip",
+      "kind": "composition",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "which elements get a tooltip and its content",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "placement, delay, and native top-layer hosting",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the disposer that removes a tooltip's listeners",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["feedback"],
+        "geometry": {
+          "margin": "self",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "tooltip() positions the wrapper beside its anchor; the stylesheet caps its width at 40 characters within the viewport."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "tooltip() shows on hover and on keyboard focus, gives the wrapper role tooltip, and hides on leave or blur; keep the anchor's accessible name complete without it.",
+          "The loud neutral fill with on-loud text meets WCAG AA; forced colors draw CanvasText on Canvas, and the entrance is skipped under prefers-reduced-motion or the static-effects switch."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kerf-tooltip",
+        "publicClasses": ["kerf-tooltip", "kui-tooltip-exit"],
+        "placeableClasses": ["kerf-tooltip", "kui-tooltip-exit"],
+        "publicTokens": ["--kui-overlay-tooltip-z-index"]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
       }
     },
     {
@@ -5635,6 +6790,132 @@
         "composition": "generated-permissive-default"
       }
     },
+    {
+      "key": "@kerfjs/ui:progress-bar",
+      "package": "@kerfjs/ui",
+      "id": "progress-bar",
+      "name": "ProgressBar",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the value, max, and valueText",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the label or ariaLabel",
+          "owner": "application",
+          "required": false
+        },
+        { "id": "the tone and size", "owner": "application", "required": false }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["feedback"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "It fills the available width with the shared block-content inset (a transparent 1px border and 8px padding); the label row sits 4px above the track."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The native progress element is the progressbar: a visible label names it through aria-labelledby (or ariaLabel without one), and valueText replaces the spoken percentage.",
+          "The indeterminate sweep holds still under prefers-reduced-motion or the static-effects switch; forced colors draw a CanvasText-bordered track with a Highlight fill."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-progress-bar",
+        "publicClasses": [
+          "kui-progress-bar",
+          "kui-progress-bar__header",
+          "kui-progress-bar__label",
+          "kui-progress-bar__value",
+          "kui-progress-bar__track"
+        ],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:progress-ring",
+      "package": "@kerfjs/ui",
+      "id": "progress-ring",
+      "name": "ProgressRing",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the value, max, and valueText",
+          "owner": "application",
+          "required": false
+        },
+        { "id": "the label", "owner": "application", "required": false },
+        { "id": "the tone and size", "owner": "application", "required": false }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["feedback"],
+        "geometry": {
+          "margin": "none",
+          "border": "none",
+          "padding": "none",
+          "notes": [
+            "Its box is exactly its diameter, so it aligns with icons of the same size."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "It is role progressbar named by label, with aria-valuenow as a percentage (or valueText); the SVG is decorative.",
+          "The spin holds still under prefers-reduced-motion or the static-effects switch; forced colors draw a GrayText track and a Highlight arc."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-progress-ring",
+        "publicClasses": [
+          "kui-progress-ring",
+          "kui-progress-ring__track",
+          "kui-progress-ring__arc"
+        ],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:skeleton",
       "package": "@kerfjs/ui",
@@ -6513,6 +7794,42 @@
         "composition": "generated-permissive-default"
       }
     },
+    {
+      "key": "@kerfjs/ui:wa-tag-input",
+      "package": "@kerfjs/ui",
+      "id": "wa-tag-input",
+      "name": "Tag Input",
+      "kind": "component",
+      "source": "webawesome",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["forms"],
+        "geometry": { "margin": "none", "border": "self", "padding": "self" }
+      },
+      "accessibility": { "obligations": [] },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": null,
+        "publicClasses": [],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:wa-accordion",
       "package": "@kerfjs/ui",
@@ -7008,6 +8325,78 @@
         "composition": "generated-permissive-default"
       }
     },
+    {
+      "key": "@kerfjs/ui:wa-stepper",
+      "package": "@kerfjs/ui",
+      "id": "wa-stepper",
+      "name": "Stepper",
+      "kind": "component",
+      "source": "webawesome",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["navigation"],
+        "geometry": { "margin": "none", "border": "none", "padding": "none" }
+      },
+      "accessibility": { "obligations": [] },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": null,
+        "publicClasses": [],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:wa-step",
+      "package": "@kerfjs/ui",
+      "id": "wa-step",
+      "name": "Step",
+      "kind": "component",
+      "source": "webawesome",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["navigation"],
+        "geometry": { "margin": "none", "border": "none", "padding": "none" }
+      },
+      "accessibility": { "obligations": [] },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": null,
+        "publicClasses": [],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:wa-tab",
       "package": "@kerfjs/ui",
@@ -8533,7 +9922,7 @@
       },
       "accessibility": {
         "obligations": [
-          "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."
+          "ListDetailDialog's native modal dialog owns focus, Escape, and inertness, and returns focus to the opener on close; the close control sits in the detail column (or each compact view), and the compact NavStack back control returns to the list."
         ]
       },
       "cssValueProps": [],