@kerfjs/ui 5.0.0-beta.59 → 5.0.0-beta.60

package/dist/index.js

@@ -1,41 +1,41 @@
-export { wireResizableRegions } from './chunk-XQV2B4IL.js';
+export { wireResizableRegions } from './chunk-UIDKY4UB.js';
 export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
-export { wireTokenSearchFields } from './chunk-UFYZHYWU.js';
+export { wireTokenSearchFields } from './chunk-A3CKOW2R.js';
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-RRB26JRJ.js';
 export { createTokenSearchModel } from './chunk-F7F7KRO2.js';
-export { ValueTable, ValueTableRow } from './chunk-6CINWX2E.js';
+export { ValueTable, ValueTableRow } from './chunk-P7D3EMXM.js';
 export { wireScrollDividers } from './chunk-JCV4GXWB.js';
 
 export { Spacer } from './chunk-MEY33VWB.js';
-export { StateBanner } from './chunk-EVYKTVBQ.js';
+export { StateBanner } from './chunk-GLDWRCAM.js';
 export { SunkenPanel } from './chunk-6ZXOQEAN.js';
 export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
 export { TabBar } from './chunk-N3GKMPDW.js';
 export { SegmentedControl } from './chunk-X5QSICJ3.js';
-export { Select } from './chunk-OUK6QRDR.js';
+export { Select } from './chunk-WPLIO5WJ.js';
 export { ListInsetControl } from './chunk-5I7QGQVT.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
 export { Grid } from './chunk-AGXQQFKZ.js';
 export { ListActionRow } from './chunk-F4QMLOXJ.js';
-export { AppTab } from './chunk-WOUF7YXM.js';
+export { AppTab } from './chunk-T66UNBXL.js';
 export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-UWONG4QE.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VHADGP3B.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-KLJKU6ZL.js';
 export { Row } from './chunk-VZOFZPSO.js';
 export { ListInsetText } from './chunk-DG6G5EPF.js';
-export { ListItem } from './chunk-QOWG4ZCL.js';
+export { ListItem } from './chunk-5I7OHCIP.js';
 export { List } from './chunk-NAPE7WUS.js';
 
-export { ToolbarText } from './chunk-XDKAYSVD.js';
-export { FloatingToolbar } from './chunk-M7QV3IHH.js';
+export { ToolbarText } from './chunk-3SXMEK3B.js';
+export { FloatingToolbar } from './chunk-I3Q7KKYM.js';
 
 export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
-export { ListHeader } from './chunk-UX2VVXZ3.js';
-export { Text } from './chunk-UXT7TE6B.js';
+export { ListHeader } from './chunk-5Q3N6EV7.js';
+export { Text } from './chunk-AUKT3KMG.js';
 export { DisclosureArrow } from './chunk-KROD7KZK.js';
 export { Skeleton } from './chunk-AHEG27M7.js';
 export { Badge } from './chunk-MP2GDBQZ.js';
 export { ToolbarActionLink, ToolbarControlGroup } from './chunk-7JUBXOIV.js';
-export { Toolbar } from './chunk-6YFHCLHG.js';
+export { Toolbar } from './chunk-MERWRTBG.js';
 export { Pane } from './chunk-EZVNC4J6.js';
 export { LucideIcon } from './chunk-4R777DUZ.js';
 export { ContentItem } from './chunk-MA73TA6D.js';

package/dist/list-header.js

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

package/dist/list-item.d.ts

@@ -13,6 +13,7 @@ type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefin
     'data-busy'?: never;
     'data-state'?: never;
     'data-kui-disabled'?: never;
