@kerfjs/ui 5.0.0-beta.17 → 5.0.0-beta.21

package/ux-demo/recipes/loading-inspector.tsx

@@ -14,7 +14,9 @@ import { Columns3, FileText, Inbox, List } from 'lucide';
 
 import type { RecipeFactory } from './types.js';
 
-const icon = (node: Parameters<typeof LucideIcon>[0]['icon'], name: string) => <LucideIcon icon={node} name={name} />;
+const icon = (node: Parameters<typeof LucideIcon>[0]['icon'], name: string) => (
+  <LucideIcon icon={node} name={name} />
+);
 
 /**
  * A record inspector whose per-record values load asynchronously. Every
@@ -27,47 +29,128 @@ export const createRecipe: RecipeFactory = (announce) => {
   const loading = signal(true);
   const render = () => {
     const p = loading.value;
-    return <section class="kui-recipe recipe-inspector kui-recipe__surface kui-pane" data-recipe="recipe-loading-inspector" data-inspector-loading={String(p)}>
-      <PanelHeader
-        title="Ticket · KF-2048"
-        titleId="recipe-inspector-title"
-        summary="Restore keyboard focus after a dialog closes"
-        summaryId="recipe-inspector-summary"
-        icon={icon(FileText, 'file-text')}
-        placeholder={p}
-        actions={<button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="toggle">{p ? 'Show loaded' : 'Show loading'}</button>}
-      />
-      <div class="recipe-inspector__body kui-pane__content kui-content">
-        <section>
-          <ValueTable label="Ticket details">
-            <ValueTableRow label="Status" value="In review" icon={icon(Inbox, 'inbox')} placeholder={p} />
-            <ValueTableRow label="Owner" value="Mara Lopez" placeholder={p} />
-            <ValueTableRow label="Priority" value="High" placeholder={p} />
-            <ValueTableRow label="Updated" value="2 hours ago" placeholder={p} />
-          </ValueTable>
-        </section>
-        <div class="recipe-inspector__controls">
-          <Select name="recipe-inspector-status" value="review" label="Status" placeholder={p} choices={[
-            { value: 'review', label: 'In review' },
-            { value: 'ready', label: 'Ready' },
-            { value: 'done', label: 'Done' },
-          ]} />
-          <SegmentedControl id="recipe-inspector-view" label="Inspector view" value="details" appearance="toolbar" shape="pill" size="small" placeholder={p} choices={[
-            { value: 'details', label: 'Details', content: icon(List, 'list') },
-            { value: 'activity', label: 'Activity', content: icon(Columns3, 'columns-3') },
-            { value: 'files', label: 'Files', content: icon(FileText, 'file-text') },
-          ]} />
+    return (
+      <section
+        class="kui-recipe recipe-inspector kui-recipe__surface kui-pane"
+        data-recipe="recipe-loading-inspector"
+        data-inspector-loading={String(p)}
+      >
+        <PanelHeader
+          title="Ticket · KF-2048"
+          titleId="recipe-inspector-title"
+          summary="Restore keyboard focus after a dialog closes"
+          summaryId="recipe-inspector-summary"
+          icon={icon(FileText, 'file-text')}
+          placeholder={p}
+          actions={
+            <button
+              class="kui-recipe__button"
+              data-primary="true"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="toggle"
+            >
+              {p ? 'Show loaded' : 'Show loading'}
+            </button>
+          }
+        />
+        <div class="recipe-inspector__body kui-pane__content kui-content">
+          <section>
+            <ValueTable label="Ticket details">
+              <ValueTableRow
+                label="Status"
+                value="In review"
+                icon={icon(Inbox, 'inbox')}
+                placeholder={p}
+              />
+              <ValueTableRow label="Owner" value="Mara Lopez" placeholder={p} />
+              <ValueTableRow label="Priority" value="High" placeholder={p} />
+              <ValueTableRow
+                label="Updated"
+                value="2 hours ago"
+                placeholder={p}
+              />
+            </ValueTable>
+          </section>
+          <div class="recipe-inspector__controls">
+            <Select
+              name="recipe-inspector-status"
+              value="review"
+              label="Status"
+              placeholder={p}
+              choices={[
+                { value: 'review', label: 'In review' },
+                { value: 'ready', label: 'Ready' },
+                { value: 'done', label: 'Done' },
+              ]}
+            />
+            <SegmentedControl
+              id="recipe-inspector-view"
+              label="Inspector view"
+              value="details"
+              appearance="toolbar"
+              shape="pill"
+              size="small"
+              placeholder={p}
+              choices={[
+                {
+                  value: 'details',
+                  label: 'Details',
+                  content: icon(List, 'list'),
+                },
+                {
+                  value: 'activity',
+                  label: 'Activity',
+                  content: icon(Columns3, 'columns-3'),
+                },
+                {
+                  value: 'files',
+                  label: 'Files',
+                  content: icon(FileText, 'file-text'),
+                },
+              ]}
+            />
+          </div>
+          <section>
+            <ListItem
+              action="recipe-action"
+              itemId="reassign"
+              label="Reassign ticket"
+              icon={icon(Inbox, 'inbox')}
+              placeholder={p}
+            />
+            <ListItem
+              action="recipe-action"
+              itemId="watch"
+              label="Watch for changes"
+              placeholder={p}
+            />
+          </section>
+          {p ? (
+            <StateBanner
+              tone="info"
+              title=""
+              detail=""
+              icon={icon(FileText, 'file-text')}
+              placeholder
+            />
+          ) : (
+            <StateBanner
+              tone="success"
+              title="Up to date"
+              detail="All checks passed on the latest revision."
+              icon={icon(FileText, 'file-text')}
+            />
+          )}
+          <p class="kui-recipe__ownership kui-content-item">
+            Each value-bearing component's <code>placeholder</code> prop renders
+            skeletons in its value slots while loading, so the recipe composes a
+            faithful loading inspector from real chrome. The app owns the
+            loading lifecycle and which values are still unknown.
+          </p>
         </div>
-        <section>
-          <ListItem action="recipe-action" itemId="reassign" label="Reassign ticket" icon={icon(Inbox, 'inbox')} placeholder={p} />
-          <ListItem action="recipe-action" itemId="watch" label="Watch for changes" placeholder={p} />
-        </section>
-        {p
-          ? <StateBanner tone="info" title="" detail="" icon={icon(FileText, 'file-text')} placeholder />
-          : <StateBanner tone="success" title="Up to date" detail="All checks passed on the latest revision." icon={icon(FileText, 'file-text')} />}
-        <p class="kui-recipe__ownership kui-content-item">Each value-bearing component's <code>placeholder</code> prop renders skeletons in its value slots while loading, so the recipe composes a faithful loading inspector from real chrome. The app owns the loading lifecycle and which values are still unknown.</p>
-      </div>
-    </section>;
+      </section>
+    );
   };
   return {
     render,

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

@@ -9,7 +9,10 @@ import type { RecipeController } from './types.js';
  * Copyable application boundary for a recipe. The caller owns one stable root
  * and retains the returned disposer for that root's lifetime.
  */
