@kerfjs/ui 5.0.0-beta.95 → 5.0.0-beta.96

package/ai/component-composition.json

@@ -45,13 +45,14 @@
       "accessibility": {
         "obligations": [
           "Badge is non-interactive. Supply label when visible content is abbreviated, and ariaHidden when it repeats an accessible name owned by the surrounding component. A text-free dot must take either label (exposed as an image) or ariaHidden, which the types enforce.",
-          "Keep meaningful text visible because tone is supplementary."
+          "Keep meaningful text visible because tone is supplementary.",
+          "A label replaces abbreviated or symbolic visible text; the badge is then a labeled image (role img)."
         ]
       },
       "cssValueProps": [],
       "boundaries": {
         "rootClass": "kui-badge",
-        "publicClasses": ["kui-badge"],
+        "publicClasses": ["kui-badge", "kui-badge__icon", "kui-badge__label"],
         "publicTokens": []
       },
       "diagnostics": [],
@@ -327,6 +328,8 @@
           "--kui-color-surface",
           "--kui-color-surface-raised",
           "--kui-color-surface-lowered",
+          "--kui-sunken-texture",
+          "--kui-sunken-surface",
           "--kui-color-text",
           "--kui-color-text-quiet",
           "--kui-color-text-link",
@@ -443,7 +446,8 @@
       },
       "accessibility": {
         "obligations": [
-          "Links keep the semantic link color at zero specificity so application focus and link styles still apply."
+          "Links keep the semantic link color at zero specificity so application focus and link styles still apply.",
+          "Native controls get semantic cursors at zero specificity: pointer on enabled buttons, links, role=button, checkbox/radio/button-type inputs, selects, and checkbox/radio labels; not-allowed on disabled controls, aria-disabled role=button, and a disabled wa-button's base part; text on text-like inputs and textareas."
         ]
       },
       "cssValueProps": [],
@@ -1678,6 +1682,7 @@
       "accessibility": {
         "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."
         ]
       },
@@ -1865,7 +1870,11 @@
       ],
       "boundaries": {
         "rootClass": "kui-dialog-surface",
-        "publicClasses": ["kui-dialog-surface", "kui-popup-surface"],
+        "publicClasses": [
+          "kui-dialog-surface",
+          "kui-popover-dialog-surface",
+          "kui-popup-surface"
+        ],
         "publicTokens": [
           "--kui-radius-l",
           "--kui-wa-container-inset",
@@ -2105,7 +2114,8 @@
           "Text renders a native paragraph by default; choose an h1 through h6 variant by document outline rather than appearance, or span for inline secondary text.",
           "Ordinary global, data, and ARIA attributes pass through to the native element.",
           "Choose tone, size, and font independently of the heading level so appearance does not distort the document outline.",
-          "FieldLabel is plain text, not a native label; give it an id and associate the preview group with aria-labelledby."
+          "FieldLabel is plain text, not a native label; give it an id and associate the preview group with aria-labelledby.",
+          "Start and middle truncation clip visually only: the whole value stays in the DOM in reading order, and Text shows it as the element's title unless the app supplies one."
         ]
       },
       "cssValueProps": [],
@@ -2226,8 +2236,174 @@
           "--kui-value-table-border",
           "--kui-value-table-icon-size",
           "--kui-value-table-row-columns",