+    'data-icon-align'?: never;
 }>;
 interface ListItemProps {
     label: string | SafeHtml;
@@ -25,7 +26,7 @@ interface ListItemProps {
     status?: string | SafeHtml;
     /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */
     busy?: boolean;
-    density?: 'standard' | 'compact';
+    density?: 'standard' | 'compact' | 'spacious';
     divider?: 'none' | 'before' | 'after' | 'both';
     selected?: boolean;
     action: string;
@@ -35,6 +36,8 @@ interface ListItemProps {
     accessibleLabel?: string;
     title?: string;
     multiline?: boolean;
+    /** Alignment of an icon beside a wrapped label. Defaults to its first line. */
+    multilineIconAlign?: 'first-line' | 'center';
     state?: string;
     disabled?: boolean;
     tabIndex?: number;
@@ -44,6 +47,6 @@ interface ListItemProps {
     /** 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, slot, }: ListItemProps): SafeHtml;
+declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, rootAttributes, slot, }: ListItemProps): SafeHtml;
 
 export { ListItem, type ListItemProps };

package/dist/list-item.js

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

package/dist/nav-stack.js

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

package/dist/resizable-region.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { CssLength } from './css-values.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type ResizableRegionAxis = 'horizontal' | 'vertical';
@@ -7,7 +8,7 @@ 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';
+type ResizableRegionRestorePosition = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 type ResizableRegionResponsiveFillAt = 'compact' | 'narrow';
 interface ResizableRegionProps {
     id: string;
@@ -26,7 +27,7 @@ interface ResizableRegionProps {
     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. */
+    /** Use `visible` while an anchored popup must escape the content box; it raises the region to the popup layer. */
     contentOverflow?: ResizableRegionContentOverflow;
     /** Inline layout, an edge overlay, or a responsive replacement that removes the region. */
     presentation?: ResizableRegionPresentation;
@@ -34,6 +35,10 @@ interface ResizableRegionProps {
     restoreControl?: SafeHtml;
     /** Safe-area-aware corner of the region's container (not the viewport) for `restoreControl`. */
     restorePosition?: ResizableRegionRestorePosition;
+    /** Position a restore control in its container corner or leave it in normal flow. */
+    restorePlacement?: 'corner' | 'inline';
+    /** Corner distance before the container's safe-area inset. */
+    restoreInset?: CssLength;
     /** 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. */
@@ -42,6 +47,6 @@ interface ResizableRegionProps {
 }
 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, responsiveFillAt, handleIcon, children, }: ResizableRegionProps): SafeHtml;
+declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, restorePlacement, restoreInset, responsiveFillAt, handleIcon, children, }: ResizableRegionProps): SafeHtml;
 
 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-VHADGP3B.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-KLJKU6ZL.js';
 
 //# sourceMappingURL=resizable-region.js.map

package/dist/select.d.ts

@@ -36,6 +36,7 @@ type SelectPresentation = 'form' | 'toolbar-borderless' | 'navigation';
 type SelectSize = 'default' | 'compact';
 type SelectSelectedPresentation = 'label' | 'icon-only';
 type SelectFocusRingOwner = 'select' | 'group';
+type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';
 interface SelectBaseProps<Value extends string = string> {
     name: string;
     choices: readonly SelectChoice<Value>[];
@@ -51,6 +52,8 @@ interface SelectBaseProps<Value extends string = string> {
     /** Form (default), borderless toolbar, or intrinsic navigation chrome. */
     presentation?: SelectPresentation;
     size?: SelectSize;
+    /** Closed trigger width; omit to keep the presentation's default. */
+    triggerWidth?: SelectTriggerWidth;
     /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */
     focusRingOwner?: SelectFocusRingOwner;
     /** Maximum closed-control label width in CSS pixels before ellipsis. */
@@ -101,4 +104,4 @@ type SelectMultipleValueProps<Value extends string = string> = SelectMultipleLab
 type SelectProps<Value extends string = string> = SelectBaseProps<Value> & SelectAccessibleName & (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);
 declare function Select<Value extends string>(props: SelectProps<Value>): SafeHtml;
 
-export { Select, type SelectChoice, type SelectFocusRingOwner, type SelectMultipleIconProps, type SelectMultipleLabelProps, type SelectMultipleValueProps, type SelectPresentation, type SelectProps, type SelectSelectedPresentation, type SelectSingleValueProps, type SelectSize };
+export { Select, type SelectChoice, type SelectFocusRingOwner, type SelectMultipleIconProps, type SelectMultipleLabelProps, type SelectMultipleValueProps, type SelectPresentation, type SelectProps, type SelectSelectedPresentation, type SelectSingleValueProps, type SelectSize, type SelectTriggerWidth };

package/dist/select.js

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

package/dist/split-view.d.ts

@@ -6,6 +6,7 @@ import './toolbar.js';
 import './pane.js';
 import './sides-BPSWde0A.js';
 import './toolbar-text.js';
+import './css-values.js';
 
 /**
  * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /

package/dist/split-view.js

@@ -1,5 +1,5 @@
-import { NavStack } from './chunk-W4XKTST6.js';
-import { ResizableRegion } from './chunk-VHADGP3B.js';
+import { NavStack } from './chunk-5PESG2VP.js';
+import { ResizableRegion } from './chunk-KLJKU6ZL.js';
 
 
 

package/dist/state-banner.d.ts

@@ -3,6 +3,8 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type StateBannerTone = 'neutral' | 'info' | 'pop' | 'success' | 'warning' | 'danger';
 type StateBannerUrgency = 'status' | 'alert';
+type StateBannerCopyLayout = 'inline' | 'stacked';
+type StateBannerActionPlacement = 'trailing' | 'below';
 interface StateBannerProps {
     title: string;
     detail?: string;
@@ -12,12 +14,16 @@ interface StateBannerProps {
     action?: KerfUiContent;
     tone?: StateBannerTone;
     urgency?: StateBannerUrgency;
+    /** Keep the detail beside the title, or give it its own line. */
+    copyLayout?: StateBannerCopyLayout;
+    /** Place the action beside the copy or on a separate trailing row. */
+    actionPlacement?: StateBannerActionPlacement;
     className?: string;
     /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */
     placeholder?: boolean;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, className, placeholder, slot, }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, copyLayout, actionPlacement, className, placeholder, slot, }: StateBannerProps): SafeHtml;
 
