@kerfjs/ui 5.0.0-beta.110 → 5.0.0-beta.111

package/dist/styles/webawesome.css

@@ -38,7 +38,7 @@
     );
 
     --wa-color-text-normal: light-dark(#1d1d1f, #f5f5f7);
-    --wa-color-text-quiet: light-dark(#6e6e73, #aeaeb2);
+    --wa-color-text-quiet: light-dark(#646469, #aeaeb2);
     --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
     --wa-color-overlay-modal: light-dark(
@@ -203,7 +203,7 @@
       var(--wa-color-danger-fill-loud) 78%,
       var(--wa-color-neutral-on-normal)
     );
-    --wa-color-danger-on-quiet: light-dark(#c20b20, #ff696c);
+    --wa-color-danger-on-quiet: light-dark(#c20b20, #ff8588);
     --wa-color-danger-on-normal: light-dark(#8e0717, #ff8a8c);
     --wa-color-danger-on-loud: light-dark(#fff, #111113);
 

package/dist/surface-scaffold.d.ts

@@ -62,6 +62,8 @@ type DialogSurfaceFooterPresentation = 'docked' | 'floating';
  * material, so content scrolls visibly beneath the title bar.
  */
 type DialogSurfaceHeaderPresentation = 'docked' | 'floating';
+/** The built-in close control's visual weight; `normal` keeps the default. */
+type DialogSurfaceCloseEmphasis = 'normal' | 'quiet';
 /**
  * Application `data-*` identity on the DialogSurface root, such as
  * `data-key`; the surface's own configuration attributes stay protected.
@@ -117,6 +119,8 @@ interface DialogSurfaceOptions {
     lightDismiss?: boolean;
     /** The close button's accessible name (default `Close`). */
     closeLabel?: string;
+    /** Soften the built-in close control without changing its 40px target. */
+    closeEmphasis?: DialogSurfaceCloseEmphasis;
     size?: DialogSurfaceSize;
     presentation?: DialogSurfacePresentation;
     /** Modal preferred width. Takes precedence over size, within the viewport cap. */
@@ -210,7 +214,7 @@ interface DialogSurfaceOptions {
  * floating header and footer measurement, the bottom sheet's keyboard
  * clearance and grabber, and re-render resilience while open.
  */
-declare function DialogSurface({ id, label, labelledBy, describedBy, alert, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+declare function DialogSurface({ id, label, labelledBy, describedBy, alert, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, closeEmphasis, children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
 /** Where a PopoverDialogSurface appears: the top layer, or in flow. */
 type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';
 /** Application `data-*` metadata on the surface root. */
@@ -277,4 +281,4 @@ interface PopupSurfaceProps {
 /** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
 declare function PopupSurface({ children, inset, className, slot, }: PopupSurfaceProps): kerfjs.SafeHtml;
 
-export { type DialogCloseSource, type DialogRequestCloseDetail, DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfaceName, type DialogSurfaceOptions, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset, closeDialog, openDialog };
+export { type DialogCloseSource, type DialogRequestCloseDetail, DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceCloseEmphasis, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfaceName, type DialogSurfaceOptions, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset, closeDialog, openDialog };

package/dist/surface-scaffold.js

@@ -1,4 +1,4 @@
-export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-6CDILXF4.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-VGECEXM6.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
 

package/dist/surface-tint-DQgYCaP9.d.ts

@@ -0,0 +1,25 @@
+import { CssColor } from './css-values.js';
+
+/** The color scheme an app declares for a {@link SurfaceTint}'s color. */
+type SurfaceTintScheme = 'light' | 'dark';
+/**
+ * A scoped tint for a layout surface: the app's color (usually sampled from
+ * artwork it already knows) and the scheme that color belongs to. Kerf does no
+ * color detection; `scheme` says whether the color reads as a light or a dark
+ * surface. Inside the scope the surface, raised surface, text, quiet text, and
+ * everything built on them (quiet fills, separators' backdrop, the chrome
+ * material) re-derive from the color, with lightness clamped so text keeps
+ * WCAG AA over any color.
+ */
+interface SurfaceTint {
+    color: CssColor;
+    scheme: SurfaceTintScheme;
+    /**
+     * An optional accent (usually the artwork's most vivid color). The scope's
+     * brand ramp re-derives from it: loud fills and their text, brand text and
+     * links, text on brand fills, and the focus ring, each clamped to keep AA.
+     */
+    accent?: CssColor;
+}
+
+export type { SurfaceTint as S, SurfaceTintScheme as a };

package/dist/tab-navigator.d.ts

@@ -1,7 +1,8 @@
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { PaneAppearance, SurfaceTint, ScrollEdge } from './pane.js';
+import { PaneAppearance, ScrollEdge } from './pane.js';
 import { CssColor } from './css-values.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
 import './scroll-clearance-BikHljTc.js';
 
 interface TabNavigatorTabBase<Id extends string> {

package/dist/tab-navigator.js

@@ -1,5 +1,6 @@
-import { surfaceTintAttributes, joinStyles, scrollEdgeAttributes } from './chunk-SQ5DH66U.js';
+import { scrollEdgeAttributes } from './chunk-IRC5N7FA.js';
 import { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+import { surfaceTintAttributes, joinStyles } from './chunk-ITENVZ6Q.js';
 import { Badge } from './chunk-RMWNO6BA.js';
 
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';

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 {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.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  /**\n   * Paint this scene in an app-chosen color (a `@kerfjs/ui/css-values` color\n   * builder). It replaces the appearance's fill. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for this scene: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\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\n/**\n * How a {@link TabNavigator}'s tab bar relates to the active scene: `docked`\n * below it, or `overlay` laid over its bottom edge on the translucent chrome\n * material, so the scene's content scrolls visibly beneath the bar.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath\n * it, until the scene scrolls to its end.\n */\nexport type TabNavigatorBarPresentation = 'docked' | 'overlay' | 'clear';\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  /**\n   * `docked` (default) gives the tab bar its own band below the scenes.\n   * `overlay` lays it over the active scene's bottom edge on the translucent\n   * chrome material (opaque under reduced transparency, increased contrast,\n   * or without `backdrop-filter`; `Canvas` in forced colors), so content\n   * scrolls visibly beneath it, as under an iOS tab bar. `wireTabNavigator`\n   * measures the live bar (bottom safe area included) and the scenes hand\n   * its height to their content as the block-end `--kui-edge-inset-*`\n   * context, so a plain scene, a sole `Pane`, or a `NavStack` (and its own\n   * bottom toolbar, which then sits above the bar) rests its last item clear\n   * of it. Until then it stays docked. Unselected tab labels lift halfway\n   * toward the normal text color to keep AA over the content beneath.\n   */\n  barPresentation?: TabNavigatorBarPresentation;\n  /**\n   * With `barPresentation=\"clear\"`, `material` fades the chrome material in\n   * behind the bar while the active scene continues beneath it (default\n   * `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /**\n   * Paint the navigator, and its docked tab bar, in an app-chosen color (a\n   * `@kerfjs/ui/css-values` color builder) instead of the surface. A tab's own\n   * `background` paints its scene. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the navigator, its bar, and every scene: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\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  barPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: TabNavigatorProps<Id>) {\n  const tinted = surfaceTintAttributes(tint);\n  if (\n    tabs.some(\n      (tab) => tab.appearance === 'sunken' && tab.background === undefined,\n    )\n  )\n    ensureSunkenTexture();\n  return (\n    <section\n      class={`kui-tab-scaffold ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .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      data-bar-presentation={\n        barPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bar-material={barPresentation === 'clear' ? 'clear' : undefined}\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        barPresentation === 'clear',\n      )}\n      data-background={background === undefined ? undefined : ''}\n      data-kui-tint={tinted['data-kui-tint']}\n      data-kui-tint-accent={tinted['data-kui-tint-accent']}\n      style={joinStyles(\n        background === undefined\n          ? undefined\n          : `--_kui-tab-scaffold-background:${background}`,\n        tinted.style,\n      )}\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class={`kui-tab-scaffold__scene ${surfaceTintAttributes(tab.tint).className}`.trim()}\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={\n              tab.appearance === 'sunken' && tab.background === undefined\n                ? 'sunken'\n                : undefined\n            }\n            data-background={tab.background === undefined ? undefined : ''}\n            data-kui-tint={surfaceTintAttributes(tab.tint)['data-kui-tint']}\n            data-kui-tint-accent={\n              surfaceTintAttributes(tab.tint)['data-kui-tint-accent']\n            }\n            style={joinStyles(\n              tab.background === undefined\n                ? undefined\n                : `--_kui-tab-scaffold-scene-background:${tab.background}`,\n              surfaceTintAttributes(tab.tint).style,\n            )}\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 {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.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  /**\n   * Paint this scene in an app-chosen color (a `@kerfjs/ui/css-values` color\n   * builder). It replaces the appearance's fill. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for this scene: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\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\n/**\n * How a {@link TabNavigator}'s tab bar relates to the active scene: `docked`\n * below it, or `overlay` laid over its bottom edge on the translucent chrome\n * material, so the scene's content scrolls visibly beneath the bar.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath\n * it, until the scene scrolls to its end.\n */\nexport type TabNavigatorBarPresentation = 'docked' | 'overlay' | 'clear';\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  /**\n   * `docked` (default) gives the tab bar its own band below the scenes.\n   * `overlay` lays it over the active scene's bottom edge on the translucent\n   * chrome material (opaque under reduced transparency, increased contrast,\n   * or without `backdrop-filter`; `Canvas` in forced colors), so content\n   * scrolls visibly beneath it, as under an iOS tab bar. `wireTabNavigator`\n   * measures the live bar (bottom safe area included) and the scenes hand\n   * its height to their content as the block-end `--kui-edge-inset-*`\n   * context, so a plain scene, a sole `Pane`, or a `NavStack` (and its own\n   * bottom toolbar, which then sits above the bar) rests its last item clear\n   * of it. Until then it stays docked. Unselected tab labels lift halfway\n   * toward the normal text color to keep AA over the content beneath.\n   */\n  barPresentation?: TabNavigatorBarPresentation;\n  /**\n   * With `barPresentation=\"clear\"`, `material` fades the chrome material in\n   * behind the bar while the active scene continues beneath it (default\n   * `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /**\n   * Paint the navigator, and its docked tab bar, in an app-chosen color (a\n   * `@kerfjs/ui/css-values` color builder) instead of the surface. A tab's own\n   * `background` paints its scene. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the navigator, its bar, and every scene: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\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  barPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: TabNavigatorProps<Id>) {\n  const tinted = surfaceTintAttributes(tint);\n  if (\n    tabs.some(\n      (tab) => tab.appearance === 'sunken' && tab.background === undefined,\n    )\n  )\n    ensureSunkenTexture();\n  return (\n    <section\n      class={`kui-tab-scaffold ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .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      data-bar-presentation={\n        barPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bar-material={barPresentation === 'clear' ? 'clear' : undefined}\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        barPresentation === 'clear',\n      )}\n      data-background={background === undefined ? undefined : ''}\n      data-kui-tint={tinted['data-kui-tint']}\n      data-kui-tint-accent={tinted['data-kui-tint-accent']}\n      style={joinStyles(\n        background === undefined\n          ? undefined\n          : `--_kui-tab-scaffold-background:${background}`,\n        tinted.style,\n      )}\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class={`kui-tab-scaffold__scene ${surfaceTintAttributes(tab.tint).className}`.trim()}\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={\n              tab.appearance === 'sunken' && tab.background === undefined\n                ? 'sunken'\n                : undefined\n            }\n            data-background={tab.background === undefined ? undefined : ''}\n            data-kui-tint={surfaceTintAttributes(tab.tint)['data-kui-tint']}\n            data-kui-tint-accent={\n              surfaceTintAttributes(tab.tint)['data-kui-tint-accent']\n            }\n            style={joinStyles(\n              tab.background === undefined\n                ? undefined\n                : `--_kui-tab-scaffold-scene-background:${tab.background}`,\n              surfaceTintAttributes(tab.tint).style,\n            )}\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/toolbar.d.ts

@@ -4,6 +4,7 @@ import { S as Sides } from './sides-BPSWde0A.js';
 import { PaneSeparatorSide } from './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 
 type ToolbarPosition = 'header' | 'footer';
 /** Control-band density: `default` (60px with 44px groups) or `compact`. */

package/dist/wire-catalog.d.ts

@@ -6,8 +6,9 @@ import './sides-BPSWde0A.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './workbench.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/wire-content-items.js

@@ -1,3 +1,63 @@
+// src/components/surfaces/content-item/wiring/wire-content-item-media.ts
+var CARD = '[data-component="content-item"][data-media-state]';
+var LEAD = ".kui-content-item__media .kui-backdrop-image__media";
+var BLURRED = ".kui-content-item__media .kui-backdrop-image__blurred";
+function wireContentItemMedia(root) {
+  const tint = (card, enabled) => {
+    const media = card.querySelector(".kui-content-item__media");
+    const scheme = media?.dataset.tintScheme;
+    if (!scheme) return;
+    if (enabled) {
+      card.setAttribute("data-kui-tint", scheme);
+      card.classList.add(`wa-${scheme}`);
+      if (media?.hasAttribute("data-tint-accent")) {
+        card.setAttribute("data-kui-tint-accent", "");
+      }
+    } else {
+      card.removeAttribute("data-kui-tint");
+      card.removeAttribute("data-kui-tint-accent");
+      card.classList.remove("wa-light", "wa-dark");
+    }
+  };
+  const sync = (card) => {
+    const lead = card.querySelector(LEAD);
+    if (!lead) return;
+    const state = !lead.complete ? "pending" : lead.naturalWidth > 0 ? "ready" : "error";
+    if (card.dataset.mediaState !== state) card.dataset.mediaState = state;
+    tint(card, state !== "error");
+    const blurred = card.querySelector(BLURRED);
+    if (blurred?.complete && blurred.naturalWidth === 0)
+      blurred.dataset.imageError = "true";
+    else blurred?.removeAttribute("data-image-error");
+  };
+  const all = () => {
+    if (root.matches(CARD)) sync(root);
+    root.querySelectorAll(CARD).forEach(sync);
+  };
+  const onImage = (event) => {
+    const target = event.target;
+    if (!(target instanceof Element) || !target.matches(`${LEAD}, ${BLURRED}`))
+      return;
+    const card = target.closest(CARD);
+    if (card && root.contains(card)) sync(card);
+  };
+  const observer = new MutationObserver(all);
+  observer.observe(root, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["src", "srcset"]
+  });
+  root.addEventListener("load", onImage, true);
+  root.addEventListener("error", onImage, true);
+  all();
+  return () => {
+    observer.disconnect();
+    root.removeEventListener("load", onImage, true);
+    root.removeEventListener("error", onImage, true);
+  };
+}
+
 // src/components/surfaces/content-item/wiring/wire-content-items.ts
 var ITEM_SELECTOR = '[data-component="content-item"][data-interactive="true"]';
 var NESTED_CONTROL_SELECTOR = 'button, a[href], input, select, textarea, [contenteditable="true"], [role="button"]';
@@ -68,6 +128,7 @@ function activate(item, modifiers) {
   );
 }
 function wireContentItems(root) {
+  const stopMedia = wireContentItemMedia(root);
   const activeRows = /* @__PURE__ */ new WeakMap();
   const rove = (grid) => {
     const rows = gridRows(grid);
@@ -194,6 +255,7 @@ function wireContentItems(root) {
   root.addEventListener("focusout", focusout);
   root.addEventListener("focusin", focusin);
   return () => {
+    stopMedia();
     clearSpace();
     observer?.disconnect();
     root.removeEventListener("focusin", focusin);

package/dist/wire-content-items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/content-item/wiring/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const ITEM_SELECTOR =\n  '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\nconst MULTI_ROW_SELECTOR = `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]`;\n\n/** The enabled selectable rows of one multi-select grid, in order. */\nfunction gridRows(grid: Element): HTMLElement[] {\n  return Array.from(\n    grid.querySelectorAll<HTMLElement>(\n      `${MULTI_ROW_SELECTOR}:not([data-disabled=\"true\"])`,\n    ),\n  ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n}\n\nfunction nextTile(\n  item: HTMLElement,\n  rows: HTMLElement[],\n  key: string,\n): HTMLElement | undefined {\n  const current = item.getBoundingClientRect();\n  const centerX = current.left + current.width / 2;\n  const candidates = rows\n    .filter((row) => row !== item)\n    .map((row) => {\n      const rect = row.getBoundingClientRect();\n      return { row, x: rect.left + rect.width / 2, y: rect.top };\n    });\n  const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n  const directed = candidates.filter(({ x, y }) => {\n    switch (key) {\n      case 'ArrowLeft':\n        return sameLine(y) && x < centerX;\n      case 'ArrowRight':\n        return sameLine(y) && x > centerX;\n      case 'ArrowUp':\n        return y < current.top - 1;\n      default:\n        return y > current.top + 1;\n    }\n  });\n  directed.sort((a, b) => {\n    if (key === 'ArrowLeft') return b.x - a.x;\n    if (key === 'ArrowRight') return a.x - b.x;\n    const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n    return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n  });\n  return directed[0]?.row;\n}\n\nfunction actionItem(root: HTMLElement, event: Event) {\n  const target = event.target;\n  if (!(target instanceof Element)) return null;\n  const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n  if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n    return null;\n  // Composed events expose native controls inside a custom element's shadow\n  // root even though event.target is retargeted to its host here.\n  for (const node of event.composedPath()) {\n    if (node === item) break;\n    if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n      return null;\n  }\n  return item;\n}\n\n/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n  event: Event,\n  item: HTMLElement,\n): boolean {\n  return actionItem(item, event) === item;\n}\n\ntype ActivationModifiers = Pick<\n  KeyboardEvent,\n  'shiftKey' | 'ctrlKey' | 'metaKey'\n>;\n\n/**\n * Activate an item with a click that carries the activating key's modifier\n * state, so one delegated click handler serves pointer and keyboard\n * multi-selection alike (Shift extends a range, Cmd/Ctrl toggles one item).\n */\nfunction activate(item: HTMLElement, modifiers: ActivationModifiers) {\n  item.dispatchEvent(\n    new MouseEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      view: item.ownerDocument.defaultView,\n      shiftKey: modifiers.shiftKey,\n      ctrlKey: modifiers.ctrlKey,\n      metaKey: modifiers.metaKey,\n    }),\n  );\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. The activation click mirrors the Shift,\n * Ctrl, and Meta state of the activating key (Space uses the state at press),\n * so the click handler can read `shiftKey` / `metaKey` / `ctrlKey` for\n * keyboard range and toggle selection. Alt-modified keys are left to the\n * platform. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  // Roving tabindex: each multi-select grid is one Tab stop, on the last\n  // focused row, else the first selected, else the first enabled row.\n  const activeRows = new WeakMap<Element, HTMLElement>();\n  const rove = (grid: Element) => {\n    const rows = gridRows(grid);\n    const remembered = activeRows.get(grid);\n    const stop =\n      remembered && rows.includes(remembered)\n        ? remembered\n        : (rows.find((row) => row.getAttribute('aria-selected') === 'true') ??\n          rows[0]);\n    for (const row of rows) {\n      const want = row === stop ? '0' : '-1';\n      if (row.getAttribute('tabindex') !== want)\n        row.setAttribute('tabindex', want);\n    }\n  };\n  const grids = () =>\n    [\n      ...(root.matches(MULTI_GRID_SELECTOR) ? [root] : []),\n      ...root.querySelectorAll(MULTI_GRID_SELECTOR),\n    ] as Element[];\n  // A re-render resets every row's tabindex to its template value, so the\n  // roving stop is restored after each change (deduplicated per task).\n  let roving = false;\n  const scheduleRove = () => {\n    if (roving) return;\n    roving = true;\n    globalThis.queueMicrotask(() => {\n      roving = false;\n      for (const grid of grids()) rove(grid);\n    });\n  };\n  const View = root.ownerDocument.defaultView;\n  const observer =\n    View && 'MutationObserver' in View\n      ? new View.MutationObserver(scheduleRove)\n      : null;\n  observer?.observe(root, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['tabindex', 'aria-selected', 'data-disabled'],\n  });\n  for (const grid of grids()) rove(grid);\n\n  const focusin = (event: FocusEvent) => {\n    const target = event.target;\n    if (!(target instanceof Element)) return;\n    const row = target.closest<HTMLElement>(MULTI_ROW_SELECTOR);\n    const grid = row?.closest(MULTI_GRID_SELECTOR);\n    if (!row || !grid || !root.contains(grid)) return;\n    activeRows.set(grid, row);\n    rove(grid);\n  };\n\n  let pendingSpace: {\n    item: HTMLElement;\n    modifiers: ActivationModifiers;\n  } | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.item.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.altKey) return;\n    const item = actionItem(root, event);\n    if (!item) return;\n    const commandKey = event.ctrlKey || event.metaKey;\n    if (\n      !commandKey &&\n      item.dataset.selectionMode === 'multiple' &&\n      [\n        'ArrowDown',\n        'ArrowUp',\n        'ArrowLeft',\n        'ArrowRight',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const grid = item.closest(MULTI_GRID_SELECTOR);\n      if (!grid) return;\n      const rows = gridRows(grid);\n      const index = rows.indexOf(item);\n      if (index < 0) return;\n      const isTileGrid = grid.getAttribute('data-component') === 'grid';\n      let next: HTMLElement | undefined;\n      switch (event.key) {\n        case 'Home':\n          next = rows[0];\n          break;\n        case 'End':\n          next = rows[rows.length - 1];\n          break;\n        case 'ArrowDown':\n        case 'ArrowUp':\n          next = isTileGrid\n            ? nextTile(item, rows, event.key)\n            : rows[index + (event.key === 'ArrowDown' ? 1 : -1)];\n          break;\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          next = isTileGrid ? nextTile(item, rows, event.key) : undefined;\n          break;\n      }\n      if (next) {\n        event.preventDefault();\n        next.focus();\n      }\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      activate(item, event);\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = {\n        item,\n        modifiers: {\n          shiftKey: event.shiftKey,\n          ctrlKey: event.ctrlKey,\n          metaKey: event.metaKey,\n        },\n      };\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    if (!pendingSpace) return;\n    const { item, modifiers } = pendingSpace;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event) &&\n      item.ownerDocument.activeElement === item\n    )\n      activate(item, modifiers);\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace?.item) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  root.addEventListener('focusin', focusin);\n  return () => {\n    clearSpace();\n    observer?.disconnect();\n    root.removeEventListener('focusin', focusin);\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/content-item/wiring/wire-content-item-media.ts","../src/components/surfaces/content-item/wiring/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const CARD = '[data-component=\"content-item\"][data-media-state]';\nconst LEAD = '.kui-content-item__media .kui-backdrop-image__media';\nconst BLURRED = '.kui-content-item__media .kui-backdrop-image__blurred';\n\n/** Image state uses one load/error listener pair and one observer per feed root. */\nexport function wireContentItemMedia(root: HTMLElement): () => void {\n  const tint = (card: HTMLElement, enabled: boolean) => {\n    const media = card.querySelector<HTMLElement>('.kui-content-item__media');\n    const scheme = media?.dataset.tintScheme;\n    if (!scheme) return;\n    if (enabled) {\n      card.setAttribute('data-kui-tint', scheme);\n      card.classList.add(`wa-${scheme}`);\n      if (media?.hasAttribute('data-tint-accent')) {\n        card.setAttribute('data-kui-tint-accent', '');\n      }\n    } else {\n      card.removeAttribute('data-kui-tint');\n      card.removeAttribute('data-kui-tint-accent');\n      card.classList.remove('wa-light', 'wa-dark');\n    }\n  };\n  const sync = (card: HTMLElement) => {\n    const lead = card.querySelector<HTMLImageElement>(LEAD);\n    if (!lead) return;\n    const state = !lead.complete\n      ? 'pending'\n      : lead.naturalWidth > 0\n        ? 'ready'\n        : 'error';\n    if (card.dataset.mediaState !== state) card.dataset.mediaState = state;\n    tint(card, state !== 'error');\n    const blurred = card.querySelector<HTMLImageElement>(BLURRED);\n    if (blurred?.complete && blurred.naturalWidth === 0)\n      blurred.dataset.imageError = 'true';\n    else blurred?.removeAttribute('data-image-error');\n  };\n  const all = () => {\n    if (root.matches(CARD)) sync(root);\n    root.querySelectorAll<HTMLElement>(CARD).forEach(sync);\n  };\n  const onImage = (event: Event) => {\n    const target = event.target;\n    if (!(target instanceof Element) || !target.matches(`${LEAD}, ${BLURRED}`))\n      return;\n    const card = target.closest<HTMLElement>(CARD);\n    if (card && root.contains(card)) sync(card);\n  };\n  const observer = new MutationObserver(all);\n  observer.observe(root, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['src', 'srcset'],\n  });\n  root.addEventListener('load', onImage, true);\n  root.addEventListener('error', onImage, true);\n  all();\n  return () => {\n    observer.disconnect();\n    root.removeEventListener('load', onImage, true);\n    root.removeEventListener('error', onImage, true);\n  };\n}\n","import { wireContentItemMedia } from './wire-content-item-media.js';\n\nconst ITEM_SELECTOR =\n  '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\nconst MULTI_ROW_SELECTOR = `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]`;\n\n/** The enabled selectable rows of one multi-select grid, in order. */\nfunction gridRows(grid: Element): HTMLElement[] {\n  return Array.from(\n    grid.querySelectorAll<HTMLElement>(\n      `${MULTI_ROW_SELECTOR}:not([data-disabled=\"true\"])`,\n    ),\n  ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n}\n\nfunction nextTile(\n  item: HTMLElement,\n  rows: HTMLElement[],\n  key: string,\n): HTMLElement | undefined {\n  const current = item.getBoundingClientRect();\n  const centerX = current.left + current.width / 2;\n  const candidates = rows\n    .filter((row) => row !== item)\n    .map((row) => {\n      const rect = row.getBoundingClientRect();\n      return { row, x: rect.left + rect.width / 2, y: rect.top };\n    });\n  const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n  const directed = candidates.filter(({ x, y }) => {\n    switch (key) {\n      case 'ArrowLeft':\n        return sameLine(y) && x < centerX;\n      case 'ArrowRight':\n        return sameLine(y) && x > centerX;\n      case 'ArrowUp':\n        return y < current.top - 1;\n      default:\n        return y > current.top + 1;\n    }\n  });\n  directed.sort((a, b) => {\n    if (key === 'ArrowLeft') return b.x - a.x;\n    if (key === 'ArrowRight') return a.x - b.x;\n    const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n    return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n  });\n  return directed[0]?.row;\n}\n\nfunction actionItem(root: HTMLElement, event: Event) {\n  const target = event.target;\n  if (!(target instanceof Element)) return null;\n  const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n  if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n    return null;\n  // Composed events expose native controls inside a custom element's shadow\n  // root even though event.target is retargeted to its host here.\n  for (const node of event.composedPath()) {\n    if (node === item) break;\n    if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n      return null;\n  }\n  return item;\n}\n\n/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n  event: Event,\n  item: HTMLElement,\n): boolean {\n  return actionItem(item, event) === item;\n}\n\ntype ActivationModifiers = Pick<\n  KeyboardEvent,\n  'shiftKey' | 'ctrlKey' | 'metaKey'\n>;\n\n/**\n * Activate an item with a click that carries the activating key's modifier\n * state, so one delegated click handler serves pointer and keyboard\n * multi-selection alike (Shift extends a range, Cmd/Ctrl toggles one item).\n */\nfunction activate(item: HTMLElement, modifiers: ActivationModifiers) {\n  item.dispatchEvent(\n    new MouseEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      view: item.ownerDocument.defaultView,\n      shiftKey: modifiers.shiftKey,\n      ctrlKey: modifiers.ctrlKey,\n      metaKey: modifiers.metaKey,\n    }),\n  );\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. The activation click mirrors the Shift,\n * Ctrl, and Meta state of the activating key (Space uses the state at press),\n * so the click handler can read `shiftKey` / `metaKey` / `ctrlKey` for\n * keyboard range and toggle selection. Alt-modified keys are left to the\n * platform. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  const stopMedia = wireContentItemMedia(root);\n  // Roving tabindex: each multi-select grid is one Tab stop, on the last\n  // focused row, else the first selected, else the first enabled row.\n  const activeRows = new WeakMap<Element, HTMLElement>();\n  const rove = (grid: Element) => {\n    const rows = gridRows(grid);\n    const remembered = activeRows.get(grid);\n    const stop =\n      remembered && rows.includes(remembered)\n        ? remembered\n        : (rows.find((row) => row.getAttribute('aria-selected') === 'true') ??\n          rows[0]);\n    for (const row of rows) {\n      const want = row === stop ? '0' : '-1';\n      if (row.getAttribute('tabindex') !== want)\n        row.setAttribute('tabindex', want);\n    }\n  };\n  const grids = () =>\n    [\n      ...(root.matches(MULTI_GRID_SELECTOR) ? [root] : []),\n      ...root.querySelectorAll(MULTI_GRID_SELECTOR),\n    ] as Element[];\n  // A re-render resets every row's tabindex to its template value, so the\n  // roving stop is restored after each change (deduplicated per task).\n  let roving = false;\n  const scheduleRove = () => {\n    if (roving) return;\n    roving = true;\n    globalThis.queueMicrotask(() => {\n      roving = false;\n      for (const grid of grids()) rove(grid);\n    });\n  };\n  const View = root.ownerDocument.defaultView;\n  const observer =\n    View && 'MutationObserver' in View\n      ? new View.MutationObserver(scheduleRove)\n      : null;\n  observer?.observe(root, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['tabindex', 'aria-selected', 'data-disabled'],\n  });\n  for (const grid of grids()) rove(grid);\n\n  const focusin = (event: FocusEvent) => {\n    const target = event.target;\n    if (!(target instanceof Element)) return;\n    const row = target.closest<HTMLElement>(MULTI_ROW_SELECTOR);\n    const grid = row?.closest(MULTI_GRID_SELECTOR);\n    if (!row || !grid || !root.contains(grid)) return;\n    activeRows.set(grid, row);\n    rove(grid);\n  };\n\n  let pendingSpace: {\n    item: HTMLElement;\n    modifiers: ActivationModifiers;\n  } | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.item.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.altKey) return;\n    const item = actionItem(root, event);\n    if (!item) return;\n    const commandKey = event.ctrlKey || event.metaKey;\n    if (\n      !commandKey &&\n      item.dataset.selectionMode === 'multiple' &&\n      [\n        'ArrowDown',\n        'ArrowUp',\n        'ArrowLeft',\n        'ArrowRight',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const grid = item.closest(MULTI_GRID_SELECTOR);\n      if (!grid) return;\n      const rows = gridRows(grid);\n      const index = rows.indexOf(item);\n      if (index < 0) return;\n      const isTileGrid = grid.getAttribute('data-component') === 'grid';\n      let next: HTMLElement | undefined;\n      switch (event.key) {\n        case 'Home':\n          next = rows[0];\n          break;\n        case 'End':\n          next = rows[rows.length - 1];\n          break;\n        case 'ArrowDown':\n        case 'ArrowUp':\n          next = isTileGrid\n            ? nextTile(item, rows, event.key)\n            : rows[index + (event.key === 'ArrowDown' ? 1 : -1)];\n          break;\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          next = isTileGrid ? nextTile(item, rows, event.key) : undefined;\n          break;\n      }\n      if (next) {\n        event.preventDefault();\n        next.focus();\n      }\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      activate(item, event);\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = {\n        item,\n        modifiers: {\n          shiftKey: event.shiftKey,\n          ctrlKey: event.ctrlKey,\n          metaKey: event.metaKey,\n        },\n      };\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    if (!pendingSpace) return;\n    const { item, modifiers } = pendingSpace;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event) &&\n      item.ownerDocument.activeElement === item\n    )\n      activate(item, modifiers);\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace?.item) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  root.addEventListener('focusin', focusin);\n  return () => {\n    stopMedia();\n    clearSpace();\n    observer?.disconnect();\n    root.removeEventListener('focusin', focusin);\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}

package/dist/workbench-dialog.d.ts

@@ -4,9 +4,10 @@ import { CssLength } from './css-values.js';
 import { WorkbenchMainBottomToolbar, WorkbenchPanel } from './workbench.js';
 import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
 export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/workbench-dialog.js

@@ -1,7 +1,7 @@
-import { DialogSurface } from './chunk-6CDILXF4.js';
+import { DialogSurface } from './chunk-VGECEXM6.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
-import { Workbench } from './chunk-CPSGUGAY.js';
+import { Workbench } from './chunk-YPAQFBMN.js';
 
 
 
@@ -19,6 +19,7 @@ import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
 
 
 
+
 import { LucideIcon } from './chunk-HJXVVFBT.js';
 import { remify } from './chunk-IQSRHXZR.js';
 

package/dist/workbench-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/workbench-dialog/workbench-dialog.tsx"],"names":[],"mappings":"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","file":"workbench-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport {\n  Workbench,\n  type WorkbenchMainBottomToolbar,\n  type WorkbenchPanel,\n} from '../../layout/workbench/workbench.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type WorkbenchDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface WorkbenchDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. The\n   * Workbench inside is `<id>-workbench`, so its rails are\n   * `<id>-workbench-left-rail` and `<id>-workbench-right-rail`.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /** The dialog's primary title: an xl heading in the work area's toolbar. */\n  title: string;\n  /**\n   * A short supporting line under the title. It is the dialog's accessible\n   * description (`aria-describedby` to its `<id>-description`) unless\n   * `describedBy` names other content.\n   */\n  description?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description, in\n   * place of `description`, such as app-owned summary copy in `main`.\n   */\n  describedBy?: string;\n  /** Groups after the title in the work area's toolbar. */\n  leading?: KerfUiContent;\n  /** Header controls before the close control, such as a `ToolbarControlGroup`. */\n  actions?: KerfUiContent;\n  /** The work area. */\n  main: KerfUiContent;\n  /** Fixed content over the work area's bottom toolbar, such as a status line. */\n  mainFooter?: KerfUiContent;\n  /** The work area's bottom toolbar, usually the dialog's buttons. */\n  mainBottomToolbar?: WorkbenchMainBottomToolbar;\n  /**\n   * Side rails with their own toolbars. On compact devices each presents as\n   * an overlay over the work area; the app starts it collapsed and its\n   * `toolbar.toggle` shows it.\n   */\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  /** A bottom drawer under the work area. */\n  bottomDrawer?: WorkbenchPanel;\n  /**\n   * Fill the screen with the rails as overlays: derive from\n   * `deviceClass().value.compact`.\n   */\n  compact?: boolean;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  /** Minimum work-area width beside inline rails, in px (Workbench default 320). */\n  mainMinSize?: number;\n  rootAttributes?: WorkbenchDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A rail presents as an overlay in a compact dialog, as the app left it otherwise. */\nfunction compactRail(\n  panel: WorkbenchPanel | undefined,\n  compact: boolean,\n): WorkbenchPanel | undefined {\n  return panel && compact ? { ...panel, presentation: 'overlay' } : panel;\n}\n\n/**\n * A workbench dialog: a modal whose body is a `Workbench`. The work area's\n * toolbar carries the dialog's primary title, its actions, and the close\n * control; side rails keep their own toolbars and run the dialog's full\n * height. On compact devices it fills the screen and its rails become\n * overlays over the work area, shown by their toolbar toggles, so the work\n * area keeps its width. Open it with `openDialog()`; the app owns each\n * rail's `collapsed` state, and `wireWorkbench` closes an overlay rail on\n * Escape or a press outside it before the dialog sees the Escape. Built from\n * `DialogSurface` and `Workbench`.\n */\nexport function WorkbenchDialog({\n  id,\n  label,\n  title,\n  description,\n  describedBy,\n  leading,\n  actions,\n  main,\n  mainFooter,\n  mainBottomToolbar,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  compact = false,\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  mainMinSize,\n  rootAttributes,\n  className = '',\n  slot,\n}: WorkbenchDialogProps) {\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={\n        describedBy ??\n        (description === undefined ? undefined : `${id}-description`)\n      }\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'workbench',\n      }}\n      className={className}\n      slot={slot}\n    >\n      <Workbench\n        id={`${id}-workbench`}\n        label={label}\n        mainToolbar={{\n          label: title,\n          title: (\n            <ToolbarText\n              text={title}\n              description={description}\n              descriptionId={\n                description === undefined ? undefined : `${id}-description`\n              }\n              size=\"xlarge\"\n              id={`${id}-title`}\n              headingLevel={2}\n            />\n          ),\n          leading,\n          trailing: actions,\n          // After any hidden right rail's toggle, so Close stays outermost.\n          end: (\n            <ToolbarControlGroup appearance=\"borderless\" single>\n              <button\n                type=\"button\"\n                aria-label={closeLabel}\n                data-dialog-close=\"\"\n              >\n                <LucideIcon icon={X} name=\"x\" />\n              </button>\n            </ToolbarControlGroup>\n          ),\n        }}\n        main={main}\n        mainFooter={mainFooter}\n        mainBottomToolbar={mainBottomToolbar}\n        leftRail={compactRail(leftRail, compact)}\n        rightRail={compactRail(rightRail, compact)}\n        bottomDrawer={bottomDrawer}\n        mainMinSize={mainMinSize}\n      />\n    </DialogSurface>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/workbench-dialog/workbench-dialog.tsx"],"names":[],"mappings":"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","file":"workbench-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport {\n  Workbench,\n  type WorkbenchMainBottomToolbar,\n  type WorkbenchPanel,\n} from '../../layout/workbench/workbench.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type WorkbenchDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface WorkbenchDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. The\n   * Workbench inside is `<id>-workbench`, so its rails are\n   * `<id>-workbench-left-rail` and `<id>-workbench-right-rail`.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /** The dialog's primary title: an xl heading in the work area's toolbar. */\n  title: string;\n  /**\n   * A short supporting line under the title. It is the dialog's accessible\n   * description (`aria-describedby` to its `<id>-description`) unless\n   * `describedBy` names other content.\n   */\n  description?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description, in\n   * place of `description`, such as app-owned summary copy in `main`.\n   */\n  describedBy?: string;\n  /** Groups after the title in the work area's toolbar. */\n  leading?: KerfUiContent;\n  /** Header controls before the close control, such as a `ToolbarControlGroup`. */\n  actions?: KerfUiContent;\n  /** The work area. */\n  main: KerfUiContent;\n  /** Fixed content over the work area's bottom toolbar, such as a status line. */\n  mainFooter?: KerfUiContent;\n  /** The work area's bottom toolbar, usually the dialog's buttons. */\n  mainBottomToolbar?: WorkbenchMainBottomToolbar;\n  /**\n   * Side rails with their own toolbars. On compact devices each presents as\n   * an overlay over the work area; the app starts it collapsed and its\n   * `toolbar.toggle` shows it.\n   */\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  /** A bottom drawer under the work area. */\n  bottomDrawer?: WorkbenchPanel;\n  /**\n   * Fill the screen with the rails as overlays: derive from\n   * `deviceClass().value.compact`.\n   */\n  compact?: boolean;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  /** Minimum work-area width beside inline rails, in px (Workbench default 320). */\n  mainMinSize?: number;\n  rootAttributes?: WorkbenchDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A rail presents as an overlay in a compact dialog, as the app left it otherwise. */\nfunction compactRail(\n  panel: WorkbenchPanel | undefined,\n  compact: boolean,\n): WorkbenchPanel | undefined {\n  return panel && compact ? { ...panel, presentation: 'overlay' } : panel;\n}\n\n/**\n * A workbench dialog: a modal whose body is a `Workbench`. The work area's\n * toolbar carries the dialog's primary title, its actions, and the close\n * control; side rails keep their own toolbars and run the dialog's full\n * height. On compact devices it fills the screen and its rails become\n * overlays over the work area, shown by their toolbar toggles, so the work\n * area keeps its width. Open it with `openDialog()`; the app owns each\n * rail's `collapsed` state, and `wireWorkbench` closes an overlay rail on\n * Escape or a press outside it before the dialog sees the Escape. Built from\n * `DialogSurface` and `Workbench`.\n */\nexport function WorkbenchDialog({\n  id,\n  label,\n  title,\n  description,\n  describedBy,\n  leading,\n  actions,\n  main,\n  mainFooter,\n  mainBottomToolbar,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  compact = false,\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  mainMinSize,\n  rootAttributes,\n  className = '',\n  slot,\n}: WorkbenchDialogProps) {\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={\n        describedBy ??\n        (description === undefined ? undefined : `${id}-description`)\n      }\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'workbench',\n      }}\n      className={className}\n      slot={slot}\n    >\n      <Workbench\n        id={`${id}-workbench`}\n        label={label}\n        mainToolbar={{\n          label: title,\n          title: (\n            <ToolbarText\n              text={title}\n              description={description}\n              descriptionId={\n                description === undefined ? undefined : `${id}-description`\n              }\n              size=\"xlarge\"\n              id={`${id}-title`}\n              headingLevel={2}\n            />\n          ),\n          leading,\n          trailing: actions,\n          // After any hidden right rail's toggle, so Close stays outermost.\n          end: (\n            <ToolbarControlGroup appearance=\"borderless\" single>\n              <button\n                type=\"button\"\n                aria-label={closeLabel}\n                data-dialog-close=\"\"\n              >\n                <LucideIcon icon={X} name=\"x\" />\n              </button>\n            </ToolbarControlGroup>\n          ),\n        }}\n        main={main}\n        mainFooter={mainFooter}\n        mainBottomToolbar={mainBottomToolbar}\n        leftRail={compactRail(leftRail, compact)}\n        rightRail={compactRail(rightRail, compact)}\n        bottomDrawer={bottomDrawer}\n        mainMinSize={mainMinSize}\n      />\n    </DialogSurface>\n  );\n}\n"]}

package/dist/workbench.d.ts

@@ -1,12 +1,13 @@
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { b as NavPane, N as NavStackProps } from './nav-stack-CU_0dKtI.js';
+import { b as NavPane, N as NavStackProps } from './nav-stack-CrZF95VO.js';
 import { ListConfig } from './list.js';
 import { PaneConfig } from './pane.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
 import { a as PanelToolbar, c as PanelBottomToolbar, b as PanelChromePlacement, d as PanelToggle } from './panel-toolbar-vg6Ir5Dy.js';
 import { ToolbarConfig } from './toolbar.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './toolbar-text.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/workbench.js

@@ -1,4 +1,5 @@
-export { Workbench } from './chunk-CPSGUGAY.js';
+export { Workbench } from './chunk-YPAQFBMN.js';
+
 
 
 

package/docs/accessibility.md

@@ -948,6 +948,12 @@ and genuinely insufficient contrast. Background images (including the catalog
 checkerboard), filters, and group opacity remain separate visual-review concerns;
 this helper measures only the solid CSS color layers.
 
+The shared light quiet and dark danger text colors also clear AA when `Text` is
+composed into a lowered `ValueTable` row or a `ListHeader` status badge on a
+document using `document.css`. `tests/browser/tone-contrast.spec.ts` covers both
+original compositions in light and dark schemes, with the Web Awesome theme
+and the foundation fallback kept in parity.
+
 Separator checks resolve the documented semantic border token in the component's
 context instead of pinning an old opaque palette value, while still verifying
 that the line has its intended width and a visible color.

package/docs/backdrop-image.md

@@ -43,6 +43,10 @@ import { remify, uiColor } from '@kerfjs/ui/css-values';
   `role="img"`; `srcset`, `sizes`, and `fit` do not apply.
 - `height` is a typed `CssLength` (default 320px). The block grows when the
   overlay content is taller.
+- `aspectRatio` reserves the block from its width for inline media; it cannot
+  be combined with `height`. `ContentItem.media` uses this form at 16:9 by
+  default and sets `loading="lazy"`. A direct `BackdropImage` can set native
+  `loading` to `lazy` or `eager`.
 - `parallax`: `none` (default) scrolls the image with the content, `subtle`
   lags by 35%, and a number from 0 to 1 is the lag factor.
 - `fadeTo` is a typed `CssColor` (`uiColor()`, `colorVar()`, `fillColor()`).

package/docs/button.md

@@ -0,0 +1,15 @@
+# Button
+
+`Button` renders a native `<button>`, or a link when given `href`. Use it for a standalone action outside a `ToolbarControlGroup`.
+
+## Current step
+
+Use `currentStep` when a Button marks the current position in a setup or progress sequence. It emits `aria-current="step"` on either form. Omit it or set it to `false` on other steps. The marker also remains on a disabled current step; disabled buttons retain their native `disabled` attribute, and disabled links lose their `href` and report `aria-disabled="true"`.
+
+```tsx
+<Button action="open-configure" currentStep>Configure</Button>
+<Button action="open-review">Review</Button>
+<Button href="/setup/finish" currentStep>Finish guide</Button>
+```
+
+The application owns the step label and which step is current. `currentStep` adds a semantic marker; it does not change the Button's styling or make a link into a toggle. Use `pressed` for an on/off toggle.

package/docs/component-contract.md

@@ -594,6 +594,13 @@ preserves the surrounding surface.
 neutral fill so it remains visible on a lowered surface. For a card with
 multiple actions, put sibling buttons in a static ContentItem (or use
 `ListActionRow` for a simple two-action row).
+An image-led feed card uses `ContentItem.media` and an optional app-supplied
+`SurfaceTint` in `tint`. Its media composes `BackdropImage`, reserving an aspect
+ratio and running a per-image view timeline in the shared scrollport. Optional
+`overlay`, `scrim`, `fadeTo`, and `blur` use the same behavior as a page hero;
+`edgeToEdge` extends media to the card's top and inline inner edges;
+`wireContentItems` handles load/error and restores the normal surface when the
+lead image fails. See [Content items](layout.md#content-items).
 For an interactive ContentItem, `wireContentItems` activates the card on Enter
 or Space only when the key event originated from the card itself. A nested
 native control, including one inside a custom element's shadow root, keeps its