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

package/dist/styles/catalog/components/catalog-stage.css

@@ -1,55 +1,39 @@
-/* The preview stage fills the work area's scroller — and grows with a taller
-   specimen, never shrinking under it — behind a transparency checkerboard,
-   so a specimen's own surface (or lack of one) stays visible. */
+/* The preview stage fills the work area's scroller and grows with a taller
+   specimen, never shrinking under it. The default checkerboard shares the
+   sunken Pane's translucent surface instead of painting a second layer. */
 .kui-catalog__stage {
   flex: 1 0 auto;
-  background-color: var(--kui-color-surface-lowered);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/svg%3E");
-  background-size: 1.5rem 1.5rem;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h8v8H0zM8 8h8v8H8z'/%3E%3C/svg%3E");
+  background-size: 1rem 1rem;
+  padding: var(--kui-space-xs);
 }
 
-/* The centered specimen canvas, at the catalog's reading measure. */
+.kui-catalog__stage[data-background-style="vertical-stripes"] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h8v16H0z'/%3E%3C/svg%3E");
+  background-size: 1rem 1rem;
+}
+
+.kui-catalog__stage[data-background-style="surface"] {
+  background-color: var(--kui-color-surface);
+  background-image: none;
+  background-size: auto;
+}
+
+.kui-catalog__stage[data-background-style="sunken"] {
+  background-color: transparent;
+  background-image: none;
+  background-size: auto;
+}
+
+/* Align the specimen canvas with the work area's reading start. */
 .kui-catalog__canvas {
   position: relative;
   display: grid;
   width: min(100%, 70rem);
   min-width: 0;
   min-height: 100%;
-  margin-inline: auto;
   padding: var(--kui-layout-content-gap);
   box-sizing: border-box;
-  place-items: center;
-}
-
-/* `wireCatalogGeometryOverlay` appends the bound, border, and margin layers. */
-/* css-ownership: allow-root kui-catalog__geometry-bound -- The catalog wire appends measured specimen bound layers at runtime. */
-/* css-ownership: allow-root kui-catalog__geometry-border -- The catalog wire appends computed border layers at runtime. */
-/* css-ownership: allow-root kui-catalog__geometry-margin -- The catalog wire appends computed margin layers at runtime. */
-.kui-catalog__geometry-overlay {
-  position: absolute;
-  z-index: 3;
-  pointer-events: none;
-  inset: 0;
-}
-
-.kui-catalog__geometry-bound,
-.kui-catalog__geometry-border,
-.kui-catalog__geometry-margin {
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-}
-
-.kui-catalog__geometry-bound {
-  border: 1px dashed color-mix(in srgb, var(--kui-color-text) 40%, transparent);
-}
-
-.kui-catalog__geometry-border {
-  border: 0 solid
-    color-mix(in srgb, var(--kui-color-brand-on-quiet) 72%, transparent);
-}
-
-.kui-catalog__geometry-margin {
-  background: color-mix(in srgb, #f6a94c 55%, transparent);
+  place-items: start;
 }

package/dist/styles/catalog/components/catalog.css

@@ -4,30 +4,6 @@
   height: 100%;
 }
 
-/* The brand mark, sized to sit inside a toolbar group. */
-.kui-catalog__mark {
-  display: block;
-  width: 2.125rem;
-  height: 2.125rem;
-}
-
-.kui-catalog__filter {
-  width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  padding: 0.5rem 0.625rem;
-  border: 1px solid var(--kui-color-neutral-border-normal);
-  border-radius: var(--kui-layout-rounded-radius);
-  color: var(--kui-color-text);
-  background: var(--kui-color-surface);
-  font: inherit;
-}
-
-.kui-catalog__filter:focus-visible {
-  outline: 2px solid var(--kui-color-focus);
-  outline-offset: 2px;
-}
-
 .kui-catalog [data-catalog-filter-empty],
 .kui-catalog [data-catalog-section][hidden],
 .kui-catalog [data-catalog-entry-name][hidden],