-export function mountRecipe(root: HTMLElement, controller: RecipeController): () => void {
+export function mountRecipe(
+  root: HTMLElement,
+  controller: RecipeController,
+): () => void {
   const stopMount = mount(root, controller.render);
   const stopActions = delegateActions(root, 'click', {
     'recipe-action': (_event, element) => {
@@ -17,14 +20,32 @@ export function mountRecipe(root: HTMLElement, controller: RecipeController): ()
       controller.action(target.dataset.recipeCommand ?? '', target);
     },
   });
-  const dispatchChange = (_event: Event, element: Element) => controller.change?.(element as HTMLElement);
-  const stopChanges = delegate(root, 'change', 'wa-select, wa-input, wa-textarea', dispatchChange);
-  const stopInputs = delegate(root, 'input', 'wa-input, wa-textarea', dispatchChange);
-  const stopDialogs = delegate(root, 'wa-after-hide', 'wa-dialog', (_event, element) => controller.afterHide?.(element as HTMLElement));
+  const dispatchChange = (_event: Event, element: Element) =>
+    controller.change?.(element as HTMLElement);
+  const stopChanges = delegate(
+    root,
+    'change',
+    'wa-select, wa-input, wa-textarea',
+    dispatchChange,
+  );
+  const stopInputs = delegate(
+    root,
+    'input',
+    'wa-input, wa-textarea',
+    dispatchChange,
+  );
+  const stopDialogs = delegate(
+    root,
+    'wa-after-hide',
+    'wa-dialog',
+    (_event, element) => controller.afterHide?.(element as HTMLElement),
+  );
   const stopResize = wireResizableRegions(root, {
     onCommit: ({ id, size }) => controller.resize?.(id, size),
   });
-  const stopNav = wireNavStack(root, { onBack: () => controller.action('nav-back', root) });
+  const stopNav = wireNavStack(root, {
+    onBack: () => controller.action('nav-back', root),
+  });
   const stopWire = controller.wire?.(root);
 
   let disposed = false;

package/ux-demo/recipes/navigation-sidebar.tsx

@@ -14,13 +14,124 @@ import type { RecipeFactory } from './types.js';
 export const createRecipe: RecipeFactory = (announce) => {
   const selected = signal('inbox');
   const expanded = signal(true);
-  const render = () => <aside class="kui-recipe recipe-sidebar kui-recipe__surface kui-pane" data-recipe="recipe-navigation-sidebar">
-    <div class="recipe-sidebar__body kui-pane__content kui-content">
-      <section><ListHeader label="Workspace" count={3} countLabel="3 workspaces" action="recipe-action" actionLabel="Add workspace item" actionIcon={<LucideIcon icon={Plus} name="plus" />} /><ListItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} trailing={<span>12</span>} selected={selected.value === 'inbox'} /><ListItem action="recipe-action" itemId="shared" label="Shared with me" icon={<LucideIcon icon={Users} name="users" />} selected={selected.value === 'shared'} /><ListItem action="recipe-action" itemId="drafts" label="Drafts without an icon" selected={selected.value === 'drafts'} /></section>
-      <section><ListHeader label="Projects" toggle action="recipe-action" expanded={expanded.value} />{expanded.value && <><ListItem action="recipe-action" itemId="design" label="Design system rollout across desktop and tablet" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'design'} multiline /><ListItem action="recipe-action" itemId="archive" label="Archived" disabled title="Available to administrators" /><div class="kui-content-item"><strong>Quarterly goal</strong><p class="kui-recipe__muted">Ship accessible navigation patterns to every workspace.</p></div></>}</section>
-      <p class="kui-recipe__ownership kui-content-item">The recipe owns pane, content-item, and toolbar geometry. The app owns routes, permissions, labels, and disclosure state.</p>
-    </div>
-    <footer class="recipe-sidebar__footer kui-pane__footer"><Toolbar label="Sidebar actions" divider={false} leading={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Add project" data-action="recipe-action" data-recipe-command="add"><LucideIcon icon={Plus} name="plus" /></button></ToolbarControlGroup>} trailing={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Workspace settings" data-action="recipe-action" data-recipe-command="settings"><LucideIcon icon={Settings} name="settings" /></button></ToolbarControlGroup>} /></footer>
-  </aside>;
-  return { render, action(command, element) { if (element.matches('.kui-list-header__toggle')) { expanded.value = !expanded.value; announce(expanded.value ? 'Projects expanded' : 'Projects collapsed'); return; } const id = element.dataset.itemId; if (id) selected.value = id; announce(id ? `Selected ${id}` : `${command} requested`); } };
+  const render = () => (
+    <aside
+      class="kui-recipe recipe-sidebar kui-recipe__surface kui-pane"
+      data-recipe="recipe-navigation-sidebar"
+    >
+      <div class="recipe-sidebar__body kui-pane__content kui-content">
+        <section>
+          <ListHeader
+            label="Workspace"
+            count={3}
+            countLabel="3 workspaces"
+            action="recipe-action"
+            actionLabel="Add workspace item"
+            actionIcon={<LucideIcon icon={Plus} name="plus" />}
+          />
+          <ListItem
+            action="recipe-action"
+            itemId="inbox"
+            label="Inbox"
+            icon={<LucideIcon icon={Inbox} name="inbox" />}
+            trailing={<span>12</span>}
+            selected={selected.value === 'inbox'}
+          />
+          <ListItem
+            action="recipe-action"
+            itemId="shared"
+            label="Shared with me"
+            icon={<LucideIcon icon={Users} name="users" />}
+            selected={selected.value === 'shared'}
+          />
+          <ListItem
+            action="recipe-action"
+            itemId="drafts"
+            label="Drafts without an icon"
+            selected={selected.value === 'drafts'}
+          />
+        </section>
+        <section>
+          <ListHeader
+            label="Projects"
+            toggle
+            action="recipe-action"
+            expanded={expanded.value}
+          />
+          {expanded.value && (
+            <>
+              <ListItem
+                action="recipe-action"
+                itemId="design"
+                label="Design system rollout across desktop and tablet"
+                icon={<LucideIcon icon={Folder} name="folder" />}
+                selected={selected.value === 'design'}
+                multiline
+              />
+              <ListItem
+                action="recipe-action"
+                itemId="archive"
+                label="Archived"
+                disabled
+                title="Available to administrators"
+              />
+              <div class="kui-content-item">
+                <strong>Quarterly goal</strong>
+                <p class="kui-recipe__muted">
+                  Ship accessible navigation patterns to every workspace.
+                </p>
+              </div>
+            </>
+          )}
+        </section>
+        <p class="kui-recipe__ownership kui-content-item">
+          The recipe owns pane, content-item, and toolbar geometry. The app owns
+          routes, permissions, labels, and disclosure state.
+        </p>
+      </div>
+      <footer class="recipe-sidebar__footer kui-pane__footer">
+        <Toolbar
+          label="Sidebar actions"
+          divider={false}
+          leading={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                type="button"
+                aria-label="Add project"
+                data-action="recipe-action"
+                data-recipe-command="add"
+              >
+                <LucideIcon icon={Plus} name="plus" />
+              </button>
+            </ToolbarControlGroup>
+          }
+          trailing={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                type="button"
+                aria-label="Workspace settings"
+                data-action="recipe-action"
+                data-recipe-command="settings"
+              >
+                <LucideIcon icon={Settings} name="settings" />
+              </button>
+            </ToolbarControlGroup>
+          }
+        />
+      </footer>
+    </aside>
+  );
+  return {
+    render,
+    action(command, element) {
+      if (element.matches('.kui-list-header__toggle')) {
+        expanded.value = !expanded.value;
+        announce(expanded.value ? 'Projects expanded' : 'Projects collapsed');
+        return;
+      }
+      const id = element.dataset.itemId;
+      if (id) selected.value = id;
+      announce(id ? `Selected ${id}` : `${command} requested`);
+    },
+  };
 };

