@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/list-inset-text.d.ts

@@ -0,0 +1,30 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
+
+type ListInsetTextRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-sides'?: never;
+}>;
+interface ListInsetTextProps {
+    /** Text (or inline content) that carries no margin, border, or padding of its own. */
+    children: KerfUiContent | string;
+    /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */
+    sides?: Sides;
+    className?: string;
+    /** Safe `data-*` metadata; component-owned structural attributes stay protected. */
+    rootAttributes?: ListInsetTextRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * Gives bare text the content-item geometry — an 8px inline margin, a 1px
+ * transparent border, and 8px padding — so a plain string lines up with
+ * bordered `.kui-content` items (its text edge lands at the same 17px inset).
+ * Use it for text elements that have no margin, border, or padding of their own.
+ * Pass `sides="rl"` to keep the horizontal inset but drop the vertical box
+ * space for tight text layout.
+ */
+declare function ListInsetText({ children, sides, className, rootAttributes, slot, }: ListInsetTextProps): kerfjs.SafeHtml;
+
+export { ListInsetText, type ListInsetTextProps, Sides };

package/dist/list-inset-text.js

@@ -0,0 +1,4 @@
+export { ListInsetText } from './chunk-S4Y3YTAI.js';
+
+
+//# sourceMappingURL=list-inset-text.js.map

package/dist/list-inset-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"list-inset-text.js"}

package/dist/list-item.d.ts

@@ -1,33 +1,77 @@
 import { SafeHtml } from 'kerfjs';
+import { L as ListIconTile } from './list-icon-tile-B8dr97OW.js';
+export { a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import './css-values.js';
 
 type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
     'data-has-icon'?: never;
+    'data-has-description'?: never;
     'data-multiline'?: never;
+    'data-density'?: never;
+    'data-divider'?: never;
+    'data-busy'?: never;
     'data-state'?: never;
+    'data-kui-disabled'?: never;
+    'data-icon-align'?: never;
+    'data-icon-tile'?: never;
+    'data-icon-tile-tone'?: never;
+    'data-dragging'?: never;
+    'data-drop-position'?: never;
 }>;
 interface ListItemProps {
     label: string | SafeHtml;
+    /** App-owned supporting text rendered in the component's stable label stack. */
+    description?: string | SafeHtml;
     icon?: SafeHtml;
-    trailing?: SafeHtml;
+    /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */
+    iconTile?: ListIconTile;
+    /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */
+    trailing?: KerfUiContent;
+    /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */
+    status?: string | SafeHtml;
+    /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */
+    busy?: boolean;
+    density?: 'standard' | 'compact' | 'spacious';
+    divider?: 'none' | 'before' | 'after' | 'both';
     selected?: boolean;
     action: string;
     itemId?: string;
     className?: string;
-    style?: string;
     pressed?: boolean;
     accessibleLabel?: string;
     title?: string;
     multiline?: boolean;
+    /** Alignment of an icon beside a wrapped label. Defaults to its first line. */
+    multilineIconAlign?: 'first-line' | 'center';
     state?: string;
     disabled?: boolean;
     tabIndex?: number;
-    /** Render the row as an unanimated loading skeleton, disabling its action. */
+    /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */
     placeholder?: boolean;
+    /** Native HTML drag source (`draggable="true"`); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */
+    draggable?: boolean;
+    /** Dim this row as one of the rows being dragged. */
+    dragging?: boolean;
+    /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */
+    dropPosition?: 'before' | 'after';
     rootAttributes?: ListItemRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function ListItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes }: ListItemProps): SafeHtml;
+interface ListItemLinkProps extends Omit<ListItemProps, 'action' | 'pressed'> {
+    /** Native destination for this navigation row. */
+    href: string;
+    /** Open in a new tab with a safe rel and announce that behavior. */
+    external?: boolean;
+    action?: never;
+    pressed?: never;
+}
+declare function ListItem({ label, description, icon, iconTile, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemProps): SafeHtml;
+/** A navigation row with native link activation and ListItem geometry. */
+declare function ListItemLink({ href, external, label, description, icon, iconTile, trailing, status, busy, density, divider, selected, itemId, className, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
 
-export { ListItem, type ListItemProps };
+export { ListIconTile, ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };

package/dist/list-item.js

@@ -1,4 +1,7 @@
-export { ListItem } from './chunk-L4OKFDJY.js';
+export { ListItem, ListItemLink } from './chunk-ZYU5WRC3.js';
+
+
+
 
 
 

package/dist/list.d.ts

@@ -0,0 +1,128 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as StructuralRootAttributes } from './extension-attributes-mu8MFUl0.js';
+import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
+export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
+import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
+import { S as Sides } from './sides-BPSWde0A.js';
+import { UiGap, CssFlexKeyword, CssFlex, CssLength } from './css-values.js';
+export { UiGapValue, UiSpaceName } from './css-values.js';
+
+type ListRootAttributes = StructuralRootAttributes & Readonly<{
+    'data-component'?: never;
+    'data-gap'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+    'data-h-align'?: never;
+    'data-v-align'?: never;
+    'data-scrollable'?: never;
+    'data-scroll-clearance'?: never;
+    'data-frame'?: never;
+    'data-surface'?: never;
+    'data-inset'?: never;
+    'data-text-insets'?: never;
+    'data-control-insets'?: never;
+}>;
+/**
+ * A solid surface painted behind a List: `base` is the page surface
+ * (`--kui-color-surface`), `raised` the raised surface
+ * (`--kui-color-surface-raised`). A lowered region is a `SunkenPanel`.
+ */
+type ListSurface = 'base' | 'raised';
+/**
+ * A preset inset on all four sides. `document` is the reading inset for long
+ * content such as a reader view: 24px block and 32px inline, narrowing to
+ * 16px inline below 576px. It replaces any `textInsets`/`controlInsets`.
+ */
+type ListInset = 'document';
+interface ListProps {
+    children?: KerfUiContent;
+    /** Make this list a labeled multi-select grid for `ContentItem selectionMode="multiple"` rows. */
+    selectionMode?: 'multiple';
+    /** Accessible name for the multi-select grid. */
+    ariaLabel?: string;
+    /** Standard gap (`true`), one spacing value, or separate column and row values. Defaults to no gap. */
+    gap?: boolean | UiGap;
+    /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
+    flex?: boolean | CssFlexKeyword | CssFlex;
+    /**
+     * Fill the height of a parent with a definite height, such as an app root or
+     * a fixed-height frame, when this list is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
+    /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */
+    hAlign?: HorizontalAlignment;
+    /** Vertical distribution. Defaults to top. */
+    vAlign?: ListVerticalAlignment;
+    /**
+     * Own vertical scrolling and overscroll containment. Children keep their
+     * natural height and scroll instead of shrinking. To bound the list by a
+     * `max-height` ancestor (no definite height), give that ancestor a flex
+     * column and use `flex`; `fill` needs a definite-height parent.
+     */
+    scrollable?: boolean;
+    /**
+     * Clear chrome that lies over this scrollable List's block-start and/or
+     * block-end edge, such as a `DialogSurface` floating footer. The List adds
+     * the inherited `--kui-scroll-clearance-block-*` context that chrome
+     * publishes to its own block padding and `scroll-padding`, so its rows
+     * scroll visibly beneath the chrome while the first and last rows (and any
+     * row focused or scrolled into view) can still rest clear of it. Opt in only
+     * the one scroller that reaches the covered edge. Defaults to none.
+     */
+    scrollClearance?: ScrollClearance;
+    /**
+     * Draw a bordered, rounded frame around the stack: a 1px neutral border,
+     * the standard control radius, and a 4px inset on every side that keeps the
+     * first and last rows' focus rings inside a scrolling frame's clip. It
+     * replaces any `inset`/`textInsets`/`controlInsets`. With `scrollable` and
+     * `maxHeight` it is a bounded result picker of `ListItem` rows.
+     */
+    frame?: boolean;
+    /**
+     * The List's maximum block size, a typed `CssLength` from
+     * `@kerfjs/ui/css-values` (such as `rem(14)`). Pair it with `scrollable` so
+     * rows beyond it scroll; it bounds the List without a flex-column ancestor.
+     */
+    maxHeight?: CssLength;
+    /**
+     * The List's minimum block size, a typed `CssLength` (such as `rem(4.25)`),
+     * so a short or empty result set keeps a stable box. Defaults to no minimum.
+     */
+    minHeight?: CssLength;
+    /**
+     * Paint a solid surface behind the stack, including its insets: for a strip
+     * of chrome (a banner above a sunken work area) that must not show the
+     * lowered tint around its content. Omitted, the List is transparent.
+     */
+    surface?: ListSurface;
+    /** Physical divider edges in canonical top/right/bottom/left order. */
+    dividerSides?: Sides;
+    /** A preset four-sided inset; see `ListInset`. */
+    inset?: ListInset;
+    /** Physical sides that receive the standard 17px text inset. */
+    textInsets?: Sides;
+    /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
+    controlInsets?: Sides;
+    className?: string;
+    /**
+     * Safe `data-*`, `aria-*`, and structural `role` metadata (a named drop
+     * `region`, `aria-busy`); List-owned structural attributes remain
+     * protected, and a multi-select List owns its grid role and name.
+     */
+    rootAttributes?: ListRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A list's configuration, apart from its content and styling hooks: the props a
+ * composite that renders a `List` for the app (the Workbench's `mainHeader` /
+ * `mainFooter` chrome) forwards, so the app configures that list instead of
+ * styling it. An omitted or `undefined` field keeps the composite's default.
+ */
+type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
+/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
+declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+
+export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };

package/dist/list.js

@@ -0,0 +1,7 @@
+export { List } from './chunk-HZPHCSCS.js';
+
+
+
+
+
+//# sourceMappingURL=list.js.map

package/dist/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"list.js"}

package/dist/loading-spinner.d.ts

@@ -1,10 +1,20 @@
 import * as kerfjs from 'kerfjs';
+import { CssForegroundColor } from './css-values.js';
+import { LucideIconSize } from './lucide-icon.js';
+import 'lucide';
 
+type LoadingSpinnerSize = LucideIconSize;
 interface LoadingSpinnerProps {
     className?: string;
+    /** Foreground color; omit to inherit the surrounding text color. */
+    color?: CssForegroundColor;
     label?: string;
+    /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */
+    size?: LoadingSpinnerSize;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** Stable viewBox-centered progress ring based on svg-spinners' MIT-licensed 180-ring. */
-declare function LoadingSpinner({ className, label }: LoadingSpinnerProps): kerfjs.SafeHtml;
+declare function LoadingSpinner({ className, color, label, size, slot, }: LoadingSpinnerProps): kerfjs.SafeHtml;
 
-export { LoadingSpinner, type LoadingSpinnerProps };
+export { LoadingSpinner, type LoadingSpinnerProps, type LoadingSpinnerSize };

package/dist/loading-spinner.js

@@ -1,3 +1,4 @@
-export { LoadingSpinner } from './chunk-55DATV3A.js';
+export { LoadingSpinner } from './chunk-WVS6CUCT.js';
+
 
 //# sourceMappingURL=loading-spinner.js.map

package/dist/lucide-icon.d.ts

@@ -1,14 +1,26 @@
-import * as kerfjs from 'kerfjs';
+import { SafeHtml } from 'kerfjs';
 import { IconNode } from 'lucide';
+import { CssForegroundColor } from './css-values.js';
 
 type LucideNode = IconNode;
+type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;
 interface LucideIconProps {
     icon: LucideNode;
     name: string;
+    /** Outline by default; solid fills compatible glyphs with the current text color. */
+    appearance?: 'outline' | 'solid';
     className?: string;
+    /** Foreground color; omit to inherit the surrounding text color. */
+    color?: CssForegroundColor;
+    /** Flow with surrounding text instead of occupying a block. */
+    inline?: boolean;
     label?: string;
+    /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */
+    size?: LucideIconSize;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** Render a Lucide-compatible icon node without copying icon SVG strings. */
-declare function LucideIcon({ icon, name, className, label }: LucideIconProps): kerfjs.SafeHtml;
+declare function LucideIcon({ icon, name, appearance, className, color, inline, label, size, slot, }: LucideIconProps): SafeHtml;
 
-export { LucideIcon, type LucideIconProps, type LucideNode };
+export { LucideIcon, type LucideIconProps, type LucideIconSize, type LucideNode };

package/dist/lucide-icon.js

@@ -1,3 +1,4 @@
-export { LucideIcon } from './chunk-W2FK7ZNY.js';
+export { LucideIcon } from './chunk-LOSRXZAH.js';
+
 
 //# sourceMappingURL=lucide-icon.js.map

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

@@ -0,0 +1,194 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { PaneConfig, ScrollEdge, SurfaceTint } from './pane.js';
+import { ListConfig } from './list.js';
+import { c as PanelBottomToolbar } from './panel-toolbar-vg6Ir5Dy.js';
+import { CssColor } from './css-values.js';
+import { ToolbarConfig } from './toolbar.js';
+import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
+
+/** Content and chrome shared by a navigation view and a static workbench panel. */
+interface NavPane<TToolbar, TBottomToolbar> {
+    content: KerfUiContent;
+    toolbar?: TToolbar;
+    header?: KerfUiContent;
+    headerList?: ListConfig;
+    footer?: KerfUiContent;
+    footerList?: ListConfig;
+    bottomToolbar?: TBottomToolbar;
+    pane?: PaneConfig;
+}
+
+/**
+ * One entry in a {@link NavStack}. The app owns the stack as an array (usually a
+ * signal); `NavStack` renders it and `wireNavStack` animates the transitions.
+ */
+interface NavStackView extends NavPane<NavStackViewToolbar, PanelBottomToolbar> {
+    /** Stable identity for keyed reconcile and transition direction. */
+    key: string;
+}
+/** Per-view top toolbar. The stack supplies its back control before `leading`. */
+interface NavStackViewToolbar extends NavStackToolbarConfig {
+    title?: string;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
+}
+/** A view's structured bottom toolbar; it cross-fades on navigation. */
+type NavStackViewBottomToolbar = PanelBottomToolbar;
+/**
+ * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real
+ * `Toolbar` the stack renders; by default that toolbar draws no divider and
+ * claims the top and side safe-area edges the stack still touches.
+ */
+interface NavStackToolbarConfig extends ToolbarConfig {
+    /** Accessible name of the top toolbar (default: none). */
+    label?: string;
+    /**
+     * Size of the view title's `ToolbarText`. Default `xlarge` at the root,
+     * where the title is the page heading, and `large` once a back control
+     * shares the bar.
+     */
+    titleSize?: ToolbarTextSize;
+    /** Expose the view title as a heading at this level (default: a plain span). */
+    headingLevel?: HeadingLevel;
+}
+/**
+ * How a {@link NavStack}'s top chrome relates to the active view: `docked`
+ * above it, or `overlay` laid over its top edge on the translucent chrome
+ * material, so the view's content scrolls visibly beneath it.
+ * `clear` lays it over
+ * the same edge fully transparent, for chrome over imagery: legibility comes
+ * from glass control groups or a scrim, and with `scrollEdge="material"` the
+ * chrome material fades in once content scrolls beneath it.
+ */
+type NavStackChromePresentation = 'docked' | 'overlay' | 'clear';
+/**
+ * How a {@link NavStack}'s bottom toolbar relates to the active view:
+ * `docked` below it, or `overlay` laid over its bottom edge on the
+ * translucent chrome material, so the view's content scrolls visibly beneath
+ * it.
+ * `clear` lays it over
+ * the same edge fully transparent, for chrome over imagery: legibility comes
+ * from glass control groups or a scrim, and with `scrollEdge="material"` the
+ * chrome material fades in once content scrolls beneath
+ * it, until the view scrolls to its end.
+ */
+type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';
+interface NavStackProps {
+    id: string;
+    /** Accessible name for the stack region. */
+    label: string;
+    /** The stack, root first; the last entry is the active top view. */
+    views: NavStackView[];
+    /** Accessible label for the icon-only back control (default "Back"). */
+    backLabel?: string;
+    /** The back control's icon (default a chevron-left `LucideIcon`). */
+    backIcon?: KerfUiContent;
+    /**
+     * Visible text beside the back icon, such as the previous view's title
+     * (default: icon only). When set, the text names the control and
+     * `backLabel` is not used.
+     */
+    backText?: string;
+    /** The top toolbar's configuration, forwarded to its `Toolbar`. */
+    toolbarConfig?: NavStackToolbarConfig;
+    /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */
+    panelToggle?: KerfUiContent;
+    /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
+    hideToolbar?: boolean;
+    /** Optional persistent bottom toolbar used when the active view does not provide one. */
+    bottomToolbar?: NavStackViewBottomToolbar;
+    /**
+     * Stack chrome separator. `auto` (default) draws both available edges
+     * against a sunken active Pane and otherwise follows `chromeDividers`;
+     * `hidden` suppresses the stack-owned edges.
+     */
+    separator?: 'auto' | 'hidden';
+    /**
+     * The line under the top chrome and over the bottom toolbar, where they
+     * meet the active view. `scroll` (default) shows the chrome's line only
+     * while the view's content is scrolled beneath it, and the bottom
+     * toolbar's only while more content lies below — never when the content
+     * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is
+     * wired above the stack; unwired, neither shows. `always` shows both
+     * without the wiring; `none` neither, even when wired. The line is drawn
+     * inside the chrome, so no state moves the chrome or the content. A
+     * A sunken active Pane still draws the separator unless
+     * `separator="hidden"`. A `toolbarConfig.dividerSides` edge is the Toolbar's
+     * own and is unaffected.
+     */
+    chromeDividers?: 'scroll' | 'always' | 'none';
+    /**
+     * `docked` (default) gives the top chrome its own band above the active
+     * view. `overlay` lays the chrome over the view's top edge on the
+     * translucent chrome material (`--kui-chrome-material`, opaque under
+     * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,
+     * or without `backdrop-filter`), so content scrolls visibly beneath it, as
+     * an iOS navigation bar does. `wireNavStack` measures the live chrome and
+     * hands its height (top safe area included) to the viewport as the
+     * block-start `--kui-edge-inset-*` context, so every view clears it with no
+     * prop: a plain view, a sole `Pane`'s content (or header), and a nested
+     * layout all pad and `scroll-padding` by it, so the first item, and anything
+     * focused or scrolled into view, rests clear of the bar. Until then, and
+     * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in
+     * the chrome lifts its title and description to AA over the content passing
+     * beneath it; keep any other quiet copy in the view. With `clear`, the
+     * stack's own back control sits in a glass control group
+     * (`material="glass"`), so it stays legible over imagery.
+     */
+    chromePresentation?: NavStackChromePresentation;
+    /**
+     * `docked` (default) gives the bottom toolbar its own band below the
+     * active view. `overlay` lays it over the view's bottom edge on the
+     * translucent chrome material (opaque under the same preferences as
+     * `chromePresentation`), so content scrolls visibly beneath it, as under
+     * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a
+     * cross-fading copy) and hands its height (bottom safe area included) to
+     * the viewport as the block-end `--kui-edge-inset-*` context, so a plain
+     * view, a sole `Pane`'s content (or footer), and a nested layout rest their
+     * last item, and anything focused or scrolled into view, clear of it. Until
+     * then, and while no bottom toolbar is shown, it stays docked. Independent
+     * of `chromePresentation`, which governs only the top chrome. An untoned
+     * `ToolbarText` in the toolbar lifts to AA over the content beneath it.
+     */
+    bottomToolbarPresentation?: NavStackBottomToolbarPresentation;
+    /**
+     * For `clear` chrome or bottom toolbar, `material` fades the chrome
+     * material in while the active view's content lies beneath it (default
+     * `none`).
+     */
+    scrollEdge?: ScrollEdge;
+    /**
+     * The scroll distance, in CSS pixels, over which the scroll edge fades in
+     * (default 60).
+     */
+    scrollEdgeDistance?: number;
+    /**
+     * Paint the stack, its docked chrome and bottom toolbar, and every view in
+     * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of
+     * the surface. Overlay chrome keeps the chrome material; one view's own
+     * color goes in its `pane: { background }`. Forced colors paint `Canvas`.
+     */
+    background?: CssColor;
+    /**
+     * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: its surfaces and every
+     * descendant re-derive their surface and text tokens from the app's color
+     * in the declared scheme, with lightness clamped to keep text at WCAG AA.
+     */
+    tint?: SurfaceTint;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last
+ * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and
+ * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the
+ * back control and title lead, the active view's `toolbar` fills the zones,
+ * and `toolbarConfig` supplies defaults. A single-pane
+ * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
+ */
+declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, separator, chromeDividers, chromePresentation, bottomToolbarPresentation, scrollEdge, scrollEdgeDistance, background, tint, className, slot, }: NavStackProps): kerfjs.SafeHtml;
+
+export { type NavStackProps as N, type NavStackView as a, type NavPane as b, NavStack as c, type NavStackBottomToolbarPresentation as d, type NavStackChromePresentation as e, type NavStackToolbarConfig as f, type NavStackViewBottomToolbar as g, type NavStackViewToolbar as h };

package/dist/nav-stack.d.ts

@@ -1,38 +1,15 @@
-import { SafeHtml } from 'kerfjs';
-
-/**
- * One entry in a {@link NavStack}. The app owns the stack as an array (usually a
- * signal); `NavStack` renders it and `wireNavStack` animates the transitions.
- */
-interface NavStackView {
-    /** Stable identity for keyed reconcile and transition direction. */
-    key: string;
-    content: SafeHtml;
-    /** Title shown in the top toolbar for this view. */
-    title?: string;
-    /** Trailing actions for this view's top toolbar. */
-    toolbar?: SafeHtml;
-}
-interface NavStackProps {
-    id: string;
-    /** Accessible name for the stack region. */
-    label: string;
-    /** The stack, root first; the last entry is the active top view. */
-    views: NavStackView[];
-    /** Accessible label for the back control (default "Back"). */
-    backLabel?: string;
-    /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
-    hideToolbar?: boolean;
-    /** Optional persistent bottom toolbar. */
-    bottomToolbar?: SafeHtml;
-    className?: string;
-}
-/**
- * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last
- * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and
- * cross-fades the chrome across a change. A single-pane layout is a `NavStack`
- * with one entry. See `docs/23-app-layouts.md` §3.1.
- */
-declare function NavStack({ id, label, views, backLabel, hideToolbar, bottomToolbar, className }: NavStackProps): SafeHtml;
-
-export { NavStack, type NavStackProps, type NavStackView };
+export { c as NavStack, d as NavStackBottomToolbarPresentation, e as NavStackChromePresentation, N as NavStackProps, f as NavStackToolbarConfig, a as NavStackView, g as NavStackViewBottomToolbar, h as NavStackViewToolbar } from './nav-stack-CU_0dKtI.js';
+import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';

package/dist/nav-stack.js

@@ -1,4 +1,17 @@
-export { NavStack } from './chunk-BLK3UEEI.js';
+export { NavStack } from './chunk-6E2H2E5A.js';
+
+
+
+
+
+
+
+
+
+
+
+
+