@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/icon-button.js

@@ -0,0 +1,6 @@
+export { IconButton } from './chunk-VFYO3UGZ.js';
+
+
+
+
+//# sourceMappingURL=icon-button.js.map

package/dist/icon-button.js.map

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

package/dist/icon-toggle-button.d.ts

@@ -0,0 +1,42 @@
+import * as kerfjs from 'kerfjs';
+import { LucideNode } from './lucide-icon.js';
+import 'lucide';
+import './css-values.js';
+
+/** Corner shape: fully round `pill` (default) or a softer `rounded` square. */
+type IconToggleButtonShape = 'pill' | 'rounded';
+type IconToggleButtonRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-shape'?: never;
+}>;
+interface IconToggleButtonProps {
+    /** The Lucide-compatible icon node. */
+    icon: LucideNode;
+    /** The icon's stable name, as `LucideIcon` takes it. */
+    iconName: string;
+    /** Accessible name and hover help tag; required because no text is shown. */
+    label: string;
+    /** Pressed state, exposed as `aria-pressed`; the application owns it. */
+    pressed: boolean;
+    /** Delegated `data-action` the application handles to flip `pressed`. */
+    action?: string;
+    shape?: IconToggleButtonShape;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata; IconToggleButton-owned markers stay protected. */
+    rootAttributes?: IconToggleButtonRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A standalone, icon-only toggle: a native `<button aria-pressed>` with the
+ * geometry and pressed chrome of a single contained `ToolbarControlGroup`
+ * (44px, a 2px-inset face that rises when pressed), for content and pane
+ * footers where no `Toolbar` belongs. Inside a toolbar, use a
+ * `ToolbarControlGroup` instead.
+ */
+declare function IconToggleButton({ icon, iconName, label, pressed, action, shape, disabled, id, className, rootAttributes, slot, }: IconToggleButtonProps): kerfjs.SafeHtml;
+
+export { IconToggleButton, type IconToggleButtonProps, type IconToggleButtonShape };

package/dist/icon-toggle-button.js

@@ -0,0 +1,6 @@
+export { IconToggleButton } from './chunk-CA7LNX3J.js';
+
+
+
+
+//# sourceMappingURL=icon-toggle-button.js.map

package/dist/icon-toggle-button.js.map

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

package/dist/index.d.ts

@@ -1,32 +1,71 @@
-export { AppTab, AppTabProps } from './app-tab.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 { List, ListProps } from './list.js';
+export { IconButton, IconButtonAppearance, IconButtonProps, IconButtonSize, IconButtonVariant } from './icon-button.js';
+export { IconToggleButton, IconToggleButtonProps, IconToggleButtonShape } from './icon-toggle-button.js';
+export { PopupMenu, PopupMenuAnchor, PopupMenuDivider, PopupMenuElement, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps, closePopupMenu, openPopupMenu, openPopupMenuAt } from './popup-menu.js';
+export { SplitButton, SplitButtonProps, SplitButtonTone } from './split-button.js';
+export { Toolbar, ToolbarConfig, ToolbarPosition, ToolbarProps } from './toolbar.js';
+export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupExpandedOverflow, ToolbarControlGroupMenuInset, ToolbarControlGroupOverflow, ToolbarControlGroupProps, ToolbarControlGroupSelectedChrome, ToolbarControlGroupSelectedTone, ToolbarControlGroupShape, ToolbarControlGroupSize, ToolbarControlGroupTileTone, ToolbarControlGroupTone, ToolbarControlGroupVisibility } from './toolbar-control-group.js';
+export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize, ToolbarTextTone } from './toolbar-text.js';
+export { FramedList, FramedListProps, FramedListRow, FramedListRowProps, FramedListSurface } from './framed-list.js';
+export { List, ListConfig, ListInset, ListProps, ListSurface } from './list.js';
+export { wireListFocusScroll } from './wire-list-focus-scroll.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 { ListItem, ListItemLink, ListItemLinkProps, ListItemProps } from './list-item.js';
+export { SummaryRow, SummaryRowListEdge, SummaryRowPresentation, SummaryRowProps } from './summary-row.js';
+export { ValueTable, ValueTablePresentation, ValueTableProps, ValueTableRow, ValueTableRowProps, ValueTableStackBelow } from './value-table.js';
+export { AnchoredSurfaceOptions, AnchoredSurfacePoint, openAnchoredSurface, openAnchoredSurfaceAt } from './anchored-surface.js';
+export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
+export { Chip, ChipProps, ChipTone } from './chip.js';
+export { CornerStatus, CornerStatusPlacement, CornerStatusPresentation, CornerStatusProps } from './corner-status.js';
+export { wireCornerStatus } from './wire-corner-status.js';
+export { EdgeActivityIndicator, EdgeActivityIndicatorProps } from './edge-activity-indicator.js';
+export { EmptyState, EmptyStateProps } from './empty-state.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 { PanelHeader, PanelHeaderProps } from './panel-header.js';
-export { ResizableRegion, ResizableRegionAxis, ResizableRegionEdge, ResizableRegionProps, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
-export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';
-export { Select, SelectChoice, SelectProps } from './select.js';
 export { Skeleton, SkeletonProps } from './skeleton.js';
 export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } from './state-banner.js';
