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

package/ux-demo/recipes/list-detail-dialog.tsx

@@ -3,25 +3,20 @@ import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/nav-stack.css';
 import '@kerfjs/ui/split-view.css';
 import '@kerfjs/ui/webawesome.css';
-import '@awesome.me/webawesome/dist/components/button/button.js';
-import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
 
+import { Button } from '@kerfjs/ui/button';
 import { remify } from '@kerfjs/ui/css-values';
 import { deviceClass } from '@kerfjs/ui/device-class';
 import { List } from '@kerfjs/ui/list';
+import { ListDetailDialog } from '@kerfjs/ui/list-detail-dialog';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { Pane } from '@kerfjs/ui/pane';
 import { Row } from '@kerfjs/ui/row';
 import { Spacer } from '@kerfjs/ui/spacer';
-import { SplitView } from '@kerfjs/ui/split-view';
-import { DialogSurface } from '@kerfjs/ui/surface-scaffold';
-import { Toolbar } from '@kerfjs/ui/toolbar';
-import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
-import { ToolbarText } from '@kerfjs/ui/toolbar-text';
+import { openDialog } from '@kerfjs/ui/surface-scaffold';
 import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
 import { signal } from 'kerfjs';
-import { ChevronRight, FileText, X } from 'lucide';
+import { ChevronRight, FileText } from 'lucide';
 
 import type { RecipeFactory, RecipePresentation } from './types.js';
 
