@kerfjs/ui 5.0.0-beta.23 → 5.0.0-beta.25

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { AppTab, AppTabProps } from './app-tab.js';
 export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
 export { EmptyState, EmptyStateProps } from './empty-state.js';
 export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';
+export { List, ListProps } from './list.js';
 export { ListActionRow, ListActionRowProps } from './list-action-row.js';
 export { ListHeader, ListHeaderProps } from './list-header.js';
 export { ListInsetControl, ListInsetControlProps } from './list-inset-control.js';
@@ -10,13 +11,13 @@ 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 { PanelHeader, PanelHeaderProps } from './panel-header.js';
-export { ResizableRegion, ResizableRegionAxis, ResizableRegionEdge, ResizableRegionProps, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
+export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
 export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';
 export { Select, SelectChoice, SelectProps } from './select.js';
 export { Skeleton, SkeletonProps } from './skeleton.js';
 export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } from './state-banner.js';
-export { SunkenPanel, SunkenPanelProps } from './sunken-panel.js';
+export { SunkenPanel, SunkenPanelProps, SunkenPanelShape } from './sunken-panel.js';
+export { DialogSurface, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceSize, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
 export { TabActivation, TabBar, TabBarProps } from './tab-bar.js';
 export { TokenSearchEditorAttributes, TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
 export { Toolbar, ToolbarProps } from './toolbar.js';
@@ -26,5 +27,6 @@ export { ValueTable, ValueTableProps, ValueTableRow, ValueTableRowProps } from '
 export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
 export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
 export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
+export { D as DividerSides } from './divider-sides-267FA7sY.js';
 import 'kerfjs';
 import 'lucide';

package/dist/index.js

@@ -1,27 +1,28 @@
-export { wireTokenSearchFields } from './chunk-GP5DP5DL.js';
-export { ValueTable, ValueTableRow } from './chunk-QQFJMRIB.js';
-export { wireResizableRegions } from './chunk-DPDBVKNA.js';
-export { reorderTabs, wireTabBars } from './chunk-AASLYRGE.js';
-export { StateBanner } from './chunk-VLYV65LK.js';
-export { SunkenPanel } from './chunk-W4CXQYSG.js';
-export { TabBar } from './chunk-M7JBER5U.js';
+export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
+export { wireTokenSearchFields } from './chunk-JFGXQBIP.js';
+export { ValueTable, ValueTableRow } from './chunk-KWWR5VMS.js';
+export { wireResizableRegions } from './chunk-YMKH5XTF.js';
+export { StateBanner } from './chunk-W5L2JSBY.js';
+export { SunkenPanel } from './chunk-TB6DY7H5.js';
+export { DialogSurface, PopupSurface } from './chunk-OBLTAKSX.js';
+export { TabBar } from './chunk-X2U3QJCJ.js';
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7KEUJIIC.js';
-export { PanelHeader } from './chunk-RYRIFZCT.js';
-export { ToolbarText } from './chunk-W7YD6E4N.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-NENBUYX5.js';
-export { SegmentedControl } from './chunk-OZWU5ZPZ.js';
-export { Select } from './chunk-K57KRAOV.js';
-export { ListActionRow } from './chunk-BBRXX6PF.js';
+export { ToolbarText } from './chunk-R7ZWUN64.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-HP2B2L26.js';
+export { SegmentedControl } from './chunk-IJBSZ4NX.js';
+export { Select } from './chunk-FRVS5RFM.js';
+export { ListActionRow } from './chunk-VCE4MPVE.js';
 export { ListInsetControl } from './chunk-QO55FN2Y.js';
 export { ListInsetText } from './chunk-FEY65TBV.js';
-export { AppTab } from './chunk-PIDTEQ3U.js';
+export { AppTab } from './chunk-OT6RPYAP.js';
+export { Toolbar } from './chunk-SYDMYBPG.js';
+export { ToolbarControlGroup } from './chunk-WNWD54GR.js';
 export { Pane } from './chunk-JRKSK2HX.js';
-export { Toolbar } from './chunk-7L6EHUMV.js';
-export { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
-export { ListHeader } from './chunk-DSNIYOZ3.js';
-export { ListItem } from './chunk-ELSJX4W7.js';
+export { ListHeader } from './chunk-GWEAPEZI.js';
+export { ListItem } from './chunk-4EF2CMYS.js';
+export { List } from './chunk-J5BFYY7Q.js';
 
-export { Skeleton } from './chunk-PZQVSDLH.js';
+export { Skeleton } from './chunk-RKVQEH4J.js';
 export { DisclosureArrow } from './chunk-Y6LYKFXY.js';
 export { LucideIcon } from './chunk-W2FK7ZNY.js';
 export { EmptyState } from './chunk-PX3YSS5C.js';

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

@@ -6,6 +6,10 @@ type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | un
     'data-item-id'?: never;
     'data-has-icon'?: never;
     'data-multiline'?: never;
+    'data-density'?: never;
+    'data-divider'?: never;
+    'data-busy'?: never;
+    'data-trailing-visibility'?: never;
     'data-state'?: never;
     'data-selected'?: never;
     'data-pressed'?: never;
@@ -22,6 +26,11 @@ type ListActionRowTrailingAttributes = Readonly<Record<`data-${string}`, string
 interface ListActionRowProps {
     /** Visible dormant content for the primary button. Must not contain interactive descendants. */
     label: string | SafeHtml;
+    description?: string | SafeHtml;
+    status?: string | SafeHtml;
+    busy?: boolean;
+    density?: 'standard' | 'compact';
+    divider?: 'none' | 'before' | 'after' | 'both';
     /** Decorative dormant content for the primary button. Must not contain interactive descendants. */
     icon?: SafeHtml;
     action: string;
@@ -42,11 +51,12 @@ interface ListActionRowProps {
     trailingActionIcon: SafeHtml;
     trailingActionDisabled?: boolean;
     trailingActionTitle?: string;
+    trailingActionVisibility?: 'always' | 'interaction';
     className?: string;
     style?: string;
     rootAttributes?: ListActionRowRootAttributes;
     trailingActionAttributes?: ListActionRowTrailingAttributes;
 }
-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;
+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, style, rootAttributes, trailingActionAttributes, }: ListActionRowProps): SafeHtml;
 
 export { ListActionRow, type ListActionRowProps };

package/dist/list-action-row.js

@@ -1,4 +1,5 @@
-export { ListActionRow } from './chunk-BBRXX6PF.js';
+export { ListActionRow } from './chunk-VCE4MPVE.js';
+
 
 
 

package/dist/list-header.d.ts

@@ -5,6 +5,9 @@ type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undef
     'data-action'?: never;
     'data-has-badge'?: never;
     'data-has-count'?: never;
+    'data-density'?: never;
+    'data-divider'?: never;
+    'data-indicator-tone'?: never;
     'data-toggle'?: never;
 }>;
 type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
@@ -16,6 +19,9 @@ type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | un
 }>;
 interface ListHeaderBaseProps {
     label: string;
+    density?: 'standard' | 'compact';
+    divider?: 'none' | 'before' | 'after' | 'both';
+    indicatorTone?: 'neutral' | 'accent' | 'danger';
     /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
     placeholder?: boolean;
     rootAttributes?: ListHeaderRootAttributes;
@@ -53,12 +59,19 @@ type ListHeaderIndicatorProps = {
     count: number;
     countLabel: string;
     badge?: never;
+    status?: never;
 } | {
     count?: never;
     countLabel?: never;
-    badge?: SafeHtml;
+    badge: SafeHtml;
+    status?: never;
+} | {
+    count?: never;
+    countLabel?: never;
+    badge?: never;
+    status?: SafeHtml;
 };
 type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
-declare function ListHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, }: ListHeaderProps): SafeHtml;
+declare function ListHeader({ label, count, countLabel, badge, status, density, divider, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, }: ListHeaderProps): SafeHtml;
 
 export { ListHeader, type ListHeaderProps };

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-DSNIYOZ3.js';
+export { ListHeader } from './chunk-GWEAPEZI.js';
 
 
 

package/dist/list-item.d.ts

@@ -6,12 +6,23 @@ type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefin
     'data-item-id'?: never;
     'data-has-icon'?: never;
     'data-multiline'?: never;
+    'data-density'?: never;
+    'data-divider'?: never;
+    'data-busy'?: never;
     'data-state'?: never;
 }>;
 interface ListItemProps {
     label: string | SafeHtml;
+    /** App-owned supporting text rendered in the component's stable label stack. */
+    description?: string | SafeHtml;
     icon?: SafeHtml;
     trailing?: SafeHtml;
+    /** Dormant status metadata rendered before trailing content. */
+    status?: string | SafeHtml;
+    /** Show a progress indicator and expose the row as busy without replacing its content. */
+    busy?: boolean;
+    density?: 'standard' | 'compact';
+    divider?: 'none' | 'before' | 'after' | 'both';
     selected?: boolean;
     action: string;
     itemId?: string;
@@ -28,6 +39,6 @@ interface ListItemProps {
     placeholder?: boolean;
     rootAttributes?: ListItemRootAttributes;
 }
-declare function ListItem({ label, icon, trailing, selected, action, itemId, className, style, 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, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes, }: ListItemProps): SafeHtml;
 
 export { ListItem, type ListItemProps };

package/dist/list-item.js

@@ -1,4 +1,5 @@
-export { ListItem } from './chunk-ELSJX4W7.js';
+export { ListItem } from './chunk-4EF2CMYS.js';
+
 
 
 

package/dist/list.d.ts

@@ -0,0 +1,19 @@
+import { SafeHtml } from 'kerfjs';
+import { D as DividerSides } from './divider-sides-267FA7sY.js';
+
+interface ListProps {
+    children?: SafeHtml | readonly SafeHtml[];
+    /** Use the standard item gap, or supply browser CSS such as `var(--kui-space-2xs)` or `0.25rem`. Defaults to no gap. */
+    gap?: boolean | string;
+    /** Allow this list to grow/shrink, or supply a CSS flex shorthand. */
+    flex?: boolean | string;
+    /** Own vertical scrolling and overscroll containment. */
+    scrollable?: boolean;
+    /** Physical divider edges in canonical top/right/bottom/left order. */
+    dividerSides?: DividerSides;
+    className?: string;
+}
+/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
+declare function List({ children, gap, flex, scrollable, dividerSides, className, }: ListProps): SafeHtml;
+
+export { DividerSides, List, type ListProps };

package/dist/list.js

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

package/dist/list.js.map

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

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-OHU6CI22.js';
+export { NavStack } from './chunk-B3A3IVO5.js';
 
 
 

package/dist/resizable-region.d.ts

@@ -2,6 +2,11 @@ import { SafeHtml } from 'kerfjs';
 
 type ResizableRegionAxis = 'horizontal' | 'vertical';
 type ResizableRegionEdge = 'start' | 'end';
+type ResizableRegionSeparator = 'auto' | 'hidden';
+type ResizableRegionCollapseMotion = 'none' | 'slide' | 'fade-slide';
+type ResizableRegionContentOverflow = 'clip' | 'auto' | 'visible';
+type ResizableRegionPresentation = 'inline' | 'overlay' | 'hidden';
+type ResizableRegionRestorePosition = 'bottom-start' | 'bottom-end';
 interface ResizableRegionProps {
     id: string;
     label: string;
@@ -12,12 +17,24 @@ interface ResizableRegionProps {
     edge?: ResizableRegionEdge;
     collapsed?: boolean;
     transitioning?: boolean;
+    /** Whether the separator line is painted. The resize hit target remains available. */
+    separator?: ResizableRegionSeparator;
+    /** Keep the track change instant while optionally sliding the fixed-size content. */
+    collapseMotion?: ResizableRegionCollapseMotion;
+    /** Overflow policy for content such as an open popup inside a bottom drawer. */
+    contentOverflow?: ResizableRegionContentOverflow;
+    /** Inline layout, an edge overlay, or a responsive replacement that removes the region. */
+    presentation?: ResizableRegionPresentation;
+    /** Always-available control rendered while collapsed, outside the clipped region. */
+    restoreControl?: SafeHtml;
+    /** Safe-area-aware viewport corner for `restoreControl`. */
+    restorePosition?: ResizableRegionRestorePosition;
     /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */
     handleIcon?: SafeHtml;
     children: SafeHtml | SafeHtml[];
 }
 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, handleIcon, children, }: ResizableRegionProps): SafeHtml;
+declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, handleIcon, children, }: ResizableRegionProps): SafeHtml;
 
-export { ResizableRegion, type ResizableRegionAxis, type ResizableRegionEdge, type ResizableRegionProps, clampRegionSize, resizeRegionFromPointer };
+export { ResizableRegion, type ResizableRegionAxis, type ResizableRegionCollapseMotion, type ResizableRegionContentOverflow, type ResizableRegionEdge, type ResizableRegionPresentation, type ResizableRegionProps, type ResizableRegionRestorePosition, type ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer };

package/dist/resizable-region.js

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

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-export { SegmentedControl } from './chunk-OZWU5ZPZ.js';
+export { SegmentedControl } from './chunk-IJBSZ4NX.js';
 
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/select.d.ts

@@ -25,13 +25,24 @@ interface SelectBaseProps<Value extends string = string> {
     className?: string;
     /** Empty-value hint text shown in the closed control (the native select placeholder). */
     placeholderText?: string;
+    /** Supporting text shown below the control and associated with its combobox. */
+    hint?: string;
     disabled?: boolean;
     fitMenu?: boolean;
     renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;
     /** Render as an unanimated loading skeleton: the label above a static, empty control box. */
     placeholder?: boolean;
+    /** Form (default), borderless toolbar, or intrinsic navigation chrome. */
+    presentation?: 'form' | 'toolbar-borderless' | 'navigation';
+    size?: 'default' | 'compact';
+    /** Show only the selected choice icon while retaining the Select's accessible name. */
+    selectedPresentation?: 'label' | 'icon-only';
+    /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */
+    focusRingOwner?: 'select' | 'group';
+    /** Maximum closed-control label width in CSS pixels before ellipsis. */
+    labelMaxWidth?: number;
 }
 type SelectProps<Value extends string = string> = SelectBaseProps<Value> & SelectAccessibleName;