-export { StateBanner, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };
+export { StateBanner, type StateBannerActionPlacement, type StateBannerCopyLayout, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-EVYKTVBQ.js';
+export { StateBanner } from './chunk-GLDWRCAM.js';
 
 
 

package/dist/styles/app-tab.css

@@ -106,6 +106,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.kui-app-tab[data-attention="true"] .kui-app-tab__name {
+  color: var(--kui-app-tab-attention-color, var(--kui-color-warning-on-quiet));
+}
 .kui-app-tab[data-presentation="icon-only"] .kui-app-tab__select {
   width: 100%;
   justify-content: center;

package/dist/styles/floating-toolbar.css

@@ -6,6 +6,10 @@
     --kui-floating-toolbar-inset,
     var(--kui-space-m, 1rem)
   );
+  --_kui-floating-toolbar-safe-block-start: 0px;
+  --_kui-floating-toolbar-safe-block-end: 0px;
+  --_kui-floating-toolbar-safe-inline-start: 0px;
+  --_kui-floating-toolbar-safe-inline-end: 0px;
 
   /* Floats above the main content of its nearest positioned ancestor. z-index
      stays low so it never covers dialogs/overlays (it is not top-layer). Forced
@@ -30,6 +34,25 @@
   gap: var(--kui-space-xs, 0.5rem);
 }
 
+.kui-floating-toolbar[data-safe-area-insets="true"] {
+  --_kui-floating-toolbar-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-floating-toolbar-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-floating-toolbar-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-floating-toolbar-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
 /* In a layout's restore corner the corner already owns the inset, so the
    toolbar floats from the corner itself. Zero specificity: the toolbar's own
    `inset` (or an app rule on the toolbar) still wins, while a token inherited
@@ -44,19 +67,43 @@
 }
 
 .kui-floating-toolbar[data-position^="bottom"] {
-  inset-block-end: var(--_kui-floating-toolbar-inset);
+  inset-block-end: calc(
+    var(
+        --kui-floating-toolbar-inset-block-end,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-block-end)
+  );
 }
 
 .kui-floating-toolbar[data-position^="top"] {
-  inset-block-start: var(--_kui-floating-toolbar-inset);
+  inset-block-start: calc(
+    var(
+        --kui-floating-toolbar-inset-block-start,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-block-start)
+  );
 }
 
 .kui-floating-toolbar[data-position$="-end"] {
-  inset-inline-end: var(--_kui-floating-toolbar-inset);
+  inset-inline-end: calc(
+    var(
+        --kui-floating-toolbar-inset-inline-end,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-inline-end)
+  );
 }
 
 .kui-floating-toolbar[data-position$="-start"] {
-  inset-inline-start: var(--_kui-floating-toolbar-inset);
+  inset-inline-start: calc(
+    var(
+        --kui-floating-toolbar-inset-inline-start,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-inline-start)
+  );
 }
 
 /* The centered edges span from the middle rather than an inline edge. */
@@ -65,3 +112,8 @@
   inset-inline-start: 50%;
   transform: translateX(-50%);
 }
+
+.kui-floating-toolbar[data-placement="inline"] {
+  position: static;
+  transform: none;
+}

package/dist/styles/list-header.css

@@ -9,7 +9,7 @@
   display: flex;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
   min-width: 0;
-  min-height: 2.75rem;
+  min-height: var(--kui-list-header-min-height, 2.75rem);
   margin-inline: var(--kui-layout-inline-margin, 0.5rem);
   box-sizing: border-box;
   color: var(--kui-list-header-color);
@@ -18,13 +18,16 @@
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
 
