@kerfjs/ui 5.0.0-beta.98 → 5.0.0-beta.99

package/dist/composer.d.ts

@@ -0,0 +1,62 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/**
+ * Application `data-*` identity on the Composer root, such as `data-key`;
+ * the composer's own configuration attributes stay protected.
+ */
+type ComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface ComposerProps {
+    /** The message field's accessible name, in title style ("Message"). */
+    label: string;
+    /** Native textarea `name`: the form field the message submits under. */
+    name: string;
+    /**
+     * The textarea id. With a `hint`, the hint takes `<id>-hint` and becomes
+     * the field's accessible description.
+     */
+    id?: string;
+    /** The field's text: a draft to restore, or `''` after sending. */
+    value?: string;
+    /** Sentence-style example of what to write ("Ask about this build"). */
+    placeholder?: string;
+    /**
+     * Visible lines while the field is empty or short (default 1). The field
+     * grows with its content from here.
+     */
+    minRows?: number;
+    /**
+     * Lines the field grows to before it scrolls (default 8). At least
+     * `minRows`.
+     */
+    maxRows?: number;
+    /** Quiet, sentence-style supporting copy at the start of the action row. */
+    hint?: string;
+    /** Trailing controls in the action row, normally one brand Send button. */
+    actions: KerfUiContent;
+    /** Disable the field; the app disables its own actions. */
+    disabled?: boolean;
+    /**
+     * Opt in to Enter-to-send: with `wireComposers` running over an ancestor,
+     * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing
+     * action, Shift+Enter inserts a newline, and an Enter that commits an IME
+     * composition or meets an empty message does not send. The field announces
+     * the shortcut with `aria-keyshortcuts`.
+     */
+    submitOnEnter?: boolean;
+    /** Safe `data-*` identity on the root. */
+    rootAttributes?: ComposerRootAttributes;
+    className?: string;
+    /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */
+    slot?: string;
+}
+/**
+ * A chat or prompt composer: a raised frame whose border turns brand while
+ * focus is within, holding a borderless message field that grows with its
+ * content between `minRows` and `maxRows` lines, above an action row with an
+ * optional hint and trailing actions. The app owns the value and sending;
+ * `submitOnEnter` with `wireComposers` adds Enter-to-send.
+ */
+declare function Composer({ label, name, id, value, placeholder, minRows, maxRows, hint, actions, disabled, submitOnEnter, rootAttributes, className, slot, }: ComposerProps): kerfjs.SafeHtml;
+
+export { Composer, type ComposerProps, type ComposerRootAttributes };

package/dist/composer.js

@@ -0,0 +1,5 @@
+export { Composer } from './chunk-AV7CPAPT.js';
+
+
+
+//# sourceMappingURL=composer.js.map

package/dist/composer.js.map

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

package/dist/corner-status.d.ts

@@ -25,7 +25,7 @@ interface CornerStatusProps {
 }
 /**
  * A non-dismissible status surface pinned to a viewport corner — "Loading…",
- * "Updating tickets… 3 of 12" — for app-level progress that has no better
+ * "Updating Tickets… 3 of 12" — for app-level progress that has no better
  * home beside the affected work. The application owns its lifetime: render it
  * while the work runs and remove it when the work ends. It carries no role of
  * its own; the composed `StateBanner` is the polite live region. Use a toast

package/dist/corner-status.js

@@ -1,3 +1,3 @@
-export { CornerStatus } from './chunk-QQ3TTWFH.js';
+export { CornerStatus } from './chunk-G3J7JDP6.js';
 
 //# sourceMappingURL=corner-status.js.map

package/dist/css-values.d.ts

@@ -115,5 +115,13 @@ declare function foregroundColorVar(name: `--${string}`, fallback?: CssForegroun
  * resolves the color syntax; this checks only that it is one declaration value.
  */
 declare function foregroundColor(value: string): CssForegroundColor;
+/**
+ * Use an application-chosen CSS color as a fill: a `ChoiceChips` swatch, a list
+ * row's `iconTile` color, or any other prop that takes a plain
+ * {@link CssColor}. It returns a `CssColor`, not a {@link CssForegroundColor},
+ * so a fill literal cannot reach a prop that paints text or an icon. The browser
+ * resolves the color syntax; this checks only that it is one declaration value.
+ */
+declare function fillColor(value: string): CssColor;
 
-export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiGap, type UiGapValue, type UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
+export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiGap, type UiGapValue, type UiSpaceName, calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };

package/dist/css-values.js

@@ -1,3 +1,3 @@
-export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-U657IHFB.js';
+export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-IQSRHXZR.js';
 
 //# sourceMappingURL=css-values.js.map

package/dist/disclosure-arrow.js

@@ -1,4 +1,4 @@
-export { DisclosureArrow } from './chunk-HWY4BSLS.js';
+export { DisclosureArrow } from './chunk-3VXDSIBJ.js';
 
 
 

package/dist/empty-state.js

@@ -1,4 +1,4 @@
-export { EmptyState } from './chunk-XK4E225T.js';
+export { EmptyState } from './chunk-B53PS2LE.js';
 
 
 

package/dist/grid.js

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

package/dist/icon-button.js

@@ -1,4 +1,4 @@
-export { IconButton } from './chunk-M2NRCFRO.js';
+export { IconButton } from './chunk-VFYO3UGZ.js';
 
 
 

package/dist/icon-toggle-button.js

@@ -1,4 +1,4 @@
-export { IconToggleButton } from './chunk-R42D2BAO.js';
+export { IconToggleButton } from './chunk-CA7LNX3J.js';
 
 
 

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, Toolbar
 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';
@@ -17,7 +18,7 @@ export { SummaryRow, SummaryRowListEdge, SummaryRowPresentation, SummaryRowProps
 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 } from './chip.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';
@@ -28,17 +29,19 @@ export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } fr
 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 createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-DTcTXWMS.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, PaneProps, PaneSeparatorSide } from './pane.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';
@@ -50,13 +53,15 @@ export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProp
 export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.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, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.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, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.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';

package/dist/index.js

@@ -1,66 +1,69 @@
-export { reorderTabs, wireTabBars } from './chunk-KQDU7Z7P.js';
-export { wireTokenSearchFields } from './chunk-Y3LC7JQO.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 { wireResizableRegions } from './chunk-GS2QD3N7.js';
 export { createTokenSearchModel } from './chunk-IM3GKYOG.js';
-export { ValueTable, ValueTableRow } from './chunk-GZE2XVKC.js';
+export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
+export { wireScrollDividers } from './chunk-CXZXHZTR.js';
 
-export { wireScrollDividers } from './chunk-6STQXRT4.js';
-export { wireComboboxes } from './chunk-FDZNYD4C.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-JYD7G4RG.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-HO6FU3G7.js';
-export { Spacer } from './chunk-MN3POJFN.js';
-export { SplitButton } from './chunk-YWQGSUF2.js';
-export { StateBanner } from './chunk-6BRRUPJY.js';
-export { IconToggleButton } from './chunk-R42D2BAO.js';
-export { ListActionRow } from './chunk-FOQK4F3L.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-XK4E225T.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-QIAPOWHH.js';
-export { IconButton } from './chunk-M2NRCFRO.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-QQ3TTWFH.js';
-export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-76PWEN5Y.js';
-export { AppTab } from './chunk-6NOLL5KG.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-ROZLJULF.js';
-export { ToolbarText } from './chunk-IGTWXPTN.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 { Row } from './chunk-44A6LP54.js';
-export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-PBT3CPPY.js';
-export { ListHeader } from './chunk-BBU2SPRE.js';
-export { FieldLabel, Text } from './chunk-LL45C7BB.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-36TL6BCR.js';
+export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
 
