@kerfjs/ui 5.0.0-beta.56 → 5.0.0-beta.57

package/dist/pane.d.ts

@@ -21,9 +21,16 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-safe-area-inline-start'?: never;
     'data-safe-area-inline-end'?: never;
     'data-chrome-placement'?: never;
+    'data-chrome-dividers'?: never;
 }>;
 /** How a Pane's header and footer relate to its scrolling content. */
 type PaneChromePlacement = 'fixed' | 'auto';
+/**
+ * When a Pane draws the divider between its pinned header or footer and its
+ * scrolling content: `scroll` while content is scrolled away beneath that
+ * chrome, as `wireScrollDividers` reports; `always`; or `none`.
+ */
+type PaneChromeDividers = 'scroll' | 'always' | 'none';
 interface PaneProps {
     /** Optional fixed chrome above the scrolling content, arranged vertically. */
     header?: KerfUiContent;
@@ -39,6 +46,16 @@ interface PaneProps {
      * squeeze the content to nothing.
      */
     chromePlacement?: PaneChromePlacement;
+    /**
+     * The divider under the header and over the footer, where they meet the
+     * scrolling content. `scroll` (default) shows the header's divider only
+     * while the content is scrolled down, and the footer's only while more
+     * content lies below — never when the content fits — once
+     * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
+     * the pane; unwired, neither shows. `always` shows both; `none` neither.
+     * The line is drawn inside the chrome, so no state moves the content.
+     */
+    chromeDividers?: PaneChromeDividers;
     /** Root semantics. Defaults to `div`. */
     element?: PaneElement;
     /** Scrolling content semantics. Defaults to `div`. */
@@ -73,13 +90,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'>;
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers'>;
 /**
  * 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, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };
+export { Pane, 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-AK67F6QN.js';
+export { Pane } from './chunk-EZVNC4J6.js';
 
 
 //# sourceMappingURL=pane.js.map

package/dist/{panel-toolbar-C8sF-YZC.d.ts → panel-toolbar-BN4x0rth.d.ts}

@@ -46,8 +46,9 @@ interface PanelToggle {
  * panel's copy is inert), so give it no `id`s.
  *
  * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,
- * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`; it keeps a
- * bottom divider unless `dividerSides` says otherwise.
+ * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`. It draws no
+ * divider of its own: the panel's `Pane` draws the line under it while the
+ * content is scrolled (its `chromeDividers`, wired by `wireScrollDividers`).
  */
 interface PanelToolbar extends ToolbarConfig {
     /** Accessible name of the panel's toolbar. */

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-MOBRFZH3.js';
+export { Select } from './chunk-OUK6QRDR.js';
 
 
 

package/dist/split-view.d.ts

@@ -23,10 +23,10 @@ interface SplitViewResizable extends Pick<ResizableRegionProps, 'separator' | 'h
 type SplitViewCompactViewToolbars = Pick<NavStackView, 'leading' | 'center' | 'toolbar' | 'bottomToolbar'>;
 /**
  * The compact `NavStack`'s configuration: its toolbar configuration, back
- * control, and persistent bottom toolbar forward to the stack, and `list` /
- * `detail` give each view its own toolbar groups.
+ * control, persistent bottom toolbar, and chrome dividers forward to the
+ * stack, and `list` / `detail` give each view its own toolbar groups.
  */
-interface SplitViewCompactStack extends Pick<NavStackProps, 'toolbarConfig' | 'backIcon' | 'backText' | 'hideToolbar' | 'bottomToolbar'> {
+interface SplitViewCompactStack extends Pick<NavStackProps, 'toolbarConfig' | 'backIcon' | 'backText' | 'hideToolbar' | 'bottomToolbar' | 'chromeDividers'> {
     /** Toolbar content for the list (root) view. */
     list?: SplitViewCompactViewToolbars;
     /** Toolbar content for the pushed detail view. */

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-O3EXIBEZ.js';
+import { NavStack } from './chunk-PWXNJS2B.js';
 import { ResizableRegion } from './chunk-VHADGP3B.js';
 
 
@@ -58,7 +58,8 @@ function SplitView({
             backText: compactStack.backText,
             toolbarConfig: compactStack.toolbarConfig,
             hideToolbar: compactStack.hideToolbar,
-            bottomToolbar: compactStack.bottomToolbar
+            bottomToolbar: compactStack.bottomToolbar,
+            chromeDividers: compactStack.chromeDividers
           }
         )
       }

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from './nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.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, and persistent bottom toolbar forward to the stack, and `list` /\n * `detail` give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  'toolbarConfig' | 'backIcon' | 'backText' | 'hideToolbar' | 'bottomToolbar'\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        />\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/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from './nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.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"]}

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-T4UZTNZ4.js';
+export { StateBanner } from './chunk-EVYKTVBQ.js';
 
 
 

package/dist/styles/app-tab.css

@@ -124,6 +124,37 @@
   width: 2rem;
   min-width: 2rem;
 }
+/* In a TabBar, the tab styles itself in the context of its parent strip. A
+   segmented strip's outer ends follow the pill track: the first tab's leading
+   corners, and a filled strip's last tab's trailing corners, are pill-rounded
+   so each end is concentric with the track (TabBar insets a compact strip's
+   tabs to match). Only fill allocation carries the last tab to the track's
+   trailing end; an intrinsic strip's last tab stops short of it and keeps the
+   segment radius, as do the corners between tabs. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs
+  > .kui-app-tab:first-child {
+  border-start-start-radius: var(--kui-radius-pill);
+  border-end-start-radius: var(--kui-radius-pill);
+}
+.kui-tab-bar[data-presentation="segmented"][data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > .kui-app-tab:last-child {
+  border-start-end-radius: var(--kui-radius-pill);
+  border-end-end-radius: var(--kui-radius-pill);
+}
+/* Fill allocation shares the strip equally and centers each tab's content. */
+.kui-tab-bar[data-allocation="fill"] .kui-tab-bar__tabs > .kui-app-tab {
+  min-width: 0;
+  flex: 1 1 0;
+}
+.kui-tab-bar[data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > .kui-app-tab
+  > .kui-app-tab__select {
+  width: 100%;
+  justify-content: center;
+}
 .kui-app-tab__trailing {
   display: grid;
   min-width: 1.275rem;

package/dist/styles/badge.css

@@ -64,17 +64,6 @@
 }
 
 .kui-badge[data-appearance="solid"] {
-  /* A placeholder's skeleton inside a solid badge: the generic text-color tint
-     is nearly invisible on the saturated fill, so derive it from the badge's
-     own foreground instead, which contrasts with the fill in every tone and
-     color scheme. Quiet and outline badges sit on a pale fill and keep the
-     generic tint. */
-  --_kui-skeleton-fill: color-mix(
-    in srgb,
-    var(--_kui-badge-on-solid) 45%,
-    transparent
-  );
-
   color: var(--_kui-badge-on-solid);
   background: var(--_kui-badge-fill-solid);
 }
@@ -108,3 +97,22 @@
   border-radius: 50%;
   background: var(--_kui-badge-fill-solid);
 }
+
+/* A multiple icon-only Select's count badge, in the trigger's end slot after
+   its fixed icon, sits 4px from the icon (the caret keeps its 12px after it).
+   The summary that ends the Select's label (and accessible name) stays inline
+   text, so a visible label reads "Labels: Bug, Docs" in place of the hidden
+   value. */
+.kui-select > .kui-badge[slot="end"] {
+  margin-inline-start: 0.25rem;
+}
+
+/* A StateBanner's badge follows its title inline and is taller than the
+   title's line. Negative block margins keep it out of the line-height
+   calculation, so a wrapped title's lines stay evenly spaced whichever line
+   the badge lands on. */
+.kui-state-banner__copy > .kui-badge {
+  margin-block: -0.5em;
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  vertical-align: baseline;
+}

package/dist/styles/collapsible-panel.css

@@ -413,12 +413,15 @@
     --kui-collapsible-panel-restore-inset,
     1rem
   );
-  /* The corner owns the inset, so a FloatingToolbar composed here floats
-     from this point instead of adding its own inset on top. */
-  --kui-floating-toolbar-inset: 0px;
   position: absolute;
   /* Hidden while an open side overlay covers the content (see below). */
-  visibility: var(--_kui-floating-covered, inherit);
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
   z-index: var(
     --kui-collapsible-panel-restore-z,
     calc(var(--kui-collapsible-panel-overlay-z, 40) - 2)
@@ -470,7 +473,8 @@
    corner) are hidden, not merely stacked beneath it: they never paint over
    the overlay whatever stacking context an app puts them in, and hidden they
    leave the tab order and the accessibility tree. They come back as the
-   overlay closes. The flag is read by FloatingToolbar and the
+   overlay closes. The CollapsiblePanel's own covered context,
+   `--_kui-collapsible-panel-covered`, is read by FloatingToolbar and the
    layouts' restore corners; the overlay panels themselves are exempt, so
    their own floating controls stay. */
 [data-collapsible-overlay="true"]:has(
@@ -479,11 +483,11 @@
       .kui-collapsible-panel--right
     ):not([data-collapsed="true"])
 ) {
-  --_kui-floating-covered: hidden;
+  --_kui-collapsible-panel-covered: hidden;
 }
 
 [data-collapsible-overlay="true"] .kui-collapsible-panel {
-  --_kui-floating-covered: initial;
+  --_kui-collapsible-panel-covered: initial;
 }
 
 /* A static overlay panel sets the flag on its container and clears it again
@@ -499,7 +503,7 @@
       )[data-presentation="overlay"]:not([data-collapsed="true"])
   )
 ) {
-  --_kui-floating-covered: hidden;
+  --_kui-collapsible-panel-covered: hidden;
 }
 
 :where(
@@ -511,7 +515,7 @@
     )
   )
   > .kui-collapsible-panel[data-presentation="overlay"] {
-  --_kui-floating-covered: initial;
+  --_kui-collapsible-panel-covered: initial;
 }
 
 /* A button does not stretch between its insets the way a div does, so the

package/dist/styles/floating-toolbar.css

@@ -1,8 +1,7 @@
 .kui-floating-toolbar {
   /* Inset from the container edges: a top toolbar sits 8px in, so this floats an
      extra 8px past that (--kui-space-m = 16px). Override the token to reposition,
-     on the toolbar or on an ancestor composition boundary: a Workbench restore
-     corner sets it to 0 because the corner already owns the inset. */
+     on the toolbar or on an ancestor composition boundary. */
   --_kui-floating-toolbar-inset: var(
     --kui-floating-toolbar-inset,
     var(--kui-space-m, 1rem)
@@ -14,16 +13,36 @@
   position: absolute;
   z-index: 4;
   /* A layout whose open side overlay covers this toolbar's region (a
-     Workbench rail, a CollapsiblePanel, a ResizableRegion) flags that region,
-     and the toolbar hides — out of the tab order and the accessibility tree —
-     rather than risk painting over the overlay. */
-  visibility: var(--_kui-floating-covered, inherit);
+     Workbench rail, a CollapsiblePanel, a ResizableRegion) provides its own
+     covered context to that region, and the toolbar hides — out of the tab
+     order and the accessibility tree — rather than risk painting over the
+     overlay. Any enclosing layout's covered context hides it. */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
   display: flex;
   color-scheme: dark;
   align-items: center;
   gap: var(--kui-space-xs, 0.5rem);
 }
 
+/* In a layout's restore corner the corner already owns the inset, so the
+   toolbar floats from the corner itself. Zero specificity: the toolbar's own
+   `inset` (or an app rule on the toolbar) still wins, while a token inherited
+   from outside the corner does not. */
+:where(
+    .kui-workbench__restore,
+    .kui-collapsible-panel__restore,
+    .kui-resizable-region__restore
+  )
+  :where(.kui-floating-toolbar) {
+  --kui-floating-toolbar-inset: 0px;
+}
+
 .kui-floating-toolbar[data-position^="bottom"] {
   inset-block-end: var(--_kui-floating-toolbar-inset);
 }

package/dist/styles/list-header.css

@@ -88,18 +88,6 @@
   text-align: start;
 }
 
-.kui-list-header__label {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  font-size: var(--kui-font-xs);
-  font-weight: 650;
-  letter-spacing: 0.04em;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
 .kui-list-header__action,
 .kui-list-header__action-layer {
   display: grid;

package/dist/styles/list.css

@@ -110,19 +110,19 @@
   overscroll-behavior-y: contain;
 }
 
-.kui-list[divider-sides*="t"] {
+.kui-list:is([divider-sides*="t"], [data-scroll-divider*="t"]) {
   --_kui-list-divider-top: var(--kui-list-divider-color);
 }
 
-.kui-list[divider-sides*="r"] {
+.kui-list:is([divider-sides*="r"], [data-scroll-divider*="r"]) {
   --_kui-list-divider-right: var(--kui-list-divider-color);
 }
 
-.kui-list[divider-sides*="b"] {
+.kui-list:is([divider-sides*="b"], [data-scroll-divider*="b"]) {
   --_kui-list-divider-bottom: var(--kui-list-divider-color);
 }
 
-.kui-list[divider-sides*="l"] {
+.kui-list:is([divider-sides*="l"], [data-scroll-divider*="l"]) {
   --_kui-list-divider-left: var(--kui-list-divider-color);
 }
 

package/dist/styles/nav-stack.css

@@ -69,24 +69,6 @@
   background: var(--kui-color-surface);
 }
 
-/* A navigation bar is one control band tall: the toolbar keeps its inline
-   padding and any claimed block inset, but drops the block gap so the bar is
-   the band height (44px) plus the unsafe inset it clears. */
-.kui-nav-stack__chrome > .kui-nav-stack__toolbar {
-  min-height: calc(
-    var(--_kui-toolbar-band) + var(--_kui-toolbar-safe-block-start) +
-      var(--_kui-toolbar-safe-block-end)
-  );
-  padding-block: var(--_kui-toolbar-safe-block-start)
-    var(--_kui-toolbar-safe-block-end);
-}
-
-/* The title fills the leading zone beside the back control and truncates. */
-.kui-nav-stack__title {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
 .kui-nav-stack__viewport {
   --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
   --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
@@ -179,10 +161,45 @@
   padding-block-end: var(--_kui-nav-stack-safe-block-end);
   padding-inline: var(--_kui-nav-stack-safe-inline-start)
     var(--_kui-nav-stack-safe-inline-end);
-  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
+  border-block-start: 1px solid
+    var(--_kui-nav-stack-bottom-divider, transparent);
   background: var(--kui-color-surface);
 }
 
+/* The live chrome is the containing block of its scroll divider; a
+   cross-fading copy stays absolutely positioned. */
+.kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
+  position: relative;
+}
+
+/* Chrome dividers: with `chromeDividers="scroll"` (the default, no
+   attribute) the top chrome draws a line along its bottom edge while the
+   active view's content is scrolled beneath it, and the bottom toolbar
+   colors its 1px top border while more content lies below it — never when
+   the content fits. `wireScrollDividers` reports that state through
+   `data-scroll-divider`; `always` draws both lines without it, and `none`
+   neither, whatever it reports. The chrome's line is an overlaid 1px pseudo-element
+   (whatever the chrome holds never covers it) and the bottom's border is
+   always there, so showing either never moves the chrome, the toolbar, or
+   the content. A cross-fading chrome copy keeps the line its snapshot had. */
+.kui-nav-stack:not([data-chrome-dividers])
+  > .kui-nav-stack__chrome[data-scroll-divider*="b"]::after,
+.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__chrome::after {
+  position: absolute;
+  block-size: 1px;
+  background: var(--kui-color-neutral-border-normal);
+  content: "";
+  inset-block-end: 0;
+  inset-inline: 0;
+  pointer-events: none;
+}
+
+.kui-nav-stack:not([data-chrome-dividers])
+  > .kui-nav-stack__bottom[data-scroll-divider*="t"],
+.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__bottom {
+  --_kui-nav-stack-bottom-divider: var(--kui-color-neutral-border-normal);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-nav-stack__view,
   .kui-nav-stack__chrome,
@@ -191,3 +208,13 @@
     transition: none;
   }
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a NavStack fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="nav-stack"]:only-child {
+  height: 100%;
+}

package/dist/styles/pane.css

@@ -147,6 +147,37 @@
   grid-area: footer;
 }
 
+/* Chrome dividers: one line under the header and one over the footer, where
+   the pinned chrome meets the scrolling content, whatever the chrome holds.
+   `chromeDividers="scroll"` (the default, no attribute) draws each only while
+   `wireScrollDividers` reports content scrolled away beneath it through
+   `data-scroll-divider` on the slot; `always` draws both; `none` neither. The
+   line is an inset shadow inside the slot, so showing or hiding it never
+   moves the chrome or the content. */
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: transparent;
+}
+
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar) {
+  box-shadow: inset 0 -1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane > .kui-pane__footer {
+  box-shadow: inset 0 1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane:not([data-chrome-dividers])
+  > :is(.kui-pane__header, .kui-pane__toolbar)[data-scroll-divider*="b"],
+.kui-pane:not([data-chrome-dividers])
+  > .kui-pane__footer[data-scroll-divider*="t"],
+.kui-pane[data-chrome-dividers="always"]
+  > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: var(
+    --kui-pane-separator-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
 /* `chromePlacement="auto"`: the header and footer stay pinned while the pane
    is tall enough; below 480px of height (30rem, so it scales with the text
    size) the whole pane scrolls as one column instead, so tall chrome can never
@@ -177,3 +208,22 @@
     overflow: visible;
   }
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a Pane fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}
+
+/* As the only child of a NavStack view or a TabScaffold scene, a Pane fills
+   it too, so its content owns the scroll and its header and footer stay
+   pinned; the view or scene then never scrolls (it hands the Pane its
+   safe-area edge context, which the Pane's slots apply). */
+:is(.kui-nav-stack__view, .kui-tab-scaffold__scene)
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}