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

package/dist/chunk-SOFPUW3O.js

@@ -0,0 +1,196 @@
+import { ToolbarText } from './chunk-EKHDLBRP.js';
+import { paneConfigProps } from './chunk-CTQUDCY5.js';
+import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+import { Toolbar } from './chunk-ZN7KUMPY.js';
+import { Pane } from './chunk-HQZG3OFL.js';
+import { surfaceTintAttributes, joinStyles, scrollEdgeAttributes } from './chunk-SQ5DH66U.js';
+import { List } from './chunk-NB6POCFH.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { ChevronLeft } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var DEFAULT_SAFE_AREA_EDGES = [
+  "block-start",
+  "inline-start",
+  "inline-end"
+];
+var DEFAULT_BOTTOM_SAFE_AREA_EDGES = [
+  "block-end",
+  "inline-start",
+  "inline-end"
+];
+function chromeList(content, config) {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      dividerSides: config?.dividerSides,
+      gap: config?.gap,
+      hAlign: config?.hAlign,
+      vAlign: config?.vAlign,
+      textInsets: config?.textInsets,
+      controlInsets: config?.controlInsets,
+      children: content
+    }
+  );
+}
+function NavStack({
+  id,
+  label,
+  views,
+  backLabel = "Back",
+  backIcon,
+  backText,
+  toolbarConfig = {},
+  panelToggle,
+  hideToolbar = false,
+  bottomToolbar,
+  separator = "auto",
+  chromeDividers = "scroll",
+  chromePresentation = "docked",
+  bottomToolbarPresentation = "docked",
+  scrollEdge = "none",
+  scrollEdgeDistance,
+  background,
+  tint,
+  className = "",
+  slot
+}) {
+  const tinted = surfaceTintAttributes(tint);
+  const topIndex = views.length - 1;
+  const top = views[topIndex];
+  const topToolbar = top?.toolbar;
+  const bottom = top?.bottomToolbar ?? bottomToolbar;
+  const canPop = views.length > 1;
+  const topDensity = topToolbar?.density ?? toolbarConfig.density;
+  const centerTitle = canPop && topToolbar?.center === void 0;
+  const title = /* @__PURE__ */ jsx(
+    ToolbarText,
+    {
+      text: topToolbar?.title ?? "",
+      size: topToolbar?.titleSize ?? toolbarConfig.titleSize ?? (canPop ? "large" : "xlarge"),
+      headingLevel: topToolbar?.headingLevel ?? toolbarConfig.headingLevel,
+      fill: !centerTitle
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-nav-stack ${tinted.className} ${className}`.replace(/\s+/g, " ").trim(),
+      id,
+      "data-component": "nav-stack",
+      "data-nav-stack-id": id,
+      "data-depth": String(views.length),
+      "data-separator": separator,
+      "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
+      "data-chrome-presentation": chromePresentation !== "docked" && !hideToolbar ? "overlay" : void 0,
+      "data-chrome-material": chromePresentation === "clear" && !hideToolbar ? "clear" : void 0,
+      "data-bottom-toolbar-presentation": bottomToolbarPresentation !== "docked" ? "overlay" : void 0,
+      "data-bottom-toolbar-material": bottomToolbarPresentation === "clear" ? "clear" : void 0,
+      ...scrollEdgeAttributes(
+        scrollEdge,
+        scrollEdgeDistance,
+        chromePresentation === "clear" && !hideToolbar || bottomToolbarPresentation === "clear"
+      ),
+      "data-background": background === void 0 ? void 0 : "",
+      "data-kui-tint": tinted["data-kui-tint"],
+      "data-kui-tint-accent": tinted["data-kui-tint-accent"],
+      style: joinStyles(
+        background === void 0 ? void 0 : `--_kui-nav-stack-background:${background}`,
+        tinted.style
+      ),
+      "aria-label": label,
+      slot,
+      children: [
+        !hideToolbar && /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__chrome", "data-nav-stack-chrome": true, children: /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            label: topToolbar?.label ?? toolbarConfig.label,
+            density: topDensity,
+            dividerSides: topToolbar?.dividerSides ?? toolbarConfig.dividerSides,
+            centerAlign: centerTitle ? "balanced" : topToolbar?.centerAlign ?? toolbarConfig.centerAlign,
+            responsive: topToolbar?.responsive ?? toolbarConfig.responsive,
+            responsiveAt: topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt,
+            safeAreaEdges: topToolbar?.safeAreaEdges ?? toolbarConfig.safeAreaEdges ?? DEFAULT_SAFE_AREA_EDGES,
+            leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+              canPop && /* @__PURE__ */ jsx(
+                ToolbarControlGroup,
+                {
+                  content: backText ? "mixed" : "icon",
+                  size: topDensity === "compact" ? "compact" : "default",
+                  material: chromePresentation === "clear" ? "glass" : void 0,
+                  single: true,
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      class: "kui-nav-stack__back",
+                      "data-nav-back": true,
+                      "aria-label": backText ? void 0 : backLabel,
+                      children: [
+                        backIcon ?? /* @__PURE__ */ jsx(
+                          LucideIcon,
+                          {
+                            icon: ChevronLeft,
+                            name: "chevron-left",
+                            className: "kui-nav-stack__back-icon"
+                          }
+                        ),
+                        backText ? /* @__PURE__ */ jsx("span", { children: backText }) : null
+                      ]
+                    }
+                  )
+                }
+              ),
+              topToolbar?.leading,
+              centerTitle ? null : title
+            ] }),
+            center: centerTitle ? title : topToolbar?.center,
+            trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+              topToolbar?.trailing,
+              panelToggle
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__viewport", "data-nav-stack-viewport": true, children: views.map((view, index) => /* @__PURE__ */ jsx(
+          "article",
+          {
+            class: "kui-nav-stack__view",
+            "data-key": view.key,
+            "data-nav-key": view.key,
+            "data-nav-active": String(index === topIndex),
+            "aria-hidden": String(index !== topIndex),
+            children: view.pane || view.header !== void 0 || view.footer !== void 0 ? /* @__PURE__ */ jsx(
+              Pane,
+              {
+                ...paneConfigProps(view.pane),
+                header: view.header === void 0 ? void 0 : /* @__PURE__ */ jsx("div", { "data-nav-stack-header": true, children: chromeList(view.header, view.headerList) }),
+                footer: view.footer === void 0 ? void 0 : /* @__PURE__ */ jsx("div", { "data-nav-stack-footer": true, children: chromeList(view.footer, view.footerList) }),
+                children: view.content
+              }
+            ) : view.content
+          }
+        )) }),
+        bottom && /* @__PURE__ */ jsx("footer", { class: "kui-nav-stack__bottom", "data-nav-stack-bottom": true, children: /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            position: "footer",
+            label: bottom.label,
+            density: bottom.density,
+            dividerSides: bottom.dividerSides,
+            centerAlign: bottom.centerAlign,
+            responsive: bottom.responsive,
+            responsiveAt: bottom.responsiveAt,
+            safeAreaEdges: bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES,
+            leading: bottom.leading,
+            center: bottom.center,
+            trailing: bottom.trailing
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export { NavStack };
+
+//# sourceMappingURL=chunk-SOFPUW3O.js.map

package/dist/chunk-SOFPUW3O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-SOFPUW3O.js","sourcesContent":["import { ChevronLeft } from 'lucide';\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 { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { paneConfigProps } from '../../layout/pane/internal/pane-config-props.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n  NavStackViewToolbar,\n  PanelBottomToolbar\n> {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n  title?: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /**\n   * Size of the view title's `ToolbarText`. Default `xlarge` at the root,\n   * where the title is the page heading, and `large` once a back control\n   * shares the bar.\n   */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\n/**\n * How a {@link NavStack}'s top chrome relates to the active view: `docked`\n * above it, or `overlay` laid over its top edge on the translucent chrome\n * material, so the view's content scrolls visibly beneath it.\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 it.\n */\nexport type NavStackChromePresentation = 'docked' | 'overlay' | 'clear';\n\n/**\n * How a {@link NavStack}'s bottom toolbar relates to the active view:\n * `docked` below it, or `overlay` laid over its bottom edge on the\n * translucent chrome material, so the view's content scrolls visibly beneath\n * it.\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 view scrolls to its end.\n */\nexport type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n  panelToggle?: KerfUiContent;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: NavStackViewBottomToolbar;\n  /**\n   * Stack chrome separator. `auto` (default) draws both available edges\n   * against a sunken active Pane and otherwise follows `chromeDividers`;\n   * `hidden` suppresses the stack-owned edges.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * A sunken active Pane still draws the separator unless\n   * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n   * own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the top chrome its own band above the active\n   * view. `overlay` lays the chrome over the view's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,\n   * or without `backdrop-filter`), so content scrolls visibly beneath it, as\n   * an iOS navigation bar does. `wireNavStack` measures the live chrome and\n   * hands its height (top safe area included) to the viewport as the\n   * block-start `--kui-edge-inset-*` context, so every view clears it with no\n   * prop: a plain view, a sole `Pane`'s content (or header), and a nested\n   * layout all pad and `scroll-padding` by it, so the first item, and anything\n   * focused or scrolled into view, rests clear of the bar. Until then, and\n   * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in\n   * the chrome lifts its title and description to AA over the content passing\n   * beneath it; keep any other quiet copy in the view. With `clear`, the\n   * stack's own back control sits in a glass control group\n   * (`material=\"glass\"`), so it stays legible over imagery.\n   */\n  chromePresentation?: NavStackChromePresentation;\n  /**\n   * `docked` (default) gives the bottom toolbar its own band below the\n   * active view. `overlay` lays it over the view's bottom edge on the\n   * translucent chrome material (opaque under the same preferences as\n   * `chromePresentation`), so content scrolls visibly beneath it, as under\n   * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a\n   * cross-fading copy) and hands its height (bottom safe area included) to\n   * the viewport as the block-end `--kui-edge-inset-*` context, so a plain\n   * view, a sole `Pane`'s content (or footer), and a nested layout rest their\n   * last item, and anything focused or scrolled into view, clear of it. Until\n   * then, and while no bottom toolbar is shown, it stays docked. Independent\n   * of `chromePresentation`, which governs only the top chrome. An untoned\n   * `ToolbarText` in the toolbar lifts to AA over the content beneath it.\n   */\n  bottomToolbarPresentation?: NavStackBottomToolbarPresentation;\n  /**\n   * For `clear` chrome or bottom toolbar, `material` fades the chrome\n   * material in while the active view's content lies 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 stack, its docked chrome and bottom toolbar, and every view in\n   * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of\n   * the surface. Overlay chrome keeps the chrome material; one view's own\n   * color goes in its `pane: { background }`. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: 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\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n  'block-end',\n  'inline-start',\n  'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  panelToggle,\n  hideToolbar = false,\n  bottomToolbar,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  chromePresentation = 'docked',\n  bottomToolbarPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: NavStackProps) {\n  const tinted = surfaceTintAttributes(tint);\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const topToolbar = top?.toolbar;\n  const bottom = top?.bottomToolbar ?? bottomToolbar;\n  const canPop = views.length > 1;\n  const topDensity = topToolbar?.density ?? toolbarConfig.density;\n  // With a back control, the title centers on the bar (iOS-style) unless the\n  // view owns the center zone; at the root it leads and fills, left-aligned.\n  const centerTitle = canPop && topToolbar?.center === undefined;\n  const title = (\n    <ToolbarText\n      text={topToolbar?.title ?? ''}\n      size={\n        topToolbar?.titleSize ??\n        toolbarConfig.titleSize ??\n        (canPop ? 'large' : 'xlarge')\n      }\n      headingLevel={topToolbar?.headingLevel ?? toolbarConfig.headingLevel}\n      fill={!centerTitle}\n    />\n  );\n  return (\n    <section\n      class={`kui-nav-stack ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-chrome-presentation={\n        chromePresentation !== 'docked' && !hideToolbar ? 'overlay' : undefined\n      }\n      data-chrome-material={\n        chromePresentation === 'clear' && !hideToolbar ? 'clear' : undefined\n      }\n      data-bottom-toolbar-presentation={\n        bottomToolbarPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bottom-toolbar-material={\n        bottomToolbarPresentation === 'clear' ? 'clear' : undefined\n      }\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        (chromePresentation === 'clear' && !hideToolbar) ||\n          bottomToolbarPresentation === '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-nav-stack-background:${background}`,\n        tinted.style,\n      )}\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={topToolbar?.label ?? toolbarConfig.label}\n            density={topDensity}\n            dividerSides={\n              topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n            }\n            centerAlign={\n              centerTitle\n                ? 'balanced'\n                : (topToolbar?.centerAlign ?? toolbarConfig.centerAlign)\n            }\n            responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n            responsiveAt={\n              topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n            }\n            safeAreaEdges={\n              topToolbar?.safeAreaEdges ??\n              toolbarConfig.safeAreaEdges ??\n              DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    content={backText ? 'mixed' : 'icon'}\n                    size={topDensity === 'compact' ? 'compact' : 'default'}\n                    material={\n                      chromePresentation === 'clear' ? 'glass' : undefined\n                    }\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {topToolbar?.leading}\n                {centerTitle ? null : title}\n              </>\n            }\n            center={centerTitle ? title : topToolbar?.center}\n            trailing={\n              <>\n                {topToolbar?.trailing}\n                {panelToggle}\n              </>\n            }\n          />\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.pane ||\n            view.header !== undefined ||\n            view.footer !== undefined ? (\n              <Pane\n                {...paneConfigProps(view.pane)}\n                header={\n                  view.header === undefined ? undefined : (\n                    <div data-nav-stack-header>\n                      {chromeList(view.header, view.headerList)}\n                    </div>\n                  )\n                }\n                footer={\n                  view.footer === undefined ? undefined : (\n                    <div data-nav-stack-footer>\n                      {chromeList(view.footer, view.footerList)}\n                    </div>\n                  )\n                }\n              >\n                {view.content}\n              </Pane>\n            ) : (\n              view.content\n            )}\n          </article>\n        ))}\n      </div>\n      {bottom && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          <Toolbar\n            position=\"footer\"\n            label={bottom.label}\n            density={bottom.density}\n            dividerSides={bottom.dividerSides}\n            centerAlign={bottom.centerAlign}\n            responsive={bottom.responsive}\n            responsiveAt={bottom.responsiveAt}\n            safeAreaEdges={\n              bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n            }\n            leading={bottom.leading}\n            center={bottom.center}\n            trailing={bottom.trailing}\n          />\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/chunk-SQ5DH66U.js

@@ -0,0 +1,37 @@
+// src/shared/layout/scroll-edge.ts
+function scrollEdgeAttributes(edge, distance, enabled) {
+  if (!enabled || edge === "none")
+    return {
+      "data-scroll-edge": void 0,
+      "data-scroll-edge-distance": void 0
+    };
+  return {
+    "data-scroll-edge": edge,
+    "data-scroll-edge-distance": distance === void 0 || !(distance > 0) ? void 0 : String(distance)
+  };
+}
+
+// src/shared/styles/surface-tint.ts
+function surfaceTintAttributes(tint) {
+  if (tint === void 0)
+    return {
+      "data-kui-tint": void 0,
+      "data-kui-tint-accent": void 0,
+      className: "",
+      style: void 0
+    };
+  return {
+    "data-kui-tint": tint.scheme,
+    "data-kui-tint-accent": tint.accent === void 0 ? void 0 : "",
+    className: `wa-${tint.scheme}`,
+    style: tint.accent === void 0 ? `--_kui-tint-color:${tint.color}` : `--_kui-tint-color:${tint.color};--_kui-tint-accent:${tint.accent}`
+  };
+}
+function joinStyles(...declarations) {
+  const present = declarations.filter((value) => value !== void 0);
+  return present.length === 0 ? void 0 : present.join(";");
+}
+
+export { joinStyles, scrollEdgeAttributes, surfaceTintAttributes };
+
+//# sourceMappingURL=chunk-SQ5DH66U.js.map

package/dist/chunk-SQ5DH66U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/layout/scroll-edge.ts","../src/shared/styles/surface-tint.ts"],"names":[],"mappings":";AAaO,SAAS,oBAAA,CACd,IAAA,EACA,QAAA,EACA,OAAA,EAIA;AACA,EAAA,IAAI,CAAC,WAAW,IAAA,KAAS,MAAA;AACvB,IAAA,OAAO;AAAA,MACL,kBAAA,EAAoB,MAAA;AAAA,MACpB,2BAAA,EAA6B;AAAA,KAC/B;AACF,EAAA,OAAO;AAAA,IACL,kBAAA,EAAoB,IAAA;AAAA,IACpB,2BAAA,EACE,aAAa,MAAA,IAAa,EAAE,WAAW,CAAA,CAAA,GAAK,MAAA,GAAY,OAAO,QAAQ;AAAA,GAC3E;AACF;;;ACLO,SAAS,sBAAsB,IAAA,EAOpC;AACA,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO;AAAA,MACL,eAAA,EAAiB,MAAA;AAAA,MACjB,sBAAA,EAAwB,MAAA;AAAA,MACxB,SAAA,EAAW,EAAA;AAAA,MACX,KAAA,EAAO;AAAA,KACT;AACF,EAAA,OAAO;AAAA,IACL,iBAAiB,IAAA,CAAK,MAAA;AAAA,IACtB,sBAAA,EAAwB,IAAA,CAAK,MAAA,KAAW,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,IAChE,SAAA,EAAW,CAAA,GAAA,EAAM,IAAA,CAAK,MAAM,CAAA,CAAA;AAAA,IAC5B,KAAA,EACE,IAAA,CAAK,MAAA,KAAW,MAAA,GACZ,CAAA,kBAAA,EAAqB,IAAA,CAAK,KAAK,CAAA,CAAA,GAC/B,CAAA,kBAAA,EAAqB,IAAA,CAAK,KAAK,CAAA,oBAAA,EAAuB,KAAK,MAAM,CAAA;AAAA,GACzE;AACF;AAGO,SAAS,cACX,YAAA,EACiB;AACpB,EAAA,MAAM,UAAU,YAAA,CAAa,MAAA,CAAO,CAAC,KAAA,KAAU,UAAU,MAAS,CAAA;AAClE,EAAA,OAAO,QAAQ,MAAA,KAAW,CAAA,GAAI,MAAA,GAAY,OAAA,CAAQ,KAAK,GAAG,CAAA;AAC5D","file":"chunk-SQ5DH66U.js","sourcesContent":["/**\n * What clear (fully transparent) chrome fades in as content scrolls beneath\n * it: `none` stays clear; `material` fades in the translucent chrome\n * material; `surface` fades in the opaque surface. The fade tracks the scroll\n * over `scrollEdgeDistance` (opacity only), from the scroll state\n * `wireScrollDividers` reports; unwired, the chrome stays clear.\n */\nexport type ScrollEdge = 'none' | 'material' | 'surface';\n\n/** The default scroll distance, in CSS pixels, a scroll edge fades in over. */\nexport const DEFAULT_SCROLL_EDGE_DISTANCE = 60;\n\n/** The root attributes a component with a scroll edge renders. */\nexport function scrollEdgeAttributes(\n  edge: ScrollEdge,\n  distance: number | undefined,\n  enabled: boolean,\n): {\n  'data-scroll-edge': 'material' | 'surface' | undefined;\n  'data-scroll-edge-distance': string | undefined;\n} {\n  if (!enabled || edge === 'none')\n    return {\n      'data-scroll-edge': undefined,\n      'data-scroll-edge-distance': undefined,\n    };\n  return {\n    'data-scroll-edge': edge,\n    'data-scroll-edge-distance':\n      distance === undefined || !(distance > 0) ? undefined : String(distance),\n  };\n}\n","import type { CssColor } from './css-values.js';\n\n/** The color scheme an app declares for a {@link SurfaceTint}'s color. */\nexport type SurfaceTintScheme = 'light' | 'dark';\n\n/**\n * A scoped tint for a layout surface: the app's color (usually sampled from\n * artwork it already knows) and the scheme that color belongs to. Kerf does no\n * color detection; `scheme` says whether the color reads as a light or a dark\n * surface. Inside the scope the surface, raised surface, text, quiet text, and\n * everything built on them (quiet fills, separators' backdrop, the chrome\n * material) re-derive from the color, with lightness clamped so text keeps\n * WCAG AA over any color.\n */\nexport interface SurfaceTint {\n  color: CssColor;\n  scheme: SurfaceTintScheme;\n  /**\n   * An optional accent (usually the artwork's most vivid color). The scope's\n   * brand ramp re-derives from it: loud fills and their text, brand text and\n   * links, text on brand fills, and the focus ring, each clamped to keep AA.\n   */\n  accent?: CssColor;\n}\n\n/** The root attributes a tinted surface renders. */\nexport function surfaceTintAttributes(tint: SurfaceTint | undefined): {\n  'data-kui-tint': SurfaceTintScheme | undefined;\n  'data-kui-tint-accent': '' | undefined;\n  /** The Web Awesome scheme class, so its theme re-derives in the scope. */\n  className: string;\n  /** The inline declaration carrying the color, or `undefined`. */\n  style: string | undefined;\n} {\n  if (tint === undefined)\n    return {\n      'data-kui-tint': undefined,\n      'data-kui-tint-accent': undefined,\n      className: '',\n      style: undefined,\n    };\n  return {\n    'data-kui-tint': tint.scheme,\n    'data-kui-tint-accent': tint.accent === undefined ? undefined : '',\n    className: `wa-${tint.scheme}`,\n    style:\n      tint.accent === undefined\n        ? `--_kui-tint-color:${tint.color}`\n        : `--_kui-tint-color:${tint.color};--_kui-tint-accent:${tint.accent}`,\n  };\n}\n\n/** Join inline declarations, omitting absent ones. */\nexport function joinStyles(\n  ...declarations: (string | undefined)[]\n): string | undefined {\n  const present = declarations.filter((value) => value !== undefined);\n  return present.length === 0 ? undefined : present.join(';');\n}\n"]}