@kerfjs/ui 4.4.1 → 5.0.0-beta.3

package/ux-demo/recipes/list-workspace-states.tsx

@@ -0,0 +1,26 @@
+import '@kerfjs/ui/layout.css';
+import './recipes.css';
+
+import { EmptyState } from '@kerfjs/ui/empty-state';
+import { LoadingSpinner } from '@kerfjs/ui/loading-spinner';
+import { PageHeader } from '@kerfjs/ui/page-header';
+import { StateBanner } from '@kerfjs/ui/state-banner';
+import { signal } from 'kerfjs';
+
+import type { RecipeFactory } from './types.js';
+
+type ListState = 'loading' | 'empty' | 'populated' | 'stale' | 'error';
+const items = ['Audit keyboard focus order', 'Verify 200% zoom layout', 'Publish package migration notes'];
+
+export const createRecipe: RecipeFactory = (announce) => {
+  const state = signal<ListState>('loading');
+  const populated = () => <ul class="recipe-list__items" aria-label="Release tasks">{items.map((item, index) => <li><strong>{item}</strong><span class="kui-recipe__muted">{index === 0 ? 'In review · Mara' : index === 1 ? 'Ready · Sam' : 'Draft · Inez'}</span></li>)}</ul>;
+  const renderBody = () => {
+    if (state.value === 'loading') return <EmptyState title="Loading release tasks" detail="The current workspace will appear when data is ready." busy action={<button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="load">Complete load</button>} />;
+    if (state.value === 'empty') return <EmptyState title="No release tasks" detail="Create the first task for this milestone." action={<button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="create">Create task</button>} />;
+    if (state.value === 'error') return <StateBanner title="Release tasks could not be refreshed" detail="Existing filters are preserved. Try again when the connection recovers." tone="danger" urgency="alert" action={<button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="retry">Retry</button>} />;
+    return <>{state.value === 'stale' && <StateBanner title="Showing saved results" detail="Refreshing in the background." tone="warning" action={<span class="kui-inline-metadata"><LoadingSpinner label="Refreshing release tasks" /><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="finish">Finish refresh</button></span>} />}{populated()}</>;
+  };
+  const render = () => <section class="kui-recipe recipe-list kui-recipe__surface kui-pane" data-recipe="recipe-list-workspace-states" data-list-state={state.value}><PageHeader title="Release tasks" action={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="empty">Clear</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="fail">Simulate failure</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="refresh">Refresh</button></div>} /><div class="recipe-list__body kui-pane__content kui-content">{renderBody()}<p class="kui-recipe__ownership kui-content-item">The recipe owns feedback placement and stable content. The app owns fetching, cache age, retry policy, and domain rows.</p></div></section>;
+  return { render, action(command) { const next: Record<string, ListState> = { load: 'populated', empty: 'empty', create: 'populated', fail: 'error', retry: 'populated', refresh: 'stale', finish: 'populated' }; if (command in next) state.value = next[command]!; announce(`List state: ${state.value}`); } };
+};

package/ux-demo/recipes/loaders.ts

@@ -0,0 +1,27 @@
+import type { RecipeFactory } from './types.js';
+
+export const recipeIds = [
+  'recipe-app-shell',
+  'recipe-navigation-sidebar',
+  'recipe-workspace-header',
+  'recipe-master-detail-dialog',
+  'recipe-composer-form',
+  'recipe-list-workspace-states',
+  'recipe-compact-toolbar',
+] as const;
+
+export type RecipeId = typeof recipeIds[number];
+
+export const recipeLoaders: Record<RecipeId, () => Promise<{ createRecipe: RecipeFactory }>> = {
+  'recipe-app-shell': () => import('./app-shell.js'),
+  'recipe-navigation-sidebar': () => import('./navigation-sidebar.js'),
+  'recipe-workspace-header': () => import('./workspace-header.js'),
+  'recipe-master-detail-dialog': () => import('./master-detail-dialog.js'),
+  'recipe-composer-form': () => import('./composer-form.js'),
+  'recipe-list-workspace-states': () => import('./list-workspace-states.js'),
+  'recipe-compact-toolbar': () => import('./compact-toolbar.js'),
+};
+
+export function isRecipeId(value: string): value is RecipeId {
+  return (recipeIds as readonly string[]).includes(value);
+}

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