-declare function Select<Value extends string>({ name, value, label, ariaLabel, choices, className, placeholderText, disabled, fitMenu, renderSelected, placeholder, }: 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, }: SelectProps<Value>): SafeHtml;
 
 export { Select, type SelectChoice, type SelectProps };

package/dist/select.js

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

package/dist/skeleton.d.ts

@@ -1,7 +1,7 @@
 import * as kerfjs from 'kerfjs';
 
 interface SkeletonProps {
-    /** Width as any CSS length (e.g. `remify(120px)`, `60%`). Defaults to filling its slot. */
+    /** Width as any browser CSS length (e.g. `7.5rem`, `60%`). Defaults to filling its slot. */
     width?: string;
     /** Height as any CSS length. Defaults to a single text line. */
     height?: string;

package/dist/skeleton.js

@@ -1,3 +1,3 @@
-export { Skeleton } from './chunk-PZQVSDLH.js';
+export { Skeleton } from './chunk-RKVQEH4J.js';
 
 //# sourceMappingURL=skeleton.js.map

package/dist/split-view.js

@@ -1,6 +1,6 @@
-import { NavStack } from './chunk-OHU6CI22.js';
+import { NavStack } from './chunk-B3A3IVO5.js';
 
-import { ResizableRegion } from './chunk-NENBUYX5.js';
+import { ResizableRegion } from './chunk-HP2B2L26.js';
 
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 

package/dist/state-banner.d.ts

@@ -5,14 +5,16 @@ type StateBannerUrgency = 'status' | 'alert';
 interface StateBannerProps {
     title: string;
     detail?: string;
+    /** Optional compact status or count shown beside the title. */
+    badge?: string;
     icon?: SafeHtml;
     action?: SafeHtml;
     tone?: StateBannerTone;
     urgency?: StateBannerUrgency;
     className?: string;
-    /** Render the title and detail as unanimated loading skeletons, keeping the icon and tone. */
+    /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. */
     placeholder?: boolean;
 }
-declare function StateBanner({ title, detail, icon, action, tone, urgency, className, placeholder, }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, className, placeholder, }: StateBannerProps): SafeHtml;
 
 export { StateBanner, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-VLYV65LK.js';
+export { StateBanner } from './chunk-W5L2JSBY.js';
 
 
 //# sourceMappingURL=state-banner.js.map

package/dist/styles/app-tab.css

@@ -26,6 +26,13 @@
   align-items: center;
   flex: none;
 }
