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

package/dist/list.d.ts

@@ -0,0 +1,149 @@
+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-content-width'?: never;
+    'data-content-align'?: 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';
+/**
+ * A readable measure for a page's content column: `compact` 440px, `medium`
+ * 640px, or `wide` 864px of content, the same steps as a catalog example's
+ * `contentWidth`.
+ */
+type ListContentWidth = 'compact' | 'medium' | 'wide';
+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`. */
+    /**
+     * Cap the list's content at a readable measure, plus its insets, so a page
+     * column needs no application CSS. Composes with `inset="document"`.
+     */
+    contentWidth?: ListContentWidth;
+    /** Where a `contentWidth` column sits: `center` (default) or `start`. */
+    contentAlign?: 'start' | 'center';
+    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;
+    /**
+     * The list's id, so app code can address it: name it as a
+     * `wireScrollDividers` scroller (with a `Toolbar` above it as its chrome),
+     * or find it in tests.
+     */
+    id?: 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, contentWidth, contentAlign, dividerSides, textInsets, controlInsets, className, id, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+
+export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListContentWidth, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };

package/dist/list.js

@@ -0,0 +1,7 @@
+export { List } from './chunk-NB6POCFH.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,34 @@
-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;
+    /** The icon's accessible name; without it the icon is decorative. */
     label?: string;
+    /**
+     * Hover text, as an SVG `<title>`: a status icon's explanation ("Session
+     * halted"). With `label`, the label stays the accessible name; alone, the
+     * title also names the icon. The whole icon box shows it, not just its
+     * strokes.
+     */
+    title?: 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, title, 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-HJXVVFBT.js';
+
 
 //# sourceMappingURL=lucide-icon.js.map

package/dist/message-composer.d.ts

@@ -0,0 +1,70 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/**
+ * Application `data-*` identity on the MessageComposer root, such as `data-key`;
+ * the composer's own configuration attributes stay protected.
+ */
+type MessageComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface MessageComposerProps {
+    /** The message field's accessible name, in title style ("Message"). */
+    label: string;
+    /** Native textarea `name`: the form field the message submits under. */
+    name: string;
+    /**
+     * The textarea id. With a `hint`, the hint takes `<id>-hint` and becomes
+     * the field's accessible description.
+     */
+    id?: string;
+    /** The field's text: a draft to restore, or `''` after sending. */
+    value?: string;
+    /** Sentence-style example of what to write ("Ask about this build"). */
+    placeholder?: string;
+    /**
+     * Visible lines while the field is empty or short (default 1). The field
+     * grows with its content from here.
+     */
+    minRows?: number;
+    /**
+     * Lines the field grows to before it scrolls (default 8). At least
+     * `minRows`.
+     */
+    maxRows?: number;
+    /**
+     * Quiet, sentence-style supporting copy in the action row's leading zone,
+     * after any `leading` controls.
+     */
+    hint?: string;
+    /**
+     * Controls at the start of the action row, such as an attach button or a
+     * model `Select`, normally in a `ToolbarControlGroup`.
+     */
+    leading?: KerfUiContent;
+    /** Trailing controls in the action row, normally one brand Send button. */
+    trailing: KerfUiContent;
+    /** Disable the field; the app disables its own actions. */
+    disabled?: boolean;
+    /**
+     * Opt in to Enter-to-send: with `wireMessageComposers` running over an ancestor,
+     * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing
+     * action, Shift+Enter inserts a newline, and an Enter that commits an IME
+     * composition or meets an empty message does not send. The field announces
+     * the shortcut with `aria-keyshortcuts`.
+     */
+    submitOnEnter?: boolean;
+    /** Safe `data-*` identity on the root. */
+    rootAttributes?: MessageComposerRootAttributes;
+    className?: string;
+    /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */
+    slot?: string;
+}
+/**
+ * A chat or prompt composer: a raised frame whose border turns brand while
+ * focus is within, holding a borderless message field that grows with its
+ * content between `minRows` and `maxRows` lines, above a compact `Toolbar`
+ * action row: optional `leading` controls and `hint`, then `trailing` actions. The app owns the value and sending;
+ * `submitOnEnter` with `wireMessageComposers` adds Enter-to-send.
+ */
+declare function MessageComposer({ label, name, id, value, placeholder, minRows, maxRows, hint, leading, trailing, disabled, submitOnEnter, rootAttributes, className, slot, }: MessageComposerProps): kerfjs.SafeHtml;
+
+export { MessageComposer, type MessageComposerProps, type MessageComposerRootAttributes };

package/dist/message-composer.js

@@ -0,0 +1,6 @@
+export { MessageComposer } from './chunk-4OV272LF.js';
+
+
+
+
+//# sourceMappingURL=message-composer.js.map

package/dist/message-composer.js.map

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

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-SOFPUW3O.js';
+
+
+
+
+
+
+
+
+
+
+
+
+