package/dist/styles/components/collections/list/list.css

@@ -5,6 +5,8 @@
      omits `gap` or `flex` never inherits its ancestor's; the component's inline
      style overrides these defaults for the props it does set. */
   --_kui-list-gap: 0;
+  --_kui-list-column-gap: var(--_kui-list-gap);
+  --_kui-list-row-gap: var(--_kui-list-gap);
   --_kui-list-flex: 0 1 auto;
   --_kui-list-inset-top: 0;
   --_kui-list-inset-right: 0;
@@ -26,7 +28,8 @@
   align-items: stretch;
   align-content: space-between;
   justify-content: flex-start;
-  gap: var(--_kui-list-gap, 0);
+  column-gap: var(--_kui-list-column-gap);
+  row-gap: var(--_kui-list-row-gap);
   box-shadow:
     inset 0 1px var(--_kui-list-divider-top),
     inset -1px 0 var(--_kui-list-divider-right),

package/dist/styles/components/feedback/anchored-surface/anchored-surface.css

@@ -0,0 +1,15 @@
+.kui-anchored-surface {
+  box-sizing: border-box;
+  inset: auto;
+  width: max-content;
+  max-width: calc(100vw - 2 * var(--kui-space-xs, 8px));
+  max-height: calc(100dvh - 2 * var(--kui-space-xs, 8px));
+  overflow: auto;
+  padding: var(--kui-anchored-surface-inset, var(--kui-space-xs, 8px));
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-anchored-surface-radius, var(--kui-radius-m));
+  color: var(--kui-color-text, inherit);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+  font: inherit;
+}

package/dist/styles/components/layout/grid/grid.css

@@ -3,6 +3,8 @@
   /* Private per-instance values are reset on every Grid so a nested Grid never
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-grid-gap: var(--kui-grid-gap);
+  --_kui-grid-column-gap: var(--_kui-grid-gap);
+  --_kui-grid-row-gap: var(--_kui-grid-gap);
   --_kui-grid-flex: 0 1 auto;
   --_kui-grid-inset-top: 0;
   --_kui-grid-inset-right: 0;
@@ -17,7 +19,8 @@
     var(--_kui-grid-inset-bottom, 0) var(--_kui-grid-inset-left, 0);
   flex: var(--_kui-grid-flex, initial);
   grid-template-columns: repeat(var(--_kui-grid-columns), minmax(0, 1fr));
-  gap: var(--_kui-grid-gap, var(--kui-grid-gap));
+  column-gap: var(--_kui-grid-column-gap);
+  row-gap: var(--_kui-grid-row-gap);
 }
 
 .kui-grid[data-control-insets*="t"] {

package/dist/styles/components/layout/row/row.css

@@ -3,6 +3,8 @@
   /* Private per-instance values are reset on every Row so a nested Row never
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-row-gap: var(--kui-row-gap);
+  --_kui-row-column-gap: var(--_kui-row-gap);
+  --_kui-row-row-gap: var(--_kui-row-gap);
   --_kui-row-flex: 0 1 auto;
   --_kui-row-inset-top: 0;
   --_kui-row-inset-right: 0;
@@ -21,7 +23,8 @@
   align-items: stretch;
   align-content: space-between;
   justify-content: flex-start;
-  gap: var(--_kui-row-gap, var(--kui-row-gap));
+  column-gap: var(--_kui-row-column-gap);
+  row-gap: var(--_kui-row-row-gap);
 }
 
 .kui-row[data-control-insets*="t"] {

package/dist/styles/components/navigation/tab-navigator/tab-navigator.css

@@ -133,21 +133,37 @@
   );
   padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
     var(--_kui-tab-scaffold-safe-inline-end);
-  /* Chrome divider: with `chromeDividers="scroll"` (the default, no
-     attribute) the bar's 1px top border shows only while the active scene's
-     content continues below it — never at the scroll end or when the content
-     fits. `wireScrollDividers` reports that state through
-     `data-scroll-divider`; `always` shows it without the wiring, and `none`
-     never. The border is always there and only its color changes, so
-     showing it never moves the bar or a tab. */
+  /* The reserved 1px edge serves both the sunken-surface separator and the
+     scroll divider. Changing its color never moves the bar or a tab. */
   border-block-start: 1px solid
     var(--_kui-tab-scaffold-bar-divider, transparent);
   background: var(--kui-color-surface);
 }
 
