@kerfjs/ui 5.0.0-beta.7 → 5.0.0-beta.9

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

@@ -0,0 +1,79 @@
+import '@kerfjs/ui/layout.css';
+import '@kerfjs/ui/select/register';
+import './recipes.css';
+
+import { ListItem } from '@kerfjs/ui/list-item';
+import { LucideIcon } from '@kerfjs/ui/lucide-icon';
+import { PanelHeader } from '@kerfjs/ui/panel-header';
+import { SegmentedControl } from '@kerfjs/ui/segmented-control';
+import { Select } from '@kerfjs/ui/select';
+import { StateBanner } from '@kerfjs/ui/state-banner';
+import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
+import { signal } from 'kerfjs';
+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} />;
+
+/**
+ * A record inspector whose per-record values load asynchronously. Every
+ * value-bearing component takes `placeholder` from one loading flag, so the same
+ * chrome renders a faithful loading state and then the populated record — no
+ * separate skeleton markup. The composition is the point; `Skeleton` is the
+ * primitive it is built on (see the Skeleton component demo).
+ */
+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>
+        <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') },
+        ]} />
+        <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>;
+  };
+  return {
+    render,
+    action(command) {
+      if (command === 'toggle') {
+        loading.value = !loading.value;
+        announce(loading.value ? 'Inspector is loading' : 'Inspector loaded');
+      }
+    },
+  };
+};

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

@@ -1,9 +1,9 @@
 import '@kerfjs/ui/layout.css';
 import './recipes.css';
 
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
 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';