-export { SunkenPanel, SunkenPanelProps, SunkenPanelShape } from './sunken-panel.js';
-export { TabActivation, TabBar, TabBarProps } from './tab-bar.js';
-export { TokenSearchEditorAttributes, TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
-export { Toolbar, ToolbarProps } from './toolbar.js';
-export { ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupProps, ToolbarControlGroupShape, ToolbarControlGroupTone } from './toolbar-control-group.js';
-export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize } from './toolbar-text.js';
-export { ValueTable, ValueTableProps, ValueTableRow, ValueTableRowProps } from './value-table.js';
+export { ChoiceChips, ChoiceChipsChoice, ChoiceChipsProps, ChoiceChipsSize, ChoiceChipsSwatch } from './choice-chips.js';
+export { Combobox, ComboboxProps, ComboboxSuggestion } from './combobox.js';
+export { ComboboxCommit, WireComboboxesOptions, wireComboboxes } from './wire-comboboxes.js';
+export { Composer, ComposerProps, ComposerRootAttributes } from './composer.js';
+export { wireComposers } from './wire-composers.js';
+export { FieldLabel, FieldLabelProps, Text, TextContent, TextFont, TextProps, TextSize, TextTone, TextVariant } from './text.js';
+export { FileDropZone, FileDropZoneProps, FilePickerTrigger, FilePickerTriggerProps } from './file-picker.js';
+export { FilePickerSelection, WireFilePickersOptions, fileMatchesAccept, wireFilePickers } from './wire-file-pickers.js';
+export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';
+export { Select, SelectChoice, SelectFocusRingOwner, SelectPresentation, SelectProps, SelectSelectedPresentation, SelectSize } from './select.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 TokenSearchTrailingAction, l as TokenSearchTrailingActionAttributes, m as createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-aYR0YAei.js';
+export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
+export { ColumnTrack, ColumnTrackLayout, ColumnTrackProps } from './column-track.js';
+export { ContentSwap, ContentSwapDirection, ContentSwapProps, ContentSwapSide, ContentSwapTransition } from './content-swap.js';
+export { Grid, GridProps } from './grid.js';
+export { Pane, PaneAppearance, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneHeaderPresentation, PaneProps, PaneSeparatorSide } from './pane.js';
+export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionResponsiveFillAt, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
 export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
