@kerfjs/ui 5.0.0-beta.104 → 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/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"]}

package/dist/chunk-7IUEBNCO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/surfaces/content-item/content-item.tsx"],"names":[],"mappings":";;;AA6BA,SAAS,qBACP,IAAA,EAC6B;AAC7B,EAAA,QAAQ,IAAA;AAAM,IACZ,KAAK,QAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,UAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,QAAA;AACH,MAAA,OAAO,QAAA;AAAA;AAEb;AAEA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA0GM,SAAS,WAAA,CAAY;AAAA,EAC1B,UAAA,GAAa,aAAA;AAAA,EACb,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,MAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA,cACI,8BAAA,GACA;AAAA,GACN;AACA,EAAA,IAAI,WAAA,IAAe,CAAC,MAAA,EAAQ;AAC1B,IAAA,MAAM,IAAI,MAAM,4CAA4C,CAAA;AAAA,EAC9D;AACA,EAAA,IAAI,WAAA,IAAe,QAAA,IAAY,aAAA,KAAkB,MAAA,EAAQ;AACvD,IAAA,MAAM,IAAI,MAAM,+CAA+C,CAAA;AAAA,EACjE;AACA,EAAA,MAAM,GAAA,GAAM;AAAA,IACV,kBAAA;AAAA,IACA,KAAA,KAAU,SAAS,wBAAA,GAA2B,EAAA;AAAA,IAC9C,KAAA,KAAU,WAAW,0BAAA,GAA6B,EAAA;AAAA,IAClD,QAAQ,yBAAA,GAA4B,EAAA;AAAA,IACpC;AAAA,GACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,MAAM,wBAAwB,WAAA,GAC1B;AAAA,IACE,kBAAA,EAAoB,MAAA;AAAA,IACpB,aAAA,EAAe,WAAW,MAAA,GAAY,MAAA;AAAA,IACtC,cAAA,EAAgB,MAAA;AAAA,IAChB,qBAAA,EAAuB,aAAA;AAAA,IACvB,eAAA,EACE,aAAA,KAAkB,MAAA,GAAS,MAAA,GAAY,OAAO,QAAQ,CAAA;AAAA,IACxD,eAAA,EAAiB,WAAW,MAAA,GAAS;AAAA,MAEvC,EAAC;AACL,EAAA,IAAI,IAAA,GAA2D,YAC3D,QAAA,GACA,MAAA;AACJ,EAAA,IAAI,WAAA,EAAa,IAAA,GAAO,oBAAA,CAAqB,aAAa,CAAA;AAC1D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACH,GAAG,qBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,KAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,iBAAA,EAAiB,UAAA;AAAA,MACjB,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,aAAA,EAAa,MAAA;AAAA,MACb,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,eAAA,EACE,gBACC,aAAA,KAAkB,QAAA,IAAY,kBAAkB,UAAA,CAAA,GAC7C,MAAA,CAAO,QAAQ,CAAA,GACf,MAAA;AAAA,MAEN,gBACE,WAAA,IAAe,aAAA,KAAkB,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAEjE,eAAA,EAAe,WAAA,IAAe,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,MAClD,UACE,WAAA,GACI,QAAA,GACE,OACA,GAAA,GACD,QAAA,KAAa,cAAc,IAAA,GAAO,MAAA,CAAA;AAAA,MAEzC,IAAA;AAAA,MAEC,QAAA,EAAA,WAAA,IAAe,kBAAkB,UAAA,mBAChC,GAAA,CAAC,SAAI,IAAA,EAAK,UAAA,EAAY,UAAS,CAAA,GAE/B;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-7IUEBNCO.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\n/**\n * Base surface treatment, semantic status colors, or `brand-loud`: the solid\n * brand fill with its on-loud foreground (a transcript's own messages).\n */\nexport type ContentItemAppearance =\n  'transparent' | 'surface' | 'brand-loud' | SemanticTone;\n\n/**\n * A chat-bubble layout for transcripts: the item fits its content up to 80%\n * of the row and sits at the `start` (other participants) or `end` (the\n * person's own messages) of the line.\n */\nexport type ContentItemBubble = 'start' | 'end';\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode =\n  'none' | 'single' | 'multiple' | 'toggle';\n\nfunction roleForSelectionMode(\n  mode: ContentItemSelectionMode,\n): 'option' | 'row' | 'button' {\n  switch (mode) {\n    case 'single':\n      return 'option';\n    case 'multiple':\n      return 'row';\n    case 'none':\n    case 'toggle':\n      return 'button';\n  }\n}\n\nconst contentItemProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n  'data-bubble',\n]);\nconst interactiveProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n  'data-bubble',\n  'data-action',\n  'data-item-id',\n  'data-interactive',\n  'data-selected',\n  'data-disabled',\n  'data-selection-mode',\n  'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-appearance'?: never;\n    'data-outlined'?: never;\n    'data-bubble'?: never;\n  }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-appearance'?: never;\n    'data-outlined'?: never;\n    'data-bubble'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-interactive'?: never;\n    'data-selected'?: never;\n    'data-disabled'?: never;\n    'data-selection-mode'?: never;\n    'data-kui-pressed'?: never;\n  }\n>;\n\ninterface ContentItemBaseProps {\n  /**\n   * Coordinated background, border, and foreground colors. `transparent`\n   * preserves the surrounding surface; `surface` paints the base surface;\n   * semantic values match StateBanner. Defaults to `transparent`.\n   */\n  appearance?: ContentItemAppearance;\n  /** Item content; a plain string is allowed for bare copy. */\n  children?: KerfUiContent | string;\n  /**\n   * `framed` paints the standard neutral border in the 1px the item always\n   * reserves, so framing never changes geometry. Frame only an item that\n   * marks a real distinction. Defaults to `none` (transparent border).\n   */\n  frame?: ContentItemFrame;\n  /** Remove block padding and block borders while retaining inline geometry. */\n  flush?: boolean;\n  /** Corner shape. Defaults to `rounded`. */\n  shape?: ContentItemShape;\n  /**\n   * Lay the item out as a chat bubble: content width up to 80% of the row,\n   * at the `start` or `end` of the line. Pair `end` with `brand-loud` for the\n   * person's own messages. Omit for an ordinary full-width item.\n   */\n  bubble?: ContentItemBubble;\n  /** Native hover tooltip. */\n  title?: string;\n  /**\n   * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n   * ordinary item, which stays a non-landmark grouping.\n   */\n  ariaLabel?: string;\n  /**\n   * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n   * stop), for example the preferred initial focus of a NavStack view when\n   * combined with `data-nav-focus` in `rootAttributes`.\n   */\n  focusTarget?: boolean;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n  (\n    | {\n        interactive?: false;\n        action?: never;\n        itemId?: never;\n        selectionMode?: never;\n        selected?: never;\n        disabled?: never;\n        /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */\n        tabIndex?: 0 | -1;\n        /** Existing static `data-*` metadata remains available. */\n        rootAttributes?: ContentItemRootAttributes;\n      }\n    | {\n        /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n        interactive: true;\n        /** Delegated action dispatched by pointer, Enter, or Space. */\n        action: string;\n        itemId?: string;\n        selectionMode?: ContentItemSelectionMode;\n        selected?: boolean;\n        disabled?: boolean;\n        tabIndex?: never;\n        /** Safe app metadata; interaction attributes are component-owned. */\n        rootAttributes?: ContentItemInteractiveRootAttributes;\n      }\n  );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n  appearance = 'transparent',\n  children,\n  frame = 'none',\n  flush = false,\n  shape = 'rounded',\n  bubble,\n  title,\n  ariaLabel,\n  focusTarget = false,\n  outlined = false,\n  tabIndex,\n  interactive = false,\n  action,\n  itemId,\n  selectionMode = 'none',\n  selected = false,\n  disabled = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ContentItemProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    interactive\n      ? interactiveProtectedAttributes\n      : contentItemProtectedAttributes,\n  );\n  if (interactive && !action) {\n    throw new Error('Interactive ContentItem requires an action');\n  }\n  if (interactive && selected && selectionMode === 'none') {\n    throw new Error('Selected ContentItem requires a selectionMode');\n  }\n  const cls = [\n    'kui-content-item',\n    shape === 'pill' ? 'kui-content-item--pill' : '',\n    frame === 'framed' ? 'kui-content-item--framed' : '',\n    flush ? 'kui-content-item--flush' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const interactiveAttributes = interactive\n    ? {\n        'data-interactive': 'true',\n        'data-action': disabled ? undefined : action,\n        'data-item-id': itemId,\n        'data-selection-mode': selectionMode,\n        'data-selected':\n          selectionMode === 'none' ? undefined : String(selected),\n        'data-disabled': disabled ? 'true' : undefined,\n      }\n    : {};\n  let role: 'option' | 'row' | 'button' | 'region' | undefined = ariaLabel\n    ? 'region'\n    : undefined;\n  if (interactive) role = roleForSelectionMode(selectionMode);\n  return (\n    <div\n      {...safeRootAttributes}\n      {...interactiveAttributes}\n      class={cls}\n      title={title}\n      data-component=\"content-item\"\n      data-appearance={appearance}\n      data-outlined={outlined ? 'true' : undefined}\n      data-bubble={bubble}\n      role={role}\n      aria-label={ariaLabel}\n      aria-selected={\n        interactive &&\n        (selectionMode === 'single' || selectionMode === 'multiple')\n          ? String(selected)\n          : undefined\n      }\n      aria-pressed={\n        interactive && selectionMode === 'toggle' ? String(selected) : undefined\n      }\n      aria-disabled={interactive && disabled ? 'true' : undefined}\n      tabindex={\n        interactive\n          ? disabled\n            ? '-1'\n            : '0'\n          : (tabIndex ?? (focusTarget ? '-1' : undefined))\n      }\n      slot={slot}\n    >\n      {interactive && selectionMode === 'multiple' ? (\n        <div role=\"gridcell\">{children}</div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"]}