@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.60

package/dist/floating-toolbar.d.ts

@@ -0,0 +1,51 @@
+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. */
+type FloatingToolbarPosition = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+interface FloatingToolbarProps {
+    /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */
+    children: KerfUiContent;
+    /** Accessible name for the toolbar (required — it exposes `role="toolbar"`). */
+    label: string;
+    /**
+     * Corner or edge it floats to inside its nearest positioned ancestor.
+     * Default: `'bottom-end'`.
+     */
+    position?: FloatingToolbarPosition;
+    /** Keep the toolbar in normal document flow instead of floating over content. */
+    placement?: 'floating' | 'inline';
+    /**
+     * 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;
+    /** Add device or layout-routed safe-area insets to the positioned edges. */
+    safeAreaInsets?: boolean;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A toolbar that floats above the main content of its nearest positioned
+ * 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
+ * `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. 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. Set
+ * `placement="inline"` for normal flow when an owner already positions the
+ * control; floating placement can add safe-area insets to its per-edge tokens.
+ */
+declare function FloatingToolbar({ children, label, position, placement, inset, safeAreaInsets, className, slot, }: FloatingToolbarProps): kerfjs.SafeHtml;
+
+export { FloatingToolbar, type FloatingToolbarPosition, type FloatingToolbarProps };

package/dist/floating-toolbar.js

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

package/dist/floating-toolbar.js.map

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

package/dist/grid.d.ts

@@ -0,0 +1,34 @@
+import * as kerfjs from 'kerfjs';
+import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type GridRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-columns'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+}>;
+interface GridProps {
+    children?: KerfUiContent;
+    /** Number of equal-width columns. Must be a positive safe integer. */
+    columns: number;
+    /** A named UI spacing token or typed CSS length. Defaults to xs. */
+    gap?: UiSpaceName | CssLength;
+    /** Allow this grid 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 grid is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
+    className?: string;
+    /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */
+    rootAttributes?: GridRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** A fixed-count grid whose columns share the available width equally. */
+declare function Grid({ children, columns, gap, flex, fill, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
+
+export { CssFlex, CssFlexKeyword, CssLength, Grid, type GridProps, UiSpaceName };

package/dist/grid.js

@@ -0,0 +1,5 @@
+export { Grid } from './chunk-AGXQQFKZ.js';
+
+
+
+//# sourceMappingURL=grid.js.map

package/dist/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"grid.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,24 +1,44 @@
-export { AppTab, AppTabProps } from './app-tab.js';
+export { AppTab, AppTabPresentation, AppTabProps, AppTabSize } from './app-tab.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, 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';
+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 { MenuActionRow, MenuActionRowProps } from './menu-action-row.js';
-export { MenuHeader, MenuHeaderProps } from './menu-header.js';
-export { MenuItem, MenuItemProps } from './menu-item.js';
-export { PanelHeader, PanelHeaderProps } from './panel-header.js';
-export { ResizableRegion, ResizableRegionAxis, ResizableRegionEdge, ResizableRegionProps, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
+export { Pane, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
+export { PopupMenu, PopupMenuDivider, PopupMenuElement, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps, closePopupMenu, openPopupMenuAt } 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';
-export { Select, SelectChoice, SelectProps } from './select.js';
-export { StateBanner, StateBannerProps, StateBannerTone } from './state-banner.js';
-export { TabBar, TabBarProps } from './tab-bar.js';
-export { TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
-export { Toolbar, ToolbarProps } from './toolbar.js';
-export { ToolbarControlGroup, ToolbarControlGroupProps } from './toolbar-control-group.js';
-export { ToolbarText, ToolbarTextProps, ToolbarTextSize } from './toolbar-text.js';
+export { Select, SelectChoice, SelectFocusRingOwner, SelectPresentation, SelectProps, SelectSelectedPresentation, SelectSize } from './select.js';
+export { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+export { Skeleton, SkeletonProps } from './skeleton.js';
+export { Spacer, SpacerProps } from './spacer.js';
+export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } from './state-banner.js';
+export { SunkenPanel, SunkenPanelProps, SunkenPanelShape } from './sunken-panel.js';
+export { DialogSurface, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceSize, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
+export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProps, TabBarTrailingPlacement } from './tab-bar.js';
+export { Text, TextContent, TextFont, TextProps, TextSize, TextTone, TextVariant } from './text.js';
+export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, j as TokenSearchToken, k as createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-CCke1yvQ.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 { ScrollDividerTarget, WireScrollDividersOptions, wireScrollDividers } from './wire-scroll-dividers.js';
 export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
-export { TokenSearchCollapsibleOptions, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
+export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.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,25 +1,45 @@
-export { ValueTable, ValueTableRow } from './chunk-R6JHHBKQ.js';
-export { wireResizableRegions } from './chunk-AQNKJRFH.js';
-export { reorderTabs, wireTabBars } from './chunk-MQIZAD4A.js';
-export { wireTokenSearchFields } from './chunk-2RJBFNB6.js';
-export { StateBanner } from './chunk-VHW5YNIB.js';
-export { TabBar } from './chunk-MBR3TYNL.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
-export { MenuHeader } from './chunk-NPPD2A6O.js';
-export { MenuItem } from './chunk-S3TPM2LP.js';
-export { PanelHeader } from './chunk-KZKSBUKC.js';
-export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
-export { Toolbar } from './chunk-DAFFDO33.js';
-export { ToolbarText } from './chunk-24Z2XE6C.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-M5JRI6MN.js';
-export { SegmentedControl } from './chunk-TRNBHPNW.js';
-export { Select } from './chunk-CTQKI2XL.js';
-export { AppTab } from './chunk-XZXRLY5Q.js';
-export { DisclosureArrow } from './chunk-56RJXPHG.js';
-export { EmptyState } from './chunk-WVPYVDXY.js';
-export { LoadingSpinner } from './chunk-55DATV3A.js';
-export { LucideIcon } from './chunk-W2FK7ZNY.js';
-export { MenuActionRow } from './chunk-EGHL5S4P.js';
+export { wireResizableRegions } from './chunk-UIDKY4UB.js';
+export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
+export { wireTokenSearchFields } from './chunk-A3CKOW2R.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-RRB26JRJ.js';
+export { createTokenSearchModel } from './chunk-F7F7KRO2.js';
+export { ValueTable, ValueTableRow } from './chunk-P7D3EMXM.js';
+export { wireScrollDividers } from './chunk-JCV4GXWB.js';
 
+export { Spacer } from './chunk-MEY33VWB.js';
+export { StateBanner } from './chunk-GLDWRCAM.js';
+export { SunkenPanel } from './chunk-6ZXOQEAN.js';
+export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
+export { TabBar } from './chunk-N3GKMPDW.js';
+export { SegmentedControl } from './chunk-X5QSICJ3.js';
+export { Select } from './chunk-WPLIO5WJ.js';
+export { ListInsetControl } from './chunk-5I7QGQVT.js';
+export { EmptyState } from './chunk-E36EVCKG.js';
+export { Grid } from './chunk-AGXQQFKZ.js';
+export { ListActionRow } from './chunk-F4QMLOXJ.js';
+export { AppTab } from './chunk-T66UNBXL.js';
+export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-UWONG4QE.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-KLJKU6ZL.js';
+export { Row } from './chunk-VZOFZPSO.js';
+export { ListInsetText } from './chunk-DG6G5EPF.js';
+export { ListItem } from './chunk-5I7OHCIP.js';
+export { List } from './chunk-NAPE7WUS.js';
+
+export { ToolbarText } from './chunk-3SXMEK3B.js';
+export { FloatingToolbar } from './chunk-I3Q7KKYM.js';
+
+export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
+export { ListHeader } from './chunk-5Q3N6EV7.js';
+export { Text } from './chunk-AUKT3KMG.js';
+export { DisclosureArrow } from './chunk-KROD7KZK.js';
+export { Skeleton } from './chunk-AHEG27M7.js';
+export { Badge } from './chunk-MP2GDBQZ.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-7JUBXOIV.js';
+export { Toolbar } from './chunk-MERWRTBG.js';
+export { Pane } from './chunk-EZVNC4J6.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.d.ts

@@ -0,0 +1,64 @@
+import { SafeHtml } from 'kerfjs';
+
+type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-item-id'?: never;
+    'data-has-icon'?: never;
+    'data-multiline'?: never;
+    'data-density'?: never;
+    'data-divider'?: never;
+    'data-busy'?: never;
+    'data-trailing-visibility'?: never;
+    'data-state'?: never;
+    'data-selected'?: never;
+    'data-pressed'?: never;
+}>;
+type ListActionRowTrailingAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-item-id'?: never;
+    'data-kui-disabled'?: never;
+    popoverTarget?: string;
+    popoverTargetAction?: 'toggle' | 'show' | 'hide';
+    'aria-controls'?: string;
+    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';
+}>;
+interface ListActionRowProps {
+    /** Visible dormant content for the primary button. Must not contain interactive descendants. */
+    label: string | SafeHtml;
+    description?: string | SafeHtml;
+    status?: string | SafeHtml;
+    busy?: boolean;
+    density?: 'standard' | 'compact';
+    divider?: 'none' | 'before' | 'after' | 'both';
+    /** Decorative dormant content for the primary button. Must not contain interactive descendants. */
+    icon?: SafeHtml;
+    action: string;
+    itemId?: string;
+    selected?: boolean;
+    pressed?: boolean;
+    accessibleLabel?: string;
+    title?: string;
+    multiline?: boolean;
+    state?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    /** Render as an unanimated loading skeleton, disabling both actions: label, description, icon, and status text become skeletons; the `busy` indicator stays live. */
+    placeholder?: boolean;
+    trailingAction: string;
+    trailingActionLabel: string;
+    /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */
+    trailingActionIcon: SafeHtml;
+    trailingActionDisabled?: boolean;
+    trailingActionTitle?: string;
+    trailingActionVisibility?: 'always' | 'interaction';
+    className?: string;
+    rootAttributes?: ListActionRowRootAttributes;
+    trailingActionAttributes?: ListActionRowTrailingAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+declare function ListActionRow({ label, description, status, busy, density, divider, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, className, rootAttributes, trailingActionAttributes, slot, }: ListActionRowProps): SafeHtml;
+
+export { ListActionRow, type ListActionRowProps };

package/dist/list-action-row.js

@@ -0,0 +1,8 @@
+export { ListActionRow } from './chunk-F4QMLOXJ.js';
+
+
+
+
+
+
+//# sourceMappingURL=list-action-row.js.map

package/dist/list-action-row.js.map

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

package/dist/list-header.d.ts

@@ -0,0 +1,99 @@
+import { SafeHtml } from 'kerfjs';
+import { HeadingLevel } from './toolbar-text.js';
+
+type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-has-badge'?: never;
+    'data-has-count'?: never;
+    'data-density'?: never;
+    'data-divider'?: never;
+    'data-inline'?: never;
+    'data-width'?: never;
+    'data-indicator-tone'?: never;
+    'data-toggle'?: never;
+}>;
+type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-action'?: never;
+    'data-kui-disabled'?: never;
+    popoverTarget?: string;
+    popoverTargetAction?: 'toggle' | 'show' | 'hide';
+    'aria-controls'?: string;
+    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';
+}>;
+interface ListHeaderBaseProps {
+    label: string;
+    density?: 'standard' | 'compact';
+    divider?: 'none' | 'before' | 'after' | 'both';
+    /** Shrink-wrap the header without its default outer margin, border, or padding. */
+    inline?: boolean;
+    /** Fill the available row or shrink-wrap while retaining normal header geometry. */
+    width?: 'fill' | 'content';
+    indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';
+    /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
+    placeholder?: boolean;
+    rootAttributes?: ListHeaderRootAttributes;
+    triggerAttributes?: ListHeaderTriggerAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+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;
+    actionLabel?: never;
+    actionDisabled?: boolean;
+    disabledReason?: string;
+} | {
+    /** 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;
+    expanded?: never;
+    actionDisabled?: boolean;
+    disabledReason?: string;
+} | {
+    /** 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;
+    expanded?: never;
+    actionDisabled?: never;
+    disabledReason?: never;
+};
+type ListHeaderIndicatorProps = {
+    count: number;
+    countLabel: string;
+    badge?: never;
+    status?: never;
+} | {
+    count?: never;
+    countLabel?: never;
+    badge: SafeHtml;
+    status?: never;
+} | {
+    count?: never;
+    countLabel?: never;
+    badge?: never;
+    status?: SafeHtml;
+};
+type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
+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

@@ -0,0 +1,10 @@
+export { ListHeader } from './chunk-5Q3N6EV7.js';
+
+
+
+
+
+
+
+
+//# sourceMappingURL=list-header.js.map

package/dist/list-header.js.map

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

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

@@ -0,0 +1,22 @@
+import * as kerfjs from 'kerfjs';
+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-*`). */
+    children: KerfUiContent;
+    /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */
+    sides?: Sides;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * Insets a control into a pane/list content region: an 8px inline margin (so its
+ * edges line up with `.kui-content` items) and a stretch flex row with an 8px gap.
+ * Use it for controls that carry their own border and padding but no outer margin
+ * — the wrapper adds only the alignment margin and layout, not a second inset.
+ */
+declare function ListInsetControl({ children, sides, className, slot, }: ListInsetControlProps): kerfjs.SafeHtml;
+
+export { ListInsetControl, type ListInsetControlProps, Sides };

