@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.51

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { AppTab, AppTabPresentation, AppTabProps, AppTabSize } from './app-tab.js';
-export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColorName, UiSpaceName, calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
+export { Badge, BadgeAppearance, BadgeProps, BadgeShape, BadgeSize, BadgeTone } from './badge.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';
@@ -13,7 +14,7 @@ export { ListItem, ListItemProps } from './list-item.js';
 export { LoadingSpinner, LoadingSpinnerProps } from './loading-spinner.js';
 export { LucideIcon, LucideIconProps, LucideNode } from './lucide-icon.js';
 export { Pane, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
-export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.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, SelectFocusRingOwner, SelectPresentation, SelectProps, SelectSelectedPresentation, SelectSize } from './select.js';
@@ -27,7 +28,7 @@ export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProp
 export { Text, TextContent, TextFont, TextProps, TextSize, TextTone, TextVariant } from './text.js';
 export { TokenSearchEditorAttributes, TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
 export { Toolbar, ToolbarProps } from './toolbar.js';
-export { ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupProps, ToolbarControlGroupSelectedChrome, ToolbarControlGroupSelectedTone, ToolbarControlGroupShape, ToolbarControlGroupSize, ToolbarControlGroupTone } from './toolbar-control-group.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';

package/dist/index.js

@@ -1,38 +1,39 @@
-export { wireResizableRegions } from './chunk-WN52USHV.js';
+export { wireTokenSearchFields } from './chunk-CMUIXJZM.js';
+export { ValueTable, ValueTableRow } from './chunk-UPZ6EEJN.js';
+export { wireResizableRegions } from './chunk-EKYZCRCX.js';
 export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
-export { wireTokenSearchFields } from './chunk-VDUJZF5G.js';
-export { TabBar } from './chunk-ZPWZIVI6.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-TIGSG6BX.js';
-export { ValueTable, ValueTableRow } from './chunk-V6HCTCVD.js';
-export { Select } from './chunk-CK6P5AUK.js';
-export { Spacer } from './chunk-OGTJNHRG.js';
-export { StateBanner } from './chunk-UDHHKZWO.js';
-export { SunkenPanel } from './chunk-SOK5EUF7.js';
-export { DialogSurface, PopupSurface } from './chunk-WSXUPSID.js';
-export { ToolbarText } from './chunk-V6GQKOX2.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-CAB6NQ2T.js';
-export { Row } from './chunk-OGNE3OFT.js';
-export { SegmentedControl } from './chunk-E34TE2ZI.js';
-export { FloatingToolbar } from './chunk-DYBPI5O2.js';
-export { Grid } from './chunk-IU4QUY5I.js';
-export { ListActionRow } from './chunk-DAO2VFTT.js';
-export { ListInsetControl } from './chunk-2TYUFZUC.js';
-export { ListInsetText } from './chunk-EYALJQQD.js';
-export { AppTab } from './chunk-OMSRSL3B.js';
-export { ToolbarControlGroup } from './chunk-B6JYRX3P.js';
-export { Toolbar } from './chunk-VXFGMDA7.js';
-export { List } from './chunk-WVLMZ5SG.js';
-export { Pane } from './chunk-I4V3UDSA.js';
+export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
+export { TabBar } from './chunk-N3GKMPDW.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-HJKRCKDR.js';
+export { SegmentedControl } from './chunk-DVZCMMB3.js';
+export { Select } from './chunk-UBH743HV.js';
+export { Spacer } from './chunk-JMGKM7RK.js';
+export { StateBanner } from './chunk-JM53SMVF.js';
+export { SunkenPanel } from './chunk-6ZXOQEAN.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VOCPXGQN.js';
+export { Row } from './chunk-NZXWU4R5.js';
+export { EmptyState } from './chunk-E36EVCKG.js';
+export { FloatingToolbar } from './chunk-NDUGJ4TU.js';
+export { Grid } from './chunk-AEPXGCNF.js';
+export { ListActionRow } from './chunk-D547PH4L.js';
+export { ListInsetControl } from './chunk-D7GWXIAS.js';
+export { ListInsetText } from './chunk-ZK5EGVFP.js';
+export { AppTab } from './chunk-5FZZMIMD.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
+export { Toolbar } from './chunk-MTM43SJO.js';
+export { ListItem } from './chunk-NMGTHYW3.js';
+export { List } from './chunk-S4QRSBFI.js';
+export { ToolbarText } from './chunk-O3RCCSQJ.js';
+export { Pane } from './chunk-7GUQYHKA.js';
 
-export { ListHeader } from './chunk-GYGM363P.js';
-export { Text } from './chunk-XKFRMGMW.js';
-export { ListItem } from './chunk-I45QO2IZ.js';
+export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
+export { ListHeader } from './chunk-KX7DP2GO.js';
+export { Text } from './chunk-7IUSV4XG.js';
+export { Skeleton } from './chunk-ULCDZTWL.js';
 
-export { Skeleton } from './chunk-T7DOWS6T.js';
-export { calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-OL4TC3U2.js';
-export { DisclosureArrow } from './chunk-Y6LYKFXY.js';
-export { LucideIcon } from './chunk-W2FK7ZNY.js';
-export { EmptyState } from './chunk-6NDBE2OK.js';
-export { LoadingSpinner } from './chunk-6WTETUZ6.js';
+export { Badge } from './chunk-XD7DWYXG.js';
+export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-MO56ZZLG.js';
+export { DisclosureArrow } from './chunk-HMQ2ZDGG.js';
+export { LucideIcon } from './chunk-4R777DUZ.js';
 
 //# sourceMappingURL=index.js.map

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

@@ -55,7 +55,9 @@ interface ListActionRowProps {
     className?: string;
     rootAttributes?: ListActionRowRootAttributes;
     trailingActionAttributes?: ListActionRowTrailingAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function ListActionRow({ label, description, status, busy, density, divider, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, className, rootAttributes, trailingActionAttributes, }: ListActionRowProps): 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 { ListActionRow, type ListActionRowProps };

package/dist/list-action-row.js

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

package/dist/list-header.d.ts

@@ -8,6 +8,7 @@ type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undef
     'data-density'?: never;
     'data-divider'?: never;
     'data-inline'?: never;
+    'data-width'?: never;
     'data-indicator-tone'?: never;
     'data-toggle'?: never;
 }>;
@@ -24,11 +25,15 @@ interface ListHeaderBaseProps {
     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. */
@@ -75,6 +80,6 @@ type ListHeaderIndicatorProps = {
     status?: SafeHtml;
 };
 type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
-declare function ListHeader({ label, count, countLabel, badge, status, density, divider, inline, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, }: ListHeaderProps): SafeHtml;
+declare function ListHeader({ label, count, countLabel, badge, status, density, divider, inline, width, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
 
 export { ListHeader, type ListHeaderProps };

package/dist/list-header.js

@@ -1,4 +1,5 @@
-export { ListHeader } from './chunk-GYGM363P.js';
+export { ListHeader } from './chunk-KX7DP2GO.js';
+
 
 
 

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

@@ -8,6 +8,8 @@ interface ListInsetControlProps {
     /** 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
@@ -15,6 +17,6 @@ interface ListInsetControlProps {
  * Use it for controls that carry their own border and padding but no outer margin
  * — the wrapper adds only the alignment margin and layout, not a second inset.
  */
-declare function ListInsetControl({ children, sides, className, }: ListInsetControlProps): kerfjs.SafeHtml;
+declare function ListInsetControl({ children, sides, className, slot, }: ListInsetControlProps): kerfjs.SafeHtml;
 
 export { ListInsetControl, type ListInsetControlProps, Sides };

package/dist/list-inset-control.js

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

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

@@ -15,6 +15,8 @@ interface ListInsetTextProps {
      */
     horizontalOnly?: boolean;
     className?: string;
+    /** 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
@@ -24,6 +26,6 @@ interface ListInsetTextProps {
  * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box
  * space for tight text layout.
  */
-declare function ListInsetText({ children, sides, horizontalOnly, className, }: ListInsetTextProps): kerfjs.SafeHtml;
+declare function ListInsetText({ children, sides, horizontalOnly, className, slot, }: ListInsetTextProps): kerfjs.SafeHtml;
 
 export { ListInsetText, type ListInsetTextProps, Sides };

package/dist/list-inset-text.js

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

package/dist/list-item.d.ts

@@ -39,7 +39,9 @@ interface ListItemProps {
     /** Render the row as an unanimated loading skeleton, disabling its action. */
     placeholder?: boolean;
     rootAttributes?: ListItemRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes, }: ListItemProps): SafeHtml;
+declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes, slot, }: ListItemProps): SafeHtml;
 
 export { ListItem, type ListItemProps };

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem } from './chunk-I45QO2IZ.js';
+export { ListItem } from './chunk-NMGTHYW3.js';
 
 
 

package/dist/list.d.ts

@@ -5,12 +5,29 @@ import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-ali
 export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.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;
     /** 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. */
@@ -24,8 +41,12 @@ interface ListProps {
     /** 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 stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
-declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, }: ListProps): kerfjs.SafeHtml;
+/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
+declare function List({ children, gap, flex, fill, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };

package/dist/list.js

@@ -1,4 +1,5 @@
-export { List } from './chunk-WVLMZ5SG.js';
+export { List } from './chunk-S4QRSBFI.js';
+
 
 
 

package/dist/loading-spinner.d.ts

@@ -3,8 +3,10 @@ import * as kerfjs from 'kerfjs';
 interface LoadingSpinnerProps {
     className?: string;
     label?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** Stable viewBox-centered progress ring based on svg-spinners' MIT-licensed 180-ring. */
-declare function LoadingSpinner({ className, label }: LoadingSpinnerProps): kerfjs.SafeHtml;
+declare function LoadingSpinner({ className, label, slot, }: LoadingSpinnerProps): kerfjs.SafeHtml;
 
 export { LoadingSpinner, type LoadingSpinnerProps };

package/dist/loading-spinner.js

@@ -1,3 +1,3 @@
-export { LoadingSpinner } from './chunk-6WTETUZ6.js';
+export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
 
 //# sourceMappingURL=loading-spinner.js.map

package/dist/lucide-icon.d.ts

@@ -7,8 +7,10 @@ interface LucideIconProps {
     name: string;
     className?: string;
     label?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** Render a Lucide-compatible icon node without copying icon SVG strings. */
-declare function LucideIcon({ icon, name, className, label }: LucideIconProps): kerfjs.SafeHtml;
+declare function LucideIcon({ icon, name, className, label, slot, }: LucideIconProps): kerfjs.SafeHtml;
 
 export { LucideIcon, type LucideIconProps, type LucideNode };

package/dist/lucide-icon.js

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

package/dist/nav-stack.d.ts

@@ -29,6 +29,8 @@ interface NavStackProps {
     /** Optional persistent bottom toolbar used when the active view does not provide one. */
     bottomToolbar?: KerfUiContent;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last
@@ -36,6 +38,6 @@ interface NavStackProps {
  * cross-fades the chrome across a change. 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, hideToolbar, bottomToolbar, className, }: NavStackProps): kerfjs.SafeHtml;
+declare function NavStack({ id, label, views, backLabel, hideToolbar, bottomToolbar, className, slot, }: NavStackProps): kerfjs.SafeHtml;
 
 export { NavStack, type NavStackProps, type NavStackView };

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-AQFWBG23.js';
+export { NavStack } from './chunk-5PMGQDG7.js';
 
 
 

package/dist/pane.d.ts

@@ -1,7 +1,10 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-/** Logical sides that can show a {@link Pane} separator. */
+/**
+ * Logical pane sides: where a {@link Pane} can show a separator and where it can
+ * compensate for a device safe-area inset.
+ */
 type PaneSeparatorSide = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
 /** Semantic root elements supported by {@link Pane}. */
 type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';
@@ -13,6 +16,10 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-separator-block-end'?: never;
     'data-separator-inline-start'?: never;
     'data-separator-inline-end'?: never;
+    'data-safe-area-block-start'?: never;
+    'data-safe-area-block-end'?: never;
+    'data-safe-area-inline-start'?: never;
+    'data-safe-area-inline-end'?: never;
 }>;
 interface PaneProps {
     /** Optional fixed chrome above the scrolling content, arranged vertically. */
@@ -27,6 +34,14 @@ interface PaneProps {
     contentElement?: PaneContentElement;
     /** Independent logical-edge separator lines. Defaults to none. */
     separators?: readonly PaneSeparatorSide[];
+    /**
+     * Sides on which the pane may compensate for a device safe-area inset.
+     * Defaults to every side: the pane pads its slots for each side that still
+     * reaches an unsafe screen edge, as its surrounding layout reports, while its
+     * background and separators paint through. List only the sides an app-owned
+     * layout places at a screen edge, or pass `[]` to opt out.
+     */
+    safeAreaEdges?: readonly PaneSeparatorSide[];
     id?: string;
     /** Accessible name for a landmark root such as `aside` or `main`. */
     label?: string;
@@ -38,6 +53,8 @@ interface PaneProps {
     footerClassName?: string;
     /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */
     rootAttributes?: PaneRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * An unpadded application column with optional fixed header/footer slots and one
@@ -45,6 +62,6 @@ interface PaneProps {
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, element, contentElement, separators, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
 export { Pane, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -1,4 +1,4 @@
-export { Pane } from './chunk-I4V3UDSA.js';
+export { Pane } from './chunk-7GUQYHKA.js';
 
 
 //# sourceMappingURL=pane.js.map

package/dist/resizable-region.d.ts

@@ -8,6 +8,7 @@ type ResizableRegionCollapseMotion = 'none' | 'slide' | 'fade-slide';
 type ResizableRegionContentOverflow = 'clip' | 'auto' | 'visible';
 type ResizableRegionPresentation = 'inline' | 'overlay' | 'hidden';
 type ResizableRegionRestorePosition = 'bottom-start' | 'bottom-end';
+type ResizableRegionResponsiveFillAt = 'compact' | 'narrow';
 interface ResizableRegionProps {
     id: string;
     label: string;
@@ -30,12 +31,14 @@ interface ResizableRegionProps {
     restoreControl?: SafeHtml;
     /** Safe-area-aware viewport corner for `restoreControl`. */
     restorePosition?: ResizableRegionRestorePosition;
+    /** Fill the available inline track and hide the separator below a container breakpoint. */
+    responsiveFillAt?: ResizableRegionResponsiveFillAt;
     /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */
     handleIcon?: SafeHtml;
     children: KerfUiContent;
 }
 declare const clampRegionSize: (size: number, min: number, max: number) => number;
 declare const resizeRegionFromPointer: (startSize: number, delta: number, edge: ResizableRegionEdge) => number;
-declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, handleIcon, children, }: ResizableRegionProps): SafeHtml;
+declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, responsiveFillAt, handleIcon, children, }: ResizableRegionProps): SafeHtml;
 
-export { ResizableRegion, type ResizableRegionAxis, type ResizableRegionCollapseMotion, type ResizableRegionContentOverflow, type ResizableRegionEdge, type ResizableRegionPresentation, type ResizableRegionProps, type ResizableRegionRestorePosition, type ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer };
+export { ResizableRegion, type ResizableRegionAxis, type ResizableRegionCollapseMotion, type ResizableRegionContentOverflow, type ResizableRegionEdge, type ResizableRegionPresentation, type ResizableRegionProps, type ResizableRegionResponsiveFillAt, type ResizableRegionRestorePosition, type ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer };

package/dist/resizable-region.js

@@ -1,3 +1,3 @@
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-CAB6NQ2T.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VOCPXGQN.js';
 
 //# sourceMappingURL=resizable-region.js.map

package/dist/row.d.ts

@@ -4,6 +4,16 @@ import { S as Sides } from './divider-sides-BzB6rphT.js';
 import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type RowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-h-align'?: never;
+    'data-v-align'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+    'data-wrap'?: never;
+    'data-text-insets'?: never;
+    'data-control-insets'?: never;
+}>;
 interface RowProps {
     children?: KerfUiContent;
     /** Horizontal distribution. Defaults to left. */
@@ -14,6 +24,12 @@ interface RowProps {
     gap?: UiSpaceName | CssLength;
     /** Allow this row 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 row is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
     /** Allow children to wrap onto additional lines. */
     wrap?: boolean;
     /** Physical sides that receive the standard 17px text inset. */
@@ -21,8 +37,12 @@ interface RowProps {
     /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
     controlInsets?: Sides;
     className?: string;
+    /** Safe `data-*` metadata; Row-owned structural attributes remain protected. */
+    rootAttributes?: RowRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** A horizontal flex row with explicit physical-axis alignment and spacing. */
-declare function Row({ children, hAlign, vAlign, gap, flex, wrap, textInsets, controlInsets, className, }: RowProps): kerfjs.SafeHtml;
+declare function Row({ children, hAlign, vAlign, gap, flex, fill, wrap, textInsets, controlInsets, className, rootAttributes, slot, }: RowProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, Row, type RowProps, Sides, UiSpaceName, VerticalAlignment };

package/dist/row.js

@@ -1,4 +1,5 @@
-export { Row } from './chunk-OGNE3OFT.js';
+export { Row } from './chunk-NZXWU4R5.js';
+
 
 
 

package/dist/segmented-control.d.ts

@@ -25,7 +25,9 @@ interface SegmentedControlProps<Value extends string = string> {
     className?: string;
     /** Render as an unanimated loading skeleton, disabling every segment. */
     placeholder?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, }: SegmentedControlProps<Value>): kerfjs.SafeHtml;
+declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, slot, }: SegmentedControlProps<Value>): kerfjs.SafeHtml;
 
 export { SegmentedControl, type SegmentedControlAppearance, type SegmentedControlChoice, type SegmentedControlLayout, type SegmentedControlProps, type SegmentedControlShape, type SegmentedControlSize };

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-export { SegmentedControl } from './chunk-E34TE2ZI.js';
+export { SegmentedControl } from './chunk-DVZCMMB3.js';
 
 
 

package/dist/select.d.ts

@@ -1,5 +1,5 @@
 import { SafeHtml } from 'kerfjs';
-import { CssColor } from './css-values.js';
+import { CssForegroundColor } from './css-values.js';
 import { LucideNode } from './lucide-icon.js';
 import 'lucide';
 
@@ -8,9 +8,19 @@ interface SelectChoice<Value extends string = string> {
     label: string;
     icon?: LucideNode;
     iconName?: string;
-    /** Typed semantic or application-owned color for the optional icon. */
-    color?: CssColor;
+    /**
+     * Foreground color for the optional icon: a semantic foreground token such
+     * as `uiColor('success-on-quiet')`, or an application-owned
+     * `foregroundColorVar('--app-icon-color')`. Fill tokens such as
+     * `uiColor('success')` are pale background tints and do not type-check.
+     */
+    color?: CssForegroundColor;
     group?: string;
+    /**
+     * Draw a divider between this choice and the previous choice in the same
+     * list. A group boundary is already a separator, so the first choice of a
+     * group (or of the whole menu) never draws a second one.
+     */
     separatorBefore?: boolean;
 }
 type SelectAccessibleName = {
@@ -47,8 +57,10 @@ interface SelectBaseProps<Value extends string = string> {
     focusRingOwner?: SelectFocusRingOwner;
     /** Maximum closed-control label width in CSS pixels before ellipsis. */
     labelMaxWidth?: number;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 type SelectProps<Value extends string = string> = SelectBaseProps<Value> & SelectAccessibleName;
-declare function Select<Value extends string>({ name, value, label, ariaLabel, choices, className, placeholderText, hint, disabled, fitMenu, renderSelected, placeholder, presentation, size, selectedPresentation, focusRingOwner, labelMaxWidth, }: SelectProps<Value>): SafeHtml;
+declare function Select<Value extends string>({ name, value, label, ariaLabel, choices, className, placeholderText, hint, disabled, fitMenu, renderSelected, placeholder, presentation, size, selectedPresentation, focusRingOwner, labelMaxWidth, slot, }: SelectProps<Value>): SafeHtml;
 
 export { Select, type SelectChoice, type SelectFocusRingOwner, type SelectPresentation, type SelectProps, type SelectSelectedPresentation, type SelectSize };

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-CK6P5AUK.js';
+export { Select } from './chunk-UBH743HV.js';
 
 
 

package/dist/skeleton.d.ts

@@ -13,6 +13,8 @@ interface SkeletonProps {
     /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */
     label?: string;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A subtle, deliberately **unanimated** loading placeholder block. Use it for a
@@ -20,6 +22,6 @@ interface SkeletonProps {
  * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to
  * announce it. Sizes to its slot unless `width`/`height` are given.
  */
-declare function Skeleton({ width, height, radius, lines, label, className, }: SkeletonProps): kerfjs.SafeHtml;
+declare function Skeleton({ width, height, radius, lines, label, className, slot, }: SkeletonProps): kerfjs.SafeHtml;
 
 export { Skeleton, type SkeletonProps };

package/dist/skeleton.js

@@ -1,4 +1,4 @@
-export { Skeleton } from './chunk-T7DOWS6T.js';
+export { Skeleton } from './chunk-ULCDZTWL.js';
 
 
 //# sourceMappingURL=skeleton.js.map

package/dist/spacer.d.ts

@@ -9,8 +9,10 @@ interface SpacerProps {
     /** A named UI spacing token or typed physical height. */
     height?: UiSpaceName | CssLength;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** A decorative fixed-size or flexible gap for Row, List, and other flex layouts. */
-declare function Spacer({ flex, width, height, className, }: SpacerProps): kerfjs.SafeHtml;
+declare function Spacer({ flex, width, height, className, slot, }: SpacerProps): kerfjs.SafeHtml;
 
 export { CssLength, Spacer, type SpacerProps, UiSpaceName };

package/dist/spacer.js

@@ -1,4 +1,4 @@
-export { Spacer } from './chunk-OGTJNHRG.js';
+export { Spacer } from './chunk-JMGKM7RK.js';
 
 
 //# sourceMappingURL=spacer.js.map

package/dist/split-view.d.ts

@@ -30,6 +30,8 @@ interface SplitViewProps {
     /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */
     resizable?: SplitViewResizable;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A list-detail split. On roomy classes it shows both panes side
@@ -38,6 +40,6 @@ interface SplitViewProps {
  * resizable wiring with `wireResizableRegions` and the compact back with
  * `wireNavStack`.
  */
-declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, resizable, className, }: SplitViewProps): kerfjs.SafeHtml;
+declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, resizable, className, slot, }: SplitViewProps): kerfjs.SafeHtml;
 
 export { SplitView, type SplitViewProps, type SplitViewResizable };