@kerfjs/ui 5.0.0-beta.8 → 5.0.0-beta.81

package/dist/styles/panel-header.css

@@ -1,64 +0,0 @@
-.kui-panel-header {
-  display: grid;
-  width: 100%;
-  gap: 0;
-}
-
-/* The only chrome PanelHeader adds to the plain Toolbar: the icon group is a
-   normal (bordered) control group given a brand fill, with its border color set
-   to match the fill so it reads as a solid filled tile rather than a bordered
-   pill. Both are the group's own theming variables — no Toolbar style is
-   overridden. */
-.kui-panel-header__icon.kui-toolbar-control-group {
-  --kui-toolbar-control-background: var(
-    --kui-panel-header-icon-background,
-    var(--kui-color-brand-fill-quiet)
-  );
-  --kui-toolbar-control-border: var(
-    --kui-panel-header-icon-border,
-    var(--kui-color-brand-fill-quiet)
-  );
-  color: var(
-    --kui-panel-header-icon-foreground,
-    var(--kui-color-brand-on-quiet)
-  );
-  /* The icon is a raw svg child (not a button), so the group's default
-     flex-start alignment would pin it to the left of the filled tile. Center it
-     on both axes inside the circle. */
-  justify-content: center;
-}
-
-.kui-panel-header__icon svg {
-  display: block;
-  width: 1.375rem;
-  height: 1.375rem;
-}
-
-/* The subtitle sits on its own row, its text left-aligned with the title text
-   (past the toolbar padding, the optional icon group + leading gap, and the
-   title's own inline padding). */
-.kui-panel-header__summary {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  padding-inline-start: var(--kui-panel-header-title-inset);
-  color: var(--kui-color-text-quiet);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kui-panel-header[data-has-icon="false"] {
-  --kui-panel-header-title-inset: calc(
-    var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-}
-
-.kui-panel-header[data-has-icon="true"] {
-  --kui-panel-header-title-inset: calc(
-    var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-}

package/dist/styles/tab-scaffold.css

@@ -1,84 +0,0 @@
-.kui-tab-scaffold {
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-  height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-  background: var(--kui-color-surface);
-}
-
-.kui-tab-scaffold__scenes {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* Every tab stays mounted (its NavStack keeps its stack and scroll); only the
-   active scene is shown. */
-.kui-tab-scaffold__scene {
-  position: absolute;
-  overflow: auto;
-  inset: 0;
-}
-
-.kui-tab-scaffold__scene[data-active="false"] {
-  visibility: hidden;
-}
-
-.kui-tab-scaffold__bar {
-  display: flex;
-  flex: 0 0 auto;
-  padding-block-start: var(--kui-space-2xs);
-  /* Respect the home-indicator safe area on iOS-class devices. */
-  padding-block-end: calc(
-    var(--kui-space-2xs) + env(safe-area-inset-bottom, 0px)
-  );
-  border-block-start: 1px solid var(--kui-color-border);
-  background: var(--kui-color-surface);
-}
-
-.kui-tab-scaffold__tab {
-  display: flex;
-  flex: 1 1 0;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: var(--kui-space-2xs) var(--kui-space-xs);
-  border: 0;
-  color: var(--kui-color-text-quiet);
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.125rem;
-}
-
-.kui-tab-scaffold__tab[aria-selected="true"] {
-  color: var(--kui-color-accent-text);
-}
-
-.kui-tab-scaffold__tab:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: -2px;
-}
-
-.kui-tab-scaffold__tab-icon {
-  display: grid;
-  place-items: center;
-}
-
-.kui-tab-scaffold__tab-icon svg {
-  width: 1.375rem;
-  height: 1.375rem;
-}
-
-.kui-tab-scaffold__tab-label {
-  max-width: 100%;
-  overflow: hidden;
-  font-size: var(--kui-font-2xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/dist/tab-scaffold.d.ts

@@ -1,30 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface TabScaffoldTab {
-    id: string;
-    label: string;
-    /** Decorative icon shown above the label in the bottom bar. */
-    icon?: SafeHtml;
-    /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */
-    content: SafeHtml;
-}
-interface TabScaffoldProps {
-    id: string;
-    /** Accessible name for the tab bar. */
-    label: string;
-    tabs: TabScaffoldTab[];
-    /** The controlled active tab id (the app owns selection). */
-    active: string;
-    className?: string;
-}
-/**
- * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches
- * between major sections, each tab keeping its own content (usually a `NavStack`)
- * mounted so its stack and scroll survive a switch. Controlled — the app owns
- * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.
- * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
- * a bottom bar. See `docs/23-app-layouts.md` §3.4.
- */
-declare function TabScaffold({ id, label, tabs, active, className }: TabScaffoldProps): SafeHtml;
-
-export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };

package/dist/tab-scaffold.js

@@ -1,16 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/tab-scaffold.tsx
-function TabScaffold({ id, label, tabs, active, className = "" }) {
-  return /* @__PURE__ */ jsxs("section", { class: `kui-tab-scaffold ${className}`.trim(), id, "data-component": "tab-scaffold", "data-tab-scaffold-id": id, children: [
-    /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scenes", children: tabs.map((tab) => /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scene", "data-tab-scaffold-scene": tab.id, "data-active": String(tab.id === active), "aria-hidden": String(tab.id !== active), children: tab.content })) }),
-    /* @__PURE__ */ jsx("nav", { class: "kui-tab-scaffold__bar", role: "tablist", "aria-label": label, children: tabs.map((tab) => /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-tab-scaffold__tab", role: "tab", "data-tab-scaffold-tab": tab.id, "aria-selected": String(tab.id === active), tabindex: tab.id === active ? "0" : "-1", children: [
-      tab.icon && /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-icon", "aria-hidden": "true", children: tab.icon }),
-      /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-label", children: tab.label })
-    ] })) })
-  ] });
-}
-
-export { TabScaffold };
-
-//# sourceMappingURL=tab-scaffold.js.map

package/dist/tab-scaffold.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AA6BO,SAAS,WAAA,CAAY,EAAE,EAAA,EAAI,KAAA,EAAO,MAAM,MAAA,EAAQ,SAAA,GAAY,IAAG,EAAqB;AACzF,EAAA,uBAAO,IAAA,CAAC,SAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,cAAA,EAAe,sBAAA,EAAsB,EAAA,EACzH,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA0B,yBAAA,EAAyB,GAAA,CAAI,EAAA,EAAI,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA,EAAG,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA,EAAI,QAAA,EAAA,GAAA,CAAI,OAAA,EAAQ,CAAM,CAAA,EAC9L,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,MAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,IAAI,CAAC,GAAA,qBAAQ,IAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,KAAA,EAAM,uBAAA,EAAuB,GAAA,CAAI,EAAA,EAAI,iBAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,GAAG,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,MAAM,IAAA,EAC5L,QAAA,EAAA;AAAA,MAAA,GAAA,CAAI,IAAA,wBAAS,MAAA,EAAA,EAAK,KAAA,EAAM,8BAA6B,aAAA,EAAY,MAAA,EAAQ,cAAI,IAAA,EAAK,CAAA;AAAA,sBACnF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA,KAAA,EACvD,CAAS,CAAA,EACX;AAAA,GAAA,EACF,CAAA;AACF","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface TabScaffoldTab {\n  id: string;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: SafeHtml;\n}\n\nexport interface TabScaffoldProps {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: TabScaffoldTab[];\n  /** The controlled active tab id (the app owns selection). */\n  active: string;\n  className?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabScaffold({ id, label, tabs, active, className = '' }: TabScaffoldProps) {\n  return <section class={`kui-tab-scaffold ${className}`.trim()} id={id} data-component=\"tab-scaffold\" data-tab-scaffold-id={id}>\n    <div class=\"kui-tab-scaffold__scenes\">\n      {tabs.map((tab) => <div class=\"kui-tab-scaffold__scene\" data-tab-scaffold-scene={tab.id} data-active={String(tab.id === active)} aria-hidden={String(tab.id !== active)}>{tab.content}</div>)}\n    </div>\n    <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n      {tabs.map((tab) => <button type=\"button\" class=\"kui-tab-scaffold__tab\" role=\"tab\" data-tab-scaffold-tab={tab.id} aria-selected={String(tab.id === active)} tabindex={tab.id === active ? '0' : '-1'}>\n        {tab.icon && <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">{tab.icon}</span>}\n        <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n      </button>)}\n    </nav>\n  </section>;\n}\n"]}