+.kui-app-tab[data-size="compact"] {
+  height: 2rem;
+}
+.kui-app-tab[data-presentation="segmented"] {
+  border-radius: var(--kui-radius-s);
+  box-shadow: none;
+}
 .kui-app-tab:hover {
   border-color: var(--kui-color-neutral-border-normal);
   background: var(--kui-app-tab-hover-background);
@@ -92,12 +99,31 @@
   flex: none;
 }
 .kui-app-tab__name {
+  max-width: var(--kui-app-tab-label-max-width, none);
   overflow: hidden;
   font-size: var(--kui-font-xs);
   font-weight: 650;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.kui-app-tab[data-presentation="icon-only"] .kui-app-tab__select {
+  width: 100%;
+  justify-content: center;
+}
+.kui-app-tab[data-presentation="icon-only"] .kui-app-tab__name {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+.kui-app-tab[data-presentation="icon-only"] {
+  width: 2rem;
+  min-width: 2rem;
+}
 .kui-app-tab__trailing {
   display: grid;
   min-width: 1.275rem;

package/dist/styles/catalog.css

@@ -325,8 +325,8 @@
 }
 
 /* Optional devtools-style geometry overlay. `wireCatalogGeometryOverlay` draws
-   a quiet dashed outer bound for transparent specimens and orange bands for
-   non-zero margins. */
+   computed border edges, a quiet dashed bound for transparent borderless
+   specimens, and orange bands for non-zero margins. */
 .kui-catalog__geometry-overlay {
   position: absolute;
   z-index: 3;
@@ -335,6 +335,7 @@
 }
 
 .kui-catalog__geometry-bound,
+.kui-catalog__geometry-border,
 .kui-catalog__geometry-margin {
   position: absolute;
   top: 0;
@@ -346,6 +347,11 @@
   border: 1px dashed color-mix(in srgb, var(--kui-color-text) 40%, transparent);
 }
 
+.kui-catalog__geometry-border {
+  border: 0 solid
+    color-mix(in srgb, var(--kui-color-accent-text) 72%, transparent);
+}
+
 .kui-catalog__geometry-margin {
   background: color-mix(in srgb, #f6a94c 55%, transparent);
 }

package/dist/styles/collapsible-panel.css

@@ -33,6 +33,19 @@
   border: 0;
 }
 
+.kui-collapsible-panel[data-separator="hidden"] {
+  border-color: transparent;
+}
+
+.kui-collapsible-panel[data-content-overflow="auto"] {
+  overflow: auto;
+}
+
+.kui-collapsible-panel[data-content-overflow="visible"] {
+  z-index: var(--kui-collapsible-panel-popup-z, 5);
+  overflow: visible;
+}
+
 .kui-collapsible-panel--left[data-collapsed="true"],
 .kui-collapsible-panel--right[data-collapsed="true"] {
   width: 0;
@@ -59,6 +72,16 @@
   height: var(--kui-collapsible-panel-height, 13.75rem);
 }
 
+.kui-collapsible-panel[data-collapse-motion="none"]
+  .kui-collapsible-panel__content {
+  transition: none;
+}
+
+.kui-collapsible-panel[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  .kui-collapsible-panel__content {
+  opacity: 0;
+}
+
 .kui-collapsible-panel--left[data-collapsed="true"]
   .kui-collapsible-panel__content {
   transform: translateX(-100%);
@@ -77,27 +100,66 @@
 /* Compact presentation: wireSidebar marks the host so the panel floats over the
    content as an overlay with a dismissable backdrop instead of taking layout
    space. The panel is fixed to its edge and slides in from off-screen. */
-[data-collapsible-overlay="true"] .kui-collapsible-panel {
+[data-collapsible-overlay="true"] .kui-collapsible-panel,
+.kui-collapsible-panel[data-presentation="overlay"] {
   position: fixed;
   z-index: var(--kui-collapsible-panel-overlay-z, 40);
   box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
 }
 
-[data-collapsible-overlay="true"] .kui-collapsible-panel--left {
+[data-collapsible-overlay="true"] .kui-collapsible-panel--left,
+.kui-collapsible-panel--left[data-presentation="overlay"] {
   inset-block: 0;
   inset-inline-start: 0;
 }
 
-[data-collapsible-overlay="true"] .kui-collapsible-panel--right {
+[data-collapsible-overlay="true"] .kui-collapsible-panel--right,
+.kui-collapsible-panel--right[data-presentation="overlay"] {
   inset-block: 0;
   inset-inline-end: 0;
 }
 
-[data-collapsible-overlay="true"] .kui-collapsible-panel--bottom {
+[data-collapsible-overlay="true"] .kui-collapsible-panel--bottom,
+.kui-collapsible-panel--bottom[data-presentation="overlay"] {
   inset-inline: 0;
   inset-block-end: 0;
 }
 
+.kui-collapsible-panel[data-presentation="overlay"][data-collapsed="true"] {
+  pointer-events: none;
+}
+
+.kui-collapsible-panel[data-presentation="hidden"] {
+  display: none;
+}
+
+[data-collapsible-responsive="hidden"] .kui-collapsible-panel {
+  display: none;
+}
+
+.kui-collapsible-panel__restore {
+  position: fixed;
+  z-index: var(--kui-collapsible-panel-restore-z, 42);
+  inset-block-end: calc(
+    var(--kui-collapsible-panel-restore-inset, 1rem) +
+      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+}
+
+.kui-collapsible-panel__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--kui-collapsible-panel-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+}
+
+.kui-collapsible-panel__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--kui-collapsible-panel-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
 .kui-collapsible-panel__backdrop {
   position: fixed;
   inset: 0;