@@ -0,0 +1,45 @@
+import '@kerfjs/ui/layout.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 './recipes.css';
+
+import { DialogHeader } from '@kerfjs/ui/dialog-header';
+import { LucideIcon } from '@kerfjs/ui/lucide-icon';
+import { MenuHeader } from '@kerfjs/ui/menu-header';
+import { MenuItem } from '@kerfjs/ui/menu-item';
+import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
+import { signal } from 'kerfjs';
+import { FileText } from 'lucide';
+
+import type { RecipeFactory } from './types.js';
+
+const records = {
+  alpha: { name: 'Northstar migration', owner: 'Mara Chen', state: 'In review', updated: 'Today, 09:42' },
+  beta: { name: 'Tablet navigation', owner: 'Sam Rivera', state: 'Ready', updated: 'Yesterday, 16:20' },
+  gamma: { name: 'Contrast audit', owner: 'Inez Okafor', state: 'Blocked', updated: 'Monday, 11:05' },
+} as const;
+
+interface RecipeDialogElement extends HTMLElement {
+  open: boolean;
+}
+
+export const createRecipe: RecipeFactory = (announce) => {
+  const selected = signal<keyof typeof records>('alpha');
+  const open = { value: false };
+  const render = () => <section class="kui-recipe kui-content" data-recipe="recipe-master-detail-dialog"><button class="kui-recipe__button kui-content-item" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="open">Open project details</button><p class="kui-recipe__ownership kui-content-item">Web Awesome owns modal focus and dismissal. The recipe owns header/body/master-detail anatomy; the app owns open state, selection, and policy.</p><wa-dialog class="recipe-dialog" label="Project details" without-header open={open.value}><div class="recipe-dialog__pane kui-pane"><DialogHeader title="Project details" titleId="recipe-dialog-title" summary="Compare delivery state without leaving the workspace." summaryId="recipe-dialog-summary" icon={<LucideIcon icon={FileText} name="file-text" />} actions={<wa-button appearance="plain" data-action="recipe-action" data-recipe-command="close">Close</wa-button>} actionsLabel="Project detail actions" /><div class="recipe-master-detail kui-pane__content"><nav class="recipe-master-detail__master kui-pane" aria-label="Projects"><MenuHeader label="Recent projects" /><div class="kui-pane__content kui-content"><section>{Object.entries(records).map(([id, record]) => <MenuItem action="recipe-action" itemId={id} label={record.name} selected={selected.value === id} multiline />)}</section></div></nav><section class="recipe-master-detail__detail kui-content" aria-live="polite"><h3 class="kui-recipe__pane-title kui-content-item">{records[selected.value].name}</h3><ValueTable label="Project details"><ValueTableRow label="Owner" value={records[selected.value].owner} /><ValueTableRow label="Status" value={records[selected.value].state} /><ValueTableRow label="Updated" value={records[selected.value].updated} /></ValueTable><div class="kui-control-cluster kui-content-item"><wa-button appearance="outlined" data-action="recipe-action" data-recipe-command="archive">Archive</wa-button><wa-button variant="brand" appearance="accent" data-action="recipe-action" data-recipe-command="open-record">Open project</wa-button></div></section></div></div></wa-dialog></section>;
+  return {
+    render,
+    action(command, element) {
+      const id = element.dataset.itemId;
+      if (id && id in records) { selected.value = id as keyof typeof records; announce(`Selected ${records[selected.value].name}`); return; }
+      const dialog = element.closest('[data-recipe]')?.querySelector<RecipeDialogElement>('wa-dialog');
+      if (command === 'open' && dialog) { element.focus(); open.value = true; dialog.open = true; return; }
+      if (command === 'close' && dialog) { dialog.open = false; return; }
+      announce(`${command} requested`);
+    },
+    afterHide() {
+      open.value = false;
+    },
+  };
+};

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

