@kerfjs/ui 5.0.0-beta.77 → 5.0.0-beta.79

package/dist/nav-stack-B1Qc2e5q.d.ts

@@ -0,0 +1,101 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { ListConfig } from './list.js';
+import { PaneConfig } from './pane.js';
+import { c as PanelBottomToolbar } from './panel-toolbar-CL9tYOkh.js';
+import { ToolbarConfig } from './toolbar.js';
+import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
+
+/** Content and chrome shared by a navigation view and a static workbench panel. */
+interface NavPane<TToolbar, TBottomToolbar> {
+    content: KerfUiContent;
+    toolbar?: TToolbar;
+    header?: KerfUiContent;
+    headerList?: ListConfig;
+    footer?: KerfUiContent;
+    footerList?: ListConfig;
+    bottomToolbar?: TBottomToolbar;
+    pane?: PaneConfig;
+}
+
+/**
+ * One entry in a {@link NavStack}. The app owns the stack as an array (usually a
+ * signal); `NavStack` renders it and `wireNavStack` animates the transitions.
+ */
+interface NavStackView extends NavPane<NavStackViewToolbar, PanelBottomToolbar> {
+    /** Stable identity for keyed reconcile and transition direction. */
+    key: string;
+}
+/** Per-view top toolbar. The stack supplies its back control before `leading`. */
+interface NavStackViewToolbar extends NavStackToolbarConfig {
+    title?: string;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
+}
+/** A view's structured bottom toolbar; it cross-fades on navigation. */
+type NavStackViewBottomToolbar = PanelBottomToolbar;
+/**
+ * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real
+ * `Toolbar` the stack renders; by default that toolbar draws no divider and
+ * claims the top and side safe-area edges the stack still touches.
+ */
+interface NavStackToolbarConfig extends ToolbarConfig {
+    /** Accessible name of the top toolbar (default: none). */
+    label?: string;
+    /** Size of the view title's `ToolbarText` (default `large`). */
+    titleSize?: ToolbarTextSize;
+    /** Expose the view title as a heading at this level (default: a plain span). */
+    headingLevel?: HeadingLevel;
+}
+interface NavStackProps {
+    id: string;
+    /** Accessible name for the stack region. */
+    label: string;
+    /** The stack, root first; the last entry is the active top view. */
+    views: NavStackView[];
+    /** Accessible label for the icon-only back control (default "Back"). */
+    backLabel?: string;
+    /** The back control's icon (default a chevron-left `LucideIcon`). */
+    backIcon?: KerfUiContent;
+    /**
+     * Visible text beside the back icon, such as the previous view's title
+     * (default: icon only). When set, the text names the control and
+     * `backLabel` is not used.
+     */
+    backText?: string;
+    /** The top toolbar's configuration, forwarded to its `Toolbar`. */
+    toolbarConfig?: NavStackToolbarConfig;
+    /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */
+    panelToggle?: KerfUiContent;
+    /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
+    hideToolbar?: boolean;
+    /** Optional persistent bottom toolbar used when the active view does not provide one. */
+    bottomToolbar?: NavStackViewBottomToolbar;
+    /**
+     * The line under the top chrome and over the bottom toolbar, where they
+     * meet the active view. `scroll` (default) shows the chrome's line only
+     * while the view's content is scrolled beneath it, and the bottom
+     * toolbar's only while more content lies below — never when the content
+     * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is
+     * wired above the stack; unwired, neither shows. `always` shows both
+     * without the wiring; `none` neither, even when wired. The line is drawn
+     * inside the chrome, so no state moves the chrome or the content. A
+     * `toolbarConfig.dividerSides` edge is the Toolbar's own and is unaffected.
+     */
+    chromeDividers?: 'scroll' | 'always' | 'none';
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last
+ * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and
+ * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the
+ * back control and title lead, the active view's `toolbar` fills the zones,
+ * and `toolbarConfig` supplies defaults. A single-pane
+ * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
+ */
+declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
+
+export { type NavStackProps as N, type NavStackView as a, type NavPane as b, NavStack as c, type NavStackToolbarConfig as d, type NavStackViewBottomToolbar as e, type NavStackViewToolbar as f };

package/dist/nav-stack.d.ts

@@ -1,95 +1,13 @@
-import * as kerfjs from 'kerfjs';
-import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { ToolbarConfig } from './toolbar.js';
-import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
-import { PaneAppearance } from './pane.js';
+export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-B1Qc2e5q.js';
+import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';
+import './list.js';
+import './flex-alignment-4ms8ZbV8.js';
 import './sides-BPSWde0A.js';
 import './css-values.js';
-
-/**
- * One entry in a {@link NavStack}. The app owns the stack as an array (usually a
- * signal); `NavStack` renders it and `wireNavStack` animates the transitions.
- */
-interface NavStackView {
-    /** Stable identity for keyed reconcile and transition direction. */
-    key: string;
-    content: KerfUiContent;
-    /** Background of this view's scrolling work surface. */
-    appearance?: PaneAppearance;
-    /** Title shown in the top toolbar for this view. */
-    title?: string;
-    /** Leading groups for this view's top toolbar, after the back control and before the title. */
-    leading?: KerfUiContent;
-    /** Center content for this view's top toolbar (placed per `toolbarConfig.centerAlign`). */
-    center?: KerfUiContent;
-    /** Trailing actions for this view's top toolbar. */
-    toolbar?: KerfUiContent;
-    /** Fixed chrome below this view's toolbar, above its scrolling content. */
-    header?: KerfUiContent;
-    /** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */
-    bottomToolbar?: KerfUiContent;
-}
-/**
- * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real
- * `Toolbar` the stack renders; by default that toolbar draws no divider and
- * claims the top and side safe-area edges the stack still touches.
- */
-interface NavStackToolbarConfig extends ToolbarConfig {
-    /** Accessible name of the top toolbar (default: none). */
-    label?: string;
-    /** Size of the view title's `ToolbarText` (default `large`). */
-    titleSize?: ToolbarTextSize;
-    /** Expose the view title as a heading at this level (default: a plain span). */
-    headingLevel?: HeadingLevel;
-}
-interface NavStackProps {
-    id: string;
-    /** Accessible name for the stack region. */
-    label: string;
-    /** The stack, root first; the last entry is the active top view. */
-    views: NavStackView[];
-    /** Accessible label for the icon-only back control (default "Back"). */
-    backLabel?: string;
-    /** The back control's icon (default a chevron-left `LucideIcon`). */
-    backIcon?: KerfUiContent;
-    /**
-     * Visible text beside the back icon, such as the previous view's title
-     * (default: icon only). When set, the text names the control and
-     * `backLabel` is not used.
-     */
-    backText?: string;
-    /** The top toolbar's configuration, forwarded to its `Toolbar`. */
-    toolbarConfig?: NavStackToolbarConfig;
-    /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */
-    panelToggle?: KerfUiContent;
-    /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
-    hideToolbar?: boolean;
-    /** Optional persistent bottom toolbar used when the active view does not provide one. */
-    bottomToolbar?: KerfUiContent;
-    /**
-     * The line under the top chrome and over the bottom toolbar, where they
-     * meet the active view. `scroll` (default) shows the chrome's line only
-     * while the view's content is scrolled beneath it, and the bottom
-     * toolbar's only while more content lies below — never when the content
-     * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is
-     * wired above the stack; unwired, neither shows. `always` shows both
-     * without the wiring; `none` neither, even when wired. The line is drawn
-     * inside the chrome, so no state moves the chrome or the content. A
-     * `toolbarConfig.dividerSides` edge is the Toolbar's own and is unaffected.
-     */
-    chromeDividers?: 'scroll' | 'always' | 'none';
-    className?: string;
-    /** Native named-slot assignment when composed inside a web component. */
-    slot?: string;
-}
-/**
- * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last
- * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and
- * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the
- * back control and title lead, the active view's `leading` / `center` / `toolbar`
- * content fills the zones, and `toolbarConfig` configures it. A single-pane
- * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
- */
-declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
-
-export { NavStack, type NavStackProps, type NavStackToolbarConfig, type NavStackView };
+import './pane.js';
+import './panel-toolbar-CL9tYOkh.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';

package/dist/nav-stack.js

@@ -1,4 +1,8 @@
-export { NavStack } from './chunk-Z4EPMX25.js';
+export { NavStack } from './chunk-IKCUPTR2.js';
+
+
+
+
 
 
 

package/dist/pane.d.ts

@@ -23,6 +23,7 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-chrome-placement'?: never;
     'data-chrome-dividers'?: never;
     'data-appearance'?: never;
+    'data-deep-inset'?: never;
 }>;
 /** How a Pane's header and footer relate to its scrolling content. */
 type PaneChromePlacement = 'fixed' | 'auto';
@@ -62,6 +63,8 @@ interface PaneProps {
     chromeDividers?: PaneChromeDividers;
     /** Paint the scrolling work surface with the shared lowered-surface color. */
     appearance?: PaneAppearance;
+    /** Add an extra 8px inline gutter to scrolling content (default: false). */
+    deepInset?: boolean;
     /** Root semantics. Defaults to `div`. */
     element?: PaneElement;
     /** Scrolling content semantics. Defaults to `div`. */
@@ -96,13 +99,13 @@ interface PaneProps {
  * or a CollapsiblePanel) forwards, so the app configures that pane instead of
  * styling it. An omitted or `undefined` field keeps the composite's default.
  */
-type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'appearance'>;
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'appearance' | 'deepInset'>;
 /**
  * An unpadded application column with optional fixed header/footer slots and one
  * scrolling vertical content owner. Separator lines are independently opt-in on
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, chromePlacement, chromeDividers, appearance, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, appearance, deepInset, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
 export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -1,4 +1,4 @@
-export { Pane } from './chunk-AOAW55JN.js';
+export { Pane } from './chunk-DXQZ3BEO.js';
 
 
 //# sourceMappingURL=pane.js.map

package/dist/split-view.d.ts

@@ -1,12 +1,17 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { NavStackProps, NavStackView } from './nav-stack.js';
+import { N as NavStackProps, a as NavStackView } from './nav-stack-B1Qc2e5q.js';
 import { ResizableRegionProps } from './resizable-region.js';
-import './toolbar.js';
+import './list.js';
+import './flex-alignment-4ms8ZbV8.js';
 import './sides-BPSWde0A.js';
+import './css-values.js';
 import './pane.js';
+import './panel-toolbar-CL9tYOkh.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
 import './toolbar-text.js';
-import './css-values.js';
 
 /**
  * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /
@@ -21,7 +26,7 @@ interface SplitViewResizable extends Pick<ResizableRegionProps, 'separator' | 'h
     max: number;
 }
 /** One compact view's top- and bottom-toolbar content (see `NavStackView`). */
-type SplitViewCompactViewToolbars = Pick<NavStackView, 'leading' | 'center' | 'toolbar' | 'bottomToolbar'>;
+type SplitViewCompactViewToolbars = Pick<NavStackView, 'toolbar' | 'bottomToolbar'>;
 /**
  * The compact `NavStack`'s configuration: its toolbar configuration, back
  * control, persistent bottom toolbar, and chrome dividers forward to the

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-Z4EPMX25.js';
+import { NavStack } from './chunk-IKCUPTR2.js';
 import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
 
 
@@ -7,6 +7,10 @@ import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
 
 
 
+
+
+
+
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 
 function SplitView({
@@ -28,7 +32,7 @@ function SplitView({
     const listView = {
       ...compactStack.list,
       key: "list",
-      title: listTitle,
+      toolbar: { ...compactStack.list?.toolbar, title: listTitle },
       content: list
     };
     const views = detailActive ? [
@@ -36,7 +40,7 @@ function SplitView({
       {
         ...compactStack.detail,
         key: "detail",
-        title: detailTitle,
+        toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },
         content: detail
       }
     ] : [listView];

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/layout/split-view/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from '../../navigation/nav-stack/nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from '../resizable-region/resizable-region.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n  ResizableRegionProps,\n  | 'separator'\n  | 'handleIcon'\n  | 'contentOverflow'\n  | 'collapsed'\n  | 'transitioning'\n  | 'collapseMotion'\n  | 'restoreControl'\n  | 'restorePosition'\n> {\n  size: number;\n  min: number;\n  max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n  NavStackView,\n  'leading' | 'center' | 'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, and chrome dividers forward to the\n * stack, and `list` / `detail` give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  | 'toolbarConfig'\n  | 'backIcon'\n  | 'backText'\n  | 'hideToolbar'\n  | 'bottomToolbar'\n  | 'chromeDividers'\n> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** Compact NavStack configuration and per-view toolbars. */\n  compactStack?: SplitViewCompactStack;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  compactStack = {},\n  resizable,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (compact) {\n    const listView: NavStackView = {\n      ...compactStack.list,\n      key: 'list',\n      title: listTitle,\n      content: list,\n    };\n    const views: NavStackView[] = detailActive\n      ? [\n          listView,\n          {\n            ...compactStack.detail,\n            key: 'detail',\n            title: detailTitle,\n            content: detail,\n          },\n        ]\n      : [listView];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n          backIcon={compactStack.backIcon}\n          backText={compactStack.backText}\n          toolbarConfig={compactStack.toolbarConfig}\n          hideToolbar={compactStack.hideToolbar}\n          bottomToolbar={compactStack.bottomToolbar}\n          chromeDividers={compactStack.chromeDividers}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n      separator={resizable.separator}\n      handleIcon={resizable.handleIcon}\n      contentOverflow={resizable.contentOverflow}\n      collapsed={resizable.collapsed}\n      transitioning={resizable.transitioning}\n      collapseMotion={resizable.collapseMotion}\n      restoreControl={resizable.restoreControl}\n      restorePosition={resizable.restorePosition}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/layout/split-view/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from '../../navigation/nav-stack/nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from '../resizable-region/resizable-region.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n  ResizableRegionProps,\n  | 'separator'\n  | 'handleIcon'\n  | 'contentOverflow'\n  | 'collapsed'\n  | 'transitioning'\n  | 'collapseMotion'\n  | 'restoreControl'\n  | 'restorePosition'\n> {\n  size: number;\n  min: number;\n  max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n  NavStackView,\n  'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, and chrome dividers forward to the\n * stack, and `list` / `detail` give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  | 'toolbarConfig'\n  | 'backIcon'\n  | 'backText'\n  | 'hideToolbar'\n  | 'bottomToolbar'\n  | 'chromeDividers'\n> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** Compact NavStack configuration and per-view toolbars. */\n  compactStack?: SplitViewCompactStack;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  compactStack = {},\n  resizable,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (compact) {\n    const listView: NavStackView = {\n      ...compactStack.list,\n      key: 'list',\n      toolbar: { ...compactStack.list?.toolbar, title: listTitle },\n      content: list,\n    };\n    const views: NavStackView[] = detailActive\n      ? [\n          listView,\n          {\n            ...compactStack.detail,\n            key: 'detail',\n            toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },\n            content: detail,\n          },\n        ]\n      : [listView];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n          backIcon={compactStack.backIcon}\n          backText={compactStack.backText}\n          toolbarConfig={compactStack.toolbarConfig}\n          hideToolbar={compactStack.hideToolbar}\n          bottomToolbar={compactStack.bottomToolbar}\n          chromeDividers={compactStack.chromeDividers}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n      separator={resizable.separator}\n      handleIcon={resizable.handleIcon}\n      contentOverflow={resizable.contentOverflow}\n      collapsed={resizable.collapsed}\n      transitioning={resizable.transitioning}\n      collapseMotion={resizable.collapseMotion}\n      restoreControl={resizable.restoreControl}\n      restorePosition={resizable.restorePosition}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/styles/components/actions/toolbar/toolbar.css

@@ -150,19 +150,11 @@
   );
 }
 
-/* The control band. Every zone reserves one group-height row at the top of
-   the toolbar, and each item is centered in that band by its own size, not by
-   its siblings: a group or title shorter than the band takes half the
-   difference as a top margin, and anything taller (a wrapped title, a
-   multi-line search, a second trailing row) starts at the band's top and grows
-   down. A growing item therefore never moves the other items or its own top.
-   Centering the zones in the toolbar row instead dropped every control to the
-   middle of a two-line title. The band is resolved here, on the toolbar, so a
-   compact group's own smaller group size never redefines it.
-   `--_kui-toolbar-band` is context the toolbar provides: a ToolbarControlGroup
-   and a ToolbarText each center themselves in it from their own stylesheets
-   (toolbar-control-group.css, toolbar-text.css). A direct primary wa-button in
-   trailing is centered here without altering its Web Awesome chrome. */
+/* Every zone reserves a group-height control band. Direct custom content
+   centers against its zone's height by default. ToolbarText,
+   ToolbarControlGroup, and standalone wa-button keep their own first-band
+   placement, so taller siblings do not move their controls off that axis.
+   `--_kui-toolbar-band` is context those components use for that placement. */
 .kui-toolbar {
   --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
 }
@@ -175,7 +167,7 @@
   min-height: var(--_kui-toolbar-band);
   padding-inline: var(--kui-toolbar-zone-padding-inline, 0px);
   box-sizing: border-box;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
@@ -243,6 +235,7 @@
     0px,
     calc((var(--_kui-toolbar-band) - var(--wa-form-control-height)) / 2)
   );
