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

package/dist/token-search-model-aYR0YAei.d.ts

@@ -0,0 +1,184 @@
+import { SafeHtml, Signal } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+interface TokenSearchToken {
+    value: string;
+    label: string;
+    offset?: number;
+    accessibleLabel?: string;
+}
+/**
+ * Domain `data-*` metadata for a trailing action button. The component owns
+ * `data-action` (pass `action`) and its state attributes.
+ */
+type TokenSearchTrailingActionAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-action'?: never;
+    'data-component'?: never;
+    'data-key'?: never;
+}>;
+interface TokenSearchTrailingActionBase {
+    /** Decorative glyph, such as a `LucideIcon`. */
+    icon: SafeHtml;
+    /** Accessible name and tooltip, in title style ("Search Help"). */
+    label: string;
+    /** Delegated `data-action` value. */
+    action: string;
+    id?: string;
+    /** `aria-controls`: the id of the surface this button opens or toggles. */
+    controls?: string;
+    /** `aria-haspopup` for a button that opens a dialog, menu, or listbox. */
+    haspopup?: 'dialog' | 'menu' | 'listbox' | 'true';
+    /** Domain `data-*` metadata for the app's delegated handler. */
+    attributes?: TokenSearchTrailingActionAttributes;
+}
+/**
+ * A compact icon button in the field's trailing slot, sized and styled like
+ * the clear button. Pass `expanded` for a disclosure (a help surface it opens)
+ * or `pressed` for a toggle; the button shows the state with its hover fill.
+ */
+type TokenSearchTrailingAction = TokenSearchTrailingActionBase & ({
+    expanded?: boolean;
+    pressed?: never;
+} | {
+    expanded?: never;
+    pressed?: boolean;
+});
+type TokenSearchEditorAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-key'?: never;
+    'data-morph-skip'?: never;
+    'data-token-search-editor'?: never;
+    'data-token-count'?: never;
+    'data-placeholder'?: never;
+}>;
+interface TokenSearchFieldBaseProps {
+    id: string;
+    label: string;
+    query?: string;
+    tokens?: readonly TokenSearchToken[];
+    /** Opt-in grammar, suggestion, and evaluation state. Overrides `query` and `tokens`. */
+    model?: TokenSearchModel;
+    /**
+     * Editor identity for a programmatic text replacement. The editor's text is
+     * DOM-owned between token changes, so a new `query` with the same tokens
+     * does not re-render it (that would reset the caret on every keystroke).
+     * Change `revision` when the app replaces the text itself — reseeding a
+     * persistent dialog's field on reopen, applying a saved search — and the
+     * editor is rebuilt from `query` and `tokens`.
+     */
+    revision?: string | number;
+    placeholder?: string;
+    tokenPlaceholder?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    /** Let an expanded collapsible field consume the available inline width. */
+    fill?: boolean;
+    leading?: KerfUiContent;
+    editAction?: string;
+    removeAction?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    /** Icon for the clear button. Default: the Lucide `x` glyph token chips also use. */
+    clearIcon?: SafeHtml;
+    className?: string;
+    editorAttributes?: TokenSearchEditorAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type TokenSearchTrailingProps = {
+    trailing?: KerfUiContent;
+    trailingAction?: never;
+} | {
+    trailing?: never;
+    trailingAction: TokenSearchTrailingAction;
+};
+type TokenSearchPresentationProps = {
+    /** Standalone field chrome or the inset visual layer of a configured toolbar group. */
+    presentation?: 'standalone' | 'toolbar-group';
+    hint?: never;
+    required?: never;
+} | {
+    /** Visible form label and optional hint around the full-width standalone control. */
+    presentation: 'form-field';
+    hint?: string;
+    /** Marks the editor required; the app validates its value. */
+    required?: boolean;
+};
+type TokenSearchCollapsibleProps = {
+    /** Allow an empty field to render as one iconic action. */
+    collapsible: true;
+    /** Keep an empty collapsible field open while the application owns focus. */
+    expanded?: boolean;
+    expandAction?: string;
+    expandLabel?: string;
+} | {
+    collapsible?: false;
+    expanded?: never;
+    expandAction?: never;
+    expandLabel?: never;
+};
+type TokenSearchFieldProps = TokenSearchFieldBaseProps & TokenSearchCollapsibleProps & TokenSearchTrailingProps & TokenSearchPresentationProps;
+interface TokenSearchFieldValue {
+    query: string;
+    tokens: TokenSearchToken[];
+}
+declare function TokenSearchField({ id, label, query, tokens, model, revision, placeholder, tokenPlaceholder, disabled, autofocus, fill, collapsible, expanded, expandAction, expandLabel, leading, trailing, trailingAction, presentation, hint, required, editAction, removeAction, clearAction, clearLabel, clearIcon, className, editorAttributes, slot, }: TokenSearchFieldProps): SafeHtml;
+/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
+declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
+/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */
+declare function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void;
+
+interface TokenSearchRule {
+    /** The word before `:` (for example `tag` or `status`). */
+    name: string;
+    /** Return a canonical value, or undefined to leave invalid input as text. */
+    parse?: (input: string) => string | undefined;
+    /** Label for a committed chip. Defaults to `name:input`. */
+    label?: (value: string, input: string) => string;
+    /** Suggestions for the unfinished value after `name:`, with current committed tokens. */
+    suggest?: (input: string, state: TokenSearchState) => readonly (string | {
+        value: string;
+        label: string;
+    })[];
+}
+interface TokenSearchResolvedToken extends TokenSearchToken {
+    kind: string;
+    parsedValue: string;
+}
+interface TokenSearchState {
+    query: string;
+    tokens: TokenSearchResolvedToken[];
+}
+interface TokenSearchSuggestion {
+    value: string;
+    label: string;
+}
+interface TokenSearchModel<Result = unknown> {
+    state: Signal<TokenSearchState>;
+    /** Changes when a model action must replace DOM-owned editor text. */
+    editorRevision: Signal<number>;
+    suggestions: Signal<readonly TokenSearchSuggestion[]>;
+    result: Signal<Result | undefined>;
+    edit(value: TokenSearchFieldValue, commit?: boolean): void;
+    /** Replace app-owned search state and rebuild the DOM-owned editor text. */
+    replace(value: TokenSearchFieldValue): void;
+    submit(value: TokenSearchFieldValue): void;
+    choose(value: string): void;
+    /** Commit a value for the active `name:` prefix, even when it is not suggested. */
+    commit(value: string): void;
+    expandToken(value: string): void;
+    remove(value: string): void;
+    clear(): void;
+    dismiss(): void;
+}
+interface TokenSearchModelOptions<Result> {
+    rules?: readonly TokenSearchRule[];
+    initial?: TokenSearchFieldValue;
+    /** Runs after every state change, including initial state. */
+    evaluate?: (state: TokenSearchState) => Result;
+    onSubmit?: (state: TokenSearchState, result: Result | undefined) => void;
+}
+/** Opt-in state, token parsing, suggestions, and evaluation for TokenSearchField. */
+declare function createTokenSearchModel<Result = unknown>({ rules, initial, evaluate, onSubmit, }?: TokenSearchModelOptions<Result>): TokenSearchModel<Result>;
+
+export { type TokenSearchEditorAttributes as T, TokenSearchField as a, type TokenSearchFieldProps as b, type TokenSearchFieldValue as c, type TokenSearchModel as d, type TokenSearchModelOptions as e, type TokenSearchResolvedToken as f, type TokenSearchRule as g, type TokenSearchState as h, type TokenSearchSuggestion as i, type TokenSearchToken as j, type TokenSearchTrailingAction as k, type TokenSearchTrailingActionAttributes as l, createTokenSearchModel as m, placeTokenSearchCaret as p, readTokenSearchField as r };

package/dist/token-search-model.d.ts

@@ -0,0 +1,3 @@
+export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, m as createTokenSearchModel } from './token-search-model-aYR0YAei.js';
+import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';

package/dist/token-search-model.js

@@ -0,0 +1,3 @@
+export { createTokenSearchModel } from './chunk-IM3GKYOG.js';
+
+//# sourceMappingURL=token-search-model.js.map

package/dist/token-search-model.js.map

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

package/dist/toolbar-control-group.d.ts

@@ -1,15 +1,115 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
 
+type ToolbarControlGroupAppearance = 'contained' | 'borderless';
+type ToolbarControlGroupTone = 'default' | 'dark';
+/** Surface material: the opaque `solid` fill (default) or translucent `glass`. */
+type ToolbarControlGroupMaterial = 'solid' | 'glass';
+/** Quiet palette for a contained, single decorative icon tile. */
+type ToolbarControlGroupTileTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+type ToolbarControlGroupButtonAppearance = 'plain' | 'push';
+type ToolbarControlGroupShape = 'pill' | 'rounded';
+type ToolbarControlGroupSize = 'default' | 'compact';
+type ToolbarControlGroupDensity = 'comfortable' | 'tight';
+type ToolbarControlGroupContent = 'icon' | 'text' | 'mixed' | 'avatar' | 'search';
+type ToolbarControlGroupFocusRing = 'control' | 'outline' | 'halo';
+type ToolbarControlGroupSelectedChrome = 'raised' | 'filled' | 'outline' | 'none';
+type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';
+type ToolbarControlGroupOverflow = 'visible' | 'scroll' | 'wrap';
+type ToolbarControlGroupExpandedOverflow = 'clip' | 'visible';
+type ToolbarControlGroupMenuInset = 'standard' | 'compact' | 'list-zero';
+type ToolbarControlGroupVisibility = 'always' | 'compact-only' | 'hide-collapsed-tiny' | 'yield-to-expanded-sibling';
+type ToolbarControlGroupSizing = 'content' | 'grow' | 'fill';
+type ToolbarControlGroupPlacement = 'start' | 'end';
+interface ToolbarActionLinkProps {
+    href: string;
+    label: string;
+    icon?: KerfUiContent;
+    /** Optional machine-readable detail hidden visually but included in the default accessible name. */
+    detail?: string;
+    /** Override the accessible name when surrounding context is needed. */
+    ariaLabel?: string;
+    /** Open in a new tab with a safe rel and announce that behavior. */
+    external?: boolean;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** A semantic anchor with ToolbarControlGroup-owned action geometry. */
+declare function ToolbarActionLink({ href, label, icon, detail, ariaLabel, external, className, slot, }: ToolbarActionLinkProps): kerfjs.SafeHtml;
 interface ToolbarControlGroupProps {
-    children: SafeHtml | SafeHtml[];
+    children: KerfUiContent;
     label?: string;
     className?: string;
     expanded?: boolean;
     single?: boolean;
-    appearance?: 'contained' | 'borderless';
-    tone?: 'default' | 'dark';
-    buttonAppearance?: 'plain' | 'push';
+    appearance?: ToolbarControlGroupAppearance;
+    tone?: ToolbarControlGroupTone;
+    /**
+     * `glass` paints the group on the translucent chrome material (backdrop
+     * blur and saturation) with a specular edge and a soft shadow, for a group
+     * floating over imagery or a clear toolbar. Controls take the normal text
+     * color so they keep AA over any content; the fill turns opaque under
+     * reduced transparency, increased contrast, static effects, or without
+     * backdrop-filter support. A borderless group has no surface and ignores it.
+     */
+    material?: ToolbarControlGroupMaterial;
+    /** Quiet fill, matching border and foreground for a contained single group whose only child is a decorative SVG. Ignored for interactive or mixed content. */
+    tileTone?: ToolbarControlGroupTileTone;
+    buttonAppearance?: ToolbarControlGroupButtonAppearance;
+    /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */
+    shape?: ToolbarControlGroupShape;
+    size?: ToolbarControlGroupSize;
+    density?: ToolbarControlGroupDensity;
+    content?: ToolbarControlGroupContent;
+    /** Whether controls paint focus individually or the group paints an outline/halo on focus-within. */
+    focusRing?: ToolbarControlGroupFocusRing;
+    /**
+     * Chrome a pressed (`aria-pressed="true"`) control paints. `none` keeps a
+     * pressed control looking like its neighbors, for an icon-state toggle whose
+     * glyph already shows the state (an empty or filled star); hover and the
+     * focus ring are unchanged. One control can opt out alone with
+     * `data-selected-chrome="none"` on its own button.
+     */
+    selectedChrome?: ToolbarControlGroupSelectedChrome;
+    selectedTone?: ToolbarControlGroupSelectedTone;
+    /** Size a nested Web Awesome dropdown trigger as part of this group. */
+    nestedDropdown?: boolean;
+    /** Configure the nested dropdown menu inset without consumer ::part() CSS. */
+    menuInset?: ToolbarControlGroupMenuInset;
+    /** Keep an overlong row inside the available width by scrolling or wrapping. */
+    overflow?: ToolbarControlGroupOverflow;
+    /** Let app-owned anchored surfaces extend outside an expanded search group. Collapsed searches retain their clipping. */
+    expandedOverflow?: ToolbarControlGroupExpandedOverflow;
+    /** Responsive visibility owned by the enclosing Toolbar container. */
+    visibility?: ToolbarControlGroupVisibility;
+    /** Hide below this Toolbar content width; requires wireToolbarVisibility. */
+    hideBelow?: CssLength;
+    /** Show only below this Toolbar content width; requires wireToolbarVisibility. */
+    showBelow?: CssLength;
+    /** Intrinsic (default), grow from a basis, or occupy a full wrapping row. */
+    sizing?: ToolbarControlGroupSizing;
+    /** Place this group at the end of its flex row in a wrapping Toolbar zone. */
+    placement?: ToolbarControlGroupPlacement;
+    /** CSS length used as the minimum width and flex basis for `sizing="grow"`; defaults to 19rem. */
+    growBasis?: string;
+    /** Move this group into the work-area toolbar when its panel collapses. */
+    relocateOnCollapse?: boolean;
+    /** Add contrast behind photo-backed avatar content. */
+    scrim?: boolean;
+    /** Block the group's controls and show a spinner without changing its dimensions. */
+    busy?: boolean;
+    /** Announced status while busy; defaults to “Working”. */
+    busyLabel?: string;
+    /**
+     * Avatar image URL. A single-control group paints it on the group; a
+     * multi-control group paints it only on the pressed selection highlight.
+     */
+    avatarImage?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance }: ToolbarControlGroupProps): SafeHtml;
+declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, material, tileTone, buttonAppearance, shape, size, density, content, focusRing, selectedChrome, selectedTone, nestedDropdown, menuInset, overflow, expandedOverflow, visibility, hideBelow, showBelow, sizing, placement, growBasis, relocateOnCollapse, scrim, busy, busyLabel, avatarImage, slot, }: ToolbarControlGroupProps): kerfjs.SafeHtml;
 
-export { ToolbarControlGroup, type ToolbarControlGroupProps };
+export { ToolbarActionLink, type ToolbarActionLinkProps, ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupContent, type ToolbarControlGroupDensity, type ToolbarControlGroupExpandedOverflow, type ToolbarControlGroupFocusRing, type ToolbarControlGroupMaterial, type ToolbarControlGroupMenuInset, type ToolbarControlGroupOverflow, type ToolbarControlGroupPlacement, type ToolbarControlGroupProps, type ToolbarControlGroupSelectedChrome, type ToolbarControlGroupSelectedTone, type ToolbarControlGroupShape, type ToolbarControlGroupSize, type ToolbarControlGroupSizing, type ToolbarControlGroupTileTone, type ToolbarControlGroupTone, type ToolbarControlGroupVisibility };

package/dist/toolbar-control-group.js

@@ -1,3 +1,5 @@
-export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-2PXZBFEC.js';
+
+
 
 //# sourceMappingURL=toolbar-control-group.js.map

package/dist/toolbar-text.d.ts

@@ -1,23 +1,77 @@
 import * as kerfjs from 'kerfjs';
+import { CssLength } from './css-values.js';
 
-type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';
+type ToolbarTextSize = 'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';
+type ToolbarTextTone = 'default' | 'dark';
 /** ARIA heading level for a title exposed as a heading landmark. */
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface ToolbarTextProps {
+interface ToolbarTextBaseProps {
     text: string;
     size?: ToolbarTextSize;
+    /**
+     * Use loud-toolbar foregrounds on a toolbar painted with the inverse loud
+     * fill, matching dark control groups; like them it inverts with the color
+     * scheme. Over a dark photo or scrim keep the default tone inside a
+     * `BackdropImage` overlay, which takes the dark scheme under its scrim.
+     */
+    tone?: ToolbarTextTone;
+    /** Hide below this Toolbar content width; requires wireToolbarVisibility. */
+    hideBelow?: CssLength;
+    /** Show only below this Toolbar content width; requires wireToolbarVisibility. */
+    showBelow?: CssLength;
     className?: string;
     /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */
     id?: string;
     /**
-     * Expose heading semantics (`role="heading"` + `aria-level`) so the text acts as
-     * a heading landmark — e.g. a page's primary title. Omit to keep the plain span
-     * (the default), which suits a dialog title referenced via `aria-labelledby`.
+     * Show a trailing ellipsis (…) where the text is truncated — on the single line
+     * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip
+     * instead. Default true.
+     */
+    ellipsis?: boolean;
+    /**
+     * Grow to fill the free space of the flex row it sits in (a Toolbar zone),
+     * truncating at the space left by its siblings instead of taking only its
+     * text's width. Default false.
      */
+    fill?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type ToolbarTextWrappingProps = {
+    /** Wrap onto multiple lines; combine with `maxLines` to cap them. */
+    wrap: true;
+    maxLines?: number | null;
+} | {
+    wrap?: false;
+    maxLines?: never;
+};
+type ToolbarTextProps = ToolbarTextBaseProps & (({
+    action?: never;
+    /** Expose `role="heading"` and `aria-level` on read-only text. */
     headingLevel?: HeadingLevel;
-    /** Render the text as an unanimated loading skeleton instead of its value. */
+    /** Render an unanimated loading skeleton instead of the text. */
     placeholder?: boolean;
-}
-declare function ToolbarText({ text, size, className, id, headingLevel, placeholder }: ToolbarTextProps): kerfjs.SafeHtml;
+    /**
+     * Quiet, single-line supporting copy under the title ("Changes save
+     * automatically."), truncating with an ellipsis. Title and description
+     * share the toolbar's control band and the same text start, with or
+     * without a leading icon group. With a description, `id` and
+     * `headingLevel` apply to the title alone, so a dialog's
+     * `aria-labelledby` names only the title.
+     */
+    description?: string;
+    /** Id for the description, for a dialog's `aria-describedby`. */
+    descriptionId?: string;
+} & ToolbarTextWrappingProps) | {
+    /** Render a native button with this delegated action; the app owns editing. */
+    action: string;
+    headingLevel?: never;
+    placeholder?: never;
+    wrap?: never;
+    maxLines?: never;
+    description?: never;
+    descriptionId?: never;
+});
+declare function ToolbarText({ text, size, tone, hideBelow, showBelow, className, id, headingLevel, placeholder, wrap, ellipsis, maxLines, fill, slot, action, description, descriptionId, }: ToolbarTextProps): kerfjs.SafeHtml;
 
-export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize };
+export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize, type ToolbarTextTone };

package/dist/toolbar-text.js

@@ -1,4 +1,5 @@
-export { ToolbarText } from './chunk-RUNWEPR4.js';
+export { ToolbarText } from './chunk-EKHDLBRP.js';
+
 
 
 //# sourceMappingURL=toolbar-text.js.map

package/dist/toolbar.d.ts

@@ -1,13 +1,78 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
+import { PaneSeparatorSide } from './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
 
+type ToolbarPosition = 'header' | 'footer';
+/** Control-band density: `default` (60px with 44px groups) or `compact`. */
+type ToolbarDensity = 'default' | 'compact';
 interface ToolbarProps {
-    leading?: SafeHtml;
-    center?: SafeHtml;
-    trailing?: SafeHtml;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
     label?: string;
-    divider?: boolean;
+    /** Use footer semantics for a bottom toolbar; defaults to header. */
+    position?: ToolbarPosition;
+    /**
+     * `compact` sizes the toolbar to a 34px control band with 3px block
+     * insets — 40px tall — for a header embedded in a panel or card. Fill it
+     * with `ToolbarControlGroup size="compact"` groups; inline insets and the
+     * gap between zones are unchanged. Composites that render a Toolbar from a
+     * `ToolbarConfig` (Workbench, CollapsiblePanel, NavStack, SplitView) forward
+     * it and size the groups they compose to match. Defaults to `default`.
+     */
+    density?: ToolbarDensity;
+    /**
+     * Physical divider edges in canonical top/right/bottom/left order, drawn
+     * always. Defaults to none: a toolbar pinned over or under scrolling content
+     * gets its divider from the scroll state instead — a `Pane` draws the line
+     * between its chrome and content while content is scrolled away beneath it,
+     * and `wireScrollDividers` `targets` can name a toolbar as chrome, which
+     * then draws its facing side the same way.
+     */
+    dividerSides?: Sides;
+    /** `balanced` gives both side zones equal tracks, centering the middle zone on the toolbar even if only one side has controls. */
+    centerAlign?: 'center' | 'stretch' | 'balanced';
+    /**
+     * Component-owned responsive layout; applications choose the policy rather
+     * than restyling toolbar internals. Under every policy the trailing zone
+     * wraps its groups instead of clipping an action, and the center zone keeps
+     * its whole content width: when the zones do not fit one row, the leading
+     * title truncates with an ellipsis rather than the center overlapping it.
+     * - `none` keeps one row; the leading identity truncates first.
+     * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control
+     *   groups onto further rows.
+     * - `wrap` keeps one row while every zone fits at its natural width, and
+     *   otherwise moves the trailing zone below a whole leading identity.
+     * - `center-priority` gives an expanded center control the full row.
+     * - `trailing-priority` moves an expanded trailing control to a full row
+     *   below the leading identity at `responsiveAt`.
+     */
+    responsive?: 'none' | 'stack' | 'wrap' | 'center-priority' | 'trailing-priority';
+    /** Container width at which `stack` or `trailing-priority` activates. */
+    responsiveAt?: 'compact' | 'narrow';
+    /**
+     * Screen edges this toolbar claims for device safe-area compensation, for an
+     * app bar or bottom bar that sits directly at a screen edge rather than in a
+     * Pane header or footer. Each listed side pads by the inset its surrounding
+     * layout reports through `--kui-edge-inset-*`, or the full device inset when
+     * nothing routes that edge, while the toolbar's box and dividers paint
+     * through. Omitted, the toolbar pads only the inline edges an owner such as
+     * a Pane header hands it, and never a block edge.
+     */
+    safeAreaEdges?: readonly PaneSeparatorSide[];
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function Toolbar({ leading, center, trailing, label, divider, className }: ToolbarProps): SafeHtml;
+/**
+ * A toolbar's configuration, apart from its content: the props a composite
+ * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel
+ * toolbar) forwards, so the app configures that toolbar instead of styling it.
+ */
+type ToolbarConfig = Pick<ToolbarProps, 'density' | 'dividerSides' | 'centerAlign' | 'responsive' | 'responsiveAt' | 'safeAreaEdges'>;
+declare function Toolbar({ leading, center, trailing, label, position, density, dividerSides, centerAlign, responsive, responsiveAt, safeAreaEdges, className, slot, }: ToolbarProps): kerfjs.SafeHtml;
 
-export { Toolbar, type ToolbarProps };
+export { Sides, Toolbar, type ToolbarConfig, type ToolbarDensity, type ToolbarPosition, type ToolbarProps };

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-DAFFDO33.js';
+export { Toolbar } from './chunk-CMLPFIC5.js';
 
 //# sourceMappingURL=toolbar.js.map