@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.111

package/dist/index.d.ts

@@ -1,26 +1,82 @@
-export { AppTab, AppTabProps } from './app-tab.js';
-export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
-export { EmptyState, EmptyStateProps } from './empty-state.js';
+export { Button, ButtonContent, ButtonEmphasis, ButtonLabel, ButtonOptions, ButtonProps, ButtonRootAttributes, ButtonShape, ButtonSize, ButtonTone, ButtonType } from './button.js';
 export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';
+export { PopupMenu, PopupMenuAnchor, PopupMenuDivider, PopupMenuElement, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps, closePopupMenu, openPopupMenu, openPopupMenuAt } from './popup-menu.js';
+export { SplitButton, SplitButtonProps, SplitButtonShape, SplitButtonTone } from './split-button.js';
+export { Toolbar, ToolbarConfig, ToolbarPosition, ToolbarProps } from './toolbar.js';
+export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupExpandedOverflow, ToolbarControlGroupMaterial, 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 { ListItem, ListItemProps } from './list-item.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 { 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 { 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 } 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 { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize } from './toolbar-text.js';
-export { ValueTable, ValueTableProps, ValueTableRow, ValueTableRowProps } from './value-table.js';
+export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } from './state-banner.js';
+export { Checkbox, CheckboxProps, CheckboxRootAttributes, CheckboxSize } from './checkbox.js';
+export { wireCheckboxes } from './wire-checkboxes.js';
+export { CheckboxGroup, CheckboxGroupChoice, CheckboxGroupName, CheckboxGroupOptions, CheckboxGroupOrientation, CheckboxGroupProps, CheckboxGroupRootAttributes, CheckboxGroupSize } from './checkbox-group.js';
+export { ChoiceChips, ChoiceChipsChoice, ChoiceChipsProps, ChoiceChipsSelectionMode, ChoiceChipsSize, ChoiceChipsSwatch } from './choice-chips.js';
+export { readChoiceChips, wireChoiceChips } from './wire-choice-chips.js';
+export { Combobox, ComboboxProps, ComboboxSuggestion } from './combobox.js';
+export { ComboboxCommit, WireComboboxesOptions, wireComboboxes } from './wire-comboboxes.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 { MessageComposer, MessageComposerProps, MessageComposerRootAttributes } from './message-composer.js';
+export { wireMessageComposers } from './wire-message-composers.js';
+export { RadioGroup, RadioGroupChoice, RadioGroupName, RadioGroupOptions, RadioGroupOrientation, RadioGroupProps, RadioGroupRootAttributes, RadioGroupSize } from './radio-group.js';
+export { S as SearchField, a as SearchFieldEditorAttributes, b as SearchFieldModel, c as SearchFieldModelOptions, d as SearchFieldProps, e as SearchFieldResolvedToken, f as SearchFieldRule, g as SearchFieldState, h as SearchFieldStructure, i as SearchFieldSuggestion, j as SearchFieldToken, k as SearchFieldTrailingAction, l as SearchFieldTrailingActionAttributes, m as SearchFieldValue, n as createSearchFieldModel, p as placeSearchFieldCaret, r as readSearchField } from './search-field-CrGTN5sa.js';
+export { SearchFieldCollapsibleOptions, SearchFieldEdit, SearchFieldSubmit, SearchFieldsHandle, WireSearchFieldsOptions, wireSearchFields } from './wire-search-fields.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 { Switch, SwitchProps, SwitchRootAttributes, SwitchSize } from './switch.js';
+export { TextField, TextFieldName, TextFieldOptions, TextFieldProps, TextFieldRootAttributes, TextFieldSize, TextFieldType } from './text-field.js';
+export { wireTextFields } from './wire-text-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, ScrollEdge } 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 { 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 { TabBarItem, TabBarItemNameOverflow, TabBarItemPresentation, TabBarItemProps, TabBarItemSize } from './tab-bar-item.js';
+export { BackdropImage, BackdropImageFit, BackdropImageParallax, BackdropImagePosition, BackdropImageProps, BackdropImageRepeat, BackdropImageScrim, BackdropImageSingleProps, BackdropImageTiledProps } from './backdrop-image.js';
+export { ContentItem, ContentItemAppearance, ContentItemBubble, ContentItemFrame, ContentItemMedia, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
+export { SunkenPanel, SunkenPanelProps, SunkenPanelShape, ensureSunkenTexture } from './sunken-panel.js';
+export { DialogCloseSource, DialogRequestCloseDetail, DialogSurface, DialogSurfaceBodyLayout, DialogSurfaceFooterPresentation, DialogSurfaceHeaderPresentation, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceName, DialogSurfaceOptions, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSheetMotion, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset, closeDialog, openDialog } from './surface-scaffold.js';
+export { wireOverlaySheets } from './wire-overlay-sheets.js';
+export { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+export { ApplySelectionOptions, SelectionGesture, SelectionModifiers, SelectionResult, applySelection, isApplePlatform, selectionGesture } from './selection.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';
+export { S as SurfaceTint, a as SurfaceTintScheme } from './surface-tint-DQgYCaP9.js';
 import 'kerfjs';
+import './extension-attributes-mu8MFUl0.js';
+import 'kerfjs/overlay';
+import 'kerfjs/jsx-runtime';
 import 'lucide';

package/dist/index.js

@@ -1,27 +1,87 @@
-export { wireResizableRegions } from './chunk-AQNKJRFH.js';
-export { reorderTabs, wireTabBars } from './chunk-XXMOARTH.js';
-export { wireTokenSearchFields } from './chunk-LCOBDOCC.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
-export { ValueTable, ValueTableRow } from './chunk-37T3VNIZ.js';
-export { SegmentedControl } from './chunk-YGN7OMLT.js';
-export { Select } from './chunk-CH4SQ6H5.js';
-export { StateBanner } from './chunk-I7INRJO4.js';
-export { TabBar } from './chunk-AVZHJN6C.js';
-export { ListActionRow } from './chunk-7JB7VPRI.js';
-export { PanelHeader } from './chunk-XE5ZLPCC.js';
-export { ToolbarText } from './chunk-RUNWEPR4.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-M5JRI6MN.js';
-export { AppTab } from './chunk-2Z5TWHKQ.js';
-export { ListHeader } from './chunk-5ATCDSQS.js';
-export { ListItem } from './chunk-L4OKFDJY.js';
-export { ToolbarControlGroup } from './chunk-RNPGFQ33.js';
-export { Toolbar } from './chunk-DAFFDO33.js';
-
-export { Skeleton } from './chunk-B24C4A6T.js';
-export { DisclosureArrow } from './chunk-56RJXPHG.js';
-export { LucideIcon } from './chunk-W2FK7ZNY.js';
-export { EmptyState } from './chunk-WVPYVDXY.js';
-export { LoadingSpinner } from './chunk-55DATV3A.js';
-export { FloatingToolbar } from './chunk-5E2HVJ33.js';
+export { reorderTabs, wireTabBars } from './chunk-T74YB76U.js';
+export { wireTextFields } from './chunk-KC6WUSNS.js';
+export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
+export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
+export { wireMessageComposers } from './chunk-HTERKONR.js';
+export { wireOverlaySheets } from './chunk-4RECPEHI.js';
+export { wireResizableRegions } from './chunk-GS2QD3N7.js';
+export { wireSearchFields } from './chunk-UMNHJSIO.js';
+export { readChoiceChips, wireChoiceChips } from './chunk-K57NINLH.js';
+export { wireComboboxes } from './chunk-MVKHSAKE.js';
+export { wireCornerStatus } from './chunk-ZKKO4MHC.js';
+export { fileMatchesAccept, wireFilePickers } from './chunk-KK3S5OTW.js';
+export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
+export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
+
+export { wireScrollDividers } from './chunk-OZ6X76G5.js';
+export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
+export { TabBarItem } from './chunk-ZCDRLN3B.js';
+export { TabBar } from './chunk-7AK5I7U7.js';
+export { TextField } from './chunk-36HVQ72F.js';
+export { Spacer } from './chunk-YMUIQRWK.js';
+export { SplitButton } from './chunk-TI2GV36S.js';
+export { StateBanner } from './chunk-2FW7D4IG.js';
+export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
+export { SunkenPanel } from './chunk-D5RGM3XA.js';
+export { createSearchFieldModel } from './chunk-CIAUILRR.js';
+export { SegmentedControl } from './chunk-LZUUUHNH.js';
+export { Select } from './chunk-ZX2QQJXD.js';
+
+export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
+export { MessageComposer } from './chunk-4OV272LF.js';
+export { RadioGroup } from './chunk-OHPYT2BH.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-VGECEXM6.js';
+export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+
+export { EmptyState } from './chunk-B53PS2LE.js';
+export { FileDropZone, FilePickerTrigger } from './chunk-KDQZ3E5C.js';
+export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
+export { Grid } from './chunk-KCS6NJ3O.js';
+
+export { ListActionRow } from './chunk-JCCN3U6X.js';
+export { ContentItem } from './chunk-WD6KABEU.js';
+export { ContentSwap } from './chunk-EIET4QLK.js';
+export { CornerStatus } from './chunk-G3J7JDP6.js';
+export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
+export { Chip } from './chunk-LMHN2TJL.js';
+export { ChoiceChips } from './chunk-ITUQC4FW.js';
+export { ColumnTrack } from './chunk-QYMJHS4K.js';
+export { Combobox } from './chunk-BKUMG2KB.js';
+export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
+export { BackdropImage } from './chunk-SOBRGH7T.js';
+export { Button } from './chunk-PS24PVR6.js';
+export { Switch } from './chunk-LTBVP6VN.js';
+export { Row } from './chunk-AMIHGFLP.js';
+export { SearchField, placeSearchFieldCaret, readSearchField } from './chunk-VEME3D7K.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
+export { ToolbarText } from './chunk-EKHDLBRP.js';
+export { ListHeader } from './chunk-NR6O74ST.js';
+export { FieldLabel, Text } from './chunk-7K6U6FCN.js';
+export { ListInsetControl } from './chunk-AN5IWMTM.js';
+export { ListInsetText } from './chunk-S4Y3YTAI.js';
+export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
+export { FloatingToolbar } from './chunk-S3ECMF23.js';
+export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-OQP3PFKQ.js';
+
+
+
+export { Skeleton } from './chunk-CVD5IZGB.js';
+export { DisclosureArrow } from './chunk-TKNVL53O.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+export { Toolbar } from './chunk-ZN7KUMPY.js';
+export { Pane } from './chunk-XRZSK2WC.js';
+
+export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+export { List } from './chunk-NB6POCFH.js';
+
+
+
+export { LoadingSpinner } from './chunk-WVS6CUCT.js';
+export { Badge } from './chunk-RMWNO6BA.js';
+export { CheckboxGroup } from './chunk-HU5IHXCI.js';
+export { Checkbox } from './chunk-C26Q6P4Q.js';
+export { LucideIcon } from './chunk-HJXVVFBT.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,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,11 @@
-export { ListActionRow } from './chunk-7JB7VPRI.js';
+export { ListActionRow } from './chunk-JCCN3U6X.js';
+
+
+
+
+
+
+
 
 
 

package/dist/list-detail-dialog.d.ts

@@ -0,0 +1,124 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+import { SplitViewListWidth } from './split-view.js';
+import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
+export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
+import './nav-stack-CrZF95VO.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
+import './resizable-region.js';
+
+/** The list column: a secondary title, its own controls, and the list. */
+interface ListDetailDialogList {
+    /**
+     * The column's title, at the default toolbar size so it reads as pane
+     * identity beside the detail's primary title. On compact devices it titles
+     * the root view.
+     */
+    title: string;
+    /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */
+    toolbar?: KerfUiContent;
+    /** The list, usually a `List` of selectable `ListItem`s. */
+    content: KerfUiContent;
+    /** Content pinned below the list, such as an add control. */
+    footer?: KerfUiContent;
+    /**
+     * The column's width on roomy devices (default 280px, at most 40% of the
+     * dialog's width).
+     */
+    width?: SplitViewListWidth;
+}
+/** The detail column: the dialog's primary title, actions, and close control. */
+interface ListDetailDialogDetail {
+    /**
+     * The dialog's primary title: an xl heading at the top of the detail
+     * column on roomy devices, and the pushed view's title on compact devices.
+     */
+    title: string;
+    /** A short supporting line under the roomy title. */
+    description?: string;
+    /**
+     * Header controls before the close control, such as a
+     * `ToolbarControlGroup`. Primary record actions usually go in `footer`.
+     */
+    actions?: KerfUiContent;
+    /** The selected item's detail. */
+    content: KerfUiContent;
+    /** Content pinned below the detail, usually its buttons. */
+    footer?: KerfUiContent;
+}
+/**
+ * Application `data-*` identity on the dialog root, such as `data-key`; the
+ * dialog's own configuration attributes stay protected.
+ */
+type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;
+interface ListDetailDialogProps {
+    /**
+     * The dialog's id, for `openDialog(document.getElementById(id))`. Also
+     * prefixes the ids of the split and the detail title.
+     */
+    id: string;
+    /** The dialog's accessible name. */
+    label: string;
+    /**
+     * Id of the element whose text is the dialog's accessible description,
+     * such as app-owned summary copy. The detail's `description` describes the
+     * selection, not the dialog, so it is not wired automatically.
+     */
+    describedBy?: string;
+    list: ListDetailDialogList;
+    detail: ListDetailDialogDetail;
+    /**
+     * One pane at a time: derive from `deviceClass().value.compact`. The dialog
+     * fills the screen and drills from the list into the detail as a
+     * `NavStack`; every view keeps the close control.
+     */
+    compact?: boolean;
+    /** On compact devices, whether the detail is pushed over the list. */
+    detailActive?: boolean;
+    /** The compact back control's accessible name (default `Back`). */
+    backLabel?: string;
+    /** The close control's accessible name (default `Close`). */
+    closeLabel?: string;
+    /** Close on a press on the backdrop; otherwise the panel pulses. */
+    lightDismiss?: boolean;
+    /** Roomy preferred width preset (default `large`). */
+    size?: DialogSurfaceSize;
+    /** Roomy preferred width; takes precedence over `size`. */
+    preferredWidth?: CssLength;
+    /** Roomy definite height (default 560px), bounded by the viewport. */
+    height?: DialogSurfaceHeight;
+    /** Roomy height cap in place of a definite height. */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /** Roomy edge clearance from the viewport. */
+    viewportGutter?: CssLength;
+    rootAttributes?: ListDetailDialogRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A list-detail dialog: a modal whose list column and detail column each run
+ * its full height. The list column carries a secondary title and its own
+ * controls; the detail column carries the dialog's primary title, its
+ * actions, and the close control, so the divider between them runs from top
+ * to bottom. On compact devices it fills the screen and becomes a `NavStack`
+ * that drills from the list into the detail. Open it with `openDialog()`;
+ * the app owns the selection and, on compact devices, `detailActive` (the
+ * stack's back control dispatches `nav-back`). Built from `DialogSurface`,
+ * `SplitView`, and `Pane`.
+ */
+declare function ListDetailDialog({ id, label, describedBy, list, detail, compact, detailActive, backLabel, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, rootAttributes, className, slot, }: ListDetailDialogProps): kerfjs.SafeHtml;
+
+export { ListDetailDialog, type ListDetailDialogDetail, type ListDetailDialogList, type ListDetailDialogProps, type ListDetailDialogRootAttributes };

package/dist/list-detail-dialog.js

@@ -0,0 +1,168 @@
+import { SplitView } from './chunk-ETFP7HAR.js';
+import { DialogSurface } from './chunk-VGECEXM6.js';
+export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+
+
+
+import { ToolbarText } from './chunk-EKHDLBRP.js';
+
+
+import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+import { Toolbar } from './chunk-ZN7KUMPY.js';
+import { Pane } from './chunk-XRZSK2WC.js';
+
+
+
+
+
+
+
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { remify } from './chunk-IQSRHXZR.js';
+
+import { X } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var DEFAULT_LIST_WIDTH = { size: 280, maxFraction: 0.4 };
+function closeGroup(closeLabel) {
+  return /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": closeLabel, "data-dialog-close": "", children: /* @__PURE__ */ jsx(LucideIcon, { icon: X, name: "x" }) }) });
+}
+function ListDetailDialog({
+  id,
+  label,
+  describedBy,
+  list,
+  detail,
+  compact = false,
+  detailActive = false,
+  backLabel = "Back",
+  closeLabel = "Close",
+  lightDismiss = false,
+  size = "large",
+  preferredWidth,
+  height,
+  maxHeight,
+  viewportGutter,
+  rootAttributes,
+  className = "",
+  slot
+}) {
+  const close = closeGroup(closeLabel);
+  const split = compact ? /* @__PURE__ */ jsx(
+    SplitView,
+    {
+      id: `${id}-split`,
+      label,
+      compact: true,
+      detailActive,
+      listTitle: list.title,
+      detailTitle: detail.title,
+      backLabel,
+      compactStack: {
+        list: {
+          toolbar: {
+            trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+              list.toolbar,
+              close
+            ] })
+          },
+          footer: list.footer
+        },
+        detail: {
+          toolbar: {
+            trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+              detail.actions,
+              close
+            ] })
+          },
+          footer: detail.footer
+        }
+      },
+      list: list.content,
+      detail: detail.content
+    }
+  ) : /* @__PURE__ */ jsx(
+    SplitView,
+    {
+      id: `${id}-split`,
+      label,
+      listTitle: list.title,
+      detailTitle: detail.title,
+      listWidth: list.width ?? DEFAULT_LIST_WIDTH,
+      list: /* @__PURE__ */ jsx(
+        Pane,
+        {
+          label: list.title,
+          header: /* @__PURE__ */ jsx(
+            Toolbar,
+            {
+              label: list.title,
+              leading: /* @__PURE__ */ jsx(ToolbarText, { text: list.title }),
+              trailing: list.toolbar
+            }
+          ),
+          footer: list.footer,
+          children: list.content
+        }
+      ),
+      detail: /* @__PURE__ */ jsx(
+        Pane,
+        {
+          label: detail.title,
+          header: /* @__PURE__ */ jsx(
+            Toolbar,
+            {
+              label: detail.title,
+              leading: /* @__PURE__ */ jsx(
+                ToolbarText,
+                {
+                  text: detail.title,
+                  description: detail.description,
+                  size: "xlarge",
+                  id: `${id}-title`,
+                  headingLevel: 2
+                }
+              ),
+              trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+                detail.actions,
+                close
+              ] })
+            }
+          ),
+          footer: detail.footer,
+          children: detail.content
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    DialogSurface,
+    {
+      id,
+      label,
+      describedBy,
+      withoutHeader: true,
+      lightDismiss,
+      closeLabel,
+      size,
+      presentation: compact ? "fullscreen" : "modal",
+      preferredWidth,
+      height: compact ? void 0 : maxHeight === void 0 ? height ?? remify(560) : height,
+      maxHeight: compact ? void 0 : maxHeight,
+      viewportGutter: compact ? void 0 : viewportGutter,
+      bodyInset: "none",
+      bodyLayout: "fill",
+      rootAttributes: {
+        ...rootAttributes,
+        "data-dialog-layout": "list-detail"
+      },
+      className,
+      slot,
+      children: split
+    }
+  );
+}
+
+export { ListDetailDialog };
+
+//# sourceMappingURL=list-detail-dialog.js.map