-.kui-list-header[data-density="compact"],
-.kui-list-header[data-density="compact"] .kui-list-header__title {
-  min-height: 2.25rem;
+.kui-list-header[data-density="compact"] {
+  min-height: var(--kui-list-header-min-height, 2.25rem);
 }
 
 .kui-list-header[data-density="compact"] .kui-list-header__title {
-  padding-block: 0.25rem;
+  min-height: var(
+    --kui-list-header-title-min-height,
+    var(--kui-list-header-min-height, 2.25rem)
+  );
+  padding-block: var(--kui-list-header-title-padding-block, 0.25rem);
 }
 
 .kui-list-header[data-divider="before"],
@@ -71,7 +74,7 @@
 .kui-list-header__title,
 .kui-list-header__action {
   box-sizing: border-box;
-  border: 1px solid transparent;
+  border: var(--kui-list-header-border-width, 1px) solid transparent;
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   color: inherit;
   background: transparent;
@@ -80,7 +83,12 @@
 .kui-list-header__title {
   display: flex;
   min-width: 0;
-  min-height: 2.75rem;
+  min-height: var(
+    --kui-list-header-title-min-height,
+    var(--kui-list-header-min-height, 2.75rem)
+  );
+  padding-block: var(--kui-list-header-title-padding-block, 0px);
+  padding-inline: var(--kui-list-header-title-padding-inline, 0px);
   align-items: center;
   flex: 1 1 auto;
   gap: var(--kui-layout-item-gap, 0.5rem);

package/dist/styles/list-item.css

@@ -10,34 +10,50 @@
   --kui-list-item-selected-background: var(--kui-color-brand-fill-normal);
   display: grid;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
-  min-height: 2.75rem;
+  min-height: var(--kui-list-item-min-height, 2.75rem);
   overflow: hidden;
   margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
+  padding-block: var(
+    --kui-list-item-padding-block,
+    var(--kui-layout-item-padding, 0.5rem)
+  );
+  padding-inline: var(
+    --kui-list-item-padding-inline,
+    var(--kui-layout-item-padding, 0.5rem)
+  );
   box-sizing: border-box;
-  border: 1px solid var(--kui-list-item-border);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  border: var(--kui-list-item-border-width, 1px) solid
+    var(--kui-list-item-border);
+  border-radius: var(
+    --kui-list-item-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
   color: var(--kui-list-item-color);
   background: var(--kui-list-item-background);
   cursor: pointer;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  column-gap: var(--kui-layout-item-gap, 0.5rem);
+  grid-template-columns: var(--kui-list-item-columns, minmax(0, 1fr) auto);
+  align-items: var(--kui-list-item-align-items, center);
+  column-gap: var(--kui-list-item-gap, var(--kui-layout-item-gap, 0.5rem));
   font: inherit;
   text-align: start;
 }
 
 .kui-list-item[data-density="compact"] {
-  min-height: 2.25rem;
-  padding-block: 0.25rem;
+  min-height: var(--kui-list-item-min-height, 2.25rem);
+  padding-block: var(--kui-list-item-padding-block, 0.25rem);
+}
+
+.kui-list-item[data-density="spacious"] {
+  min-height: var(--kui-list-item-min-height, 3.25rem);
+  padding-block: var(--kui-list-item-padding-block, 0.75rem);
 }
 
 .kui-list-item[data-has-description="true"] {
-  min-height: 3.25rem;
+  min-height: var(--kui-list-item-min-height, 3.25rem);
 }
 
 .kui-list-item[data-density="compact"][data-has-description="true"] {
-  min-height: 2.75rem;
+  min-height: var(--kui-list-item-min-height, 2.75rem);
 }
 
 .kui-list-item[data-divider="before"],
@@ -55,7 +71,10 @@
 }
 
 .kui-list-item[data-has-icon="true"] {
-  grid-template-columns: 1.125rem minmax(0, 1fr) auto;
+  grid-template-columns: var(
+    --kui-list-item-columns,
+    var(--kui-list-item-icon-size, 1.125rem) minmax(0, 1fr) auto
+  );
 }
 
 .kui-list-item[data-has-icon="true"] .kui-list-item__icon {
@@ -112,22 +131,24 @@
 
 .kui-list-item__icon {
   display: grid;
-  width: 1.125rem;
-  height: 1.125rem;
-  color: currentColor;
+  width: var(--kui-list-item-icon-size, 1.125rem);
+  height: var(--kui-list-item-icon-size, 1.125rem);
+  color: var(--kui-list-item-icon-color, currentColor);
   place-items: center;
 }
 
 .kui-list-item__icon svg {
   display: block;
-  width: 1.125rem;
-  height: 1.125rem;
+  width: var(--kui-list-item-icon-size, 1.125rem);
+  height: var(--kui-list-item-icon-size, 1.125rem);
 }
 
 .kui-list-item__label {
   display: grid;
   min-width: 0;
+  max-width: var(--kui-list-item-label-max-width, none);
   overflow: hidden;
+  font-weight: var(--kui-list-item-label-weight, inherit);
   white-space: nowrap;
 }
 
@@ -175,17 +196,38 @@
 
 .kui-list-item[data-multiline="true"] .kui-list-item__icon {
   align-self: start;
-  margin-block-start: calc((1lh - 1.125rem) / 2);
+  margin-block-start: calc(
+    (1lh - var(--kui-list-item-icon-size, 1.125rem)) / 2
+  );
+}
+
+.kui-list-item[data-multiline="true"][data-icon-align="center"]
+  .kui-list-item__icon {
+  align-self: center;
+  margin-block-start: 0;
 }
 
 .kui-list-item__trailing {
   display: inline-flex;
   min-width: 0;
+  color: var(--kui-list-item-trailing-color, inherit);
   align-items: center;
   justify-content: flex-end;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
 
+.kui-list-item[data-state="drag-target"] {
+  outline: var(
+    --kui-list-item-drag-target-outline,
+    2px solid var(--kui-color-brand-border-normal)
+  );
+  outline-offset: var(--kui-list-item-drag-target-outline-offset, -2px);
+  background: var(
+    --kui-list-item-drag-target-background,
+    var(--kui-color-brand-fill-quiet)
+  );
+}
+
 .kui-list-item__status {
   color: var(--kui-color-neutral-on-quiet);
   font-size: var(--kui-font-xs);

package/dist/styles/resizable-region.css

@@ -14,6 +14,7 @@
   display: flex;
   min-width: 0;
   min-height: 0;
+  background: var(--kui-resizable-region-background, transparent);
 }
 /* As a split SplitView's list, the region's track grows by the unsafe
    inline-start inset the SplitView provides, while its committed size stays
@@ -164,7 +165,7 @@
 .kui-resizable-region[data-presentation="overlay"] {
   position: absolute;
   z-index: var(--kui-resizable-region-overlay-z, 41);
-  background: var(--kui-color-surface);
+  background: var(--kui-resizable-region-background, var(--kui-color-surface));
   box-shadow: var(--kui-shadow-l);
 }
 /* Each overlay maximum caps only the resizable axis: a side overlay spans its
@@ -353,6 +354,19 @@
       )
   );
 }
+.kui-resizable-region__restore[data-placement="inline"] {
+  position: static;
+}
+.kui-resizable-region__restore[data-position^="top"][data-placement="corner"] {
+  inset-block-end: auto;
+  inset-block-start: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-block-start,
+        var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+      )
+  );
+}
 .kui-resizable-region__restore[data-position="bottom-start"] {
   inset-inline-start: calc(
     var(--_kui-resizable-region-restore-inset) +
@@ -362,6 +376,24 @@
       )
   );
 }
+.kui-resizable-region__restore[data-position="top-start"] {
+  inset-inline-start: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-start,
+        var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="top-end"] {
+  inset-inline-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-end,
+        var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+      )
+  );
+}
 .kui-resizable-region__restore[data-position="bottom-end"] {
   inset-inline-end: calc(
     var(--_kui-resizable-region-restore-inset) +

package/dist/styles/select.css

@@ -191,6 +191,17 @@
   display: inline-flex;
   min-width: 0;
   align-items: center;
+  overflow: hidden;
+  color: var(--kui-select-selected-color, inherit);
+  font-size: var(--kui-select-selected-font-size, inherit);
+  font-weight: var(--kui-select-selected-font-weight, inherit);
+}
+.kui-select__custom-selected-content {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .kui-select--custom-selected::part(start) {
   min-width: 0;
@@ -291,3 +302,18 @@
   height: 100%;
   fill: currentColor;
 }
+
+/* Explicit width policy applies to both the live control and its loading
+   placeholder; the presentation keeps its existing width when omitted. */
+.kui-select[data-trigger-width="fill"] {
+  width: 100%;
+  max-width: var(--kui-select-trigger-max-width, 100%);
+}
+.kui-select[data-trigger-width="fit-content"] {
+  width: fit-content;
+  max-width: var(--kui-select-trigger-max-width, 100%);
+}
+.kui-select[data-trigger-width="max-content"] {
+  width: max-content;
+  max-width: var(--kui-select-trigger-max-width, 100%);
+}