+export { Row, RowProps } from './row.js';
+export { Spacer, SpacerProps } from './spacer.js';
+export { LucideIcon, LucideIconProps, LucideNode } from './lucide-icon.js';
+export { AppTab, AppTabNameOverflow, AppTabPresentation, AppTabProps, AppTabSize } from './app-tab.js';
+export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
+export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProps, TabBarTrailingPlacement } from './tab-bar.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 } from './divider-sides-267FA7sY.js';
+export { ContentItem, ContentItemAppearance, ContentItemBubble, ContentItemFrame, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
+export { SunkenPanel, SunkenPanelProps, SunkenPanelShape, ensureSunkenTexture } from './sunken-panel.js';
+export { DialogSurface, DialogSurfaceBodyLayout, DialogSurfaceFooterPresentation, DialogSurfaceHeaderPresentation, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
+export { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
+export { ListDropPosition, ListReorder, ListReorderSource, ListReorderTarget, WireListReorderOptions, reorderListItems, wireListReorder } from './wire-list-reorder.js';
+export { ScrollDividerTarget, WireScrollDividersOptions, wireScrollDividers } from './wire-scroll-dividers.js';
+export { wireToolbarVisibility } from './wire-toolbar-visibility.js';
+export { H as HorizontalAlignment, L as ListVerticalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
+export { L as ListIconTile, a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
+export { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
+export { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+export { S as Sides } from './sides-BPSWde0A.js';
 import 'kerfjs';
+import './extension-attributes-mu8MFUl0.js';
+import 'kerfjs/overlay';
+import 'kerfjs/jsx-runtime';
 import 'lucide';

package/dist/index.js

@@ -1,32 +1,69 @@
-export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
-export { wireTokenSearchFields } from './chunk-OJWWHFH3.js';
-export { ValueTable, ValueTableRow } from './chunk-KWWR5VMS.js';
-export { wireResizableRegions } from './chunk-DPDBVKNA.js';
-export { StateBanner } from './chunk-W5L2JSBY.js';
-export { SunkenPanel } from './chunk-TB6DY7H5.js';
-export { TabBar } from './chunk-M7JBER5U.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7KEUJIIC.js';
-export { PanelHeader } from './chunk-7XRDUG4Y.js';
-export { ToolbarText } from './chunk-R7ZWUN64.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-NENBUYX5.js';
-export { SegmentedControl } from './chunk-IJBSZ4NX.js';
-export { Select } from './chunk-NWSEP5RT.js';
-export { ListActionRow } from './chunk-UFZKLBCF.js';
-export { ListInsetControl } from './chunk-QO55FN2Y.js';
-export { ListInsetText } from './chunk-FEY65TBV.js';
-export { AppTab } from './chunk-Y45PPBDV.js';
-export { Pane } from './chunk-JRKSK2HX.js';
-export { Toolbar } from './chunk-SYDMYBPG.js';
-export { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
-export { ListHeader } from './chunk-PSKN344N.js';
-export { ListItem } from './chunk-FEAMR7S4.js';
-export { List } from './chunk-J5BFYY7Q.js';
+export { wireResizableRegions } from './chunk-GS2QD3N7.js';
+export { reorderTabs, wireTabBars } from './chunk-K4AT3V3J.js';
+export { wireTokenSearchFields } from './chunk-YOA5W5ZH.js';
+export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
+export { wireComboboxes } from './chunk-FDZNYD4C.js';
+export { wireComposers } from './chunk-ELCMSQNJ.js';
+export { wireCornerStatus } from './chunk-ZKKO4MHC.js';
+export { fileMatchesAccept, wireFilePickers } from './chunk-2MSPNRWJ.js';
+export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
+export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
+export { createTokenSearchModel } from './chunk-IM3GKYOG.js';
+export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
+export { wireScrollDividers } from './chunk-CXZXHZTR.js';
+
+export { StateBanner } from './chunk-QROYYGWU.js';
+export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
+export { SunkenPanel } from './chunk-D5RGM3XA.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-PIVY32AE.js';
+export { TabBar } from './chunk-JOR5LGYE.js';
+export { SegmentedControl } from './chunk-NS2TBYM4.js';
+export { Select } from './chunk-TLMMFQWM.js';
+export { Spacer } from './chunk-YMUIQRWK.js';
+export { SplitButton } from './chunk-HLDRH23D.js';
+export { IconButton } from './chunk-VFYO3UGZ.js';
+export { IconToggleButton } from './chunk-CA7LNX3J.js';
+export { ListActionRow } from './chunk-RHD7RKGI.js';
+export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
+export { EmptyState } from './chunk-B53PS2LE.js';
+export { FileDropZone, FilePickerTrigger } from './chunk-W4IK7AWD.js';
+export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
+export { Grid } from './chunk-KCS6NJ3O.js';
+export { ColumnTrack } from './chunk-QYMJHS4K.js';
+export { Combobox } from './chunk-ETCWQLJV.js';
+export { Composer } from './chunk-AV7CPAPT.js';
+export { ContentItem } from './chunk-7IUEBNCO.js';
+export { ContentSwap } from './chunk-EIET4QLK.js';
+export { CornerStatus } from './chunk-G3J7JDP6.js';
+export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
+export { AppTab } from './chunk-TGLUDQP2.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-MF6ZUUJZ.js';
+export { Row } from './chunk-YQ2AC4E2.js';
+export { ToolbarText } from './chunk-HGV7J4T6.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
+export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-HQZYKJ56.js';
+export { ListHeader } from './chunk-T4WJ5VGP.js';
+export { ListInsetControl } from './chunk-AN5IWMTM.js';
+export { ListInsetText } from './chunk-S4Y3YTAI.js';
+export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
+
+export { DisclosureArrow } from './chunk-3VXDSIBJ.js';
+export { FloatingToolbar } from './chunk-S3ECMF23.js';
+export { FieldLabel, Text } from './chunk-LL45C7BB.js';
+export { Skeleton } from './chunk-CVD5IZGB.js';
+export { Badge } from './chunk-U6QYTMDB.js';
+export { Chip } from './chunk-34U4ANDJ.js';
+export { ChoiceChips } from './chunk-FR76ZJQC.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-QIG4IGUP.js';
+export { Toolbar } from './chunk-CMLPFIC5.js';
+export { List } from './chunk-HZPHCSCS.js';
+
+export { Pane } from './chunk-INI4WDWC.js';
+export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+export { LucideIcon } from './chunk-LOSRXZAH.js';
+export { LoadingSpinner } from './chunk-WVS6CUCT.js';
+
+export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-IQSRHXZR.js';
 
-export { Skeleton } from './chunk-RKVQEH4J.js';
-export { DisclosureArrow } from './chunk-Y6LYKFXY.js';
-export { LucideIcon } from './chunk-W2FK7ZNY.js';
-export { EmptyState } from './chunk-PX3YSS5C.js';
-export { LoadingSpinner } from './chunk-6WTETUZ6.js';
-export { FloatingToolbar } from './chunk-LPOMRC4C.js';
 
 //# sourceMappingURL=index.js.map

package/dist/list-action-row.d.ts

@@ -1,29 +1,83 @@
 import { SafeHtml } from 'kerfjs';
+import { L as ListIconTile } from './list-icon-tile-B8dr97OW.js';
+export { a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
+import { PopupMenuEntry, PopupMenuPlacement } from './popup-menu.js';
+import './css-values.js';
+import './semantic-content-BbzjvSu9.js';
 
 type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
     'data-has-icon'?: never;
+    'data-icon-tile'?: never;
+    'data-icon-tile-tone'?: 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;
+    'data-dragging'?: never;
+    'data-drop-position'?: 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 {
+/** A trailing overflow `PopupMenu` rendered as the row's sibling trailing control. */
+interface ListActionRowTrailingMenu {
+    /** Accessible name of the icon-only menu trigger, such as `Actions for report.json`. */
+    label: string;
+    /** Decorative trigger icon, typically a `MoreHorizontal` `LucideIcon`. */
+    icon: SafeHtml;
+    /** The menu's commands, headings, and dividers; items dispatch their own `data-action`s. */
+    items: readonly PopupMenuEntry[];
+    /** Where the menu opens relative to its trigger. Defaults to `bottom-end`. */
+    placement?: PopupMenuPlacement;
+    disabled?: boolean;
+}
+interface ListActionRowTrailingButtonProps {
+    trailingAction: string;
+    trailingActionLabel: string;
+    /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */
+    trailingActionIcon: SafeHtml;
+    trailingActionDisabled?: boolean;
+    trailingActionTitle?: string;
+    trailingActionAttributes?: ListActionRowTrailingAttributes;
+    trailingMenu?: never;
+}
+interface ListActionRowTrailingMenuProps {
+    /** A trailing overflow menu in place of the trailing button. Import `@kerfjs/ui/popup-menu/register` once. */
+    trailingMenu: ListActionRowTrailingMenu;
+    trailingAction?: never;
+    trailingActionLabel?: never;
+    trailingActionIcon?: never;
+    trailingActionDisabled?: never;
+    trailingActionTitle?: never;
+    trailingActionAttributes?: never;
+}
+interface ListActionRowCommonProps {
     /** Visible dormant content for the primary button. Must not contain interactive descendants. */
     label: string | SafeHtml;
+    description?: string | SafeHtml;
+    status?: string | SafeHtml;
+    busy?: boolean;
+    /** Row height: `standard` is 44px; `compact` is 36px (42px with `iconTile`), the height of a compact `ListItem`. */
+    density?: 'standard' | 'compact';
+    divider?: 'none' | 'before' | 'after' | 'both';
     /** Decorative dormant content for the primary button. Must not contain interactive descendants. */
     icon?: SafeHtml;
+    /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */
+    iconTile?: ListIconTile;
     action: string;
     itemId?: string;
     selected?: boolean;
@@ -34,19 +88,22 @@ interface ListActionRowProps {
     state?: string;
     disabled?: boolean;
     tabIndex?: number;
-    /** Render as an unanimated loading skeleton, disabling both actions. */
+    /** 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;
+    /** Native HTML drag source (`draggable="true"` on the row root); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */
+    draggable?: boolean;
+    /** Dim this row as one of the rows being dragged. */
+    dragging?: boolean;
+    /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */
+    dropPosition?: 'before' | 'after';
+    trailingActionVisibility?: 'always' | 'interaction';
     className?: string;
-    style?: string;
     rootAttributes?: ListActionRowRootAttributes;
-    trailingActionAttributes?: ListActionRowTrailingAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function ListActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes, }: ListActionRowProps): SafeHtml;
+/** Exactly one trailing control: a native button (`trailingAction*`) or an overflow menu (`trailingMenu`). */
+type ListActionRowProps = ListActionRowCommonProps & (ListActionRowTrailingButtonProps | ListActionRowTrailingMenuProps);
+declare function ListActionRow({ label, description, status, busy, density, divider, icon, iconTile, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, trailingMenu, className, rootAttributes, trailingActionAttributes, slot, }: ListActionRowProps): SafeHtml;
 
-export { ListActionRow, type ListActionRowProps };
+export { ListActionRow, type ListActionRowProps, type ListActionRowTrailingMenu, ListIconTile };

package/dist/list-action-row.js

@@ -1,4 +1,8 @@
-export { ListActionRow } from './chunk-UFZKLBCF.js';
+export { ListActionRow } from './chunk-RHD7RKGI.js';
+
+
+
+
 
 
 

package/dist/list-header.d.ts

@@ -1,14 +1,23 @@
 import { SafeHtml } from 'kerfjs';
+import { HeadingLevel } from './toolbar-text.js';
+import './css-values.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-size'?: 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;
@@ -16,14 +25,27 @@ type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | un
 }>;
 interface ListHeaderBaseProps {
     label: string;
+    /** Visual label size, independent of the native heading level. Default `sm`. */
+    size?: 'xs' | 'sm' | 'm' | 'l' | 'xl';
+    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;
@@ -33,6 +55,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;
@@ -42,6 +69,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;
@@ -53,12 +85,14 @@ type ListHeaderIndicatorProps = {
     count: number;
     countLabel: string;
     badge?: never;
+    status?: never;
 } | {
     count?: never;
     countLabel?: never;
-    badge?: SafeHtml;
+    badge?: SafeHtml | undefined;
+    status?: SafeHtml | undefined;
 };
 type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
-declare function ListHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, }: ListHeaderProps): SafeHtml;
+declare function ListHeader({ label, size, 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,7 @@
-export { ListHeader } from './chunk-PSKN344N.js';
+export { ListHeader } from './chunk-T4WJ5VGP.js';
+
+
+
 
 
 

package/dist/list-icon-tile-B8dr97OW.d.ts

@@ -0,0 +1,18 @@
+import { CssColor, CssForegroundColor } from './css-values.js';
+
+/**
+ * Quiet tile palette for a list row's leading icon: the same fill, border, and
+ * foreground roles as `ToolbarControlGroup`'s `tileTone`.
+ */
+type ListIconTileTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+/** A list row's leading icon tile filled with an application-chosen color. */
+interface ListIconTileColor {
+    /** The tile fill: `uiColor()`, `colorVar()`, or `fillColor()` for an app color such as `#e5484d`. */
+    color: CssColor;
+    /** The glyph color over the fill. Defaults to black or white, whichever contrasts with `color`. */
+    foreground?: CssForegroundColor;
+}
+/** A filled leading icon tile: a quiet tone preset or an application color. */
+type ListIconTile = ListIconTileTone | ListIconTileColor;
+
+export type { ListIconTile as L, ListIconTileColor as a, ListIconTileTone as b };

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

@@ -1,9 +1,15 @@
-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';
 
 interface ListInsetControlProps {
     /** Control(s) that own their own border and padding (e.g. an input, a `wa-*`). */
-    children: SafeHtml | SafeHtml[];
+    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
@@ -11,6 +17,6 @@ interface ListInsetControlProps {
  * 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, className, }: ListInsetControlProps): SafeHtml;
+declare function ListInsetControl({ children, sides, className, slot, }: ListInsetControlProps): kerfjs.SafeHtml;
 
-export { ListInsetControl, type ListInsetControlProps };
+export { ListInsetControl, type ListInsetControlProps, Sides };

package/dist/list-inset-control.js

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

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

@@ -1,25 +1,30 @@
-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';
 
+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: SafeHtml | SafeHtml[] | string;
-    /**
-     * 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;
+    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 `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, horizontalOnly, className, }: ListInsetTextProps): SafeHtml;
+declare function ListInsetText({ children, sides, className, rootAttributes, slot, }: ListInsetTextProps): kerfjs.SafeHtml;
 
-export { ListInsetText, type ListInsetTextProps };
+export { ListInsetText, type ListInsetTextProps, Sides };

package/dist/list-inset-text.js

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