package/ux-demo/recipes/navigation-stack.tsx

@@ -19,41 +19,83 @@ interface LibraryItem {
 }
 
 const ITEMS: LibraryItem[] = [
-  { id: 'tokens', label: 'Design tokens', detail: 'Semantic color, spacing, and radius scales shared across every surface.' },
-  { id: 'controls', label: 'Toolbar controls', detail: 'Control groups and segmented controls with their hover and pressed contracts.' },
-  { id: 'layouts', label: 'App layouts', detail: 'Navigation stacks, split views, workbench, and bottom-tab scaffolds.' },
+  {
+    id: 'tokens',
+    label: 'Design tokens',
+    detail:
+      'Semantic color, spacing, and radius scales shared across every surface.',
+  },
+  {
+    id: 'controls',
+    label: 'Toolbar controls',
+    detail:
+      'Control groups and segmented controls with their hover and pressed contracts.',
+  },
+  {
+    id: 'layouts',
+    label: 'App layouts',
+    detail:
+      'Navigation stacks, split views, workbench, and bottom-tab scaffolds.',
+  },
 ];
 
 export const createRecipe: RecipeFactory = (announce) => {
   const listView = (): NavStackView => ({
     key: 'library',
     title: 'Library',
-    content: <div class="recipe-navstack__view kui-pane__content kui-content">
-      <section>
-        <ListHeader label="Components" />
-        {ITEMS.map((item) => <ListItem action="recipe-action" itemId={item.id} label={item.label} icon={<LucideIcon icon={Folder} name="folder" />} trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />} />)}
-      </section>
-      <p class="kui-recipe__ownership kui-content-item">The recipe owns the stack as a signal of views and pushes/pops it; `NavStack` renders the stack and `wireNavStack` slides the content and settles the chrome. The app owns selection, data, and routing.</p>
-    </div>,
+    content: (
+      <div class="recipe-navstack__view kui-pane__content kui-content">
+        <section>
+          <ListHeader label="Components" />
+          {ITEMS.map((item) => (
+            <ListItem
+              action="recipe-action"
+              itemId={item.id}
+              label={item.label}
+              icon={<LucideIcon icon={Folder} name="folder" />}
+              trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />}
+            />
+          ))}
+        </section>
+        <p class="kui-recipe__ownership kui-content-item">
+          The recipe owns the stack as a signal of views and pushes/pops it;
+          `NavStack` renders the stack and `wireNavStack` slides the content and
+          settles the chrome. The app owns selection, data, and routing.
+        </p>
+      </div>
+    ),
   });
 
   const detailView = (item: LibraryItem): NavStackView => ({
     key: item.id,
     title: item.label,
-    content: <div class="recipe-navstack__view kui-pane__content kui-content">
-      <div class="kui-content-item">
-        <LucideIcon icon={FileText} name="file-text" />
-        <strong>{item.label}</strong>
-        <p class="kui-recipe__muted">{item.detail}</p>
+    content: (
+      <div class="recipe-navstack__view kui-pane__content kui-content">
+        <div class="kui-content-item">
+          <LucideIcon icon={FileText} name="file-text" />
+          <strong>{item.label}</strong>
+          <p class="kui-recipe__muted">{item.detail}</p>
+        </div>
       </div>
-    </div>,
+    ),
   });
 
   const views = signal<NavStackView[]>([listView()]);
 