-          "--kui-value-table-row-padding-block",
-          "--kui-value-table-row-gap"
+          "--kui-value-table-row-gap",
+          "--kui-value-table-row-padding-block"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:framed-list",
+      "package": "@kerfjs/ui",
+      "id": "framed-list",
+      "name": "FramedList",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "row content and its controls",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "which row is highlighted",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the list's accessible name",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "self",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "Rows own the 8px inset and the inset 1px divider above them; the frame owns the 8px margin, border, and radius."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Renders a list (ul role=list, li rows); pass label when no heading names it. Highlight is visual; carry its meaning in row content or a control's state."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-framed-list",
+        "publicClasses": ["kui-framed-list", "kui-framed-list__row"],
+        "rootElement": "ul",
+        "publicTokens": [
+          "--kui-framed-list-border",
+          "--kui-color-neutral-border-normal",
+          "--kui-color-surface-lowered",
+          "--kui-color-surface",
+          "--kui-color-brand-fill-quiet",
+          "--kui-layout-inline-margin",
+          "--kui-layout-item-padding",
+          "--kui-layout-rounded-radius"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:summary-row",
+      "package": "@kerfjs/ui",
+      "id": "summary-row",
+      "name": "SummaryRow",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the listbox container, selection set, and keyboard movement",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the title, leading glyph, trailing meta, and metadata content",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "rail tone and dimming policy",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "none",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "Rows sit flush in a list section and round only the corners at its edges; cards are borderless rounded cards."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Each SummaryRow is role=option with tabindex=0 and aria-selected; place rows in a labeled role=listbox and move focus with the arrow keys in the app. The rail is decorative; carry its meaning in text."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-summary-row",
+        "publicClasses": [
+          "kui-summary-row",
+          "kui-summary-row__rail",
+          "kui-summary-row__body",
+          "kui-summary-row__leading",
+          "kui-summary-row__content",
+          "kui-summary-row__title",
+          "kui-summary-row__trailing",
+          "kui-summary-row__metadata"
+        ],
+        "rootElement": "div",
+        "publicTokens": [
+          "--kui-color-neutral-border-quiet",
+          "--kui-color-text",
+          "--kui-color-surface",
+          "--kui-color-brand-border-normal",
+          "--kui-color-text-link",
+          "--kui-color-brand-fill-quiet",
+          "--kui-color-neutral-on-quiet",
+          "--kui-color-brand-fill-loud",
+          "--kui-color-pop-fill-loud",
+          "--kui-color-success-fill-loud",
+          "--kui-color-warning-fill-loud",
+          "--kui-color-danger-fill-loud",
+          "--kui-color-text-quiet",
+          "--kui-font-2xs",
+          "--kui-font-xs",
+          "--kui-layout-rounded-radius",
+          "--kui-space-2xs",
+          "--kui-space-s",
+          "--kui-space-xs"
         ]
       },
       "diagnostics": [],
@@ -2431,6 +2607,130 @@
         "composition": "generated-permissive-default"
       }
     },