@@ -0,0 +1,38 @@
+import { wireResizableRegions } from '@kerfjs/ui/wire-resizable-regions';
+import { delegate, mount } from 'kerfjs';
+import { delegateActions } from 'kerfjs/actions';
+
+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 {
+  const stopMount = mount(root, controller.render);
+  const stopActions = delegateActions(root, 'click', {
+    'recipe-action': (_event, element) => {
+      const target = element as HTMLElement;
+      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 stopResize = wireResizableRegions(root, {
+    onCommit: ({ id, size }) => controller.resize?.(id, size),
+  });
+
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    stopResize();
+    stopDialogs();
+    stopInputs();
+    stopChanges();
+    stopActions();
+    stopMount();
+  };
+}

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

@@ -0,0 +1,26 @@
+import '@kerfjs/ui/layout.css';
+import './recipes.css';
+
+import { LucideIcon } from '@kerfjs/ui/lucide-icon';
+import { MenuHeader } from '@kerfjs/ui/menu-header';
+import { MenuItem } from '@kerfjs/ui/menu-item';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
+import { signal } from 'kerfjs';
+import { Folder, Inbox, Plus, Settings, Users } from 'lucide';
+
+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><MenuHeader label="Workspace" count={3} countLabel="3 workspaces" action="recipe-action" actionLabel="Add workspace item" actionIcon={<LucideIcon icon={Plus} name="plus" />} /><MenuItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} trailing={<span>12</span>} selected={selected.value === 'inbox'} /><MenuItem action="recipe-action" itemId="shared" label="Shared with me" icon={<LucideIcon icon={Users} name="users" />} selected={selected.value === 'shared'} /><MenuItem action="recipe-action" itemId="drafts" label="Drafts without an icon" selected={selected.value === 'drafts'} /></section>
+      <section><MenuHeader label="Projects" toggle action="recipe-action" expanded={expanded.value} />{expanded.value && <><MenuItem action="recipe-action" itemId="design" label="Design system rollout across desktop and tablet" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'design'} multiline /><MenuItem 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-menu-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/recipes.css

@@ -0,0 +1,328 @@
+.kui-recipe {
+  width: 100%;
+  min-width: 0;
+  color: var(--kui-color-text);
+  container-type: inline-size;
+}
+.kui-recipe button {
+  font: inherit;
+}
+.kui-recipe__button {
+  min-height: 2rem;
+  padding: var(--kui-space-xs) var(--kui-space-s);
+  border: 1px solid var(--kui-color-border);
+  border-radius: var(--kui-radius-m);
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  cursor: pointer;
+}
+.kui-recipe__button[data-primary="true"] {
+  color: var(--kui-color-brand-on-normal);
+  border-color: var(--kui-color-brand-border-normal);
+  background: var(--kui-color-brand-fill-normal);
+}
+.kui-recipe__button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+.kui-recipe__surface {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--kui-color-border);
+  border-radius: var(--kui-radius-l);
+  background: var(--kui-color-surface);
+  box-shadow: var(--kui-shadow-s);
+}
+.kui-recipe__pane-title {
+  margin: 0;
+  font-size: var(--kui-font-s);
+}
+.kui-recipe__muted {
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+}
+.kui-recipe__ownership {
+  margin: 0;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+}
+
+.recipe-shell {
+  display: grid;
+  height: min(37rem, 70vh);
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.recipe-shell__body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+.recipe-shell__toolbar-actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+.recipe-shell__responsive-controls {
+  display: none;
+}
+.recipe-shell__nav,
+.recipe-shell__inspector {
+  min-height: 0;
+  background: var(--kui-color-surface);
+}
+.recipe-shell__nav-list,
+.recipe-shell__inspector-body,
+.recipe-shell__main-body {
+  min-height: 0;
+}
+.recipe-shell__main {
+  display: grid;
+  min-width: 16rem;
+  min-height: 0;
+  flex: 1;
+  grid-template-rows: auto minmax(0, 1fr);
+  background: var(--kui-color-surface-lowered);
+}
+.recipe-shell__cards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--kui-layout-content-gap);
+}
+.recipe-shell__card {
+  --kui-content-item-border: var(--kui-color-border-quiet);
+  --kui-content-item-background: var(--kui-color-surface);
+}
+
+.recipe-sidebar {
+  display: grid;
+  width: min(22rem, 100%);
+  min-height: 32rem;
+  margin-inline: auto;
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+.recipe-sidebar__body {
+  min-height: 0;
+}
+.recipe-sidebar__footer {
+  border-block-start: 1px solid var(--kui-color-border);
+}
+
+.recipe-header {
+  min-height: 20rem;
+}
+.recipe-header__context {
+  margin: 0;
+}
+.recipe-header .kui-page-header__action {
+  max-width: 100%;
+}
+
+.recipe-master-detail {
+  display: grid;
+  width: min(58rem, 100%);
+  min-height: 25rem;
+  grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.4fr);
+}
+.recipe-master-detail__master {
+  border-inline-end: 1px solid var(--kui-color-border);
+}
+.recipe-master-detail__detail {
+  min-width: 0;
+  padding-block: var(--kui-layout-item-gap);
+}
+.recipe-dialog {
+  --spacing: 0;
+  --width: min(62rem, calc(100vw - 2rem));
+}
+
+.recipe-form {
+  width: min(38rem, 100%);
+  margin-inline: auto;
+  padding-block: var(--kui-layout-item-gap);
+}
+.recipe-form__section {
+  --kui-content-item-border: transparent;
+  --kui-content-item-background: transparent;
+  display: grid;
+  gap: var(--kui-layout-item-gap);
+}
+.recipe-form__introduction > :where(h2, p) {
+  margin: 0;
+}
+.recipe-form__fields {
+  align-content: start;
+}
+.recipe-form__footer {
+  align-content: start;
+}
+
+.recipe-list {
+  display: grid;
+  min-height: 27rem;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.recipe-list__body {
+  min-height: 0;
+}
+.recipe-list__items {
+  display: grid;
+  margin: 0 var(--kui-layout-inline-margin);
+  padding: var(--kui-layout-item-padding);
+  border: var(--kui-layout-item-border-width) solid
+    var(--kui-color-border-quiet);
+  border-radius: var(--kui-layout-rounded-radius);
+  background: var(--kui-color-surface);
+  list-style: none;
+}
+.recipe-list__items li {
+  display: grid;
+  padding: var(--kui-layout-item-padding);
+  border-block-end: 1px solid var(--kui-color-border-quiet);
+  gap: var(--kui-layout-metadata-gap);
+}
+.recipe-list__items li:last-child {
+  border-block-end: 0;
+}
+
+.recipe-compact-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-layout-content-gap);
+}
+.recipe-compact-toolbar__guide {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--kui-layout-control-gap);
+}
+.recipe-compact-toolbar__guide > div {
+  padding: var(--kui-layout-item-padding);
+  border: var(--kui-layout-item-border-width) solid
+    var(--kui-color-border-quiet);
+  border-radius: var(--kui-layout-rounded-radius);
+}
+.recipe-compact-toolbar__guide strong,
+.recipe-compact-toolbar__guide span {
+  display: block;
+}
+
+@container (max-width: 44rem) {
+  .recipe-shell__inspector-region {
+    display: none;
+  }
+  .recipe-shell__responsive-controls {
+    display: inline-flex;
+  }
+  .recipe-shell[data-responsive-pane="inspector"] .recipe-shell__nav-region,
+  .recipe-shell[data-responsive-pane="inspector"] .recipe-shell__main {
+    display: none;
+  }
+  .recipe-shell[data-responsive-pane="inspector"]
+    .recipe-shell__inspector-region {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+  }
+  .recipe-shell[data-responsive-pane="inspector"]
+    .recipe-shell__inspector-region
+    .kui-resizable-region {
+    width: 100%;
+    flex: 1;
+  }
+  .recipe-shell[data-responsive-pane="inspector"]
+    .recipe-shell__inspector-region
+    .kui-resizable-region__handle {
+    display: none;
+  }
+  .recipe-shell__responsive-controls [data-recipe-command="show-navigation"] {
+    display: none;
+  }
+  .recipe-shell__cards,
+  .recipe-compact-toolbar__guide {
+    grid-template-columns: 1fr 1fr;
+  }
+  .recipe-master-detail {
+    grid-template-columns: 1fr;
+  }
+  .recipe-master-detail__master {
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--kui-color-border);
+  }
+  .recipe-compact-toolbar .kui-toolbar {
+    height: auto;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "leading" "center" "trailing";
+    row-gap: var(--kui-toolbar-gap);
+  }
+  .recipe-compact-toolbar .kui-toolbar__leading {
+    grid-area: leading;
+    padding-inline-end: 0;
+  }
+  .recipe-compact-toolbar .kui-toolbar__center {
+    grid-area: center;
+  }
+  .recipe-compact-toolbar .kui-toolbar__trailing {
+    grid-area: trailing;
+    justify-content: flex-start;
+  }
+  .recipe-compact-toolbar .kui-toolbar__trailing > .kui-control-cluster {
+    width: 100%;
+  }
+  .recipe-compact-toolbar .kui-toolbar__trailing wa-select {
+    min-width: min(12rem, 100%);
+    flex: 1 1 12rem;
+  }
+}
+
+@container (max-width: 28rem) {
+  .recipe-shell__nav-region {
+    display: none;
+  }
+  .recipe-shell[data-responsive-pane="navigation"] .recipe-shell__main,
+  .recipe-shell[data-responsive-pane="navigation"]
+    .recipe-shell__inspector-region {
+    display: none;
+  }
+  .recipe-shell[data-responsive-pane="navigation"] .recipe-shell__nav-region {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+  }
+  .recipe-shell[data-responsive-pane="navigation"]
+    .recipe-shell__nav-region
+    .kui-resizable-region {
+    width: 100%;
+    flex: 1;
+  }
+  .recipe-shell[data-responsive-pane="navigation"]
+    .recipe-shell__nav-region
+    .kui-resizable-region__handle {
+    display: none;
+  }
+  .recipe-shell__responsive-controls [data-recipe-command="show-navigation"] {
+    display: grid;
+  }
+  .recipe-shell__cards,
+  .recipe-compact-toolbar__guide {
+    grid-template-columns: 1fr;
+  }
+  .recipe-header .kui-page-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (forced-colors: active) {
+  .recipe-form__section {
+    border-color: Canvas;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-recipe *,
+  .kui-recipe *::before,
+  .kui-recipe *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 1ms !important;
+    transition-duration: 1ms !important;
+  }
+}

package/ux-demo/recipes/types.ts

@@ -0,0 +1,11 @@
+import type { SafeHtml } from 'kerfjs';
+
+export interface RecipeController {
+  render(): SafeHtml;
+  action(command: string, element: HTMLElement): void;
+  change?(element: HTMLElement): void;
+  afterHide?(element: HTMLElement): void;
+  resize?(id: string, size: number): void;
+}
+
+export type RecipeFactory = (announce: (message: string) => void) => RecipeController;

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

@@ -0,0 +1,12 @@
+import '@kerfjs/ui/layout.css';
+import './recipes.css';
+
+import { PageHeader } from '@kerfjs/ui/page-header';
+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><PageHeader title="Accessibility readiness and responsive navigation rollout" action={<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-3O7ZEUW2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/resizable-region.tsx"],"names":[],"mappings":";;;AAkBO,IAAM,eAAA,GAAkB,CAAC,IAAA,EAAc,GAAA,EAAa,QAAgB,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,IAAI,GAAA,EAAK,IAAA,CAAK,KAAA,CAAM,IAAI,CAAC,CAAC;AACjH,IAAM,uBAAA,GAA0B,CAAC,SAAA,EAAmB,KAAA,EAAe,SAA8B,SAAA,GAAY,KAAA,IAAS,IAAA,KAAS,OAAA,GAAU,EAAA,GAAK,CAAA;AAErJ,SAAS,UAAA,CAAW,EAAE,IAAA,EAAK,EAAkC;AAC3D,EAAA,2BAAQ,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,OAAA,EAAQ,aAAY,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,gBAAa,GAAA,EAAI,gBAAA,EAAe,OAAA,EAClH,QAAA,EAAA,IAAA,KAAS,+BACN,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW;AAAA,GAAA,EAAO,oBACrD,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW;AAAA,GAAA,EAAO,CAAA,EAC3D,CAAA;AACF;AAEO,SAAS,gBAAgB,EAAE,EAAA,EAAI,KAAA,EAAO,IAAA,EAAM,KAAK,GAAA,EAAK,IAAA,GAAO,YAAA,EAAc,IAAA,GAAO,OAAO,SAAA,GAAY,KAAA,EAAO,aAAA,GAAgB,KAAA,EAAO,UAAS,EAAyB;AAC1K,EAAA,MAAM,YAAA,GAAe,eAAA,CAAgB,IAAA,EAAM,GAAA,EAAK,GAAG,CAAA;AACnD,EAAA,MAAM,QAAA,GAAW,YAAY,CAAA,GAAI,YAAA;AACjC,EAAA,MAAM,WAAA,GAAc,IAAA,KAAS,YAAA,GAAe,UAAA,GAAa,YAAA;AACzD,EAAA,uBAAO,IAAA,CAAC,SAAA,EAAA,EAAQ,KAAA,EAAM,sBAAA,EAAuB,gBAAA,EAAe,kBAAA,EAAmB,gBAAA,EAAgB,EAAA,EAAI,WAAA,EAAW,IAAA,EAAM,WAAA,EAAW,IAAA,EAAM,gBAAA,EAAgB,MAAA,CAAO,SAAS,CAAA,EAAG,oBAAA,EAAoB,MAAA,CAAO,aAAa,CAAA,EAAG,KAAA,EAAO,CAAA,4BAAA,EAA+B,QAAQ,CAAA,wCAAA,EAA2C,YAAY,CAAA,EAAA,CAAA,EAAM,YAAA,EAAY,KAAA,EACxU,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAiC,QAAA,EAAS,CAAA;AAAA,oBACrD,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,8BAAA,EAA+B,IAAA,EAAK,WAAA,EAAY,QAAA,EAAS,GAAA,EAAI,YAAA,EAAY,CAAA,OAAA,EAAU,KAAK,CAAA,CAAA,EAAI,kBAAA,EAAkB,WAAA,EAAa,eAAA,EAAe,SAAA,GAAY,CAAA,GAAI,GAAA,EAAK,eAAA,EAAe,GAAA,EAAK,eAAA,EAAe,QAAA,EAAU,wBAAA,EAAsB,IAAA,EAAC,gBAAA,EAAgB,EAAA,EAC5P,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,MAAY,CAAA,EAC1B;AAAA,GAAA,EACF,CAAA;AACF","file":"chunk-3O7ZEUW2.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport type ResizableRegionAxis = 'horizontal' | 'vertical';\nexport type ResizableRegionEdge = 'start' | 'end';\n\nexport interface ResizableRegionProps {\n  id: string;\n  label: string;\n  size: number;\n  min: number;\n  max: number;\n  axis?: ResizableRegionAxis;\n  edge?: ResizableRegionEdge;\n  collapsed?: boolean;\n  transitioning?: boolean;\n  children: SafeHtml | SafeHtml[];\n}\n\nexport const clampRegionSize = (size: number, min: number, max: number) => Math.min(max, Math.max(min, Math.round(size)));\nexport const resizeRegionFromPointer = (startSize: number, delta: number, edge: ResizableRegionEdge) => startSize + delta * (edge === 'start' ? -1 : 1);\n\nfunction ResizeGrip({ axis }: { axis: ResizableRegionAxis }) {\n  return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n    {axis === 'horizontal'\n      ? <><path d=\"M9 6v12\"></path><path d=\"M15 6v12\"></path></>\n      : <><path d=\"M6 9h12\"></path><path d=\"M6 15h12\"></path></>}\n  </svg>;\n}\n\nexport function ResizableRegion({ id, label, size, min, max, axis = 'horizontal', edge = 'end', collapsed = false, transitioning = false, children }: ResizableRegionProps) {\n  const expandedSize = clampRegionSize(size, min, max);\n  const resolved = collapsed ? 0 : expandedSize;\n  const orientation = axis === 'horizontal' ? 'vertical' : 'horizontal';\n  return <section class=\"kui-resizable-region\" data-component=\"resizable-region\" data-region-id={id} data-axis={axis} data-edge={edge} data-collapsed={String(collapsed)} data-transitioning={String(transitioning)} style={`--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`} aria-label={label}>\n    <div class=\"kui-resizable-region__content\">{children}</div>\n    <div class=\"kui-resizable-region__handle\" role=\"separator\" tabindex=\"0\" aria-label={`Resize ${label}`} aria-orientation={orientation} aria-valuemin={collapsed ? 0 : min} aria-valuemax={max} aria-valuenow={resolved} data-kui-resize-handle data-region-id={id}>\n      <ResizeGrip axis={axis} />\n    </div>\n  </section>;\n}\n"]}

package/dist/chunk-723YNJBH.js

@@ -1,17 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/dialog-header.tsx
-function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = "", actions }) {
-  return /* @__PURE__ */ jsxs("header", { class: "kui-dialog-header", "data-component": "dialog-header", "data-has-icon": String(Boolean(icon)), children: [
-    icon && /* @__PURE__ */ jsx("span", { class: `kui-dialog-header__icon ${iconClassName}`.trim(), children: icon }),
-    /* @__PURE__ */ jsxs("div", { class: "kui-dialog-header__copy", children: [
-      /* @__PURE__ */ jsx("h2", { id: titleId, children: title }),
-      /* @__PURE__ */ jsx("p", { id: summaryId, children: summary })
-    ] }),
-    actions && /* @__PURE__ */ jsx("div", { class: "kui-dialog-header__actions", children: actions })
-  ] });
-}
-
-export { DialogHeader };
-
-//# sourceMappingURL=chunk-723YNJBH.js.map