-  const render = () => <section class="kui-recipe recipe-navstack kui-recipe__surface" data-recipe="recipe-navigation-stack">
-    <div class="recipe-navstack__stage"><NavStack id="recipe-nav" label="Component library" views={views.value} /></div>
-  </section>;
+  const render = () => (
+    <section
+      class="kui-recipe recipe-navstack kui-recipe__surface"
+      data-recipe="recipe-navigation-stack"
+    >
+      <div class="recipe-navstack__stage">
+        <NavStack
+          id="recipe-nav"
+          label="Component library"
+          views={views.value}
+        />
+      </div>
+    </section>
+  );
 
   return {
     render,

package/ux-demo/recipes/types.ts

@@ -14,4 +14,6 @@ export interface RecipeController {
   wire?(root: HTMLElement): () => void;
 }
 
-export type RecipeFactory = (announce: (message: string) => void) => RecipeController;
+export type RecipeFactory = (
+  announce: (message: string) => void,
+) => RecipeController;

package/ux-demo/recipes/workspace-header.tsx

@@ -7,6 +7,61 @@ import { StateBanner } from '@kerfjs/ui/state-banner';
 import type { RecipeFactory } from './types.js';
 
 export const createRecipe: RecipeFactory = (announce) => ({
-  render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><PanelHeader title="Accessibility readiness and responsive navigation rollout" titleId="recipe-workspace-title" actions={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="share">Share</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="more">More actions</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="publish">Publish update</button></div>} /><StateBanner title="Ready for review" detail="All required checks passed 18 minutes ago." tone="success" /><p class="kui-recipe__ownership kui-content-item">The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.</p></section>,
-  action(command) { announce(`${command} requested`); },
+  render: () => (
+    <section
+      class="kui-recipe recipe-header kui-recipe__surface kui-content"
+      data-recipe="recipe-workspace-header"
+    >
+      <p class="recipe-header__context kui-inline-metadata kui-content-item">
+        <span>Northstar workspace</span>
+        <span>·</span>
+        <span>Product planning</span>
+      </p>
+      <PanelHeader
+        title="Accessibility readiness and responsive navigation rollout"
+        titleId="recipe-workspace-title"
+        actions={
+          <div class="kui-control-cluster">
+            <button
+              class="kui-recipe__button"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="share"
+            >
+              Share
+            </button>
+            <button
+              class="kui-recipe__button"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="more"
+            >
+              More actions
+            </button>
+            <button
+              class="kui-recipe__button"
+              data-primary="true"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="publish"
+            >
+              Publish update
+            </button>
+          </div>
+        }
+      />
+      <StateBanner
+        title="Ready for review"
+        detail="All required checks passed 18 minutes ago."
+        tone="success"
+      />
+      <p class="kui-recipe__ownership kui-content-item">
+        The recipe owns page hierarchy and action relocation. The app owns
+        authorization, command behavior, breadcrumbs, and product copy.
+      </p>
+    </section>
+  ),
+  action(command) {
+    announce(`${command} requested`);
+  },
 });

package/dist/chunk-2Z5TWHKQ.js

@@ -1,34 +0,0 @@
-import { filterDataAttributes } from './chunk-7BR3DO2A.js';
-import { Skeleton } from './chunk-B24C4A6T.js';
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
-  "data-component",
-  "data-action",
-  "data-tab-id",
-  "data-selected",
-  "data-tab-dragging",
-  "data-tab-drop-position"
-]);
-function CloseIcon() {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.25", "stroke-linecap": "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "m7 7 10 10" }),
-    /* @__PURE__ */ jsx("path", { d: "M17 7 7 17" })
-  ] });
-}
-function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = "select-tab", closeAction = "close-tab", className = "", placeholder = false, rootAttributes = {} }) {
-  const keyshortcuts = [closable ? "Delete Backspace" : "", draggable ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""].filter(Boolean).join(" ");
-  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
-  return /* @__PURE__ */ jsxs("div", { ...extensionAttributes, class: `kui-app-tab ${className}`.trim(), "data-component": "app-tab", "data-tab-id": id, "data-selected": String(selected), "data-placeholder": placeholder ? "true" : void 0, draggable: placeholder ? "false" : draggable ? "true" : "false", "aria-busy": placeholder ? "true" : void 0, children: [
-    closable && /* @__PURE__ */ jsx("button", { type: "button", tabindex: "-1", class: "kui-app-tab__close", "data-action": placeholder ? void 0 : closeAction, "data-tab-id": id, disabled: placeholder || void 0, "aria-label": `Close ${name}`, title: `Close ${name}`, children: /* @__PURE__ */ jsx("span", { class: "kui-app-tab__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
-    /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-app-tab__select", role: "tab", "aria-selected": String(selected), "aria-keyshortcuts": placeholder ? void 0 : keyshortcuts || void 0, "data-action": placeholder ? void 0 : selectAction, "data-tab-id": id, disabled: placeholder || void 0, tabindex: placeholder ? "-1" : selected ? "0" : "-1", children: [
-      leading,
-      /* @__PURE__ */ jsx("span", { class: "kui-app-tab__name", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "7em" }) : name }),
-      closable || trailing ? /* @__PURE__ */ jsx("span", { class: "kui-app-tab__trailing", children: trailing }) : void 0
-    ] })
-  ] });
-}
-
-export { AppTab };
-
-//# sourceMappingURL=chunk-2Z5TWHKQ.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-2Z5TWHKQ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n  return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"><path d=\"m7 7 10 10\"></path><path d=\"M17 7 7 17\"></path></svg>;\n}\n\nexport function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = 'select-tab', closeAction = 'close-tab', className = '', placeholder = false, rootAttributes = {} }: AppTabProps) {\n  const keyshortcuts = [closable ? 'Delete Backspace' : '', draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : ''].filter(Boolean).join(' ');\n  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n  return <div {...extensionAttributes} class={`kui-app-tab ${className}`.trim()} data-component=\"app-tab\" data-tab-id={id} data-selected={String(selected)} data-placeholder={placeholder ? 'true' : undefined} draggable={placeholder ? 'false' : draggable ? 'true' : 'false'} aria-busy={placeholder ? 'true' : undefined}>\n    {closable && <button type=\"button\" tabindex=\"-1\" class=\"kui-app-tab__close\" data-action={placeholder ? undefined : closeAction} data-tab-id={id} disabled={placeholder || undefined} aria-label={`Close ${name}`} title={`Close ${name}`}><span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">{closeIcon ?? <CloseIcon />}</span></button>}\n    <button type=\"button\" class=\"kui-app-tab__select\" role=\"tab\" aria-selected={String(selected)} aria-keyshortcuts={placeholder ? undefined : keyshortcuts || undefined} data-action={placeholder ? undefined : selectAction} data-tab-id={id} disabled={placeholder || undefined} tabindex={placeholder ? '-1' : selected ? '0' : '-1'}>\n      {leading}<span class=\"kui-app-tab__name\">{placeholder ? <Skeleton width=\"7em\" /> : name}</span>{closable || trailing ? <span class=\"kui-app-tab__trailing\">{trailing}</span> : undefined}\n    </button>\n  </div>;\n}\n"]}