package/dist/list-inset-control.js

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

package/dist/list-inset-control.js.map

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

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

@@ -0,0 +1,30 @@
+import * as kerfjs from 'kerfjs';
+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;
+    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;
+}
+/**
+ * Gives bare text the content-item geometry — an 8px inline margin, a 1px
+ * 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 `sides="rl"` to keep the horizontal inset but drop the vertical box
+ * space for tight text layout.
+ */
+declare function ListInsetText({ children, sides, className, rootAttributes, slot, }: ListInsetTextProps): kerfjs.SafeHtml;
+
+export { ListInsetText, type ListInsetTextProps, Sides };

package/dist/list-inset-text.js

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

package/dist/list-inset-text.js.map

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

package/dist/list-item.d.ts

@@ -0,0 +1,52 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-item-id'?: never;
+    'data-has-icon'?: never;
+    'data-has-description'?: never;
+    'data-multiline'?: never;
+    'data-density'?: never;
+    'data-divider'?: never;
+    'data-busy'?: never;
+    'data-state'?: never;
+    'data-kui-disabled'?: never;
+    'data-icon-align'?: never;
+}>;
+interface ListItemProps {
+    label: string | SafeHtml;
+    /** App-owned supporting text rendered in the component's stable label stack. */
+    description?: string | SafeHtml;
+    icon?: SafeHtml;
+    /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */
+    trailing?: KerfUiContent;
+    /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */
+    status?: string | SafeHtml;
+    /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */
+    busy?: boolean;
+    density?: 'standard' | 'compact' | 'spacious';
+    divider?: 'none' | 'before' | 'after' | 'both';
+    selected?: boolean;
+    action: string;
+    itemId?: string;
+    className?: string;
+    pressed?: boolean;
+    accessibleLabel?: string;
+    title?: string;
+    multiline?: boolean;
+    /** Alignment of an icon beside a wrapped label. Defaults to its first line. */
+    multilineIconAlign?: 'first-line' | 'center';
+    state?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */
+    placeholder?: boolean;
+    rootAttributes?: ListItemRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, rootAttributes, slot, }: ListItemProps): SafeHtml;
+
+export { ListItem, type ListItemProps };

package/dist/list-item.js

@@ -0,0 +1,8 @@
+export { ListItem } from './chunk-5I7OHCIP.js';
+
+
+
+
+
+
+//# sourceMappingURL=list-item.js.map

package/dist/list-item.js.map

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