package/dist/chunk-723YNJBH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dialog-header.tsx"],"names":[],"mappings":";;;AAYO,SAAS,YAAA,CAAa,EAAE,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,WAAW,IAAA,EAAM,aAAA,GAAgB,EAAA,EAAI,OAAA,EAAQ,EAAsB;AACzH,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,mBAAA,EAAoB,gBAAA,EAAe,eAAA,EAAgB,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA,EACxG,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,UAAK,KAAA,EAAO,CAAA,wBAAA,EAA2B,aAAa,CAAA,CAAA,CAAG,IAAA,IAAS,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBAC/E,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA0B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBAAK,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,SAAA,EAAY,QAAA,EAAA,OAAA,EAAQ;AAAA,KAAA,EAAI,CAAA;AAAA,IAChG,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,8BAA8B,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAC/D,CAAA;AACF","file":"chunk-723YNJBH.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface DialogHeaderProps {\n  title: string;\n  titleId: string;\n  summary: string;\n  summaryId?: string;\n  icon?: SafeHtml;\n  iconClassName?: string;\n  actions?: SafeHtml;\n}\n\nexport function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = '', actions }: DialogHeaderProps) {\n  return <header class=\"kui-dialog-header\" data-component=\"dialog-header\" data-has-icon={String(Boolean(icon))}>\n    {icon && <span class={`kui-dialog-header__icon ${iconClassName}`.trim()}>{icon}</span>}\n    <div class=\"kui-dialog-header__copy\"><h2 id={titleId}>{title}</h2><p id={summaryId}>{summary}</p></div>\n    {actions && <div class=\"kui-dialog-header__actions\">{actions}</div>}\n  </header>;\n}\n"]}