+    {
+      "key": "@kerfjs/ui:column-track",
+      "package": "@kerfjs/ui",
+      "id": "column-track",
+      "name": "ColumnTrack",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the columns and their content",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "choosing scroll or paged layout (for example by device class)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "drag and drop between columns",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "none",
+          "border": "none",
+          "padding": "self",
+          "notes": [
+            "The track pads 8px inline and fills its parent's height; columns sit flush and own their insets and vertical scrolling."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Name the track with aria-label through rootAttributes when it is a landmark-like region; give each column a region name. Paged scrolling is smooth unless reduced motion is preferred."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-column-track",
+        "publicClasses": ["kui-column-track", "kui-column-track__columns"],
+        "rootElement": "div",
+        "publicTokens": ["--kui-layout-inline-margin"]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:content-swap",
+      "package": "@kerfjs/ui",
+      "id": "content-swap",
+      "name": "ContentSwap",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "which side is active and the push direction",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "both sides' content",
+          "owner": "application",
+          "required": false
+        },
+        { "id": "the region's name", "owner": "application", "required": false }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["structure"],
+        "geometry": {
+          "margin": "none",
+          "border": "none",
+          "padding": "none",
+          "notes": [
+            "Both sides share one grid cell; the region keeps the active side's height and clips the motion."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The inactive side is inert and aria-hidden; label makes the swap a named region. Push mirrors in right-to-left documents. Reduced motion replaces the slide with a short fade."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-content-swap",
+        "publicClasses": ["kui-content-swap", "kui-content-swap__side"],
+        "rootElement": "div",
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:spacer",
       "package": "@kerfjs/ui",
@@ -2589,7 +2889,8 @@
       "accessibility": {
         "obligations": [
           "List adds layout only and no list role by default; selectionMode=\"multiple\" makes it an aria-multiselectable grid with a required ariaLabel for selectable ContentItem rows.",
-          "Give a scrollable List a bounded block size and keep keyboard focus visible as its contents scroll."
+          "Give a scrollable List a bounded block size and keep keyboard focus visible as its contents scroll.",
+          "A focused scrollable List (a keyboard-focusable scroller) draws the theme focus ring inset and rounded inside its own box, so a rounded or clipping parent never cuts it off; do not restyle its focus."
         ]
       },
       "cssValueProps": [
@@ -2625,9 +2926,14 @@
         "publicClasses": ["kui-list"],
         "publicTokens": [
           "--kui-color-neutral-border-normal",
+          "--kui-color-surface",
+          "--kui-color-surface-raised",
           "--kui-layout-item-gap",
           "--kui-list-divider-color",
-          "--kui-list-gap"
+          "--kui-list-gap",
+          "--kui-space-l",
+          "--kui-space-m",
+          "--kui-space-xl"
         ]
       },
       "diagnostics": [],
@@ -2729,23 +3035,39 @@
           "id": "popover or context-menu policy",
           "owner": "application",
           "required": false
-        }
+        },
+        { "id": "row order", "owner": "application", "required": false }
       ],
       "wiring": {
         "required": false,
-        "helpers": [],
+        "helpers": ["wireListReorder", "reorderListItems"],
         "obligations": [],
-        "stateAttributes": []
-      },
-      "responsive": { "owner": "not-applicable", "behaviors": [] },
-      "layout": {
-        "roles": ["navigation"],
-        "geometry": { "margin": "self", "border": "self", "padding": "self" }
+        "stateAttributes": [
+          {
+            "name": "data-dragging",
+            "on": "ListActionRow rows being dragged",
+            "helper": "wireListReorder",
+            "meaning": "\"true\" on every row a pointer drag is moving (the dragged row, or every selected row of its list when the dragged row is selected). Same attribute the `dragging` prop renders."
+          },
+          {
+            "name": "data-drop-position",
+            "on": "ListActionRow row under the pointer",
+            "helper": "wireListReorder",
+            "meaning": "\"before\" or \"after\": the edge of this row the dragged rows would land beside. Same attribute the `dropPosition` prop renders."
+          }
+        ]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["navigation"],
+        "geometry": { "margin": "self", "border": "self", "padding": "self" }
       },
       "accessibility": {
         "obligations": [
           "The noninteractive root contains two sibling native buttons in primary-then-trailing focus order; each button has its own action, item identity, accessible name, and disabled state.",
-          "Selection semantics are exposed only by the primary button; label, icon, and trailingActionIcon are dormant SafeHtml and must not contain interactive descendants; never place an interactive descendant in ListItem.trailing."
+          "A trailingMenu replaces the trailing button with a PopupMenu trigger in the same position: an icon-only button named by trailingMenu.label that exposes aria-haspopup=\"menu\" and aria-expanded, moves focus into the menu, and returns focus to the trigger on Escape or a choice.",
+          "Selection semantics are exposed only by the primary button; label, icon, and trailingActionIcon are dormant SafeHtml and must not contain interactive descendants; never place an interactive descendant in ListItem.trailing.",
+          "A draggable row is dragged by its noninteractive root; with wireListReorder, Alt+Shift+ArrowUp/ArrowDown on its primary button moves it, and focus returns to that button after the application re-renders."
         ]
       },
       "cssValueProps": [
@@ -2773,6 +3095,7 @@
           "kui-list-action-row__trailing-action"
         ],
         "publicTokens": [
+          "--kui-color-brand-border-loud",
           "--kui-color-brand-border-quiet",
           "--kui-color-brand-fill-normal",
           "--kui-color-neutral-border-normal",
@@ -2790,6 +3113,9 @@
           "--kui-list-action-row-background",
           "--kui-list-action-row-border",
           "--kui-list-action-row-color",
+          "--kui-list-action-row-dragging-opacity",
+          "--kui-list-action-row-drop-indicator",
+          "--kui-list-action-row-drop-indicator-width",
           "--kui-list-action-row-hover-background",
           "--kui-list-action-row-hover-border",
           "--kui-list-action-row-selected-background",
@@ -2831,13 +3157,27 @@
           "id": "domain data attributes",
           "owner": "application",
           "required": false
-        }
+        },
+        { "id": "row order", "owner": "application", "required": false }
       ],
       "wiring": {
         "required": false,
-        "helpers": [],
+        "helpers": ["wireListReorder", "reorderListItems"],
         "obligations": [],
-        "stateAttributes": []
+        "stateAttributes": [
+          {
+            "name": "data-dragging",
+            "on": "ListItem / ListItemLink rows being dragged",
+            "helper": "wireListReorder",
+            "meaning": "\"true\" on every row a pointer drag is moving (the dragged row, or every selected row of its list when the dragged row is selected). Same attribute the `dragging` prop renders."
+          },
+          {
+            "name": "data-drop-position",
+            "on": "ListItem / ListItemLink row under the pointer",
+            "helper": "wireListReorder",
+            "meaning": "\"before\" or \"after\": the edge of this row the dragged rows would land beside. Same attribute the `dropPosition` prop renders."
+          }
+        ]
       },
       "responsive": { "owner": "not-applicable", "behaviors": [] },
       "layout": {
@@ -2853,7 +3193,7 @@
       },
       "accessibility": {
         "obligations": [
-          "ListItem uses native button activation and pressed maps to aria-pressed; ListItemLink uses native anchor activation and external opens a new tab with safe rel and an announced default label. Both map selected to aria-current; disabled or loading links omit href and leave the tab order. rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls."
+          "ListItem uses native button activation and pressed maps to aria-pressed; ListItemLink uses native anchor activation and external opens a new tab with safe rel and an announced default label. Both map selected to aria-current; disabled or loading links omit href and leave the tab order. rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls. A draggable row reorders by pointer drag or, with wireListReorder, Alt+Shift+ArrowUp/ArrowDown; a placeholder is never draggable."
         ]
       },
       "cssValueProps": [
@@ -2880,6 +3220,7 @@
           "kui-list-item__trailing"
         ],
         "publicTokens": [
+          "--kui-color-brand-border-loud",
           "--kui-color-brand-border-normal",
           "--kui-color-brand-border-quiet",
           "--kui-color-brand-fill-quiet",
@@ -2889,6 +3230,7 @@
           "--kui-color-neutral-on-quiet",
           "--kui-color-neutral-border-quiet",
           "--kui-color-neutral-border-normal",
+          "--kui-radius-pill",
           "--kui-focus-ring",
           "--kui-list-item-color",
           "--kui-list-item-background",
@@ -2899,6 +3241,9 @@
           "--kui-list-item-drag-target-background",
           "--kui-list-item-drag-target-outline",
           "--kui-list-item-drag-target-outline-offset",
+          "--kui-list-item-dragging-opacity",
+          "--kui-list-item-drop-indicator",
+          "--kui-list-item-drop-indicator-width",
           "--kui-list-item-gap",
           "--kui-list-item-hover-background",
           "--kui-list-item-hover-border",
@@ -3492,6 +3837,47 @@
         "composition": "docs/accessibility.md#segmentedcontrol"
       }
     },