+export { DisclosureArrow } from './chunk-3VXDSIBJ.js';
 export { FloatingToolbar } from './chunk-S3ECMF23.js';
-export { DisclosureArrow } from './chunk-HWY4BSLS.js';
-export { Skeleton } from './chunk-Y43B6DS3.js';
+export { FieldLabel, Text } from './chunk-LL45C7BB.js';
+export { Skeleton } from './chunk-CVD5IZGB.js';
 export { Badge } from './chunk-U6QYTMDB.js';
-export { Chip } from './chunk-DQDTZE4W.js';
-export { ChoiceChips } from './chunk-PRG4CL3Q.js';
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-YXOMI7ES.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 { Pane } from './chunk-GJYQ27C2.js';
-export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
-export { List } from './chunk-V6W56V3N.js';
+export { List } from './chunk-HZPHCSCS.js';
 
-export { LoadingSpinner } from './chunk-YOKEL75M.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 { LucideIcon } from './chunk-UKKRPP56.js';
-export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-U657IHFB.js';
+export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-IQSRHXZR.js';
 
 
 //# sourceMappingURL=index.js.map

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

@@ -1,5 +1,8 @@
 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> & {
@@ -7,6 +10,8 @@ type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | un
     '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;
@@ -66,10 +71,13 @@ interface ListActionRowCommonProps {
     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;
@@ -96,6 +104,6 @@ interface ListActionRowCommonProps {
 }
 /** 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, 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;
+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, type ListActionRowTrailingMenu };
+export { ListActionRow, type ListActionRowProps, type ListActionRowTrailingMenu, ListIconTile };

package/dist/list-action-row.js

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

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-BBU2SPRE.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-item.d.ts

@@ -1,5 +1,8 @@
 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 { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import './css-values.js';
 
 type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
@@ -14,6 +17,8 @@ type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefin
     'data-state'?: never;
     'data-kui-disabled'?: never;
     'data-icon-align'?: never;
+    'data-icon-tile'?: never;
+    'data-icon-tile-tone'?: never;
     'data-dragging'?: never;
     'data-drop-position'?: never;
 }>;
@@ -22,6 +27,8 @@ interface ListItemProps {
     /** App-owned supporting text rendered in the component's stable label stack. */
     description?: string | SafeHtml;
     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;
     /** 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. */
@@ -63,8 +70,8 @@ interface ListItemLinkProps extends Omit<ListItemProps, 'action' | 'pressed'> {
     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, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemProps): SafeHtml;
+declare function ListItem({ label, description, icon, iconTile, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, 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, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
+declare function ListItemLink({ href, external, label, description, icon, iconTile, trailing, status, busy, density, divider, selected, itemId, className, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
 
-export { ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };
+export { ListIconTile, ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem, ListItemLink } from './chunk-36TL6BCR.js';
+export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
 
 
 

package/dist/list.d.ts

@@ -3,9 +3,10 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { S as StructuralRootAttributes } from './extension-attributes-mu8MFUl0.js';
 import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
 export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
+import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
 import { S as Sides } from './sides-BPSWde0A.js';
-import { UiGap, CssFlexKeyword, CssFlex } from './css-values.js';
-export { CssLength, UiGapValue, UiSpaceName } from './css-values.js';
+import { UiGap, CssFlexKeyword, CssFlex, CssLength } from './css-values.js';
+export { UiGapValue, UiSpaceName } from './css-values.js';
 
 type ListRootAttributes = StructuralRootAttributes & Readonly<{
     'data-component'?: never;
@@ -15,6 +16,8 @@ type ListRootAttributes = StructuralRootAttributes & Readonly<{
     'data-h-align'?: never;
     'data-v-align'?: never;
     'data-scrollable'?: never;
+    'data-scroll-clearance'?: never;
+    'data-frame'?: never;
     'data-surface'?: never;
     'data-inset'?: never;
     'data-text-insets'?: never;
@@ -59,6 +62,35 @@ interface ListProps {
      * column and use `flex`; `fill` needs a definite-height parent.
      */
     scrollable?: boolean;
+    /**
+     * Clear chrome that lies over this scrollable List's block-start and/or
+     * block-end edge, such as a `DialogSurface` floating footer. The List adds
+     * the inherited `--kui-scroll-clearance-block-*` context that chrome
+     * publishes to its own block padding and `scroll-padding`, so its rows
+     * scroll visibly beneath the chrome while the first and last rows (and any
+     * row focused or scrolled into view) can still rest clear of it. Opt in only
+     * the one scroller that reaches the covered edge. Defaults to none.
+     */
+    scrollClearance?: ScrollClearance;
+    /**
+     * Draw a bordered, rounded frame around the stack: a 1px neutral border,
+     * the standard control radius, and a 4px inset on every side that keeps the
+     * first and last rows' focus rings inside a scrolling frame's clip. It
+     * replaces any `inset`/`textInsets`/`controlInsets`. With `scrollable` and
+     * `maxHeight` it is a bounded result picker of `ListItem` rows.
+     */
+    frame?: boolean;
+    /**
+     * The List's maximum block size, a typed `CssLength` from
+     * `@kerfjs/ui/css-values` (such as `rem(14)`). Pair it with `scrollable` so
+     * rows beyond it scroll; it bounds the List without a flex-column ancestor.
+     */
+    maxHeight?: CssLength;
+    /**
+     * The List's minimum block size, a typed `CssLength` (such as `rem(4.25)`),
+     * so a short or empty result set keeps a stable box. Defaults to no minimum.
+     */
+    minHeight?: CssLength;
     /**
      * Paint a solid surface behind the stack, including its insets: for a strip
      * of chrome (a banner above a sunken work area) that must not show the
@@ -91,6 +123,6 @@ interface ListProps {
  */
 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, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
-export { CssFlex, CssFlexKeyword, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, Sides, UiGap };
+export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };

package/dist/list.js

@@ -1,4 +1,4 @@
-export { List } from './chunk-V6W56V3N.js';
+export { List } from './chunk-HZPHCSCS.js';
 
 
 

package/dist/loading-spinner.js

@@ -1,4 +1,4 @@
-export { LoadingSpinner } from './chunk-YOKEL75M.js';
+export { LoadingSpinner } from './chunk-WVS6CUCT.js';
 
 
 //# sourceMappingURL=loading-spinner.js.map

package/dist/lucide-icon.js

@@ -1,4 +1,4 @@
-export { LucideIcon } from './chunk-UKKRPP56.js';
+export { LucideIcon } from './chunk-LOSRXZAH.js';
 
 
 //# sourceMappingURL=lucide-icon.js.map

package/dist/{nav-stack-Cp3Y8kJ9.d.ts → nav-stack-VXTumzKa.d.ts}

@@ -2,7 +2,7 @@ import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { ListConfig } from './list.js';
 import { PaneConfig } from './pane.js';
-import { c as PanelBottomToolbar } from './panel-toolbar-CL9tYOkh.js';
+import { c as PanelBottomToolbar } from './panel-toolbar-vg6Ir5Dy.js';
 import { ToolbarConfig } from './toolbar.js';
 import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
 
@@ -52,6 +52,19 @@ interface NavStackToolbarConfig extends ToolbarConfig {
     /** Expose the view title as a heading at this level (default: a plain span). */
     headingLevel?: HeadingLevel;
 }
+/**
+ * How a {@link NavStack}'s top chrome relates to the active view: `docked`
+ * above it, or `overlay` laid over its top edge on the translucent chrome
+ * material, so the view's content scrolls visibly beneath it.
+ */
+type NavStackChromePresentation = 'docked' | 'overlay';
+/**
+ * How a {@link NavStack}'s bottom toolbar relates to the active view:
+ * `docked` below it, or `overlay` laid over its bottom edge on the
+ * translucent chrome material, so the view's content scrolls visibly beneath
+ * it.
+ */
+type NavStackBottomToolbarPresentation = 'docked' | 'overlay';
 interface NavStackProps {
     id: string;
     /** Accessible name for the stack region. */
@@ -96,6 +109,38 @@ interface NavStackProps {
      * own and is unaffected.
      */
     chromeDividers?: 'scroll' | 'always' | 'none';
+    /**
+     * `docked` (default) gives the top chrome its own band above the active
+     * view. `overlay` lays the chrome over the view's top edge on the
+     * translucent chrome material (`--kui-chrome-material`, opaque under
+     * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,
+     * or without `backdrop-filter`), so content scrolls visibly beneath it, as
+     * an iOS navigation bar does. `wireNavStack` measures the live chrome and
+     * hands its height (top safe area included) to the viewport as the
+     * block-start `--kui-edge-inset-*` context, so every view clears it with no
+     * prop: a plain view, a sole `Pane`'s content (or header), and a nested
+     * layout all pad and `scroll-padding` by it, so the first item, and anything
+     * focused or scrolled into view, rests clear of the bar. Until then, and
+     * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in
+     * the chrome lifts its title and description to AA over the content passing
+     * beneath it; keep any other quiet copy in the view.
+     */
+    chromePresentation?: NavStackChromePresentation;
+    /**
+     * `docked` (default) gives the bottom toolbar its own band below the
+     * active view. `overlay` lays it over the view's bottom edge on the
+     * translucent chrome material (opaque under the same preferences as
+     * `chromePresentation`), so content scrolls visibly beneath it, as under
+     * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a
+     * cross-fading copy) and hands its height (bottom safe area included) to
+     * the viewport as the block-end `--kui-edge-inset-*` context, so a plain
+     * view, a sole `Pane`'s content (or footer), and a nested layout rest their
+     * last item, and anything focused or scrolled into view, clear of it. Until
+     * then, and while no bottom toolbar is shown, it stays docked. Independent
+     * of `chromePresentation`, which governs only the top chrome. An untoned
+     * `ToolbarText` in the toolbar lifts to AA over the content beneath it.
+     */
+    bottomToolbarPresentation?: NavStackBottomToolbarPresentation;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -108,6 +153,6 @@ interface NavStackProps {
  * and `toolbarConfig` supplies defaults. A single-pane
  * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
  */
-declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, separator, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
+declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, separator, chromeDividers, chromePresentation, bottomToolbarPresentation, className, slot, }: NavStackProps): kerfjs.SafeHtml;
 
-export { type NavStackProps as N, type NavStackView as a, type NavPane as b, NavStack as c, type NavStackToolbarConfig as d, type NavStackViewBottomToolbar as e, type NavStackViewToolbar as f };
+export { type NavStackProps as N, type NavStackView as a, type NavPane as b, NavStack as c, type NavStackBottomToolbarPresentation as d, type NavStackChromePresentation as e, type NavStackToolbarConfig as f, type NavStackViewBottomToolbar as g, type NavStackViewToolbar as h };

package/dist/nav-stack.d.ts

@@ -1,13 +1,14 @@
-export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-Cp3Y8kJ9.js';
+export { c as NavStack, d as NavStackBottomToolbarPresentation, e as NavStackChromePresentation, N as NavStackProps, f as NavStackToolbarConfig, a as NavStackView, g as NavStackViewBottomToolbar, h as NavStackViewToolbar } from './nav-stack-VXTumzKa.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
+import './scroll-clearance-BikHljTc.js';
 import './sides-BPSWde0A.js';
 import './css-values.js';
 import './pane.js';
-import './panel-toolbar-CL9tYOkh.js';
+import './panel-toolbar-vg6Ir5Dy.js';
 import './toolbar.js';
 import './lucide-icon.js';
 import 'lucide';