package/dist/chunk-NHXX4JI5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-NHXX4JI5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  color?: string;\n  group?: string;\n  separatorBefore?: boolean;\n}\n\nexport interface SelectProps<Value extends string = string> {\n  name: string;\n  value: Value;\n  label?: string;\n  ariaLabel?: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  fitMenu?: boolean;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n}\n\nexport function Select<Value extends string>({ name, value, label, ariaLabel, choices, className = '', placeholder, disabled = false, fitMenu = false, renderSelected }: SelectProps<Value>) {\n  const selected = choices.find((choice) => choice.value === value);\n  const icon = (choice: SelectChoice<Value>, selectedIcon = false) => <span slot=\"start\" class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`} style={choice.color ? `color:${choice.color}` : undefined}>{choice.icon ? <LucideIcon icon={choice.icon} name={choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')} /> : null}</span>;\n  const option = (choice: SelectChoice<Value>) => <>{choice.separatorBefore && <wa-divider></wa-divider>}<wa-option value={choice.value}>{choice.icon ? icon(choice) : null}{choice.label}</wa-option></>;\n  const groups = [...new Set(choices.map((choice) => choice.group).filter((group): group is string => Boolean(group)))];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  return <wa-select class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()} data-component=\"select\" name={name} label={label} aria-label={ariaLabel} value={value} placeholder={placeholder} disabled={disabled}>\n    {selected && (renderSelected ? <span slot=\"start\" class=\"kui-select__custom-selected\">{renderSelected(selected)}</span> : selected.icon ? icon(selected, true) : null)}\n    {ungrouped.map(option)}\n    {groups.map((group, index) => <div class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`} role=\"group\" aria-label={group}><span class=\"kui-select__group-title\">{group}</span>{choices.filter((choice) => choice.group === group).map(option)}</div>)}\n  </wa-select>;\n}\n"]}

