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

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-CrZF95VO.d.ts

@@ -0,0 +1,195 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { PaneConfig, ScrollEdge } from './pane.js';
+import { ListConfig } from './list.js';
+import { c as PanelBottomToolbar } from './panel-toolbar-vg6Ir5Dy.js';
+import { CssColor } from './css-values.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.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,16 @@
-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-CrZF95VO.js';
+import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
+import './surface-tint-DQgYCaP9.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,18 @@
-export { NavStack } from './chunk-BLK3UEEI.js';
+export { NavStack } from './chunk-IIQ2XIMU.js';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/dist/pane.d.ts

@@ -0,0 +1,238 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
+import { CssColor } from './css-values.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
+export { a as SurfaceTintScheme } from './surface-tint-DQgYCaP9.js';
+
+/**
+ * What clear (fully transparent) chrome fades in as content scrolls beneath
+ * it: `none` stays clear; `material` fades in the translucent chrome
+ * material; `surface` fades in the opaque surface. The fade tracks the scroll
+ * over `scrollEdgeDistance` (opacity only), from the scroll state
+ * `wireScrollDividers` reports; unwired, the chrome stays clear.
+ */
+type ScrollEdge = 'none' | 'material' | 'surface';
+
+/**
+ * Logical pane sides: where a {@link Pane} can show a separator and where it can
+ * compensate for a device safe-area inset.
+ */
+type PaneSeparatorSide = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
+/** Semantic root elements supported by {@link Pane}. */
+type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';
+/** Semantic elements supported by the scrolling content slot. */
+type PaneContentElement = 'div' | 'main' | 'nav' | 'section';
+type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-separator-block-start'?: never;
+    'data-separator-block-end'?: never;
+    'data-separator-inline-start'?: never;
+    'data-separator-inline-end'?: never;
+    'data-safe-area-block-start'?: never;
+    'data-safe-area-block-end'?: never;
+    'data-safe-area-inline-start'?: never;
+    'data-safe-area-inline-end'?: never;
+    'data-chrome-placement'?: never;
+    'data-chrome-dividers'?: never;
+    'data-appearance'?: never;
+    'data-background'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: never;
+    'data-deep-inset'?: never;
+    'data-outlined'?: never;
+    'data-scroll-clearance'?: never;
+    'data-header-presentation'?: never;
+    'data-header-material'?: never;
+    'data-scroll-edge'?: never;
+    'data-scroll-edge-distance'?: never;
+    'data-header-overlay'?: never;
+    'data-compact-header'?: never;
+    'data-compact-footer'?: never;
+    'data-compact-header-open'?: never;
+    'data-compact-footer-open'?: never;
+}>;
+/** How a Pane's header and footer relate to its scrolling content. */
+type PaneChromePlacement = 'fixed' | 'auto';
+/**
+ * How a header or footer behaves when the pane's container presents
+ * compactly (a `NavStack` view, a `TabNavigator` scene, a full-screen dialog,
+ * or a compact `Workbench`): `fixed` stays docked and shrinks the content
+ * area; `scroll` sits inline with the content (a footer settles at the end
+ * and scrolls past when the content is longer); `overlay` lies over the
+ * content on the chrome material, shown only while the app opens it.
+ */
+type PaneCompactChrome = 'fixed' | 'scroll' | 'overlay';
+/** The compact chrome policy for a Pane's header and footer. */
+interface PaneCompactChromePolicy {
+    header?: PaneCompactChrome;
+    footer?: PaneCompactChrome;
+}
+/**
+ * When a Pane draws the divider between its pinned header or footer and its
+ * scrolling content: `scroll` while content is scrolled away beneath that
+ * chrome, as `wireScrollDividers` reports; `always`; or `none`.
+ */
+type PaneChromeDividers = 'scroll' | 'always' | 'none';
+/**
+ * How a Pane's header relates to its scrolling content: `docked` in its own
+ * row above the content, or `overlay` laid over the content's top edge on the
+ * translucent chrome material, so 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 PaneHeaderPresentation = 'docked' | 'overlay' | 'clear';
+/** Background treatment of the Pane's scrolling work surface. */
+type PaneAppearance = 'default' | 'sunken';
+interface PaneProps {
+    /** Optional fixed chrome above the scrolling content, arranged vertically. */
+    header?: KerfUiContent;
+    /** The pane's primary vertical, scrolling content stack. */
+    children?: KerfUiContent;
+    /** Optional fixed chrome below the scrolling content. */
+    footer?: KerfUiContent;
+    /**
+     * Whether the header and footer stay pinned around the scrolling content.
+     * `fixed` (default) always pins them. `auto` pins them while the pane is
+     * tall enough, and below 480px of height (30rem, so it scales with the text
+     * size) lets the whole pane scroll as one column, so tall chrome can never
+     * squeeze the content to nothing.
+     */
+    chromePlacement?: PaneChromePlacement;
+    /**
+     * The divider under the header and over the footer, where they meet the
+     * scrolling content. Omitted defaults to `scroll` for a plain pane and
+     * `always` for `appearance="sunken"`. `scroll` shows the header's divider only
+     * while the content is scrolled down, and the footer's only while more
+     * content lies below — never when the content fits — once
+     * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
+     * the pane; unwired, neither shows. `always` shows both; `none` neither.
+     * The line is drawn inside the chrome, so no state moves the content.
+     */
+    chromeDividers?: PaneChromeDividers;
+    /**
+     * `docked` (default) gives the header its own row above the scrolling
+     * content. `overlay` lays the header over the content's top edge on the
+     * translucent chrome material (`--kui-chrome-material`, opaque under
+     * `prefers-reduced-transparency`, forced colors, or without
+     * `backdrop-filter`), so content scrolls visibly beneath it. Once
+     * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
+     * the pane it measures the header and publishes its height as the
+     * `--kui-scroll-clearance-block-start` context, which the content adds to
+     * its block-start padding and `scroll-padding` without any
+     * `scrollClearance` prop, so the first item, and anything focused or
+     * scrolled into view, rests clear of the header. Until then, and with
+     * `chromePlacement="auto"`, the header stays docked. Keep overlay header
+     * text in the normal text color: quiet text can fall below AA over the
+     * content passing beneath it.
+     */
+    /**
+     * What the header and footer do when the pane's container presents
+     * compactly (default `fixed`); roomy containers ignore it. The container
+     * interprets it, so set it on panes inside a `NavStack`, `TabNavigator`,
+     * full-screen dialog, or `Workbench`.
+     */
+    compactChrome?: PaneCompactChromePolicy;
+    /**
+     * Which `overlay` compact chrome is showing. The app owns it and flips it
+     * from a control the person can reach while the chrome is hidden.
+     */
+    compactChromeOpen?: {
+        header?: boolean;
+        footer?: boolean;
+    };
+    headerPresentation?: PaneHeaderPresentation;
+    /**
+     * With `headerPresentation="clear"`, `material` fades the chrome material
+     * in behind the header once content scrolls 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 scrolling work surface with the shared lowered-surface color. */
+    appearance?: PaneAppearance;
+    /**
+     * Paint the whole pane, header and footer included, in an app-chosen color
+     * (`uiColor('surface-raised')`, `fillColor('#1f2a44')`, or `colorVar(…)`
+     * from `@kerfjs/ui/css-values`). It replaces the appearance's fill: a sunken
+     * pane drops its lowered color and grain. Omitted, the pane keeps its
+     * default (transparent, or the sunken surface). Forced colors paint
+     * `Canvas`. Keep text at AA over the color; a dark color needs a matching
+     * tint or dark tones for its content.
+     */
+    background?: CssColor;
+    /**
+     * A scoped tint: `{ color, scheme }`, the app's color and the scheme it
+     * belongs to. The pane paints the tinted surface (unless `background` is
+     * set) and its whole subtree, chrome material and quiet fills included,
+     * re-derives its surface and text tokens from the color with lightness
+     * clamped to keep text at WCAG AA. Without relative color syntax, or under
+     * `prefers-contrast: more`, the scope keeps the plain palette in the
+     * declared scheme.
+     */
+    tint?: SurfaceTint;
+    /**
+     * Clear chrome that lies over the scrolling content's block-start and/or
+     * block-end edge, such as a `DialogSurface` floating footer over a filling
+     * Pane. The content scroller adds the inherited
+     * `--kui-scroll-clearance-block-*` context that chrome publishes to its block
+     * padding and `scroll-padding`, so content scrolls visibly beneath the chrome
+     * while its first and last items (and anything focused or scrolled into
+     * view) can still rest clear of it. Defaults to none.
+     */
+    scrollClearance?: ScrollClearance;
+    /** Add 8px to every side of scrolling content (default: false). */
+    deepInset?: boolean;
+    /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the Pane root. */
+    tabIndex?: 0 | -1;
+    /** Keep the standard focus outline visible, such as for a drop target. */
+    outlined?: boolean;
+    /** Root semantics. Defaults to `div`. */
+    element?: PaneElement;
+    /** Scrolling content semantics. Defaults to `div`. */
+    contentElement?: PaneContentElement;
+    /** Independent logical-edge separator lines. Defaults to none. */
+    separators?: readonly PaneSeparatorSide[];
+    /**
+     * Sides on which the pane may compensate for a device safe-area inset.
+     * Defaults to every side: the pane pads its slots for each side that still
+     * reaches an unsafe screen edge, as its surrounding layout reports, while its
+     * background and separators paint through. List only the sides an app-owned
+     * layout places at a screen edge, or pass `[]` to opt out.
+     */
+    safeAreaEdges?: readonly PaneSeparatorSide[];
+    id?: string;
+    /** Accessible name for a landmark root such as `aside` or `main`. */
+    label?: string;
+    /** Accessible name for a landmark scrolling slot such as `nav`. */
+    contentLabel?: string;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */
+    rootAttributes?: PaneRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A pane's configuration, apart from its content and styling hooks: the props a
+ * composite that renders a `Pane` for the app (a Workbench panel or work area,
+ * or a CollapsiblePanel) forwards, so the app configures that pane instead of
+ * styling it. An omitted or `undefined` field keeps the composite's default.
+ */
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'compactChrome' | 'compactChromeOpen' | 'headerPresentation' | 'scrollEdge' | 'scrollEdgeDistance' | 'appearance' | 'background' | 'tint' | 'deepInset' | 'scrollClearance' | 'tabIndex' | 'outlined'>;
+/**
+ * An unpadded application column with optional fixed header/footer slots and one
+ * scrolling vertical content owner. Separator lines are independently opt-in on
+ * each logical edge, so the same component works as a sidebar, main area,
+ * inspector, or dialog column.
+ */
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, compactChrome, compactChromeOpen, headerPresentation, scrollEdge, scrollEdgeDistance, appearance, background, tint, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, SurfaceTint };

package/dist/pane.js

@@ -0,0 +1,7 @@
+export { Pane } from './chunk-XRZSK2WC.js';
+
+
+
+
+
+//# sourceMappingURL=pane.js.map

package/dist/pane.js.map

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

package/dist/panel-toolbar-vg6Ir5Dy.d.ts

@@ -0,0 +1,77 @@
+import { ToolbarConfig } from './toolbar.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { LucideIcon } from './lucide-icon.js';
+
+/** Which edge a collapsible panel docks to. */
+type PanelSide = 'left' | 'right' | 'bottom';
+/**
+ * The standard collapse/expand icon for a panel `side` and `collapsed` state,
+ * so every app's sidebars and drawers use one recognizable convention:
+ * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`
+ * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while
+ * collapsed. Exposed so an app can render its own toggle affordance.
+ */
+declare function collapsiblePanelToggleIcon(side: PanelSide, collapsed: boolean): {
+    icon: Parameters<typeof LucideIcon>[0]['icon'];
+    name: string;
+};
+/**
+ * The standard collapse toggle a panel toolbar renders. The app handles the
+ * button's `data-action` and flips its own `collapsed` flag.
+ */
+interface PanelToggle {
+    /** The `data-action` the toggle button carries. */
+    action: string;
+    /**
+     * The panel's short title-style name ("Navigator", "Build Output"). It is
+     * the toggle group's accessible name and completes the default "Show …" /
+     * "Hide …" label ("Show Navigator"), so it follows the title-style rule in
+     * `docs/writing.md`; it is never recapitalized.
+     */
+    name: string;
+    /** Accessible label while the panel is collapsed. Defaults to `Show {name}`. */
+    showLabel?: string;
+    /** Accessible label while the panel is open. Defaults to `Hide {name}`. */
+    hideLabel?: string;
+}
+/**
+ * A collapsible panel's top toolbar, composed so its groups follow the
+ * panel's open state.
+ *
+ * - `title` precedes the `leading` zone. Groups may appear in any of the
+ *   `leading`, `center`, and `trailing` zones while the panel is open.
+ * - Groups marked `relocateOnCollapse` move to the work area's toolbar while
+ *   the panel is collapsed, preserving their order across the three zones.
+ * - `toggle` is always the last group: in the panel's toolbar while it is
+ *   open, and right after the relocated groups in the work area's toolbar
+ *   while it is collapsed.
+ *
+ * Relocated content renders in both places while the panel is collapsed (the
+ * panel's copy is inert), so give it no `id`s. Pass groups directly or in
+ * arrays so their render-time annotation remains available to the panel.
+ *
+ * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,
+ * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`. It draws no
+ * divider of its own: the panel's `Pane` draws the line under it while the
+ * content is scrolled (its `chromeDividers`, wired by `wireScrollDividers`).
+ */
+interface PanelToolbar extends ToolbarConfig {
+    /** Accessible name of the panel's toolbar. */
+    label: string;
+    title?: KerfUiContent;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
+    toggle?: PanelToggle;
+}
+/** A panel's fixed bottom toolbar, below its optional footer content. */
+interface PanelBottomToolbar extends ToolbarConfig {
+    label: string;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
+}
+/** Whether panel chrome stays fixed, scrolls, or follows Pane's auto rule. */
+type PanelChromePlacement = 'fixed' | 'scroll' | 'auto';
+
+export { type PanelSide as P, type PanelToolbar as a, type PanelChromePlacement as b, type PanelBottomToolbar as c, type PanelToggle as d, collapsiblePanelToggleIcon as e };