package/dist/chunk-37T3VNIZ.js

@@ -1,19 +0,0 @@
-import { Skeleton } from './chunk-B24C4A6T.js';
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-function ValueTableRow({ label, value, icon, className = "", placeholder = false }) {
-  return /* @__PURE__ */ jsxs("div", { class: `kui-value-table__row ${className}`.trim(), "data-has-icon": String(Boolean(icon)), "data-placeholder": placeholder ? "true" : void 0, children: [
-    /* @__PURE__ */ jsxs("dt", { children: [
-      icon && /* @__PURE__ */ jsx("span", { class: "kui-value-table__icon", children: icon }),
-      /* @__PURE__ */ jsx("span", { class: "kui-value-table__label", children: label })
-    ] }),
-    /* @__PURE__ */ jsx("dd", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "10em" }) : value })
-  ] });
-}
-function ValueTable({ label, className = "", children }) {
-  return /* @__PURE__ */ jsx("dl", { class: `kui-value-table ${className}`.trim(), "data-component": "value-table", "aria-label": label, children });
-}
-
-export { ValueTable, ValueTableRow };
-
-//# sourceMappingURL=chunk-37T3VNIZ.js.map

package/dist/chunk-37T3VNIZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;AAaO,SAAS,aAAA,CAAc,EAAE,KAAA,EAAO,KAAA,EAAO,MAAM,SAAA,GAAY,EAAA,EAAI,WAAA,GAAc,KAAA,EAAM,EAAuB;AAC7G,EAAA,4BAAQ,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,GAAG,IAAA,EAAK,EAAG,eAAA,EAAe,MAAA,CAAO,QAAQ,IAAI,CAAC,GAAG,kBAAA,EAAkB,WAAA,GAAc,SAAS,MAAA,EAC5I,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,KAAA,EAC9C,CAAA;AAAA,oBACA,GAAA,CAAC,QAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAM,MAAA,EAAO,IAAK,KAAA,EAAM;AAAA,GAAA,EACvD,CAAA;AACF;ACXO,SAAS,WAAW,EAAE,KAAA,EAAO,SAAA,GAAY,EAAA,EAAI,UAAS,EAAoB;AAC/E,EAAA,uBAAOA,GAAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,aAAA,EAAc,YAAA,EAAY,OAAQ,QAAA,EAAS,CAAA;AACrH","file":"chunk-37T3VNIZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n}\n\nexport function ValueTableRow({ label, value, icon, className = '', placeholder = false }: ValueTableRowProps) {\n  return <div class={`kui-value-table__row ${className}`.trim()} data-has-icon={String(Boolean(icon))} data-placeholder={placeholder ? 'true' : undefined}>\n    <dt>\n      {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n      <span class=\"kui-value-table__label\">{label}</span>\n    </dt>\n    <dd>{placeholder ? <Skeleton width=\"10em\" /> : value}</dd>\n  </div>;\n}\n","import type { SafeHtml } from 'kerfjs';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n  label: string;\n  className?: string;\n  children: SafeHtml | readonly SafeHtml[];\n}\n\nexport function ValueTable({ label, className = '', children }: ValueTableProps) {\n  return <dl class={`kui-value-table ${className}`.trim()} data-component=\"value-table\" aria-label={label}>{children}</dl>;\n}\n"]}