package/dist/wire-tab-scaffold.d.ts

@@ -1,11 +0,0 @@
-interface WireTabScaffoldOptions {
-    /** Invoked with the selected tab id when a bottom-bar tab is activated. */
-    onSelect: (tabId: string) => void;
-}
-/**
- * Wire a `TabScaffold`'s bottom tab bar: clicking a tab calls `onSelect` with its
- * id (the app then updates its controlled `active`). Returns a disposer.
- */
-declare function wireTabScaffold(root: Element, options: WireTabScaffoldOptions): () => void;
-
-export { type WireTabScaffoldOptions, wireTabScaffold };

package/dist/wire-tab-scaffold.js

@@ -1,16 +0,0 @@
-import { delegate } from 'kerfjs';
-
-// src/wire-tab-scaffold.ts
-function wireTabScaffold(root, options) {
-  const section = root.matches('[data-component="tab-scaffold"]') ? root : root.querySelector('[data-component="tab-scaffold"]');
-  if (!(section instanceof HTMLElement)) return () => {
-  };
-  return delegate(section, "click", "[data-tab-scaffold-tab]", (_event, target) => {
-    const tabId = target.getAttribute("data-tab-scaffold-tab");
-    if (tabId) options.onSelect(tabId);
-  });
-}
-
-export { wireTabScaffold };
-
-//# sourceMappingURL=wire-tab-scaffold.js.map

package/dist/wire-tab-scaffold.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/wire-tab-scaffold.ts"],"names":[],"mappings":";;;AAWO,SAAS,eAAA,CAAgB,MAAe,OAAA,EAA6C;AAC1F,EAAA,MAAM,OAAA,GAAU,KAAK,OAAA,CAAQ,iCAAiC,IAAI,IAAA,GAAO,IAAA,CAAK,cAAc,iCAAiC,CAAA;AAC7H,EAAA,IAAI,EAAE,OAAA,YAAmB,WAAA,CAAA,EAAc,OAAO,MAAM;AAAA,EAAC,CAAA;AACrD,EAAA,OAAO,SAAS,OAAA,EAAS,OAAA,EAAS,yBAAA,EAA2B,CAAC,QAAQ,MAAA,KAAW;AAC/E,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,YAAA,CAAa,uBAAuB,CAAA;AACzD,IAAA,IAAI,KAAA,EAAO,OAAA,CAAQ,QAAA,CAAS,KAAK,CAAA;AAAA,EACnC,CAAC,CAAA;AACH","file":"wire-tab-scaffold.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nexport interface WireTabScaffoldOptions {\n  /** Invoked with the selected tab id when a bottom-bar tab is activated. */\n  onSelect: (tabId: string) => void;\n}\n\n/**\n * Wire a `TabScaffold`'s bottom tab bar: clicking a tab calls `onSelect` with its\n * id (the app then updates its controlled `active`). Returns a disposer.\n */\nexport function wireTabScaffold(root: Element, options: WireTabScaffoldOptions): () => void {\n  const section = root.matches('[data-component=\"tab-scaffold\"]') ? root : root.querySelector('[data-component=\"tab-scaffold\"]');\n  if (!(section instanceof HTMLElement)) return () => {};\n  return delegate(section, 'click', '[data-tab-scaffold-tab]', (_event, target) => {\n    const tabId = target.getAttribute('data-tab-scaffold-tab');\n    if (tabId) options.onSelect(tabId);\n  });\n}\n"]}