package/dist/chunk-OPCJRCYO.js

@@ -1,19 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/menu-header.tsx
-function MenuHeader({ label, action, actionLabel, actionIcon, actionDisabled = false, disabledReason, expanded, toggle = false }) {
-  if (toggle) {
-    return /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-menu-header kui-menu-header--toggle", "data-component": "menu-header", "data-action": action, "aria-expanded": String(Boolean(expanded)), children: [
-      /* @__PURE__ */ jsx("span", { children: label }),
-      actionIcon
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("header", { class: "kui-menu-header", "data-component": "menu-header", children: [
-    /* @__PURE__ */ jsx("h2", { children: label }),
-    action && /* @__PURE__ */ jsx("button", { type: "button", "data-action": action, "aria-label": actionLabel, title: actionDisabled ? disabledReason : actionLabel, disabled: actionDisabled || void 0, children: actionIcon })
-  ] });
-}
-
-export { MenuHeader };
-
-//# sourceMappingURL=chunk-OPCJRCYO.js.map

package/dist/chunk-OPCJRCYO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu-header.tsx"],"names":[],"mappings":";;;AAaO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,MAAA,EAAQ,WAAA,EAAa,UAAA,EAAY,cAAA,GAAiB,KAAA,EAAO,cAAA,EAAgB,QAAA,EAAU,MAAA,GAAS,KAAA,EAAM,EAAoB;AACxJ,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,OAAM,yCAAA,EAA0C,gBAAA,EAAe,aAAA,EAAc,aAAA,EAAa,QAAQ,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAC,CAAA,EAAG,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAAQ;AAAA,KAAA,EAAW,CAAA;AAAA,EAC3M;AACA,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,iBAAA,EAAkB,kBAAe,aAAA,EAAc,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAAM,0BAAU,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,eAAa,MAAA,EAAQ,YAAA,EAAY,WAAA,EAAa,KAAA,EAAO,iBAAiB,cAAA,GAAiB,WAAA,EAAa,QAAA,EAAU,cAAA,IAAkB,QAAY,QAAA,EAAA,UAAA,EAAW;AAAA,GAAA,EAAU,CAAA;AACxR","file":"chunk-OPCJRCYO.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface MenuHeaderProps {\n  label: string;\n  action?: string;\n  actionLabel?: string;\n  actionIcon?: SafeHtml;\n  actionDisabled?: boolean;\n  disabledReason?: string;\n  expanded?: boolean;\n  toggle?: boolean;\n}\n\nexport function MenuHeader({ label, action, actionLabel, actionIcon, actionDisabled = false, disabledReason, expanded, toggle = false }: MenuHeaderProps) {\n  if (toggle) {\n    return <button type=\"button\" class=\"kui-menu-header kui-menu-header--toggle\" data-component=\"menu-header\" data-action={action} aria-expanded={String(Boolean(expanded))}><span>{label}</span>{actionIcon}</button>;\n  }\n  return <header class=\"kui-menu-header\" data-component=\"menu-header\"><h2>{label}</h2>{action && <button type=\"button\" data-action={action} aria-label={actionLabel} title={actionDisabled ? disabledReason : actionLabel} disabled={actionDisabled || undefined}>{actionIcon}</button>}</header>;\n}\n"]}

package/dist/chunk-T5XNMVOI.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":";;;AAgBA,SAAS,SAAA,GAAY;AACnB,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,cAAA,EAAa,MAAA,EAAO,kBAAe,OAAA,EAAQ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa;AAAA,GAAA,EAAO,CAAA;AAC1L;AAEO,SAAS,MAAA,CAAO,EAAE,EAAA,EAAI,IAAA,EAAM,WAAW,KAAA,EAAO,QAAA,GAAW,MAAM,SAAA,GAAY,KAAA,EAAO,SAAS,QAAA,EAAU,YAAA,GAAe,cAAc,WAAA,GAAc,WAAA,EAAa,YAAY,EAAA,EAAI,cAAA,GAAiB,EAAC,EAAE,EAAgB;AACtN,EAAA,MAAM,YAAA,GAAe,CAAC,QAAA,GAAW,kBAAA,GAAqB,EAAA,EAAI,SAAA,GAAY,0CAAA,GAA6C,EAAE,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAC/I,EAAA,uBAAO,IAAA,CAAC,SAAI,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,IAAS,GAAG,cAAA,EAAgB,kBAAe,SAAA,EAAU,aAAA,EAAa,IAAI,eAAA,EAAe,MAAA,CAAO,QAAQ,CAAA,EAAG,SAAA,EAAW,SAAA,GAAY,MAAA,GAAS,OAAA,EAClL,QAAA,EAAA;AAAA,IAAA,QAAA,oBAAY,GAAA,CAAC,YAAO,IAAA,EAAK,QAAA,EAAS,UAAS,IAAA,EAAK,KAAA,EAAM,oBAAA,EAAqB,aAAA,EAAa,WAAA,EAAa,aAAA,EAAa,IAAI,YAAA,EAAY,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,KAAA,EAAO,SAAS,IAAI,CAAA,CAAA,EAAI,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAAE,CAAA;AAAA,oBACzL,IAAA,CAAC,YAAO,IAAA,EAAK,QAAA,EAAS,OAAM,qBAAA,EAAsB,IAAA,EAAK,KAAA,EAAM,eAAA,EAAe,MAAA,CAAO,QAAQ,GAAG,mBAAA,EAAmB,YAAA,IAAgB,QAAW,aAAA,EAAa,YAAA,EAAc,eAAa,EAAA,EAAI,QAAA,EAAU,QAAA,GAAW,GAAA,GAAM,IAAA,EAChN,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAA,EAAqB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,MAAQ,YAAY,QAAA,mBAAW,GAAA,CAAC,UAAK,KAAA,EAAM,uBAAA,EAAyB,oBAAS,CAAA,GAAU;AAAA,KAAA,EACxI;AAAA,GAAA,EACF,CAAA;AACF","file":"chunk-T5XNMVOI.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\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  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  rootAttributes?: Readonly<Record<`data-${string}`, string>>;\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, selectAction = 'select-tab', closeAction = 'close-tab', className = '', rootAttributes = {} }: AppTabProps) {\n  const keyshortcuts = [closable ? 'Delete Backspace' : '', draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : ''].filter(Boolean).join(' ');\n  return <div class={`kui-app-tab ${className}`.trim()} {...rootAttributes} data-component=\"app-tab\" data-tab-id={id} data-selected={String(selected)} draggable={draggable ? 'true' : 'false'}>\n    {closable && <button type=\"button\" tabindex=\"-1\" class=\"kui-app-tab__close\" data-action={closeAction} data-tab-id={id} aria-label={`Close ${name}`} title={`Close ${name}`}><CloseIcon /></button>}\n    <button type=\"button\" class=\"kui-app-tab__select\" role=\"tab\" aria-selected={String(selected)} aria-keyshortcuts={keyshortcuts || undefined} data-action={selectAction} data-tab-id={id} tabindex={selected ? '0' : '-1'}>\n      {leading}<span class=\"kui-app-tab__name\">{name}</span>{closable || trailing ? <span class=\"kui-app-tab__trailing\">{trailing}</span> : undefined}\n    </button>\n  </div>;\n}\n"]}