@@ -48,13 +43,9 @@ const records = {
 
 type RecordId = keyof typeof records;
 
-interface RecipeDialogElement extends HTMLElement {
-  open: boolean;
-}
-
 export const presentation: RecipePresentation = {
   viewport: { layout: 'grid', width: 'full' },
-  note: 'On roomy devices the dialog body is a workbench: a full-height list sidebar with its own toolbar beside a full-height detail column that carries the primary title, close control, and record actions. Compact devices get a full-screen sheet that drills from the list into the detail. Web Awesome owns modal focus and Escape; DialogSurface owns dialog geometry; SplitView owns the panes and the compact drill-down. The app owns open state, selection, and record actions.',
+  note: 'ListDetailDialog: on roomy devices a full-height list column with its own title sits beside a full-height detail column that carries the primary title, the close control, and the record actions, so the divider runs from top to bottom. Compact devices get a full-screen dialog that drills from the list into the detail. The component owns the native modal dialog, the columns, and the compact drill-down; the app owns open state, selection, and record actions.',
 };
 
 export const createRecipe: RecipeFactory = (announce) => {
@@ -62,7 +53,6 @@ export const createRecipe: RecipeFactory = (announce) => {
   // Compact devices drill from the list into the detail; this flag is the
   // pushed detail view. Roomy devices show both panes side by side.
   const detailOpen = signal(false);
-  const open = { value: false };
   const device = deviceClass();
 
   const projectRows = (compact: boolean) => (
@@ -89,165 +79,70 @@ export const createRecipe: RecipeFactory = (announce) => {
   const recordActions = () => (
     <Row gap="xs" wrap controlInsets="trbl">
       <Spacer flex />
-      <wa-button
-        appearance="outlined"
-        data-action="recipe-action"
-        data-recipe-command="archive"
+      <Button
+        emphasis="secondary"
+        action="recipe-action"
+        rootAttributes={{ 'data-recipe-command': 'archive' }}
       >
         Archive
-      </wa-button>
-      <wa-button
-        variant="brand"
-        appearance="accent"
-        data-action="recipe-action"
-        data-recipe-command="open-record"
+      </Button>
+      <Button
+        tone="brand"
+        action="recipe-action"
+        rootAttributes={{ 'data-recipe-command': 'open-record' }}
       >
         Open Project
-      </wa-button>
+      </Button>
     </Row>
   );
 
-  // Roomy: a workbench. The list is a full-height sidebar with its own top
-  // toolbar; the detail column carries the dialog's primary title, the close
-  // control, and the record actions, and runs the full dialog height too.
-  const sidebar = () => (
-    <Pane
-      label="Recent Projects"
-      header={
-        <Toolbar
-          label="Recent Projects"
-          leading={<ToolbarText text="Recent Projects" />}
-        />
-      }
-    >
-      <List controlInsets="tb">{projectRows(false)}</List>
-    </Pane>
-  );
-
-  const detailColumn = () => {
-    const record = records[selected.value];
-    return (
-      <Pane
-        label={record.name}
-        header={
-          <Toolbar
-            label="Project Details"
-            leading={
-              <ToolbarText
-                text={record.name}
-                size="xlarge"
-                id="recipe-project-title"
-                headingLevel={2}
-              />
-            }
-            trailing={
-              <ToolbarControlGroup appearance="borderless" single>
-                <button type="button" aria-label="Close" data-dialog="close">
-                  <LucideIcon icon={X} name="x" />
-                </button>
-              </ToolbarControlGroup>
-            }
-          />
-        }
-        footer={recordActions()}
-      >
-        <List controlInsets="tb">
-          <ValueTable label="Project Details">
-            <ValueTableRow label="Owner" value={record.owner} />
-            <ValueTableRow label="Status" value={record.state} />
-            <ValueTableRow label="Updated" value={record.updated} />
-          </ValueTable>
-        </List>
-      </Pane>
-    );
-  };
-
-  const compactDetail = () => {
-    const record = records[selected.value];
-    return (
-      <List>
-        <ValueTable label="Project Details">
-          <ValueTableRow label="Owner" value={record.owner} />
-          <ValueTableRow label="Status" value={record.state} />
-          <ValueTableRow label="Updated" value={record.updated} />
-        </ValueTable>
-      </List>
-    );
-  };
-
   const render = () => {
     const compact = device.value.compact;
+    const record = records[selected.value];
     return (
       <section
         data-recipe="recipe-list-detail-dialog"
         aria-label="Project Details Dialog"
       >
         <Row hAlign="center">
-          <DialogSurface
-            size="large"
-            presentation={compact ? 'fullscreen' : 'modal'}
-            viewportGutter={remify(16)}
-            maxHeight="viewport"
-            bodyInset="none"
-            footerInset="comfortable"
+          <Button
+            tone="brand"
+            action="recipe-action"
+            rootAttributes={{ 'data-recipe-command': 'open' }}
           >
-            <wa-button
-              variant="brand"
-              appearance="accent"
-              data-action="recipe-action"
-              data-recipe-command="open"
-            >
-              Open Project Details
-            </wa-button>
-            {compact ? (
-              <wa-dialog label="Project Details" open={open.value} with-footer>
-                <SplitView
-                  id="recipe-projects"
-                  label="Projects"
-                  compact
-                  detailActive={detailOpen.value}
-                  listTitle="Recent projects"
-                  detailTitle={records[selected.value].name}
-                  backLabel="Back to Projects"
-                  list={<List>{projectRows(true)}</List>}
-                  detail={compactDetail()}
-                />
-                <wa-button
-                  slot="footer"
-                  appearance="outlined"
-                  data-action="recipe-action"
-                  data-recipe-command="archive"
-                >
-                  Archive
-                </wa-button>
-                <wa-button
-                  slot="footer"
-                  variant="brand"
-                  appearance="accent"
-                  data-action="recipe-action"
-                  data-recipe-command="open-record"
-                >
-                  Open Project
-                </wa-button>
-              </wa-dialog>
-            ) : (
-              <wa-dialog
-                label="Project Details"
-                open={open.value}
-                without-header
-              >
-                <SplitView
-                  id="recipe-projects"
-                  label="Projects"
-                  compact={false}
-                  listTitle="Recent projects"
-                  detailTitle={records[selected.value].name}
-                  list={sidebar()}
-                  detail={detailColumn()}
-                />
-              </wa-dialog>
-            )}
-          </DialogSurface>
+            Open Project Details
+          </Button>
+          {/* One dialog in both layouts, so crossing the compact breakpoint
+              while it is open morphs it in place and it stays open. */}
+          <ListDetailDialog
+            id="recipe-projects"
+            label="Project Details"
+            compact={compact}
+            detailActive={detailOpen.value}
+            backLabel="Back to Projects"
+            viewportGutter={remify(16)}
+            list={{
+              title: 'Recent Projects',
+              content: (
+                <List controlInsets={compact ? undefined : 'tb'}>
+                  {projectRows(compact)}
+                </List>
+              ),
+            }}
+            detail={{
+              title: record.name,
+              content: (
+                <List controlInsets="tb">
+                  <ValueTable label="Project Details">
+                    <ValueTableRow label="Owner" value={record.owner} />
+                    <ValueTableRow label="Status" value={record.state} />
+                    <ValueTableRow label="Updated" value={record.updated} />
+                  </ValueTable>
+                </List>
+              ),
+              footer: recordActions(),
+            }}
+          />
         </Row>
       </section>
     );
@@ -269,17 +164,15 @@ export const createRecipe: RecipeFactory = (announce) => {
       }
       const dialog = element
         .closest('[data-recipe]')
-        ?.querySelector<RecipeDialogElement>('wa-dialog');
+        ?.querySelector<HTMLDialogElement>('dialog.kui-dialog-surface');
       if (command === 'open' && dialog) {
         element.focus();
-        open.value = true;
-        dialog.open = true;
+        openDialog(dialog);
         return;
       }
       announce(`${command} requested`);
     },
     afterHide() {
-      open.value = false;
       detailOpen.value = false;
     },
   };

package/ux-demo/recipes/mount-recipe.ts

@@ -1,5 +1,5 @@
 import { wireNavStack } from '@kerfjs/ui/wire-nav-stack';
-import { delegate, mount } from 'kerfjs';
+import { delegate, delegateCapture, mount } from 'kerfjs';
 import { delegateActions } from 'kerfjs/actions';
 
 import type { RecipeController } from './types.js';
@@ -24,19 +24,20 @@ export function mountRecipe(
   const stopChanges = delegate(
     root,
     'change',
-    'wa-select, wa-input, wa-textarea',
+    'kui-select, .kui-text-field__input',
     dispatchChange,
   );
   const stopInputs = delegate(
     root,
     'input',
-    'wa-input, wa-textarea',
+    '.kui-text-field__input',
     dispatchChange,
   );
-  const stopDialogs = delegate(
+  // A DialogSurface's native `close` does not bubble, so listen in capture.
+  const stopDialogs = delegateCapture(
     root,
-    'wa-after-hide',
-    'wa-dialog',
+    'close',
+    'dialog.kui-dialog-surface',
     (_event, element) => controller.afterHide?.(element as HTMLElement),
   );
   const stopNav = wireNavStack(root, {

package/ux-demo/recipes/types.ts

@@ -5,6 +5,7 @@ export interface RecipeController {
   render(): SafeHtml;
   action(command: string, element: HTMLElement): void;
   change?(element: HTMLElement): void;
+  /** Runs after a recipe's DialogSurface closes (its native `close`). */
   afterHide?(element: HTMLElement): void;
   /**
    * Install any imperative wiring the recipe owns on its mounted root (e.g.

package/ai/components/icon-button.md

@@ -1,82 +0,0 @@
-# IconButton
-
-<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
-
-`@kerfjs/ui:icon-button` · Kerf UI · component · Controls
-
-Square, icon-only Web Awesome button with a LucideIcon and a required accessible name.
-
-## When to use
-
-Render an icon-only action as a square one form-control height on each side, so it matches an adjacent wa-input or Select, without ::part overrides.
-
-- An icon-only action stands alone or beside a form field, such as a Browse button next to a path input.
-
-**Not when:**
-
-- Do not use inside a ToolbarControlGroup; the group owns its controls' geometry, so compose a native button with a LucideIcon there.
-- Do not use when the action needs a visible text label; use wa-button with text.
-- Do not override wa-button::part(base) width, min-height, or padding to square an icon button; use IconButton.
-
-**Alternatives:**
-
-- [Button](./wa-button.md) (prefer-over) — Web Awesome squares a button only for a lone wa-icon; with a LucideIcon use IconButton.
-- [ListInsetControl](./list-inset-control.md) (composes-with) — Beside a field in a ListInsetControl the square keeps its size and aligns with the field below its label.
-
-## Imports
-
-- JavaScript: `@kerfjs/ui/icon-button` — exports `IconButton`.
-- CSS: the browser build of `@kerfjs/ui/icon-button` pulls its CSS automatically; import `@kerfjs/ui/icon-button.css` manually only without the `browser` export condition.
-- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
-- Registration: import `@awesome.me/webawesome/dist/components/button/button.js` once (a side effect).
-- Declared side effects: browser-condition-css, custom-element-registration.
-
-## Props
-
-Exact prop names and types: [`@kerfjs/ui/icon-button`](../public-api-signatures-v1.md#kerfjsuiicon-button) in `public-api-signatures-v1.md`. Do not infer props from examples.
-
-**Variants (configure, do not restyle):**
-
-- default appearance
-- plain
-- outlined
-- danger variant
-- disabled
-- xs, s, m, l, or xl size
-
-## Composition
-
-- Parents: any.
-- Contexts: `application-ui`.
-- Children: unrestricted.
-- Built from: [Button](./wa-button.md), [LucideIcon](./lucide-icon.md).
-
-## State and wiring
-
-**The app owns:** the delegated action; the accessible name; appearance, variant, and size choice.
-
-No wiring helper.
-
-## Geometry
-
-Margin: none · border: self · padding: self (layout role: controls). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
-
-## Accessibility
-
-- label is required and names the button through its LucideIcon (role img), since the button shows no text.
-
-## Styling boundary
-
-The component owns its own styles. Configure it through its props and variants; do not override its internals.
-
-Public class hooks (select for layout placement only, never to change the component's look): `kui-icon-button`.
-
-Never put `kui-icon-button` on an element you write; render `IconButton` instead (`KUI-L103`).
-
-Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
-
-## Related
-
-- Components: [Button](./wa-button.md), [LucideIcon](./lucide-icon.md), [ListInsetControl](./list-inset-control.md).
-- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
-- UX catalog route: `?component=icon-button`.

package/ai/components/icon-toggle-button.md

@@ -1,80 +0,0 @@
-# IconToggleButton
-
-<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
-
-`@kerfjs/ui:icon-toggle-button` · Kerf UI · component · Controls
-
-A standalone icon-only toggle with a single contained toolbar group's geometry and pressed chrome.
-
-## When to use
-
-Render an icon-only aria-pressed toggle in content or a pane footer, where a Toolbar does not belong, with the 44px contained geometry and raised pressed face of a single ToolbarControlGroup.
-
-- An icon-only on/off control (show a panel, a conversation) sits in content or a pane footer outside any Toolbar.
-
-**Not when:**
-
-- Do not use inside a Toolbar; compose a ToolbarControlGroup there.
-- Do not use for a momentary action; use IconButton.
-- Do not use for one-of-several choices; use SegmentedControl.
-
-**Alternatives:**
-
-- [ToolbarControlGroup](./toolbar-control-group.md) (nearest) — Inside a Toolbar, a single ToolbarControlGroup with a pressed button is the same control.
-- [IconButton](./icon-button.md) (nearest) — Use IconButton for a momentary icon-only action.
-
-## Imports
-
-- JavaScript: `@kerfjs/ui/icon-toggle-button` — exports `IconToggleButton`.
-- CSS: the browser build of `@kerfjs/ui/icon-toggle-button` pulls its CSS automatically; import `@kerfjs/ui/icon-toggle-button.css` manually only without the `browser` export condition.
-- Declared side effects: browser-condition-css.
-
-## Props
-
-Exact prop names and types: [`@kerfjs/ui/icon-toggle-button`](../public-api-signatures-v1.md#kerfjsuiicon-toggle-button) in `public-api-signatures-v1.md`. Do not infer props from examples.
-
-**Variants (configure, do not restyle):**
-
-- pressed
-- unpressed
-- pill or rounded shape
-- disabled
-
-## Composition
-
-- Parents: any.
-- Contexts: `application-ui`.
-- Children: unrestricted.
-- Built from: [LucideIcon](./lucide-icon.md).
-
-## State and wiring
-
-**The app owns:** the pressed state and its delegated action; the accessible name.
-
-No wiring helper.
-
-## Geometry
-
-Margin: none · border: self · padding: self (layout role: controls). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
-
-## Accessibility
-
-- Native button with aria-pressed and a required aria-label; with help tags registered it shows that label on hover and keyboard focus.
-
-## Styling boundary
-
-The component owns its own styles. Configure it through its props and variants; do not override its internals.
-
-Public class hooks (select for layout placement only, never to change the component's look): `kui-icon-toggle-button`, `kui-icon-toggle-button__face`.
-
-Never put `kui-icon-toggle-button`, `kui-icon-toggle-button__face` on an element you write; render `IconToggleButton` instead (`KUI-L103`).
-
-Public tokens it reads: `--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`. Set a token only where its public contract allows; prefer a prop.
-
-Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
-
-## Related
-
-- Components: [LucideIcon](./lucide-icon.md), [ToolbarControlGroup](./toolbar-control-group.md), [IconButton](./icon-button.md).
-- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
-- UX catalog route: `?component=icon-toggle-button`.

package/ai/components/token-search-field.md

@@ -1,107 +0,0 @@
-# TokenSearchField
-
-<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
-
-`@kerfjs/ui:token-search-field` · Kerf UI · component · Controls
-
-## When to use
-
-Token-controlled, optionally collapsible search editor with ordered, editable, removable filter chips.
-
-- Combine DOM-owned free text with ordered editable/removable filter tokens in one searchbox.
-- Enable collapsible mode when an empty, unfocused search should reduce to one iconic action, standalone or inside a toolbar group.
-- Use presentation="form-field" for a structured search query beside Web Awesome form controls, with a visible label, optional hint, and required marker.
-
-**Not when:**
-
-- Do not use for ordinary text input or separately labeled filter controls.
-
-**Alternatives:**
-
-- [Input](./wa-input.md) (prefer-over)
-
-## Imports
-
-- JavaScript: `@kerfjs/ui/token-search-field` — exports `TokenSearchField`, `readTokenSearchField`, `placeTokenSearchCaret`.
-- JavaScript: `@kerfjs/ui/wire-token-search-fields` — exports `wireTokenSearchFields`.
-- JavaScript: `@kerfjs/ui/token-search-model` — exports `createTokenSearchModel`.
-- CSS: the browser build of `@kerfjs/ui/token-search-field` pulls its CSS automatically; import `@kerfjs/ui/token-search-field.css` manually only without the `browser` export condition.
-- Wiring: `readTokenSearchField` from `@kerfjs/ui/token-search-field` (required).
-- Wiring: `placeTokenSearchCaret` from `@kerfjs/ui/token-search-field` (optional).
-- Wiring: `wireTokenSearchFields` from `@kerfjs/ui/wire-token-search-fields` (required).
-- Declared side effects: browser-condition-css.
-
-## Props
-
-Exact prop names and types: [`@kerfjs/ui/token-search-field`](../public-api-signatures-v1.md#kerfjsuitoken-search-field), [`@kerfjs/ui/wire-token-search-fields`](../public-api-signatures-v1.md#kerfjsuiwire-token-search-fields), [`@kerfjs/ui/token-search-model`](../public-api-signatures-v1.md#kerfjsuitoken-search-model) in `public-api-signatures-v1.md`. Do not infer props from examples.
-
-**Variants (configure, do not restyle):**
-
-- tokens
-- free text
-- disabled
-- collapsible standalone or toolbar composition
-- visible form-field label, hint, and required marker
-
-## Composition
-
-- Parents: any.
-- Contexts: `structured-search-editor`.
-- Children: unrestricted.
-- Built from: [LucideIcon](./lucide-icon.md).
-
-Zones (a zone is bound to JSX only through its listed prop; never assume the zone id is a prop):
-
-- `leading-decoration` — JSX prop `leading`; accepts `dormant-decoration`; 0–1.
-- `trailing-control` — JSX prop `trailing`; accepts `control`; 0–1.
-
-## State and wiring
-
-- tokens — controlled (required)
-- text — component (required)
-- expanded — controlled
-
-**Wiring:** `wireTokenSearchFields` is required.
-
-- Retain and invoke the disposer.
-- Use readTokenSearchField for DOM-owned text.
-
-**Wiring-owned state attributes** — never render, remove, or branch on these as app state:
-
-- `data-token-search-text` on `the text span inside kui-token-search__editor` (`wireTokenSearchFields`): Marks the plain-text span the helper inserts when the editor is emptied.
-- `data-empty` on `the text span inside kui-token-search__editor` (`wireTokenSearchFields`): "true" on that span while it holds no text.
-- `data-placeholder-visible` on `the kui-token-search root` (`wireTokenSearchFields`): Tracks whether the DOM-owned editor is empty so its placeholder stays outside the editable area.
-
-## Geometry
-
-Margin: none · border: self · padding: self (layout role: controls). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
-
-## Accessibility
-
-- Announce result changes when useful and keep tokens atomic during editing.
-- Keep leading and trailing controls aligned to the first text line while content wraps. 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.
-
-## Styling boundary
-
-The component owns its own styles. Configure it through its props and variants; do not override its internals.
-
-Public class hooks (select for layout placement only, never to change the component's look): `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`.
-
-Never put `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` on an element you write; render `TokenSearchField` instead (`KUI-L103`).
-
-Public tokens it reads: `--kui-color-brand-fill-normal`, `--kui-color-brand-on-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-text-link`, `--kui-color-surface`, `--kui-color-text`, `--kui-color-text-quiet`, `--kui-focus-ring`, `--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`. Set a token only where its public contract allows; prefer a prop.
-
-Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
-
-## Diagnostics
-
-- `KUI-C105` (error) when wireTokenSearchFields is absent: TokenSearchField requires its public wiring helper for keyboard and collapsible behavior.
-
-## Related
-
-- Components: [LucideIcon](./lucide-icon.md), [Input](./wa-input.md).
-- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/accessibility.md#tokensearchfield`](../../docs/accessibility.md#tokensearchfield).
-- UX catalog route: `?component=token-search-field`.

package/dist/app-tab.js

@@ -1,6 +0,0 @@
-export { AppTab } from './chunk-TGLUDQP2.js';
-
-
-
-
-//# sourceMappingURL=app-tab.js.map

package/dist/app-tab.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"app-tab.js"}

package/dist/browser/app-tab.js

@@ -1,4 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/skeleton.css';
-import '../styles/app-tab.css';
-export * from '../app-tab.js';

package/dist/browser/composer.js

@@ -1,4 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/text.css';
-import '../styles/composer.css';
-export * from '../composer.js';

package/dist/browser/icon-toggle-button.js

@@ -1,4 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/lucide-icon.css';
-import '../styles/icon-toggle-button.css';
-export * from '../icon-toggle-button.js';

package/dist/browser/token-search-field.js

@@ -1,4 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/lucide-icon.css';
-import '../styles/token-search-field.css';
-export * from '../token-search-field.js';

package/dist/chunk-2MSPNRWJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/forms/file-picker/wiring/wire-file-pickers.ts"],"names":[],"mappings":"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","file":"chunk-2MSPNRWJ.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst PICKER =\n  '[data-component=\"file-picker-trigger\"], [data-component=\"file-drop-zone\"]';\nconst DROP_ZONE = '[data-component=\"file-drop-zone\"]';\n\n/** Files a picker reported, and how they arrived. */\nexport interface FilePickerSelection {\n  /** The trigger or drop zone element. */\n  picker: HTMLElement;\n  /** Its `pickerId`, when set. */\n  id?: string;\n  files: File[];\n  via: 'browse' | 'drop';\n}\n\nexport interface WireFilePickersOptions {\n  onFiles: (selection: FilePickerSelection) => void;\n}\n\n/** Whether a file matches a native `accept` list (`.png, image/*, text/plain`). */\nexport function fileMatchesAccept(file: File, accept: string): boolean {\n  const tokens = accept\n    .split(',')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return tokens.some((token) => {\n    if (token.startsWith('.')) return name.endsWith(token);\n    if (token.endsWith('/*')) return type.startsWith(token.slice(0, -1));\n    return type === token;\n  });\n}\n\nfunction pickerOf(input: HTMLInputElement): HTMLElement | null {\n  return input.closest<HTMLElement>(PICKER);\n}\n\nfunction inputOf(picker: HTMLElement): HTMLInputElement | null {\n  return picker.querySelector<HTMLInputElement>('input[type=\"file\"]');\n}\n\n/**\n * Report files chosen through any `FilePickerTrigger` or `FileDropZone` below\n * root, or dropped on a `FileDropZone`, and mark a zone `data-dragging` while\n * files are dragged over it. Dropped files are filtered by the input's\n * `accept` (and to one when it is not `multiple`); a disabled picker ignores\n * drops. The input is reset after each report, so choosing the same file again\n * reports again. Dispose with the owning application.\n */\nexport function wireFilePickers(\n  root: Root,\n  { onFiles }: WireFilePickersOptions,\n): () => void {\n  const report = (\n    picker: HTMLElement,\n    files: File[],\n    via: FilePickerSelection['via'],\n  ) => {\n    if (files.length === 0) return;\n    onFiles({ picker, id: picker.dataset.filePickerId, files, via });\n  };\n  const onChange = (event: Event) => {\n    const input = event.target;\n    if (!(input instanceof HTMLInputElement) || input.type !== 'file') return;\n    const picker = pickerOf(input);\n    if (!picker) return;\n    // A file input always has a FileList.\n    report(picker, [...input.files!], 'browse');\n    input.value = '';\n  };\n  const zoneOf = (event: Event): HTMLElement | null => {\n    const zone =\n      event.target instanceof Element\n        ? event.target.closest<HTMLElement>(DROP_ZONE)\n        : null;\n    return zone && zone.dataset.disabled !== 'true' ? zone : null;\n  };\n  const carriesFiles = (event: DragEvent) =>\n    [...(event.dataTransfer?.types ?? [])].includes('Files');\n  const onDragOver = (event: Event) => {\n    const drag = event as DragEvent;\n    const zone = zoneOf(drag);\n    if (!zone || !carriesFiles(drag)) return;\n    drag.preventDefault();\n    // carriesFiles guarantees a DataTransfer.\n    drag.dataTransfer!.dropEffect = 'copy';\n    zone.dataset.dragging = 'true';\n  };\n  const onDragLeave = (event: Event) => {\n    const zone = zoneOf(event);\n    const related = (event as DragEvent).relatedTarget;\n    if (zone && !(related instanceof Node && zone.contains(related)))\n      delete zone.dataset.dragging;\n  };\n  const onDrop = (event: Event) => {\n    const drag = event as DragEvent;\n    const zone = zoneOf(drag);\n    if (!zone) return;\n    drag.preventDefault();\n    delete zone.dataset.dragging;\n    const input = inputOf(zone);\n    let files = [...(drag.dataTransfer?.files ?? [])];\n    if (input?.accept)\n      files = files.filter((file) => fileMatchesAccept(file, input.accept));\n    if (input && !input.multiple) files = files.slice(0, 1);\n    report(zone, files, 'drop');\n  };\n  root.addEventListener('change', onChange);\n  root.addEventListener('dragenter', onDragOver);\n  root.addEventListener('dragover', onDragOver);\n  root.addEventListener('dragleave', onDragLeave);\n  root.addEventListener('drop', onDrop);\n  return () => {\n    root.removeEventListener('change', onChange);\n    root.removeEventListener('dragenter', onDragOver);\n    root.removeEventListener('dragover', onDragOver);\n    root.removeEventListener('dragleave', onDragLeave);\n    root.removeEventListener('drop', onDrop);\n  };\n}\n"]}