package/dist/chunk-55DATV3A.js

@@ -1,10 +0,0 @@
-import { jsx } from 'kerfjs/jsx-runtime';
-
-// src/loading-spinner.tsx
-function LoadingSpinner({ className = "", label }) {
-  return /* @__PURE__ */ jsx("svg", { class: `kui-loading-spinner ${className}`.trim(), "data-component": "loading-spinner", viewBox: "0 0 24 24", role: label ? "img" : void 0, "aria-label": label, "aria-hidden": label ? void 0 : "true", children: /* @__PURE__ */ jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" }) });
-}
-
-export { LoadingSpinner };
-
-//# sourceMappingURL=chunk-55DATV3A.js.map

package/dist/chunk-55DATV3A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/loading-spinner.tsx"],"names":[],"mappings":";;;AAMO,SAAS,cAAA,CAAe,EAAE,SAAA,GAAY,EAAA,EAAI,OAAM,EAAwB;AAC7E,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,iBAAA,EAAkB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA,EAAW,YAAA,EAAY,KAAA,EAAO,aAAA,EAAa,KAAA,GAAQ,MAAA,GAAY,MAAA,EAAQ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kKAAA,EAAmK,CAAA,EAAO,CAAA;AACpY","file":"chunk-55DATV3A.js","sourcesContent":["export interface LoadingSpinnerProps {\n  className?: string;\n  label?: string;\n}\n\n/** Stable viewBox-centered progress ring based on svg-spinners' MIT-licensed 180-ring. */\nexport function LoadingSpinner({ className = '', label }: LoadingSpinnerProps) {\n  return <svg class={`kui-loading-spinner ${className}`.trim()} data-component=\"loading-spinner\" viewBox=\"0 0 24 24\" role={label ? 'img' : undefined} aria-label={label} aria-hidden={label ? undefined : 'true'}><path d=\"M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z\"></path></svg>;\n}\n"]}