@@ -16,11 +16,11 @@ export const createRecipe: RecipeFactory = (announce) => {
   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>
+      <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-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`); } };
+  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

@@ -3,9 +3,9 @@ import '@kerfjs/ui/nav-stack.css';
 import '@kerfjs/ui/toolbar-text.css';
 import './recipes.css';
 
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
 import { NavStack, type NavStackView } from '@kerfjs/ui/nav-stack';
 import { signal } from 'kerfjs';
 import { ChevronRight, FileText, Folder } from 'lucide';
@@ -30,8 +30,8 @@ export const createRecipe: RecipeFactory = (announce) => {
     title: 'Library',
     content: <div class="recipe-navstack__view kui-pane__content kui-content">
       <section>
-        <MenuHeader label="Components" />
-        {ITEMS.map((item) => <MenuItem action="recipe-action" itemId={item.id} label={item.label} icon={<LucideIcon icon={Folder} name="folder" />} trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />} />)}
+        <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>,

package/ux-demo/recipes/recipes.css

@@ -114,23 +114,25 @@
   margin: 0;
 }
 
-.recipe-master-detail {
+.recipe-list-detail {
   display: grid;
   width: 100%;
   min-height: 25rem;
   grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.4fr);
 }
-.recipe-master-detail__master {
+.recipe-list-detail__list {
   border-inline-end: 1px solid var(--kui-color-border);
 }
-.recipe-master-detail__detail {
+.recipe-list-detail__detail {
   min-width: 0;
+}
+.recipe-list-detail__body {
   padding-block: var(--kui-layout-item-gap);
 }
-.recipe-master-detail__title {
+.recipe-list-detail__title {
   margin-inline: var(--kui-layout-inline-margin, remify(8px));
 }
-.recipe-master-detail__actions {
+.recipe-list-detail__actions {
   margin-inline: var(--kui-layout-inline-margin, remify(8px));
 }
 .recipe-dialog {
@@ -256,10 +258,10 @@
   .recipe-compact-toolbar__guide {
     grid-template-columns: 1fr 1fr;
   }
-  .recipe-master-detail {
+  .recipe-list-detail {
     grid-template-columns: 1fr;
   }
-  .recipe-master-detail__master {
+  .recipe-list-detail__list {
     border-inline-end: 0;
     border-block-end: 1px solid var(--kui-color-border);
   }
@@ -353,3 +355,7 @@
      little block breathing room, not an inline pad that would double-inset them. */
   padding-block: var(--kui-space-2xs);
 }
+
+.recipe-inspector {
+  width: min(remify(560px), 100%);
+}

package/dist/browser/menu-action-row.js

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

package/dist/chunk-KJYXOTG3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;AAcO,SAAS,WAAA,CAAY,EAAE,IAAA,EAAM,IAAA,GAAO,SAAA,EAAW,YAAY,EAAA,EAAI,EAAA,EAAI,WAAA,GAAc,KAAA,EAAM,EAAqB;AACjH,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,IAAA,EAAM,kBAAA,EAAkB,WAAA,GAAc,MAAA,GAAS,MAAA,EAAW,EAAA,EAAQ,WAAA,EAAW,WAAA,GAAc,MAAA,GAAS,MAAA,EAAY,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAAK,IAAA,EAAK,CAAA;AACrQ","file":"chunk-KJYXOTG3.js","sourcesContent":["import { Skeleton } from './skeleton.js';\n\nexport type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';\n\nexport interface ToolbarTextProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n  /** Render the text as an unanimated loading skeleton instead of its value. */\n  placeholder?: boolean;\n}\n\nexport function ToolbarText({ text, size = 'default', className = '', id, placeholder = false }: ToolbarTextProps) {\n  return <span class={`kui-toolbar-text ${className}`.trim()} data-component=\"toolbar-text\" data-size={size} data-placeholder={placeholder ? 'true' : undefined} id={id} aria-busy={placeholder ? 'true' : undefined}>{placeholder ? <Skeleton width=\"8em\" /> : text}</span>;\n}\n"]}

package/dist/chunk-TZNCCM5H.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/panel-header.tsx"],"names":[],"mappings":";;;;;;AA+BO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,aAAA,GAAgB,EAAA,EAAI,OAAA,EAAS,WAAA,GAAc,KAAA,EAAM,EAAqB;AAC5I,EAAA,MAAM,2BAAW,IAAA,CAAA,QAAA,EAAA,EACd,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,mBAAA,EAAA,EAAoB,MAAA,EAAM,IAAA,EAAC,SAAA,EAAW,0BAA0B,aAAa,CAAA,CAAA,CAAG,IAAA,EAAK,EAAI,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBACxG,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,KAAA,EAAO,IAAA,EAAK,UAAS,EAAA,EAAI,OAAA,EAAS,SAAA,EAAU,yBAAA,EAA0B,WAAA,EAA0B;AAAA,GAAA,EACrH,CAAA;AAEA,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,kBAAA,EAAmB,gBAAA,EAAe,cAAA,EAAe,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA,EAAG,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA,EAAG,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA,EAAG,kBAAA,EAAkB,WAAA,GAAc,MAAA,GAAS,MAAA,EACxO,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAQ,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,OAAA,EAAS,SAAS,KAAA,EAAO,CAAA;AAAA,IAC9D,OAAA,oBAAW,GAAA,CAAC,GAAA,EAAA,EAAE,KAAA,EAAM,2BAAA,EAA4B,EAAA,EAAI,SAAA,EAAY,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,MAAA,EAAO,IAAK,OAAA,EAAQ;AAAA,GAAA,EACrH,CAAA;AACF","file":"chunk-TZNCCM5H.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\nimport { ToolbarText } from './toolbar-text.js';\n\nexport interface PanelHeaderProps {\n  title: string;\n  titleId: string;\n  summary?: string;\n  summaryId?: string;\n  icon?: SafeHtml;\n  iconClassName?: string;\n  actions?: SafeHtml;\n  /** Render the title and summary as unanimated loading skeletons, keeping the icon and actions. */\n  placeholder?: boolean;\n}\n\n/**\n * The heading of a panel, dialog, or page: a plain `Toolbar` whose leading zone\n * holds an optional icon control group and the title as extra-large `ToolbarText`,\n * whose trailing zone holds the app's action controls, and with an optional\n * subtitle on its own row, left-aligned with the title.\n *\n * PanelHeader overrides no Toolbar styles — it is just a Toolbar with an xl title.\n * The only styling it adds is the icon group's fill/border color and the subtitle.\n * When no icon is provided, the icon group is omitted entirely. The `actions` slot\n * is passed straight into the toolbar's trailing zone; the app supplies whatever\n * trailing controls it needs (typically a `ToolbarControlGroup`).\n */\nexport function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName = '', actions, placeholder = false }: PanelHeaderProps) {\n  const identity = <>\n    {icon && <ToolbarControlGroup single className={`kui-panel-header__icon ${iconClassName}`.trim()}>{icon}</ToolbarControlGroup>}\n    <ToolbarText text={title} size=\"xlarge\" id={titleId} className=\"kui-panel-header__title\" placeholder={placeholder} />\n  </>;\n\n  return <div class=\"kui-panel-header\" data-component=\"panel-header\" data-has-icon={String(Boolean(icon))} data-has-actions={String(Boolean(actions))} data-has-summary={String(Boolean(summary))} data-placeholder={placeholder ? 'true' : undefined}>\n    <Toolbar leading={identity} trailing={actions} divider={false} />\n    {summary && <p class=\"kui-panel-header__summary\" id={summaryId}>{placeholder ? <Skeleton width=\"18em\" /> : summary}</p>}\n  </div>;\n}\n"]}

package/dist/menu-action-row.js

@@ -1,5 +0,0 @@
-export { MenuActionRow } from './chunk-3YD6ZNRA.js';
-
-
-
-//# sourceMappingURL=menu-action-row.js.map

package/dist/menu-action-row.js.map

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

package/dist/menu-header.js

@@ -1,7 +0,0 @@
-export { MenuHeader } from './chunk-H6URQGJI.js';
-
-
-
-
-
-//# sourceMappingURL=menu-header.js.map

package/dist/menu-header.js.map

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

package/dist/menu-item.js

@@ -1,5 +0,0 @@
-export { MenuItem } from './chunk-YKUUZPED.js';
-
-
-
-//# sourceMappingURL=menu-item.js.map

package/dist/menu-item.js.map

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

package/dist/styles/menu-action-row.css

@@ -1,160 +0,0 @@
-.kui-menu-action-row {
-  --kui-menu-action-row-color: var(--kui-color-neutral-on-normal);
-  --kui-menu-action-row-border: transparent;
-  --kui-menu-action-row-background: transparent;
-  --kui-menu-action-row-hover-border: var(--kui-color-neutral-border-normal);
-  --kui-menu-action-row-hover-background: var(--kui-color-neutral-fill-quiet);
-  --kui-menu-action-row-selected-color: var(--kui-color-brand-on-quiet);
-  --kui-menu-action-row-selected-border: var(--kui-color-brand-border-quiet);
-  --kui-menu-action-row-selected-background: var(--kui-color-brand-fill-normal);
-  --kui-menu-action-row-trailing-hover-background: var(
-    --kui-color-neutral-fill-normal
-  );
-  display: flex;
-  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
-  min-height: 2.75rem;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: var(--kui-menu-action-row-color);
-  background: var(--kui-menu-action-row-background);
-  box-shadow: inset 0 0 0 1px var(--kui-menu-action-row-border);
-  align-items: stretch;
-}
-
-.kui-menu-action-row:has(.kui-menu-action-row__primary:hover) {
-  --kui-menu-action-row-border: var(--kui-menu-action-row-hover-border);
-  --kui-menu-action-row-background: var(--kui-menu-action-row-hover-background);
-}
-
-.kui-menu-action-row[data-selected="true"],
-.kui-menu-action-row[data-pressed="true"] {
-  --kui-menu-action-row-border: var(--kui-menu-action-row-selected-border);
-  --kui-menu-action-row-background: var(
-    --kui-menu-action-row-selected-background
-  );
-  color: var(--kui-menu-action-row-selected-color);
-  font-weight: 650;
-}
-
-.kui-menu-action-row:has(.kui-menu-action-row__primary:focus-visible) {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-menu-action-row__primary,
-.kui-menu-action-row__trailing-action {
-  height: auto !important;
-  min-height: 2.75rem;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  color: inherit;
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-}
-
-.kui-menu-action-row__primary {
-  position: relative;
-  display: block;
-  flex: 1 1 auto;
-  min-width: 2.75rem;
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  padding-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
-  text-align: start;
-}
-
-.kui-menu-action-row__primary:focus-visible {
-  outline: none;
-}
-
-.kui-menu-action-row__primary:disabled,
-.kui-menu-action-row__trailing-action:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.kui-menu-action-row__icon {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
-  display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: currentColor;
-  transform: translateY(-50%);
-  place-items: center;
-}
-
-.kui-menu-action-row__icon svg {
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.kui-menu-action-row__label {
-  display: grid;
-  min-width: 0;
-  min-height: calc(
-    2.75rem - (2 * var(--kui-layout-item-padding, 0.5rem))
-  );
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  align-items: center;
-}
-
-.kui-menu-action-row[data-has-icon="true"] .kui-menu-action-row__label {
-  margin-inline-start: calc(
-    1.5rem + var(--kui-layout-item-gap, 0.5rem)
-  );
-}
-
-.kui-menu-action-row[data-multiline="true"] .kui-menu-action-row__label {
-  display: block;
-  overflow: visible;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.kui-menu-action-row[data-multiline="true"] .kui-menu-action-row__icon {
-  inset-block-start: calc(
-    var(--kui-layout-item-padding, 0.5rem) + (1lh / 2)
-  );
-}
-
-.kui-menu-action-row__trailing-action {
-  display: grid;
-  width: 2.75rem;
-  min-width: 2.75rem;
-  border-radius: var(--kui-radius-pill);
-  place-items: center;
-}
-
-.kui-menu-action-row__trailing-action:hover:not(:disabled) {
-  background: var(--kui-menu-action-row-trailing-hover-background);
-}
-
-.kui-menu-action-row__trailing-action:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: -2px;
-}
-
-.kui-menu-action-row__trailing-action > svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-@media (forced-colors: active) {
-  .kui-menu-action-row {
-    --kui-menu-action-row-border: ButtonText;
-    outline: 1px solid ButtonText;
-    outline-offset: -1px;
-  }
-
-  .kui-menu-action-row[data-selected="true"],
-  .kui-menu-action-row[data-pressed="true"] {
-    --kui-menu-action-row-selected-color: HighlightText;
-    --kui-menu-action-row-selected-background: Highlight;
-  }
-}

package/dist/styles/menu-item.css

@@ -1,123 +0,0 @@
-.kui-menu-item {
-  --kui-menu-item-color: var(--kui-color-neutral-on-normal);
-  --kui-menu-item-border: transparent;
-  --kui-menu-item-background: transparent;
-  --kui-menu-item-hover-border: var(--kui-color-neutral-border-normal);
-  --kui-menu-item-hover-background: var(--kui-color-neutral-fill-quiet);
-  --kui-menu-item-selected-color: var(--kui-color-brand-on-quiet);
-  --kui-menu-item-selected-border: var(--kui-color-brand-border-quiet);
-  --kui-menu-item-selected-background: var(--kui-color-brand-fill-normal);
-  display: grid;
-  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
-  min-height: 2.75rem;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: 1px solid var(--kui-menu-item-border);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: var(--kui-menu-item-color);
-  background: var(--kui-menu-item-background);
-  cursor: pointer;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  column-gap: var(--kui-layout-item-gap, 0.5rem);
-  font: inherit;
-  text-align: start;
-}
-
-.kui-menu-item[data-has-icon="true"] {
-  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
-}
-
-.kui-menu-item[data-has-icon="true"] .kui-menu-item__icon {
-  grid-column: 1;
-}
-
-.kui-menu-item[data-has-icon="true"] .kui-menu-item__label {
-  grid-column: 2;
-}
-
-.kui-menu-item[data-has-icon="true"] .kui-menu-item__trailing {
-  grid-column: 3;
-}
-
-.kui-menu-item[data-has-icon="false"] .kui-menu-item__label {
-  grid-column: 1;
-}
-
-.kui-menu-item[data-has-icon="false"] .kui-menu-item__trailing {
-  grid-column: 2;
-}
-
-.kui-menu-item:hover {
-  border-color: var(--kui-menu-item-hover-border);
-  background: var(--kui-menu-item-hover-background);
-}
-
-.kui-menu-item:disabled {
-  color: var(--kui-color-neutral-on-quiet);
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.kui-menu-item[aria-current="page"],
-.kui-menu-item[aria-pressed="true"] {
-  border-color: var(--kui-menu-item-selected-border);
-  color: var(--kui-menu-item-selected-color);
-  background: var(--kui-menu-item-selected-background);
-  font-weight: 650;
-}
-
-.kui-menu-item:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-menu-item__icon {
-  display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: currentColor;
-  place-items: center;
-}
-
-.kui-menu-item__icon svg {
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.kui-menu-item__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kui-menu-item[data-multiline="true"] {
-  height: fit-content;
-  white-space: normal;
-}
-
-.kui-menu-item[data-multiline="true"] .kui-menu-item__label {
-  overflow: visible;
-  white-space: normal;
-}
-
-.kui-menu-item[data-multiline="true"] .kui-menu-item__icon {
-  align-self: start;
-  margin-block-start: calc((1lh - 1.5rem) / 2);
-}
-
-.kui-menu-item__trailing {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--kui-layout-item-gap, 0.5rem);
-}
-
-.kui-menu-item__trailing > svg {
-  width: 1rem;
-  height: 1rem;
-}

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

@@ -1,45 +0,0 @@
-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 { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
-import { PanelHeader } from '@kerfjs/ui/panel-header';
-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"><PanelHeader 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>} /><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="recipe-master-detail__title 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="recipe-master-detail__actions kui-control-cluster"><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;
-    },
-  };
-};