package/dist/popup-menu-register.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Marker export for tests and tooling; importing this module wires every
+ * `PopupMenu` in the document: opening from its trigger and from
+ * `openPopupMenu` / `openPopupMenuAt` / `closePopupMenu`, top-layer placement,
+ * keyboard navigation and typeahead, hover-opened submenus, the `kui-menu-select`
+ * choice event, and focus return. It also registers the help tag an
+ * icon-only trigger shows on hover or keyboard focus.
+ */
+declare const popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };

package/dist/popup-menu-register.js

@@ -0,0 +1,13 @@
+import { installPopupMenus } from './chunk-EYDXFOSH.js';
+import { installHelpTags } from './chunk-2LM3PYHA.js';
+
+
+
+// src/components/actions/popup-menu/register/popup-menu-register.ts
+installPopupMenus();
+installHelpTags();
+var popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };
+
+//# sourceMappingURL=popup-menu-register.js.map

package/dist/popup-menu-register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/popup-menu/register/popup-menu-register.ts"],"names":[],"mappings":";;;;;;AAGA,iBAAA,EAAkB;AAClB,eAAA,EAAgB;AAUT,IAAM,2BAAA,GAA8B","file":"popup-menu-register.js","sourcesContent":["import { installHelpTags } from '../../../../wiring/help-tags.js';\nimport { installPopupMenus } from '../internal/popup-menu-controller.js';\n\ninstallPopupMenus();\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module wires every\n * `PopupMenu` in the document: opening from its trigger and from\n * `openPopupMenu` / `openPopupMenuAt` / `closePopupMenu`, top-layer placement,\n * keyboard navigation and typeahead, hover-opened submenus, the `kui-menu-select`\n * choice event, and focus return. It also registers the help tag an\n * icon-only trigger shows on hover or keyboard focus.\n */\nexport const popupMenuElementsRegistered = true;\n"]}