package/dist/chunk-VKH2JLDZ.js

@@ -1,10 +0,0 @@
-import { jsx } from 'kerfjs/jsx-runtime';
-
-// src/value-table.tsx
-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 };
-
-//# sourceMappingURL=chunk-VKH2JLDZ.js.map

package/dist/chunk-VKH2JLDZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/value-table.tsx"],"names":[],"mappings":";;;AAQO,SAAS,WAAW,EAAE,KAAA,EAAO,SAAA,GAAY,EAAA,EAAI,UAAS,EAAoB;AAC/E,EAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,aAAA,EAAc,YAAA,EAAY,KAAA,EAAQ,QAAA,EAAS,CAAA;AACrH","file":"chunk-VKH2JLDZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ValueTableProps {\n  label: string;\n  className?: string;\n  children: SafeHtml | 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-WY4CAEPG.js

@@ -1,14 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/menu-item.tsx
-function MenuItem({ label, icon, trailing, selected = false, action, itemId, className = "", style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex }) {
-  return /* @__PURE__ */ jsxs("button", { type: "button", class: `kui-menu-item ${className}`.trim(), style, title, disabled, tabindex: tabIndex, "data-component": "menu-item", "data-action": action, "data-item-id": itemId, "data-multiline": multiline ? "true" : void 0, "data-state": state, "aria-label": accessibleLabel, "aria-current": selected ? "page" : void 0, "aria-pressed": pressed === void 0 ? void 0 : String(pressed), children: [
-    icon && /* @__PURE__ */ jsx("span", { class: "kui-menu-item__icon", children: icon }),
-    /* @__PURE__ */ jsx("span", { class: "kui-menu-item__label", children: label }),
-    trailing && /* @__PURE__ */ jsx("span", { class: "kui-menu-item__trailing", children: trailing })
-  ] });
-}
-
-export { MenuItem };
-
-//# sourceMappingURL=chunk-WY4CAEPG.js.map