-.kui-tab-scaffold:not([data-chrome-dividers])
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]:only-child
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="nav-stack"]:only-child
+      > [data-nav-stack-viewport]
+      > [data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:not([data-chrome-dividers])
   > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
-.kui-tab-scaffold[data-chrome-dividers="always"] > .kui-tab-scaffold__bar {
+.kui-tab-scaffold[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-tab-scaffold__bar {
   --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
 }
 

package/dist/styles/grid.css

@@ -3,6 +3,8 @@
   /* Private per-instance values are reset on every Grid so a nested Grid never
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-grid-gap: var(--kui-grid-gap);
+  --_kui-grid-column-gap: var(--_kui-grid-gap);
+  --_kui-grid-row-gap: var(--_kui-grid-gap);
   --_kui-grid-flex: 0 1 auto;
   --_kui-grid-inset-top: 0;
   --_kui-grid-inset-right: 0;
@@ -17,7 +19,8 @@
     var(--_kui-grid-inset-bottom, 0) var(--_kui-grid-inset-left, 0);
   flex: var(--_kui-grid-flex, initial);
   grid-template-columns: repeat(var(--_kui-grid-columns), minmax(0, 1fr));
-  gap: var(--_kui-grid-gap, var(--kui-grid-gap));
+  column-gap: var(--_kui-grid-column-gap);
+  row-gap: var(--_kui-grid-row-gap);
 }
 
 .kui-grid[data-control-insets*="t"] {

package/dist/styles/list.css

@@ -5,6 +5,8 @@
      omits `gap` or `flex` never inherits its ancestor's; the component's inline
      style overrides these defaults for the props it does set. */
   --_kui-list-gap: 0;
+  --_kui-list-column-gap: var(--_kui-list-gap);
+  --_kui-list-row-gap: var(--_kui-list-gap);
   --_kui-list-flex: 0 1 auto;
   --_kui-list-inset-top: 0;
   --_kui-list-inset-right: 0;
@@ -26,7 +28,8 @@
   align-items: stretch;
   align-content: space-between;
   justify-content: flex-start;
-  gap: var(--_kui-list-gap, 0);
+  column-gap: var(--_kui-list-column-gap);
+  row-gap: var(--_kui-list-row-gap);
   box-shadow:
     inset 0 1px var(--_kui-list-divider-top),
     inset -1px 0 var(--_kui-list-divider-right),

package/dist/styles/row.css

@@ -3,6 +3,8 @@
   /* Private per-instance values are reset on every Row so a nested Row never
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-row-gap: var(--kui-row-gap);
+  --_kui-row-column-gap: var(--_kui-row-gap);
+  --_kui-row-row-gap: var(--_kui-row-gap);
   --_kui-row-flex: 0 1 auto;
   --_kui-row-inset-top: 0;
   --_kui-row-inset-right: 0;
@@ -21,7 +23,8 @@
   align-items: stretch;
   align-content: space-between;
   justify-content: flex-start;
-  gap: var(--_kui-row-gap, var(--kui-row-gap));
+  column-gap: var(--_kui-row-column-gap);
+  row-gap: var(--_kui-row-row-gap);
 }
 
 .kui-row[data-control-insets*="t"] {

package/dist/styles/styles.css

@@ -24,6 +24,7 @@
 @import "./skeleton.css";
 @import "./select.css";
 @import "./popup-menu.css";
+@import "./anchored-surface.css";
 @import "./segmented-control.css";
 @import "./token-search-field.css";
 @import "./state-banner.css";

package/dist/styles/tab-navigator.css

@@ -133,21 +133,37 @@
   );
   padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
     var(--_kui-tab-scaffold-safe-inline-end);
-  /* Chrome divider: with `chromeDividers="scroll"` (the default, no
-     attribute) the bar's 1px top border shows only while the active scene's
-     content continues below it — never at the scroll end or when the content
-     fits. `wireScrollDividers` reports that state through
-     `data-scroll-divider`; `always` shows it without the wiring, and `none`
-     never. The border is always there and only its color changes, so
-     showing it never moves the bar or a tab. */
+  /* The reserved 1px edge serves both the sunken-surface separator and the
+     scroll divider. Changing its color never moves the bar or a tab. */
   border-block-start: 1px solid
     var(--_kui-tab-scaffold-bar-divider, transparent);
   background: var(--kui-color-surface);
 }
 
-.kui-tab-scaffold:not([data-chrome-dividers])
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]:only-child
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="nav-stack"]:only-child
+      > [data-nav-stack-viewport]
+      > [data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:not([data-chrome-dividers])
   > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
-.kui-tab-scaffold[data-chrome-dividers="always"] > .kui-tab-scaffold__bar {
+.kui-tab-scaffold[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-tab-scaffold__bar {
   --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
 }
 

package/dist/styles/webawesome.css

@@ -202,7 +202,10 @@
     /* Geometry stays aligned with the compact Kerf primitives. */
     --wa-border-radius-pill: 999px;
     --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
-    --wa-form-control-border-radius: var(--wa-border-radius-m);
+    --wa-form-control-border-radius: var(
+      --kui-layout-rounded-radius,
+      calc(1px + 0.6875rem)
+    );
     --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
     /* Field inset: a 1px border with 8px inside it, the same content-item
        geometry the Kerf primitives use (docs/layout.md). WA's defaults are a

package/dist/tab-navigator.d.ts

@@ -59,14 +59,21 @@ interface TabNavigatorProps<Id extends string = string> {
     tabs: readonly TabNavigatorTab<Id>[];
     /** The controlled active tab id (the app owns selection). */
     active: NoInfer<Id>;
+    /**
+     * The bar's top separator. `auto` (default) draws it against a sunken active
+     * work surface and otherwise follows `chromeDividers`; `hidden` suppresses
+     * the line, including a scroll divider.
+     */
+    separator?: 'auto' | 'hidden';
     /**
      * The line over the tab bar, where it meets the active scene. `scroll`
      * (default) shows it only while more of the scene's content lies below —
      * never at the scroll end or when the content fits — once
      * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
      * the scaffold; unwired, it does not show. `always` shows it without the
-     * wiring; `none` never, even when wired. The line is the bar's own 1px top
-     * border, so no state moves the bar or a tab.
+     * wiring; `none` suppresses that scroll divider. A sunken active work
+     * surface still draws the separator unless `separator="hidden"`. The line
+     * is the bar's own 1px top border, so no state moves the bar or a tab.
      */
     chromeDividers?: 'scroll' | 'always' | 'none';
     className?: string;
@@ -81,6 +88,6 @@ interface TabNavigatorProps<Id extends string = string> {
  * 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 TabNavigator<Id extends string>({ id, label, tabs, active, chromeDividers, className, slot, }: TabNavigatorProps<Id>): SafeHtml;
+declare function TabNavigator<Id extends string>({ id, label, tabs, active, separator, chromeDividers, className, slot, }: TabNavigatorProps<Id>): SafeHtml;
 
 export { TabNavigator, type TabNavigatorProps, type TabNavigatorTab };

package/dist/tab-navigator.js

@@ -6,6 +6,7 @@ function TabNavigator({
   label,
   tabs,
   active,
+  separator = "auto",
   chromeDividers = "scroll",
   className = "",
   slot
@@ -17,6 +18,7 @@ function TabNavigator({
       id,
       "data-component": "tab-scaffold",
       "data-tab-scaffold-id": id,
+      "data-separator": separator,
       "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
       slot,
       children: [

package/dist/tab-navigator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation/tab-navigator/tab-navigator.tsx"],"names":[],"mappings":"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","file":"tab-navigator.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport type { PaneAppearance } from '../../layout/pane/pane.js';\n\ninterface TabNavigatorTabBase<Id extends string> {\n  id: Id;\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: KerfUiContent;\n  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n  /** Add 8px to every side of a plain scene's scrolling content. */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on this scene. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while this scene is active. */\n  outlined?: boolean;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabNavigatorTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabNavigatorTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabNavigatorTab<Id extends string = string> =\n  TabNavigatorTabBase<Id> &\n    (TabNavigatorTabCountBadge | TabNavigatorTabDotBadge);\n\nexport interface TabNavigatorProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabNavigatorTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` never, even when wired. The line is the bar's own 1px top\n   * border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab navigator: 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-navigator`'s `wireTabNavigator`.\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 TabNavigator<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  chromeDividers = 'scroll',\n  className = '',\n  slot,\n}: TabNavigatorProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={tab.appearance === 'sunken' ? 'sunken' : undefined}\n            data-deep-inset={tab.deepInset ? 'true' : undefined}\n            data-outlined={\n              tab.id === active && tab.outlined ? 'true' : undefined\n            }\n            role={tab.tabIndex === undefined ? undefined : 'tabpanel'}\n            aria-label={tab.tabIndex === undefined ? undefined : tab.label}\n            aria-hidden={String(tab.id !== active)}\n            tabindex={\n              tab.id === active\n                ? tab.tabIndex\n                : tab.tabIndex === undefined\n                  ? undefined\n                  : -1\n            }\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => {\n          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\n            <button\n              type=\"button\"\n              class=\"kui-tab-scaffold__tab\"\n              role=\"tab\"\n              data-tab-scaffold-tab={tab.id}\n              aria-selected={String(tab.id === active)}\n              tabindex={tab.id === active ? '0' : '-1'}\n              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/tab-navigator/tab-navigator.tsx"],"names":[],"mappings":"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","file":"tab-navigator.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport type { PaneAppearance } from '../../layout/pane/pane.js';\n\ninterface TabNavigatorTabBase<Id extends string> {\n  id: Id;\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: KerfUiContent;\n  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n  /** Add 8px to every side of a plain scene's scrolling content. */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on this scene. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while this scene is active. */\n  outlined?: boolean;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabNavigatorTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabNavigatorTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabNavigatorTab<Id extends string = string> =\n  TabNavigatorTabBase<Id> &\n    (TabNavigatorTabCountBadge | TabNavigatorTabDotBadge);\n\nexport interface TabNavigatorProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabNavigatorTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  /**\n   * The bar's top separator. `auto` (default) draws it against a sunken active\n   * work surface and otherwise follows `chromeDividers`; `hidden` suppresses\n   * the line, including a scroll divider.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` suppresses that scroll divider. A sunken active work\n   * surface still draws the separator unless `separator=\"hidden\"`. The line\n   * is the bar's own 1px top border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab navigator: 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-navigator`'s `wireTabNavigator`.\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 TabNavigator<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  className = '',\n  slot,\n}: TabNavigatorProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={tab.appearance === 'sunken' ? 'sunken' : undefined}\n            data-deep-inset={tab.deepInset ? 'true' : undefined}\n            data-outlined={\n              tab.id === active && tab.outlined ? 'true' : undefined\n            }\n            role={tab.tabIndex === undefined ? undefined : 'tabpanel'}\n            aria-label={tab.tabIndex === undefined ? undefined : tab.label}\n            aria-hidden={String(tab.id !== active)}\n            tabindex={\n              tab.id === active\n                ? tab.tabIndex\n                : tab.tabIndex === undefined\n                  ? undefined\n                  : -1\n            }\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => {\n          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\n            <button\n              type=\"button\"\n              class=\"kui-tab-scaffold__tab\"\n              role=\"tab\"\n              data-tab-scaffold-tab={tab.id}\n              aria-selected={String(tab.id === active)}\n              tabindex={tab.id === active ? '0' : '-1'}\n              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}

package/dist/token-search-field.js

@@ -1,4 +1,4 @@
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-3SXWV2IR.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-VLGQIYZ5.js';
 
 
 

package/dist/toolbar-control-group.js

@@ -1,4 +1,4 @@
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-RRCD3A6G.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-MTCTX25G.js';
 
 
 

package/dist/toolbar-text.js

@@ -1,4 +1,4 @@
-export { ToolbarText } from './chunk-VHXHLZ6R.js';
+export { ToolbarText } from './chunk-3DXHNLME.js';
 
 
 

package/dist/{types-C9BubXfz.d.ts → types-CXrh9Wyx.d.ts}

@@ -44,7 +44,10 @@ interface CatalogBrand {
 }
 type CatalogStageRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-catalog-stage'?: never;
+    'data-background-style'?: never;
 }>;
+/** Background used behind catalog specimens. */
+type CatalogBackgroundStyle = 'checkerboard' | 'vertical-stripes' | 'surface' | 'sunken';
 /**
  * The Catalog sidebar's configuration, forwarded to its Workbench left rail.
  * Everything is optional; omitted fields keep the Catalog's defaults.
@@ -75,7 +78,8 @@ interface CatalogProps {
     secondarySections?: CatalogSecondaryGroup;
     sidebarFooter?: KerfUiContent;
     status?: KerfUiContent;
-    geometryOverlay?: boolean;
+    /** Preview background (default `checkerboard`). */
+    backgroundStyle?: CatalogBackgroundStyle;
     /** Consumer-owned data attributes applied to the preview stage. */
     stageRootAttributes?: CatalogStageRootAttributes;
     selectAction?: string;
@@ -114,4 +118,4 @@ interface CatalogProps {
     slot?: string;
 }
 
-export type { CatalogResource as C, CatalogProps as a, CatalogBrand as b, CatalogEntry as c, CatalogRelated as d, CatalogSecondaryGroup as e, CatalogSection as f, CatalogStageRootAttributes as g };
+export type { CatalogResource as C, CatalogProps as a, CatalogBackgroundStyle as b, CatalogBrand as c, CatalogEntry as d, CatalogRelated as e, CatalogSecondaryGroup as f, CatalogSection as g, CatalogStageRootAttributes as h };

package/dist/value-table.js

@@ -1,4 +1,4 @@
-export { ValueTable, ValueTableRow } from './chunk-H7ZJEI3H.js';
+export { ValueTable, ValueTableRow } from './chunk-DL55BSQX.js';
 
 
 

package/dist/wire-catalog.d.ts

@@ -60,14 +60,6 @@ interface CatalogRevealOptions {
  * moving focus. Returns a cancellation function for rapid selection changes.
  */
 declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
-/**
- * Keep a Catalog's opt-in geometry overlay synchronized with its preview.
- * Specimens receive computed border highlights (or a dashed bound when they
- * have no border and are transparent), while positive computed margins use
- * devtools-style orange bands. CSS/stylesheet-only changes are observed too.
- * Returns a disposer.
- */
-declare function wireCatalogGeometryOverlay(root: HTMLElement): () => void;
 /**
  * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar
  * item selection (and the related-entry popup menu), the sidebar collapse toggle, and
@@ -79,4 +71,4 @@ declare function wireCatalogGeometryOverlay(root: HTMLElement): () => void;
  */
 declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, collapsed, sidebarSize, sidebarStorageKey, id: catalogId, }: WireCatalogOptions): () => void;
 
-export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog, wireCatalogGeometryOverlay };
+export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog };