@kerfjs/ui 5.0.0-beta.54 → 5.0.0-beta.56

package/dist/floating-toolbar.d.ts

@@ -1,4 +1,5 @@
 import * as kerfjs from 'kerfjs';
+import { CssLength } from './css-values.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 /** Where a {@link FloatingToolbar} floats within its positioned container. */
@@ -13,6 +14,13 @@ interface FloatingToolbarProps {
      * Default: `'bottom-end'`.
      */
     position?: FloatingToolbarPosition;
+    /**
+     * Distance from the container edges named by `position`. Default:
+     * `space('m')` (16px, 8px past a top toolbar's own inset). Omit it inside a
+     * `Workbench`, `CollapsiblePanel`, or `ResizableRegion` restore corner: the
+     * corner owns the inset there and sets it to zero.
+     */
+    inset?: CssLength;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -22,13 +30,16 @@ interface FloatingToolbarProps {
  * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer
  * restore button) that sits over the content but NOT over dialogs or overlays
  * (it is not in the top layer). It is inset from the container edges by
- * `--kui-floating-toolbar-inset` (default `--kui-space-m`, i.e. 8px more than a
- * top toolbar's own inset); override that token, on the toolbar or an
- * ancestor, to move it. Inside a `Workbench`, `CollapsiblePanel`, or
+ * `inset` (default `--kui-space-m`, i.e. 8px more than a top toolbar's own
+ * inset); pass a typed length to move it. Inside a `Workbench`, `CollapsiblePanel`, or
  * `ResizableRegion` restore corner the corner owns the inset, so the toolbar
- * floats from the corner's own position. The app owns the controls and their
- * behavior — wire them with `delegate()` as usual.
+ * floats from the corner's own position. While one of those layouts has a
+ * side overlay open over the toolbar's region (a Workbench rail overlay, a
+ * `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal
+ * `ResizableRegion`), the toolbar is hidden — unfocusable and out of the
+ * accessibility tree — until the overlay closes. The app owns the controls
+ * and their behavior — wire them with `delegate()` as usual.
  */
-declare function FloatingToolbar({ children, label, position, className, slot, }: FloatingToolbarProps): kerfjs.SafeHtml;
+declare function FloatingToolbar({ children, label, position, inset, className, slot, }: FloatingToolbarProps): kerfjs.SafeHtml;
 
 export { FloatingToolbar, type FloatingToolbarPosition, type FloatingToolbarProps };

package/dist/floating-toolbar.js

@@ -1,3 +1,3 @@
-export { FloatingToolbar } from './chunk-5NDQABWK.js';
+export { FloatingToolbar } from './chunk-M7QV3IHH.js';
 
 //# sourceMappingURL=floating-toolbar.js.map

package/dist/grid.js

@@ -1,4 +1,4 @@
-export { Grid } from './chunk-C2FAYFDE.js';
+export { Grid } from './chunk-AGXQQFKZ.js';
 
 
 

package/dist/help-tags-register.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Marker export for tests and tooling; importing this module registers the
+ * Web Awesome tooltip and installs the document-level help tags that name
+ * icon-only controls on hover and keyboard focus: an icon-only `<button>` or
+ * link inside a `ToolbarControlGroup` (named by `aria-label`, without a
+ * native `title`), plus the icon-only `Select` and `PopupMenu` triggers that
+ * `select/register` and `popup-menu/register` already cover. Import it once
+ * in an application whose toolbars have icon-only buttons but no registered
+ * `Select` or `PopupMenu`; importing it alongside them is harmless.
+ */
+declare const helpTagsRegistered = true;
+
+export { helpTagsRegistered };

package/dist/help-tags-register.js

@@ -0,0 +1,9 @@
+import { installHelpTags } from './chunk-BFPBS5Y4.js';
+import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';
+
+installHelpTags();
+var helpTagsRegistered = true;
+
+export { helpTagsRegistered };
+
+//# sourceMappingURL=help-tags-register.js.map

package/dist/help-tags-register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/help-tags-register.ts"],"names":[],"mappings":";;;AAIA,eAAA,EAAgB;AAYT,IAAM,kBAAA,GAAqB","file":"help-tags-register.js","sourcesContent":["import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport { installHelpTags } from './install-help-tag.js';\n\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome tooltip and installs the document-level help tags that name\n * icon-only controls on hover and keyboard focus: an icon-only `<button>` or\n * link inside a `ToolbarControlGroup` (named by `aria-label`, without a\n * native `title`), plus the icon-only `Select` and `PopupMenu` triggers that\n * `select/register` and `popup-menu/register` already cover. Import it once\n * in an application whose toolbars have icon-only buttons but no registered\n * `Select` or `PopupMenu`; importing it alongside them is harmless.\n */\nexport const helpTagsRegistered = true;\n"]}

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 export { AppTab, AppTabPresentation, AppTabProps, AppTabSize } from './app-tab.js';
-export { Badge, BadgeAppearance, BadgeProps, BadgeShape, BadgeSize, BadgeTone } from './badge.js';
+export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
+export { ContentItem, ContentItemFrame, ContentItemProps, ContentItemShape } from './content-item.js';
 export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
 export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
 export { EmptyState, EmptyStateProps } from './empty-state.js';
 export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';
 export { Grid, GridProps } from './grid.js';
-export { List, ListProps } from './list.js';
+export { List, ListConfig, ListProps } from './list.js';
 export { ListActionRow, ListActionRowProps } from './list-action-row.js';
 export { ListHeader, ListHeaderProps } from './list-header.js';
 export { ListInsetControl, ListInsetControlProps } from './list-inset-control.js';
@@ -13,7 +14,8 @@ export { ListInsetText, ListInsetTextProps } from './list-inset-text.js';
 export { ListItem, ListItemProps } from './list-item.js';
 export { LoadingSpinner, LoadingSpinnerProps } from './loading-spinner.js';
 export { LucideIcon, LucideIconProps, LucideNode } from './lucide-icon.js';
-export { Pane, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
+export { Pane, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
+export { PopupMenu, PopupMenuDivider, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps } from './popup-menu.js';
 export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionResponsiveFillAt, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
 export { Row, RowProps } from './row.js';
 export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';
@@ -27,15 +29,15 @@ export { DialogSurface, DialogSurfacePresentation, DialogSurfaceProps, DialogSur
 export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProps, TabBarTrailingPlacement } from './tab-bar.js';
 export { Text, TextContent, TextFont, TextProps, TextSize, TextTone, TextVariant } from './text.js';
 export { TokenSearchEditorAttributes, TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
-export { Toolbar, ToolbarProps } from './toolbar.js';
+export { Toolbar, ToolbarConfig, ToolbarProps } from './toolbar.js';
 export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupMenuInset, ToolbarControlGroupOverflow, ToolbarControlGroupProps, ToolbarControlGroupSelectedChrome, ToolbarControlGroupSelectedTone, ToolbarControlGroupShape, ToolbarControlGroupSize, ToolbarControlGroupTone, ToolbarControlGroupVisibility } from './toolbar-control-group.js';
 export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize } from './toolbar-text.js';
 export { ValueTable, ValueTableProps, ValueTableRow, ValueTableRowProps } from './value-table.js';
 export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
 export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
 export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
-export { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
 export { H as HorizontalAlignment, L as ListVerticalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
+export { S as Sides } from './sides-BPSWde0A.js';
 import 'kerfjs';
 import 'lucide';
 import 'kerfjs/jsx-runtime';

package/dist/index.js

@@ -1,40 +1,42 @@
-export { wireTokenSearchFields } from './chunk-CMUIXJZM.js';
-export { ValueTable, ValueTableRow } from './chunk-44IG7PFV.js';
 export { wireResizableRegions } from './chunk-XQV2B4IL.js';
-
 export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
+export { wireTokenSearchFields } from './chunk-NBYTIVHS.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-63ZWBGE3.js';
+export { ValueTable, ValueTableRow } from './chunk-6CINWX2E.js';
+
+export { Spacer } from './chunk-MEY33VWB.js';
+export { StateBanner } from './chunk-T4UZTNZ4.js';
+export { SunkenPanel } from './chunk-6ZXOQEAN.js';
 export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
 export { TabBar } from './chunk-N3GKMPDW.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-HJKRCKDR.js';
 export { SegmentedControl } from './chunk-X5QSICJ3.js';
-export { Select } from './chunk-T22EM4ET.js';
-export { Spacer } from './chunk-ZMBU522F.js';
-export { StateBanner } from './chunk-BJJKFVWW.js';
-export { SunkenPanel } from './chunk-6ZXOQEAN.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VHADGP3B.js';
-export { Row } from './chunk-5I22LMCV.js';
+export { Select } from './chunk-MOBRFZH3.js';
+export { ListInsetControl } from './chunk-5I7QGQVT.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
-export { FloatingToolbar } from './chunk-5NDQABWK.js';
-export { Grid } from './chunk-C2FAYFDE.js';
-export { ListActionRow } from './chunk-RNZAKSME.js';
-export { ListInsetControl } from './chunk-D7GWXIAS.js';
-export { ListInsetText } from './chunk-ZK5EGVFP.js';
-export { AppTab } from './chunk-NE5JAOQS.js';
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
-export { Toolbar } from './chunk-MTM43SJO.js';
-export { ListItem } from './chunk-GUIHMIT2.js';
-export { List } from './chunk-3NBL3OUQ.js';
-export { ToolbarText } from './chunk-TZ5IHWB2.js';
-export { Pane } from './chunk-7GUQYHKA.js';
+export { Grid } from './chunk-AGXQQFKZ.js';
+export { ListActionRow } from './chunk-MA6Z6EIM.js';
+export { AppTab } from './chunk-WOUF7YXM.js';
+export { PopupMenu } from './chunk-WLG6SSNT.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VHADGP3B.js';
+export { Row } from './chunk-VZOFZPSO.js';
+export { ListInsetText } from './chunk-DG6G5EPF.js';
+export { ListItem } from './chunk-VNPQDCQZ.js';
+export { List } from './chunk-NAPE7WUS.js';
 
+export { ToolbarText } from './chunk-K6UNVKDK.js';
+export { FloatingToolbar } from './chunk-M7QV3IHH.js';
 export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
-export { ListHeader } from './chunk-KPNTVB7A.js';
-export { Text } from './chunk-7IUSV4XG.js';
-export { Skeleton } from './chunk-ATHXW6RP.js';
-
-export { Badge } from './chunk-XD7DWYXG.js';
-export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-WZ2GLEY4.js';
-export { DisclosureArrow } from './chunk-HMQ2ZDGG.js';
+export { ListHeader } from './chunk-PK4N5QTO.js';
+export { Text } from './chunk-24PHKUR3.js';
+export { DisclosureArrow } from './chunk-KROD7KZK.js';
+export { Skeleton } from './chunk-AHEG27M7.js';
+export { Badge } from './chunk-MP2GDBQZ.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
+export { Toolbar } from './chunk-G33XC2NB.js';
+export { Pane } from './chunk-AK67F6QN.js';
 export { LucideIcon } from './chunk-4R777DUZ.js';
+export { ContentItem } from './chunk-MA73TA6D.js';
+
+export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-2G2ZJQYK.js';
 
 //# sourceMappingURL=index.js.map

package/dist/list-action-row.js

@@ -1,4 +1,4 @@
-export { ListActionRow } from './chunk-RNZAKSME.js';
+export { ListActionRow } from './chunk-MA6Z6EIM.js';
 
 
 

package/dist/list-header.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { HeadingLevel } from './toolbar-text.js';
 
 type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
@@ -39,6 +40,8 @@ interface ListHeaderBaseProps {
 type ListHeaderModeProps = {
     /** Render the title as a controlled disclosure trigger. */
     toggle: true;
+    /** A toggle's label is its button text, not a heading. */
+    headingLevel?: never;
     action: string;
     expanded: boolean;
     actionIcon?: SafeHtml;
@@ -48,6 +51,11 @@ type ListHeaderModeProps = {
 } | {
     /** Render a separately named trailing action. */
     toggle?: false;
+    /**
+     * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the
+     * document outline; the visual treatment does not change.
+     */
+    headingLevel?: HeadingLevel;
     action: string;
     actionLabel: string;
     actionIcon: SafeHtml;
@@ -57,6 +65,11 @@ type ListHeaderModeProps = {
 } | {
     /** Render a passive section heading. */
     toggle?: false;
+    /**
+     * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the
+     * document outline; the visual treatment does not change.
+     */
+    headingLevel?: HeadingLevel;
     action?: never;
     actionLabel?: never;
     actionIcon?: never;
@@ -81,6 +94,6 @@ type ListHeaderIndicatorProps = {
     status?: SafeHtml;
 };
 type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
-declare function ListHeader({ label, count, countLabel, badge, status, density, divider, inline, width, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
+declare function ListHeader({ label, headingLevel, count, countLabel, badge, status, density, divider, inline, width, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
 
 export { ListHeader, type ListHeaderProps };

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-KPNTVB7A.js';
+export { ListHeader } from './chunk-PK4N5QTO.js';
 
 
 

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

@@ -1,6 +1,6 @@
 import * as kerfjs from 'kerfjs';
-import { S as Sides } from './divider-sides-BzB6rphT.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
 
 interface ListInsetControlProps {
     /** Control(s) that own their own border and padding (e.g. an input, a `wa-*`). */

package/dist/list-inset-control.js

@@ -1,3 +1,3 @@
-export { ListInsetControl } from './chunk-D7GWXIAS.js';
+export { ListInsetControl } from './chunk-5I7QGQVT.js';
 
 //# sourceMappingURL=list-inset-control.js.map

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

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

package/dist/list-inset-text.js

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

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem } from './chunk-GUIHMIT2.js';
+export { ListItem } from './chunk-VNPQDCQZ.js';
 
 
 

package/dist/list.d.ts

@@ -1,9 +1,9 @@
 import * as kerfjs from 'kerfjs';
 import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
-import { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
 import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
 export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
 
 type ListRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
@@ -35,7 +35,7 @@ interface ListProps {
     /** Own vertical scrolling and overscroll containment. */
     scrollable?: boolean;
     /** Physical divider edges in canonical top/right/bottom/left order. */
-    dividerSides?: DividerSides;
+    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. */
@@ -46,7 +46,14 @@ interface ListProps {
     /** 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, gap, flex, fill, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
-export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };
+export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };

package/dist/list.js

@@ -1,4 +1,4 @@
-export { List } from './chunk-3NBL3OUQ.js';
+export { List } from './chunk-NAPE7WUS.js';
 
 
 

package/dist/nav-stack.d.ts

@@ -1,5 +1,9 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { ToolbarConfig } from './toolbar.js';
+import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
+import './pane.js';
+import './sides-BPSWde0A.js';
 
 /**
  * One entry in a {@link NavStack}. The app owns the stack as an array (usually a
@@ -11,19 +15,46 @@ interface NavStackView {
     content: KerfUiContent;
     /** Title shown in the top toolbar for this view. */
     title?: string;
+    /** Leading groups for this view's top toolbar, after the back control and before the title. */
+    leading?: KerfUiContent;
+    /** Center content for this view's top toolbar (placed per `toolbarConfig.centerAlign`). */
+    center?: KerfUiContent;
     /** Trailing actions for this view's top toolbar. */
     toolbar?: KerfUiContent;
     /** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */
     bottomToolbar?: KerfUiContent;
 }
+/**
+ * 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 back control (default "Back"). */
+    /** 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;
     /** 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. */
@@ -35,9 +66,11 @@ interface NavStackProps {
 /**
  * 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.
+ * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the
+ * back control and title lead, the active view's `leading` / `center` / `toolbar`
+ * content fills the zones, and `toolbarConfig` configures it. 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, slot, }: NavStackProps): kerfjs.SafeHtml;
+declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, hideToolbar, bottomToolbar, className, slot, }: NavStackProps): kerfjs.SafeHtml;
 
-export { NavStack, type NavStackProps, type NavStackView };
+export { NavStack, type NavStackProps, type NavStackToolbarConfig, type NavStackView };

package/dist/nav-stack.js

@@ -1,4 +1,7 @@
-export { NavStack } from './chunk-DQA5FMOX.js';
+export { NavStack } from './chunk-O3EXIBEZ.js';
+
+
+
 
 
 

package/dist/pane.d.ts

@@ -20,7 +20,10 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-safe-area-block-end'?: never;
     'data-safe-area-inline-start'?: never;
     'data-safe-area-inline-end'?: never;
+    'data-chrome-placement'?: never;
 }>;
+/** How a Pane's header and footer relate to its scrolling content. */
+type PaneChromePlacement = 'fixed' | 'auto';
 interface PaneProps {
     /** Optional fixed chrome above the scrolling content, arranged vertically. */
     header?: KerfUiContent;
@@ -28,6 +31,14 @@ interface PaneProps {
     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;
     /** Root semantics. Defaults to `div`. */
     element?: PaneElement;
     /** Scrolling content semantics. Defaults to `div`. */
@@ -56,12 +67,19 @@ interface PaneProps {
     /** 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'>;
 /**
  * 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, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };
+export { Pane, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

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

package/dist/panel-toolbar-C8sF-YZC.d.ts

@@ -0,0 +1,63 @@
+import { LucideIcon } from './lucide-icon.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { ToolbarConfig } from './toolbar.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` (a `ToolbarText`) and `panelOnly` groups lead the toolbar and are
+ *   available only while the panel is open.
+ * - `constant` groups stay available either way: they trail the panel's
+ *   toolbar while it is open and move to the work area's toolbar while it is
+ *   collapsed.
+ * - `toggle` is always the last group: in the panel's toolbar while it is
+ *   open, and right after the `constant` groups in the work area's toolbar
+ *   while it is collapsed.
+ *
+ * `constant` content renders in both places while the panel is collapsed (the
+ * panel's copy is inert), so give it no `id`s.
+ *
+ * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,
+ * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`; it keeps a
+ * bottom divider unless `dividerSides` says otherwise.
+ */
+interface PanelToolbar extends ToolbarConfig {
+    /** Accessible name of the panel's toolbar. */
+    label: string;
+    title?: KerfUiContent;
+    panelOnly?: KerfUiContent;
+    /** Panel-only center content, available only while the panel is open. */
+    center?: KerfUiContent;
+    constant?: KerfUiContent;
+    toggle?: PanelToggle;
+}
+
+export { type PanelSide as P, type PanelToolbar as a, type PanelToggle as b, collapsiblePanelToggleIcon as c };

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 };

package/dist/popup-menu-register.js

@@ -0,0 +1,31 @@
+import { installHelpTags } from './chunk-BFPBS5Y4.js';
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import '@awesome.me/webawesome/dist/components/divider/divider.js';
+import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
+import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';
+import WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
+
+// src/install-popup-menu-keyboard.ts
+var installed = /* @__PURE__ */ new WeakSet();
+function installPopupMenuKeyboard(prototype) {
+  if (installed.has(prototype)) return;
+  installed.add(prototype);
+  const target = prototype;
+  const makeSelection = target.makeSelection;
+  target.makeSelection = function(item, event) {
+    if (event instanceof KeyboardEvent && this.classList.contains("kui-popup-menu") && !item.disabled) {
+      item.click();
+      return;
+    }
+    makeSelection.call(this, item, event);
+  };
+}
+
+// src/popup-menu-register.ts
+installPopupMenuKeyboard(WaDropdown.prototype);
+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/install-popup-menu-keyboard.ts","../src/popup-menu-register.ts"],"names":[],"mappings":";;;;;;;;AAOA,IAAM,SAAA,uBAAgB,OAAA,EAAgB;AAW/B,SAAS,yBAAyB,SAAA,EAAyB;AAChE,EAAA,IAAI,SAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAA,SAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,gBAAgB,MAAA,CAAO,aAAA;AAC7B,EAAA,MAAA,CAAO,aAAA,GAAgB,SAAmC,IAAA,EAAM,KAAA,EAAa;AAC3E,IAAA,IACE,KAAA,YAAiB,iBACjB,IAAA,CAAK,SAAA,CAAU,SAAS,gBAAgB,CAAA,IACxC,CAAC,IAAA,CAAK,QAAA,EACN;AACA,MAAA,IAAA,CAAK,KAAA,EAAM;AACX,MAAA;AAAA,IACF;AACA,IAAA,aAAA,CAAc,IAAA,CAAK,IAAA,EAAM,IAAA,EAAM,KAAK,CAAA;AAAA,EACtC,CAAA;AACF;;;ACxBA,wBAAA,CAAyB,WAAW,SAAS,CAAA;AAC7C,eAAA,EAAgB;AAQT,IAAM,2BAAA,GAA8B","file":"popup-menu-register.js","sourcesContent":["interface PopupMenuDropdown extends HTMLElement {\n  makeSelection(\n    item: HTMLElement & { disabled?: boolean },\n    event?: Event,\n  ): void;\n}\n\nconst installed = new WeakSet<object>();\n\n/**\n * Route a keyboard choice in a `PopupMenu` through the item's click. Web Awesome\n * selects a pointer choice from the item's click event but a keyboard choice\n * (Enter or Space) directly, so delegated `data-action` click handlers would\n * never run for keyboard users. Clicking the item makes Web Awesome select it\n * exactly as it does for a pointer — one `wa-select`, then close and focus\n * return — while the click reaches the application's delegation. Raw\n * `wa-dropdown`s outside `PopupMenu` are unaffected.\n */\nexport function installPopupMenuKeyboard(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const makeSelection = target.makeSelection;\n  target.makeSelection = function (this: PopupMenuDropdown, item, event): void {\n    if (\n      event instanceof KeyboardEvent &&\n      this.classList.contains('kui-popup-menu') &&\n      !item.disabled\n    ) {\n      item.click();\n      return;\n    }\n    makeSelection.call(this, item, event);\n  };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\nimport '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\n\nimport { installHelpTags } from './install-help-tag.js';\nimport { installPopupMenuKeyboard } from './install-popup-menu-keyboard.js';\n\ninstallPopupMenuKeyboard(WaDropdown.prototype);\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,\n * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard\n * choice through the item's click so delegated `data-action`s run.\n */\nexport const popupMenuElementsRegistered = true;\n"]}