+    {
+      "key": "@kerfjs/ui:choice-chips",
+      "package": "@kerfjs/ui",
+      "id": "choice-chips",
+      "name": "ChoiceChips",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["wrapping-exclusive-choice"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [{ "id": "value", "owner": "controlled", "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": [
+          "Name the radio group with label or with labelledBy pointing at a visible heading.",
+          "Every choice keeps a visible text label; a swatch or icon is decorative."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-choice-chips",
+        "publicClasses": ["kui-choice-chips"],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "docs/accessibility.md#choicechips"
+      }
+    },
     {
       "key": "@kerfjs/ui:token-search-field",
       "package": "@kerfjs/ui",
@@ -3811,6 +4197,104 @@
         "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."
+          }
+        ]
+      },
+      "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."
+        ]
+      },
+      "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-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"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:anchored-surface",
       "package": "@kerfjs/ui",
@@ -3933,6 +4417,302 @@
         "composition": "generated-permissive-default"
       }
     },
+    {
+      "key": "@kerfjs/ui:icon-button",
+      "package": "@kerfjs/ui",
+      "id": "icon-button",
+      "name": "IconButton",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the delegated action",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the accessible name",
+          "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",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the accessible name",
+          "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": [
+          "Native button with aria-pressed and a required aria-label; with help tags registered it shows that label on hover and keyboard focus."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-icon-toggle-button",
+        "publicClasses": [
+          "kui-icon-toggle-button",
+          "kui-icon-toggle-button__face"
+        ],
+        "rootElement": "button",
+        "publicTokens": [
+          "--kui-color-neutral-border-normal",
+          "--kui-color-neutral-fill-normal",
+          "--kui-color-neutral-on-quiet",
+          "--kui-color-surface",
+          "--kui-color-brand-on-quiet",
+          "--kui-shadow-s",
+          "--kui-focus-ring",
+          "--kui-layout-pill-radius",
+          "--kui-layout-rounded-radius",
+          "--kui-layout-highlight-inset"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:split-button",
+      "package": "@kerfjs/ui",
+      "id": "split-button",
+      "name": "SplitButton",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the primary and options actions",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the options menu and its open state",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the running state, tone switch, and copy",
+          "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": [
+          "Both halves are native buttons in a group; the options trigger exposes aria-haspopup, aria-expanded, and optional aria-controls, and needs optionsLabel. busy sets aria-busy on the primary."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-split-button",
+        "publicClasses": [
+          "kui-split-button",
+          "kui-split-button__options",
+          "kui-split-button__icon",
+          "kui-split-button__label"
+        ],
+        "rootElement": "div",
+        "publicTokens": [
+          "--kui-color-brand-fill-loud",
+          "--kui-color-brand-on-loud",
+          "--kui-color-neutral-fill-loud",
+          "--kui-color-neutral-on-loud",
+          "--kui-color-success-fill-loud",
+          "--kui-color-success-on-loud",
+          "--kui-color-warning-fill-loud",
+          "--kui-color-warning-on-loud",
+          "--kui-color-danger-fill-loud",
+          "--kui-color-danger-on-loud",
+          "--kui-focus-ring",
+          "--kui-font-weight-semibold",
+          "--kui-layout-rounded-radius",
+          "--kui-space-s",
+          "--kui-space-xs"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:file-picker",
+      "package": "@kerfjs/ui",
+      "id": "file-picker",
+      "name": "FilePicker",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "what happens to the reported files (upload, validation, limits)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the list of chosen files",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "copy and accepted types",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireFilePickers"],
+        "obligations": [
+          "Reports chosen and dropped files and accepts drops on the zone; without it drops open the file in the browser."
+        ],
+        "stateAttributes": [
+          {
+            "name": "data-dragging",
+            "on": "kui-file-picker (drop zone)",
+            "helper": "wireFilePickers",
+            "meaning": "\"true\" while files are dragged over the zone."
+          }
+        ]
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": {
+          "margin": "self",
+          "border": "self",
+          "padding": "self",
+          "notes": [
+            "The drop zone carries the 8px content-item inline margin; the trigger is a compact 32px inline control."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Each control is a label around a real file input that receives keyboard focus; the visible control shows the focus ring. Give the input an accessibleLabel when the visible copy is short."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-file-picker",
+        "publicClasses": [
+          "kui-file-picker",
+          "kui-file-picker__title",
+          "kui-file-picker__detail",
+          "kui-file-picker__input",
+          "kui-file-picker__icon"
+        ],
+        "rootElement": "label",
+        "publicTokens": [
+          "--kui-color-text-link",
+          "--kui-color-brand-fill-quiet",
+          "--kui-color-neutral-border-loud",
+          "--kui-color-neutral-on-quiet",
+          "--kui-color-text",
+          "--kui-focus-ring",
+          "--kui-font-xs",
+          "--kui-font-2xs",
+          "--kui-font-weight-semibold",
+          "--kui-layout-inline-margin",
+          "--kui-layout-rounded-radius",
+          "--kui-radius-pill",
+          "--kui-space-2xs",
+          "--kui-space-s",
+          "--kui-space-xs"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:feedback",
       "package": "@kerfjs/ui",
@@ -4087,7 +4867,8 @@
           "--kui-state-banner-success-foreground",
           "--kui-state-banner-warning-background",
           "--kui-state-banner-warning-border",
-          "--kui-state-banner-warning-foreground"
+          "--kui-state-banner-warning-foreground",
+          "--kui-shadow-l"
         ]
       },
       "diagnostics": [],
@@ -4096,6 +4877,157 @@
         "composition": "docs/component-selection.md#problem-to-component-matrix"
       }
     },
+    {
+      "key": "@kerfjs/ui:corner-status",
+      "package": "@kerfjs/ui",
+      "id": "corner-status",
+      "name": "CornerStatus",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "status lifetime (render while the work runs, remove when it ends)",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "the composed StateBanner copy and progress",
+          "owner": "application",
+          "required": false
+        },
+        { "id": "corner placement", "owner": "application", "required": false }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": ["wireCornerStatus"],
+        "obligations": [
+          "Opens each overlay host in the top layer as renders insert it; without it the Popover API keeps the host hidden."
+        ],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["feedback"],
+        "geometry": {
+          "margin": "none",
+          "border": "child",
+          "padding": "child",
+          "notes": [
+            "Placement owns the 16px viewport gutter plus device safe-area insets; a StateBanner inside drops its inline margin and gains elevation."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The host adds no role; the composed StateBanner with urgency=\"status\" is the polite live region.",
+          "Opening never moves focus, and there is no close button, light dismiss, or Escape handling to compete with dialogs.",
+          "A modal dialog opened while it shows stacks above it and makes it inert (unannounced); show progress the dialog's task depends on inside the dialog."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-corner-status",
+        "publicClasses": ["kui-corner-status"],
+        "rootElement": "div",
+        "publicTokens": [
+          "--kui-corner-status-gutter",
+          "--kui-corner-status-z-index",
+          "--kui-safe-area-block-end",
+          "--kui-safe-area-block-start",
+          "--kui-safe-area-inline-end",
+          "--kui-safe-area-inline-start",
+          "--kui-space-m",
+          "--kui-space-xs"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
+    {
+      "key": "@kerfjs/ui:edge-activity-indicator",
+      "package": "@kerfjs/ui",
+      "id": "edge-activity-indicator",
+      "name": "EdgeActivityIndicator",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        { "id": "the busy state", "owner": "application", "required": false },
+        {
+          "id": "the optional status message",
+          "owner": "application",
+          "required": false
+        },
+        { "id": "the tone", "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": [
+            "Fixed to the top edge below the device safe area; it allocates no layout."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "The strip is aria-hidden and pointer-inert; the optional pill is a polite live region that holds text only while it shows. Under reduced motion the wave and scale stop and the strip and pill only fade."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-edge-activity-indicator",
+        "publicClasses": [
+          "kui-edge-activity-indicator",
+          "kui-edge-activity-indicator__strip",
+          "kui-edge-activity-indicator__message"
+        ],
+        "rootElement": "div",
+        "publicTokens": [
+          "--kui-edge-activity-indicator-z-index",
+          "--kui-safe-area-block-start",
+          "--kui-color-brand-fill-loud",
+          "--kui-color-brand-on-loud",
+          "--kui-color-neutral-fill-loud",
+          "--kui-color-neutral-on-loud",
+          "--kui-color-pop-fill-loud",
+          "--kui-color-pop-on-loud",
+          "--kui-color-success-fill-loud",
+          "--kui-color-success-on-loud",
+          "--kui-color-warning-fill-loud",
+          "--kui-color-warning-on-loud",
+          "--kui-color-danger-fill-loud",
+          "--kui-color-danger-on-loud",
+          "--kui-font-2xs",
+          "--kui-space-m",
+          "--kui-space-s"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:empty-state",
       "package": "@kerfjs/ui",