package/docs/tab-scaffold.md

@@ -1,41 +0,0 @@
-# Tab scaffold
-
-`@kerfjs/ui/tab-scaffold` is a mobile-first, iOS-like bottom tab bar that switches
-between major app sections, where **each tab keeps its own content mounted** —
-usually a `NavStack`, so each tab's stack and scroll survive a switch. One of the
-opt-in app layouts (see [`../../docs/23-app-layouts.md`](../../docs/23-app-layouts.md)).
-It is distinct from `TabBar` (document-oriented, reorderable strips).
-
-```ts
-import { TabScaffold } from '@kerfjs/ui/tab-scaffold';
-import { wireTabScaffold } from '@kerfjs/ui/wire-tab-scaffold';
-import '@kerfjs/ui/tab-scaffold.css';
-```
-
-## Controlled selection
-
-The app owns the active tab (a signal); `TabScaffold` renders every tab's scene
-(only the active one visible) plus the bottom bar, and `wireTabScaffold` reports
-clicks.
-
-```tsx
-const active = signal('home');
-
-<TabScaffold
-  id="app"
-  label="Sections"
-  active={active.value}
-  tabs={[
-    { id: 'home', label: 'Home', icon: <HomeIcon />, content: <HomeStack /> },
-    { id: 'search', label: 'Search', icon: <SearchIcon />, content: <SearchStack /> },
-  ]}
-/>;
-
-// once, after first render:
-const dispose = wireTabScaffold(root, { onSelect: (id) => { active.value = id; } });
-```
-
-Each `TabScaffoldTab` has an `id`, `label`, optional `icon`, and `content`. The
-bottom bar respects the home-indicator safe area (`env(safe-area-inset-bottom)`)
-and keeps 44px targets. On larger device classes, promote the tab set to a
-`Workbench` rail or a persistent sidebar instead of a bottom bar.

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;
-    },
-  };
-};

package/ux-demo/recipes/recipes.css

@@ -1,355 +0,0 @@
-.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-master-detail {
-  display: grid;
-  width: 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-master-detail__title {
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-}
-.recipe-master-detail__actions {
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-}
-.recipe-dialog {
-  --spacing: 0;
-  --width: min(62rem, calc(100vw - 2rem));
-}
-.recipe-dialog .kui-panel-header {
-  margin-inline: 0;
-}
-
-.recipe-form {
-  width: min(38rem, 100%);
-  margin-inline: auto;
-  padding-block: var(--kui-layout-item-gap);
-}
-.recipe-form__section {
-  display: grid;
-  min-width: 0;
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-  gap: var(--kui-layout-item-gap);
-}
-.recipe-form__fields {
-  align-content: start;
-}
-.recipe-form__fields wa-input::part(form-control-label),
-.recipe-form__fields wa-input::part(hint),
-.recipe-form__fields wa-textarea::part(form-control-label),
-.recipe-form__fields wa-textarea::part(hint),
-.recipe-form__fields .kui-select::part(form-control-label) {
-  padding-inline: remify(8px);
-}
-.recipe-form__fields wa-textarea::part(textarea) {
-  padding-inline: remify(8px);
-}
-.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 {
-  /* Span the toolbar's full width instead of the 8px content-item inset — under a
-     full-bleed toolbar/divider the inset read as the boxes floating too far in. */
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  margin-inline: 0;
-  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;
-  }
-}
-
-@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;
-  }
-}
-
-.recipe-navstack {
-  display: flex;
-  width: min(28rem, 100%);
-  margin-inline: auto;
-  flex-direction: column;
-}
-.recipe-navstack__stage {
-  height: 24rem;
-}
-.recipe-navstack__view {
-  /* The view is a .kui-content stack whose rows own their 8px margins; add only a
-     little block breathing room, not an inline pad that would double-inset them. */
-  padding-block: var(--kui-space-2xs);
-}