@kerfjs/ui 5.0.0-beta.7 → 5.0.0-beta.71

package/dist/grid.d.ts

@@ -0,0 +1,50 @@
+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-min-column-width'?: never;
+    'data-auto-fill'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+}>;
+interface GridCommonProps {
+    children?: KerfUiContent;
+    /** Make this a labeled multi-select grid for `ContentItem selectionMode="multiple"` tiles. */
+    selectionMode?: 'multiple';
+    /** Accessible name for the multi-select grid. */
+    ariaLabel?: string;
+    /** 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;
+}
+type GridProps = GridCommonProps & ({
+    /** Number of equal-width columns. Must be a positive safe integer. */
+    columns: number;
+    minColumnWidth?: never;
+    autoFill?: never;
+} | {
+    columns?: never;
+    /** Fit equal columns of at least this width; collapse as the container narrows. */
+    minColumnWidth: CssLength;
+    /** Keep empty tracks instead of stretching a sparse row. Defaults to false. */
+    autoFill?: boolean;
+});
+/** Render equal tracks with a fixed count or a responsive minimum width. */
+declare function Grid({ children, selectionMode, ariaLabel, columns, minColumnWidth, autoFill, 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-B2ZMR7NY.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,25 +1,45 @@
-export { AppTab, AppTabProps } from './app-tab.js';
+export { AppTab, AppTabNameOverflow, AppTabPresentation, AppTabProps, AppTabSize } from './app-tab.js';
+export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
+export { Chip, ChipProps } from './chip.js';
+export { ContentItem, ContentItemFrame, ContentItemProps, ContentItemSelectionMode, 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, ListItemLink, ListItemLinkProps, 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, PaneAppearance, 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 { 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 { 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 { 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 { FieldLabel, FieldLabelProps, 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 TokenSearchTrailingAction, l as createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-CVGwDn2y.js';
+export { Toolbar, ToolbarConfig, ToolbarPosition, 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,26 +1,46 @@
-export { ValueTable, ValueTableRow } from './chunk-PONXLV5U.js';
-export { wireResizableRegions } from './chunk-AQNKJRFH.js';
-export { reorderTabs, wireTabBars } from './chunk-MQIZAD4A.js';
-export { wireTokenSearchFields } from './chunk-2RJBFNB6.js';
-export { StateBanner } from './chunk-I7INRJO4.js';
-export { TabBar } from './chunk-MBR3TYNL.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
-export { MenuHeader } from './chunk-H6URQGJI.js';
-export { MenuItem } from './chunk-YKUUZPED.js';
-export { PanelHeader } from './chunk-TZNCCM5H.js';
-export { Toolbar } from './chunk-DAFFDO33.js';
-export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
-export { ToolbarText } from './chunk-KJYXOTG3.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-M5JRI6MN.js';
-export { SegmentedControl } from './chunk-YGN7OMLT.js';
-export { Select } from './chunk-LC3YSAZC.js';
-export { AppTab } from './chunk-2Z5TWHKQ.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-3YD6ZNRA.js';
+export { wireTokenSearchFields } from './chunk-DB5ADJKF.js';
+export { wireResizableRegions } from './chunk-UIDKY4UB.js';
 
-export { Skeleton } from './chunk-B24C4A6T.js';
+export { wireScrollDividers } from './chunk-6DFDTWGG.js';
+export { reorderTabs, wireTabBars } from './chunk-SLWCCHNP.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-RVERAFFY.js';
+export { createTokenSearchModel } from './chunk-4SQK27MR.js';
+export { ValueTable, ValueTableRow } from './chunk-P7D3EMXM.js';
+export { Spacer } from './chunk-MEY33VWB.js';
+export { StateBanner } from './chunk-GLDWRCAM.js';
+export { SunkenPanel } from './chunk-WF75U3V4.js';
+export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
+export { TabBar } from './chunk-OXO2QJWV.js';
+export { SegmentedControl } from './chunk-X5QSICJ3.js';
+export { Select } from './chunk-K67Y2JNF.js';
+export { ListInsetControl } from './chunk-5I7QGQVT.js';
+export { EmptyState } from './chunk-47CKKLBE.js';
+export { Grid } from './chunk-B2ZMR7NY.js';
+export { ListActionRow } from './chunk-7OKX3EF6.js';
+export { AppTab } from './chunk-Q6YU3BT7.js';
+export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-J3KGJ6P6.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-KLJKU6ZL.js';
+export { Row } from './chunk-VZOFZPSO.js';
+export { ListHeader } from './chunk-M6DEEBEF.js';
+export { FieldLabel, Text } from './chunk-YDGNU2OD.js';
+export { ListInsetText } from './chunk-DG6G5EPF.js';
+export { ListItem, ListItemLink } from './chunk-NC4CFOID.js';
+export { ToolbarText } from './chunk-V3DX3K65.js';
+export { DisclosureArrow } from './chunk-G4S2QU6V.js';
+export { FloatingToolbar } from './chunk-I3Q7KKYM.js';
+
+export { Skeleton } from './chunk-AHEG27M7.js';
+export { Badge } from './chunk-MP2GDBQZ.js';
+export { Chip } from './chunk-SMZGAPCU.js';
+export { Pane } from './chunk-3BYFWTP3.js';
+export { List } from './chunk-W2AC6Q2A.js';
+
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-QJ5VFCW3.js';
+export { Toolbar } from './chunk-RGS4WX2M.js';
+export { LucideIcon } from './chunk-WTSNV5RG.js';
+export { LoadingSpinner } from './chunk-KVBRMEPM.js';
+export { ContentItem } from './chunk-NCSWXG7G.js';
+
+export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-2G2ZJQYK.js';
 
 //# sourceMappingURL=index.js.map

package/dist/{menu-action-row.d.ts → list-action-row.d.ts}

@@ -1,27 +1,37 @@
 import { SafeHtml } from 'kerfjs';
 
-type MenuActionRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+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 MenuActionRowTrailingAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+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 MenuActionRowProps {
+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;
@@ -34,7 +44,7 @@ interface MenuActionRowProps {
     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;
@@ -42,11 +52,13 @@ interface MenuActionRowProps {
     trailingActionIcon: SafeHtml;
     trailingActionDisabled?: boolean;
     trailingActionTitle?: string;
+    trailingActionVisibility?: 'always' | 'interaction';
     className?: string;
-    style?: string;
-    rootAttributes?: MenuActionRowRootAttributes;
-    trailingActionAttributes?: MenuActionRowTrailingAttributes;
+    rootAttributes?: ListActionRowRootAttributes;
+    trailingActionAttributes?: ListActionRowTrailingAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function MenuActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes }: MenuActionRowProps): SafeHtml;
+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 { MenuActionRow, type MenuActionRowProps };
+export { ListActionRow, type ListActionRowProps };

package/dist/list-action-row.js

@@ -0,0 +1,8 @@
+export { ListActionRow } from './chunk-7OKX3EF6.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-M6DEEBEF.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,62 @@
+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;
+}
+interface ListItemLinkProps extends Omit<ListItemProps, 'action' | 'pressed'> {
+    /** Native destination for this navigation row. */
+    href: string;
+    /** Open in a new tab with a safe rel and announce that behavior. */
+    external?: boolean;
+    action?: never;
+    pressed?: never;
+}
+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;
+/** A navigation row with native link activation and ListItem geometry. */
+declare function ListItemLink({ href, external, label, description, icon, trailing, status, busy, density, divider, selected, itemId, className, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
+
+export { ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };

package/dist/list-item.js

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

package/dist/list-item.js.map

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

package/dist/list.d.ts

@@ -0,0 +1,63 @@
+import * as kerfjs from 'kerfjs';
+import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.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;
+    'data-gap'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+    'data-h-align'?: never;
+    'data-v-align'?: never;
+    'data-scrollable'?: never;
+    'data-text-insets'?: never;
+    'data-control-insets'?: never;
+}>;
+interface ListProps {
+    children?: KerfUiContent;
+    /** Make this list a labeled multi-select grid for `ContentItem selectionMode="multiple"` rows. */
+    selectionMode?: 'multiple';
+    /** Accessible name for the multi-select grid. */
+    ariaLabel?: string;
+    /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */
+    gap?: boolean | UiSpaceName | CssLength;
+    /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
+    flex?: boolean | CssFlexKeyword | CssFlex;
+    /**
+     * Fill the height of a parent with a definite height, such as an app root or
+     * a fixed-height frame, when this list is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
+    /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */
+    hAlign?: HorizontalAlignment;
+    /** Vertical distribution. Defaults to top. */
+    vAlign?: ListVerticalAlignment;
+    /** Own vertical scrolling and overscroll containment. */
+    scrollable?: boolean;
+    /** Physical divider edges in canonical top/right/bottom/left order. */
+    dividerSides?: Sides;
+    /** Physical sides that receive the standard 17px text inset. */
+    textInsets?: Sides;
+    /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
+    controlInsets?: Sides;
+    className?: string;
+    /** Safe `data-*` metadata; List-owned structural attributes remain protected. */
+    rootAttributes?: ListRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A list's configuration, apart from its content and styling hooks: the props a
+ * composite that renders a `List` for the app (the Workbench's `mainHeader` /
+ * `mainFooter` chrome) forwards, so the app configures that list instead of
+ * styling it. An omitted or `undefined` field keeps the composite's default.
+ */
+type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
+/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
+declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+
+export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };

package/dist/list.js

@@ -0,0 +1,6 @@
+export { List } from './chunk-W2AC6Q2A.js';
+
+
+
+
+//# sourceMappingURL=list.js.map