+  align-self: flex-start;
   flex: 0 0 auto;
 }
 

package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css

@@ -80,6 +80,7 @@
    top margin, so it centers in the band by its own size. */
 :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
   > .kui-toolbar-control-group {
+  align-self: flex-start;
   margin-block-start: max(
     0px,
     calc(
@@ -610,17 +611,23 @@
         wa-button,
         .kui-select,
         .kui-toolbar-action-link
-      ):only-child
+      ):nth-child(1 of :where(:not([data-toolbar-visibility-state]))):where(
+        :nth-last-child(1 of :not([data-toolbar-visibility-state]))
+      )
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button, .kui-toolbar-action-link):only-child
+    > :is(button, wa-button, .kui-toolbar-action-link):nth-child(
+        1 of :where(:not([data-toolbar-visibility-state]))
+      ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
   )
   > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button):only-child
+    > :is(button, wa-button):nth-child(
+        1 of :where(:not([data-toolbar-visibility-state]))
+      ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
   )
   > wa-button:hover::part(base) {
   border-color: transparent;
@@ -758,6 +765,7 @@
    lone control belongs to the outer group surface; in a group of choices the
    image belongs only to the selected highlight. */
 .kui-toolbar-control-group[data-content="avatar"] {
+  background-origin: border-box;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -765,29 +773,46 @@
 
 .kui-toolbar-control-group[data-content="avatar"]:is(
     [data-single="true"],
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   ) {
   background-image: var(--kui-toolbar-avatar-image);
 }
 
 .kui-toolbar-control-group[data-content="avatar"]:is(
     [data-single="true"],
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > :is(button, wa-button) {
   color: transparent;
 }
 
 .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > button[aria-pressed="true"],
 .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > wa-button[aria-pressed="true"]::part(base) {
   color: transparent;
   background-image: var(--kui-toolbar-avatar-image);
+  background-origin: border-box;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -798,7 +823,10 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="neutral"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-neutral-fill-quiet);
   border-color: var(--kui-color-neutral-border-quiet);
   color: var(--kui-color-neutral-on-quiet);
@@ -806,7 +834,10 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="brand"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-brand-fill-quiet);
   border-color: var(--kui-color-brand-border-quiet);
   color: var(--kui-color-brand-on-quiet);
@@ -814,7 +845,10 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="success"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-success-fill-quiet);
   border-color: var(--kui-color-success-border-quiet);
   color: var(--kui-color-success-on-quiet);
@@ -822,7 +856,10 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="warning"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-warning-fill-quiet);
   border-color: var(--kui-color-warning-border-quiet);
   color: var(--kui-color-warning-on-quiet);
@@ -830,12 +867,25 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="danger"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-danger-fill-quiet);
   border-color: var(--kui-color-danger-border-quiet);
   color: var(--kui-color-danger-on-quiet);
 }
 .kui-toolbar-control-group[data-toolbar-width-hidden="true"],
-.kui-toolbar-control-group__busy-status[data-toolbar-width-hidden="true"] {
+.kui-toolbar-control-group__busy-status[data-toolbar-width-hidden="true"],
+.kui-toolbar-control-group:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+),
+.kui-toolbar-control-group__busy-status:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-control-group > [data-toolbar-visibility-state],
+.kui-toolbar-control-group__busy-status > [data-toolbar-visibility-state] {
   display: none;
 }

package/dist/styles/components/actions/toolbar-text/toolbar-text.css

@@ -39,6 +39,7 @@ button.kui-toolbar-text:focus-visible {
    heights. */
 :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
   > .kui-toolbar-text {
+  align-self: flex-start;
   height: auto;
   min-height: var(--_kui-toolbar-band);
 }
@@ -159,6 +160,12 @@ button.kui-toolbar-text[data-tone="dark"]:hover {
   line-clamp: none;
   max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
 }
-.kui-toolbar-text[data-toolbar-width-hidden="true"] {
+.kui-toolbar-text[data-toolbar-width-hidden="true"],
+.kui-toolbar-text:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-text > [data-toolbar-visibility-state] {
   display: none;
 }

package/dist/styles/components/forms/token-search-field/token-search-field.css

@@ -82,6 +82,7 @@
 
 .kui-token-search__editor {
   grid-column: 2;
+  grid-row: 1;
   min-width: var(--kui-token-search-editor-min-width, 0px);
   min-height: var(--kui-token-search-line-size);
   padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
@@ -104,10 +105,20 @@
   }
 }
 
-.kui-token-search__editor:empty::before {
+.kui-token-search[data-placeholder-visible="true"]:has(
+    > .kui-token-search__editor
+  )::before {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+  padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
   color: var(--kui-color-text-quiet);
   content: attr(data-placeholder);
+  font-size: var(--kui-font-s);
+  line-height: 1.35;
+  overflow: hidden;
   pointer-events: none;
+  white-space: nowrap;
 }
 
 .kui-token-search__token {