@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90

package/dist/list.d.ts

@@ -0,0 +1,64 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.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 Sides } from './sides-BPSWde0A.js';
+import { UiGap, CssFlexKeyword, CssFlex } from './css-values.js';
+export { CssLength, UiGapValue, UiSpaceName } from './css-values.js';
+
+type ListRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-gap'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+    'data-h-align'?: never;
+    'data-v-align'?: never;
+    'data-scrollable'?: never;
+    'data-text-insets'?: never;
+    'data-control-insets'?: never;
+}>;
+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. */
+    scrollable?: boolean;
+    /** Physical divider edges in canonical top/right/bottom/left order. */
+    dividerSides?: Sides;
+    /** 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-*` metadata; List-owned structural attributes remain protected. */
+    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, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+
+export { CssFlex, CssFlexKeyword, HorizontalAlignment, List, type ListConfig, type ListProps, ListVerticalAlignment, Sides, UiGap };

package/dist/list.js

@@ -0,0 +1,7 @@
+export { List } from './chunk-QQICWWNX.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-YOKEL75M.js';
+
 
 //# sourceMappingURL=loading-spinner.js.map

package/dist/lucide-icon.d.ts

@@ -1,14 +1,26 @@
 import * as kerfjs 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): kerfjs.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-NP3FSLNX.js';
+
 
 //# sourceMappingURL=lucide-icon.js.map

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

@@ -0,0 +1,109 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { ListConfig } from './list.js';
+import { PaneConfig } from './pane.js';
+import { c as PanelBottomToolbar } from './panel-toolbar-CL9tYOkh.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 `large`). */
+    titleSize?: ToolbarTextSize;
+    /** Expose the view title as a heading at this level (default: a plain span). */
+    headingLevel?: HeadingLevel;
+}
+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';
+    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, className, slot, }: NavStackProps): kerfjs.SafeHtml;
+
+export { type NavStackProps as N, type NavStackView as a, type NavPane as b, NavStack as c, type NavStackToolbarConfig as d, type NavStackViewBottomToolbar as e, type NavStackViewToolbar as f };

package/dist/nav-stack.d.ts

@@ -1,38 +1,13 @@
-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, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-BvSKY448.js';
+import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';
+import './list.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './css-values.js';
+import './pane.js';
+import './panel-toolbar-CL9tYOkh.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';

package/dist/nav-stack.js

@@ -1,4 +1,14 @@
-export { NavStack } from './chunk-BLK3UEEI.js';
+export { NavStack } from './chunk-SJW5BCEQ.js';
+
+
+
+
+
+
+
+
+
+
 
 
 

package/dist/pane.d.ts

@@ -0,0 +1,116 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/**
+ * 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-deep-inset'?: never;
+    'data-outlined'?: never;
+}>;
+/** How a Pane's header and footer relate to its scrolling content. */
+type PaneChromePlacement = 'fixed' | 'auto';
+/**
+ * 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';
+/** 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;
+    /** Paint the scrolling work surface with the shared lowered-surface color. */
+    appearance?: PaneAppearance;
+    /** 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' | 'appearance' | 'deepInset' | '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, appearance, deepInset, 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 PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -0,0 +1,4 @@
+export { Pane } from './chunk-FL6J644M.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-CL9tYOkh.d.ts

@@ -0,0 +1,72 @@
+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 name, for the accessible "Show …" / "Hide …" label. */
+    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,9 @@
+/**
+ * Marker export for tests and tooling; importing this module registers the
+ * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,
+ * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard
+ * choice through the item's click so delegated `data-action`s run.
+ */
+declare const popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };