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

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/recipes.css

@@ -1,361 +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-list-detail {
-  display: grid;
-  width: 100%;
-  min-height: 25rem;
-  grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.4fr);
-}
-.recipe-list-detail__list {
-  border-inline-end: 1px solid var(--kui-color-border);
-}
-.recipe-list-detail__detail {
-  min-width: 0;
-}
-.recipe-list-detail__body {
-  padding-block: var(--kui-layout-item-gap);
-}
-.recipe-list-detail__title {
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-}
-.recipe-list-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-list-detail {
-    grid-template-columns: 1fr;
-  }
-  .recipe-list-detail__list {
-    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);
-}
-
-.recipe-inspector {
-  width: min(remify(560px), 100%);
-}