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

package/dist/styles/state-banner.css

@@ -156,6 +156,43 @@
      height instead of the larger inherited strut. */
   font-size: var(--kui-font-xs);
 }
+.kui-state-banner[data-copy-layout="stacked"] > .kui-state-banner__copy {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--kui-state-banner-copy-gap, var(--kui-space-xs));
+  row-gap: var(--kui-state-banner-copy-row-gap, var(--kui-space-2xs));
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > strong {
+  margin-inline-end: 0;
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > .kui-state-banner__detail {
+  flex-basis: 100%;
+  white-space: normal;
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > .kui-state-banner__detail
+  > span {
+  overflow: visible;
+  text-overflow: clip;
+}
+.kui-state-banner[data-action-placement="below"] {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+.kui-state-banner[data-action-placement="below"]:not(
+    :has(> .kui-state-banner__icon)
+  )
+  > .kui-state-banner__copy {
+  grid-column: 1 / -1;
+}
+.kui-state-banner[data-action-placement="below"] > .kui-state-banner__action {
+  grid-column: 1 / -1;
+}
 .kui-state-banner__copy strong {
   margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   font-size: var(--kui-font-xs);

package/dist/styles/tab-bar.css

@@ -18,19 +18,31 @@
 .kui-tab-bar__tabs {
   display: flex;
   min-width: 0;
-  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
-  padding: 1px;
+  min-height: var(
+    --kui-tab-bar-strip-min-height,
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+  );
+  margin-block: var(--kui-tab-bar-strip-margin-block, 0);
+  padding: var(--kui-tab-bar-strip-padding, 1px);
   /* Scroll along the strip only: overflow-x alone computes overflow-y to auto,
      so any vertical excess would let the strip scroll vertically on touch. */
-  overflow: auto hidden;
+  overflow: auto var(--kui-tab-bar-strip-overflow-block, hidden);
   box-sizing: border-box;
-  border: 1px solid var(--kui-tab-bar-border);
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  background: var(--kui-tab-bar-background);
+  border: var(--kui-tab-bar-strip-border-width, 1px) solid
+    var(--kui-tab-bar-border);
+  border-radius: var(
+    --kui-tab-bar-strip-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  background: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-tab-bar-background)
+  );
   scrollbar-width: none;
   align-items: center;
-  flex: 1 1 auto;
-  gap: 0;
+  flex: var(--kui-tab-bar-strip-flex, 1 1 auto);
+  gap: var(--kui-tab-bar-strip-gap, 0);
+  scroll-padding-inline: var(--kui-tab-bar-strip-scroll-padding-inline, 0);
   overscroll-behavior-inline: contain;
 }
 .kui-tab-bar[data-presentation="segmented"],
@@ -54,8 +66,8 @@
   padding: 0;
 }
 .kui-tab-bar[data-presentation="inspector"] .kui-tab-bar__tabs {
-  min-height: 2.125rem;
-  border-radius: var(--kui-radius-s);
+  min-height: var(--kui-tab-bar-strip-min-height, 2.125rem);
+  border-radius: var(--kui-tab-bar-strip-radius, var(--kui-radius-s));
 }
 .kui-tab-bar[data-trailing-placement="adjacent"] .kui-tab-bar__tabs {
   flex: 0 1 auto;
@@ -73,6 +85,9 @@
   align-items: center;
   flex: none;
 }
+.kui-tab-bar__trailing {
+  flex: var(--kui-tab-bar-trailing-flex, none);
+}
 
 .kui-tab-bar__end {
   margin-inline-start: auto;

package/dist/styles/text.css

@@ -33,6 +33,15 @@
   border: 0;
 }
 
+.kui-text[data-flush="true"] {
+  padding: 0;
+  border: 0;
+}
+
+.kui-text[data-line-height="tight"] {
+  line-height: 1.2;
+}
+
 span.kui-text {
   margin: 0;
   border: 0;

package/dist/styles/token-search-field.css

@@ -48,7 +48,7 @@
 
 .kui-token-search__editor {
   grid-column: 2;
-  min-width: 5rem;
+  min-width: var(--kui-token-search-editor-min-width, 0px);
   min-height: var(--kui-token-search-line-size);
   padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
   box-sizing: border-box;

package/dist/styles/toolbar-text.css

@@ -75,6 +75,10 @@
   font-size: var(--kui-font-xs);
 }
 
+.kui-toolbar-text[data-size="xsmall"] {
+  font-size: var(--kui-font-2xs);
+}
+
 /* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
 .kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
   text-overflow: clip;

package/dist/styles/toolbar.css

@@ -92,6 +92,14 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
+.kui-toolbar[data-responsive="trailing-priority"][data-has-center="false"]:has(
+    > .kui-toolbar__trailing [data-expanded="true"]
+  ) {
+  grid-template-columns:
+    minmax(0, 1fr)
+    minmax(0, var(--kui-token-search-expanded-width, 30rem));
+}
+
 .kui-toolbar {
   --_kui-toolbar-divider-top: transparent;
   --_kui-toolbar-divider-right: transparent;
@@ -154,6 +162,8 @@
   display: flex;
   min-width: 0;
   min-height: var(--_kui-toolbar-band);
+  padding-inline: var(--kui-toolbar-zone-padding-inline, 0px);
+  box-sizing: border-box;
   align-items: flex-start;
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
@@ -165,6 +175,11 @@
    the 3- and 2-column layouts, and still stacks under the leading zone when a
    consumer collapses the toolbar to a single column. */
 .kui-toolbar__leading {
+  min-width: var(--kui-toolbar-leading-min-width, 0px);
+  padding-inline: var(
+    --kui-toolbar-leading-padding-inline,
+    var(--kui-toolbar-zone-padding-inline, 0px)
+  );
   grid-column: 1;
   overflow: hidden;
 }
@@ -175,6 +190,10 @@
      the leading identity gives way first, the way a platform toolbar truncates
      its title before it overlaps the centered controls. */
   min-width: min-content;
+  padding-inline: var(
+    --kui-toolbar-center-padding-inline,
+    var(--kui-toolbar-zone-padding-inline, 0px)
+  );
   justify-content: center;
   grid-column: 2;
 }
@@ -189,8 +208,14 @@
 }
 
 .kui-toolbar__trailing {
-  justify-content: flex-end;
+  padding-inline: var(
+    --kui-toolbar-trailing-padding-inline,
+    var(--kui-toolbar-zone-padding-inline, 0px)
+  );
+  justify-content: var(--kui-toolbar-trailing-justify, flex-end);
+  justify-self: var(--kui-toolbar-trailing-justify-self, stretch);
   grid-column: -2 / -1;
+  gap: var(--kui-toolbar-trailing-gap, var(--kui-toolbar-gap, 0.5rem));
   /* Trailing actions never clip (KF-4EYES0): the zone wraps its groups, so its
      track can shrink only to the widest single group. When one row cannot hold
      every group, the next group moves to a new trailing-aligned row instead of
@@ -198,6 +223,63 @@
   flex-wrap: wrap;
 }
 
+/* An expanded trailing search gets a complete second row while the leading
+   identity and optional center controls remain in the first. The query styles
+   descendants because a toolbar cannot query its own container width. */
+@container kui-toolbar (max-width: 52rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"][data-has-center="false"]:has(
+      > .kui-toolbar__trailing [data-expanded="true"]
+    )
+    > .kui-toolbar__leading {
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"]:has(
+      > .kui-toolbar__trailing [data-expanded="true"]
+    )
+    > .kui-toolbar__trailing {
+    width: 100%;
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: stretch;
+  }
+
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"]
+    > .kui-toolbar__trailing
+    > [data-expanded="true"] {
+    width: 100%;
+    flex: 1 1 100%;
+  }
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"][data-has-center="false"]:has(
+      > .kui-toolbar__trailing [data-expanded="true"]
+    )
+    > .kui-toolbar__leading {
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"]:has(
+      > .kui-toolbar__trailing [data-expanded="true"]
+    )
+    > .kui-toolbar__trailing {
+    width: 100%;
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: stretch;
+  }
+
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"]
+    > .kui-toolbar__trailing
+    > [data-expanded="true"] {
+    width: 100%;
+    flex: 1 1 100%;
+  }
+}
+
 /* Content-driven wrap: one row while every zone fits at its natural width;
    otherwise the trailing zone moves below the identity, still trailing-aligned,
    instead of truncating the leading title or clipping an action. For panel,

package/dist/styles/value-table.css

@@ -19,7 +19,10 @@
   position: relative;
   display: grid;
   min-height: 2.55rem;
-  padding-block: 0.5rem;
+  padding-block: var(
+    --kui-value-table-row-padding-block,
+    var(--_kui-value-table-density-padding-block, 0.5rem)
+  );
   padding-inline: var(--_kui-value-table-inline-padding);
   box-sizing: border-box;
   /* Two content-sized tracks share the free space equally, and each stops
@@ -29,9 +32,19 @@
      when both are long they split the row. A `1fr` value track would get
      nothing until the label reached its full width, starving the value to 0px
      beside a long single-word label. */
-  grid-template-columns: minmax(0, auto) minmax(0, auto);
+  grid-template-columns: var(
+    --kui-value-table-row-columns,
+    minmax(0, auto) minmax(0, auto)
+  );
   align-items: center;
-  gap: var(--kui-layout-item-gap, 0.5rem);
+  gap: var(
+    --kui-value-table-row-gap,
+    var(--_kui-value-table-density-gap, var(--kui-layout-item-gap, 0.5rem))
+  );
+}
+.kui-value-table[data-density="compact"] .kui-value-table__row {
+  --_kui-value-table-density-padding-block: 0.25rem;
+  --_kui-value-table-density-gap: 0.25rem;
 }
 .kui-value-table__row[data-has-icon="true"] {
   --_kui-value-table-separator-start: calc(

package/dist/text.d.ts

@@ -7,6 +7,7 @@ type TextTone = 'default' | 'quiet' | 'danger';
 type TextSize = 'compact' | 'default' | 'large' | 'xlarge';
 type TextFont = 'default' | 'monospace';
 type TextBorder = 'transparent' | 'none';
+type TextLineHeight = 'default' | 'tight';
 type TextContent = KerfUiContent | string | number | readonly TextContent[];
 type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */
@@ -19,6 +20,10 @@ type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     font?: TextFont;
     /** Transparent alignment border or no border when embedded in owner chrome. */
     border?: TextBorder;
+    /** Remove the block variant's item padding and border in compact content. */
+    flush?: boolean;
+    /** Use compact leading for short dialog or metadata copy. */
+    lineHeight?: TextLineHeight;
     children: TextContent;
     class?: string;
     className?: string;
@@ -28,6 +33,6 @@ type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
  * content-item padding; `span` adds no box geometry.
  * All ordinary native heading/paragraph attributes pass through to the element.
  */
-declare function Text({ variant: Variant, tone, size, font, border, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
+declare function Text({ variant: Variant, tone, size, font, border, flush, lineHeight, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
 
-export { Text, type TextBorder, type TextContent, type TextFont, type TextProps, type TextSize, type TextTone, type TextVariant };
+export { Text, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextVariant };

package/dist/text.js

@@ -1,3 +1,3 @@
-export { Text } from './chunk-UXT7TE6B.js';
+export { Text } from './chunk-AUKT3KMG.js';
 
 //# sourceMappingURL=text.js.map

package/dist/toolbar-text.d.ts

@@ -1,6 +1,6 @@
 import * as kerfjs from 'kerfjs';
 
-type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';
+type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small' | 'xsmall';
 /** ARIA heading level for a title exposed as a heading landmark. */
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 interface ToolbarTextBaseProps {

package/dist/toolbar-text.js

@@ -1,4 +1,4 @@
-export { ToolbarText } from './chunk-XDKAYSVD.js';
+export { ToolbarText } from './chunk-3SXMEK3B.js';
 
 
 

package/dist/toolbar.d.ts

@@ -31,9 +31,11 @@ interface ToolbarProps {
      * - `wrap` keeps one row while every zone fits at its natural width, and
      *   otherwise moves the trailing zone below a whole leading identity.
      * - `center-priority` gives an expanded center control the full row.
+     * - `trailing-priority` moves an expanded trailing control to a full row
+     *   below the leading identity at `responsiveAt`.
      */
-    responsive?: 'none' | 'stack' | 'wrap' | 'center-priority';
-    /** Container width at which `responsive="stack"` activates. */
+    responsive?: 'none' | 'stack' | 'wrap' | 'center-priority' | 'trailing-priority';
+    /** Container width at which `stack` or `trailing-priority` activates. */
     responsiveAt?: 'compact' | 'narrow';
     /**
      * Screen edges this toolbar claims for device safe-area compensation, for an

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-6YFHCLHG.js';
+export { Toolbar } from './chunk-MERWRTBG.js';
 
 //# sourceMappingURL=toolbar.js.map

package/dist/value-table.d.ts

@@ -16,11 +16,13 @@ declare function ValueTableRow({ label, value, icon, className, placeholder, slo
 
 interface ValueTableProps {
     label: string;
+    /** Compact row spacing for metadata-dense surfaces. */
+    density?: 'default' | 'compact';
     className?: string;
     children: KerfUiContent;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function ValueTable({ label, className, children, slot, }: ValueTableProps): kerfjs.SafeHtml;
+declare function ValueTable({ label, density, className, children, slot, }: ValueTableProps): kerfjs.SafeHtml;
 
 export { ValueTable, type ValueTableProps, ValueTableRow, type ValueTableRowProps };

package/dist/value-table.js

@@ -1,4 +1,4 @@
-export { ValueTable, ValueTableRow } from './chunk-6CINWX2E.js';
+export { ValueTable, ValueTableRow } from './chunk-P7D3EMXM.js';
 
 
 

package/dist/wire-catalog.js

@@ -1,4 +1,4 @@
-import { wireWorkbench } from './chunk-KH6VUGHU.js';
+import { wireWorkbench } from './chunk-NNMLEDMD.js';
 import { wireScrollDividers } from './chunk-JCV4GXWB.js';
 
 

package/dist/wire-resizable-regions.js

@@ -1,4 +1,4 @@
-export { wireResizableRegions } from './chunk-XQV2B4IL.js';
+export { wireResizableRegions } from './chunk-UIDKY4UB.js';
 
 
 

package/dist/wire-token-search-fields.js

@@ -1,4 +1,4 @@
-export { wireTokenSearchFields } from './chunk-UFYZHYWU.js';
+export { wireTokenSearchFields } from './chunk-A3CKOW2R.js';
 
 
 

package/dist/wire-workbench.js

@@ -1,4 +1,4 @@
-export { wireWorkbench } from './chunk-KH6VUGHU.js';
+export { wireWorkbench } from './chunk-NNMLEDMD.js';
 
 
 

package/dist/workbench.js

@@ -1,4 +1,4 @@
-export { Workbench } from './chunk-2CCMJTVY.js';
+export { Workbench } from './chunk-2OXQHM7I.js';
 
 
 

package/docs/collapsible-panel.md

@@ -76,7 +76,13 @@ and that of the components it renders (`Pane`, `Toolbar`, `ToolbarControlGroup`,
   the region itself (and `inert` on its `.kui-resizable-region__content`
   wrapper), so its label leaves the accessibility tree with its content; its
   separator is already hidden while collapsed, and the restore control stays
-  outside the region.
+  outside the region. Its `restorePosition` accepts top or bottom start/end
+  corners, with typed `restoreInset` for the corner distance. Set
+  `restorePlacement="inline"` when the container should place the control in
+  normal flow. An inline region's surface uses
+  `--kui-resizable-region-background`; set `contentOverflow="visible"` while
+  an anchored popup must escape the region's content box, then return to the
+  normal overflow policy when it closes.
   Overlay presentation also clamps fixed-size animated content to the configured
   responsive overlay maximum, so a remembered desktop size cannot escape a narrow
   viewport.

package/docs/component-selection.md

@@ -174,9 +174,69 @@ an upstream component or recipe request.
 
 ## Ambiguous choices
 
+Set `ResizableRegion`'s `--kui-resizable-region-background` for an inline
+surface. Use `contentOverflow="visible"` while an anchored popup must escape
+the region; this also raises the region on its public popup layer. A collapsed
+region can place `restoreControl` in a top or bottom corner with
+`restorePosition`, set its typed `restoreInset`, or use
+`restorePlacement="inline"` for a control in normal flow.
+
+Use `FloatingToolbar placement="inline"` when a restore owner supplies the
+position. Floating placement supports per-edge `--kui-floating-toolbar-inset-*`
+tokens; `safeAreaInsets` adds the layout-routed or device safe-area inset to
+the positioned edges.
+
+For a larger option row, use `ListItem density="spacious"`; `compact` and
+`standard` remain available. `multiline` wraps its label and aligns its icon
+to the first line; `multilineIconAlign="center"` centers the icon against the
+whole label. `divider` owns a before or after separator. Set
+`state="drag-target"` for the component's drop outline and background. Public
+`--kui-list-item-*` tokens control its row, icon, label, and trailing geometry
+and color. `ListHeader` exposes `--kui-list-header-min-height`, title padding,
+title minimum height, and border-width tokens for section density.
+
+Use `Toolbar responsive="trailing-priority"` for a collapsible search in the
+trailing zone that should take a full second row when expanded. `responsiveAt`
+chooses the compact or narrow container breakpoint. The leading identity stays
+in the first row. `--kui-toolbar-leading-min-width`,
+`--kui-toolbar-trailing-gap`, `--kui-toolbar-trailing-justify`, and the
+`--kui-toolbar-*-padding-inline` zone tokens adjust local geometry without
+selecting toolbar anatomy from application CSS.
+
+For compact dialog copy, use `Text flush lineHeight="tight"`; block Text still
+resets native margins. `ValueTable density="compact"` reduces row padding and
+gap. Its `--kui-value-table-row-columns`, `--kui-value-table-row-padding-block`,
+and `--kui-value-table-row-gap` tokens support a specific metadata layout.
+Use `ToolbarText size="xsmall"` for a dense rail heading. A
+`TokenSearchField` editor can shrink to zero minimum width inside a narrow
+group; set `--kui-token-search-editor-min-width` only when a wider editor is
+required.
+
 - `Toolbar` serves persistent app chrome and headings; the zone contents and accessible naming distinguish the purpose.
 - `TabBar` changes tabpanels and supports overflow/reorder; `SegmentedControl` chooses among a few compact views; `Select` handles a longer value list.
+
+Use `AppTab presentation="icon-only"` with its `name` kept as the accessible
+tab name, and `labelMaxWidth` for an ellipsized visible name. Set `attention`
+to color a tab's name with `--kui-app-tab-attention-color`. A `TabBar` owns its
+scrolling strip; its public `--kui-tab-bar-strip-*` tokens configure strip
+height, spacing, border, radius, background, and scroll inset without styling
+its internal classes. `--kui-tab-bar-trailing-flex` controls the trailing zone.
+
 - `StateBanner` persists beside affected work; `EmptyState` replaces absent content; `wa-callout` is contextual ecosystem content; `wa-toast` and `wa-toast-item` are transient and must not carry the only copy of important state.
+
+For a banner with multi-line supporting copy, use `copyLayout="stacked"` to put
+the detail below the title and badge. Use `actionPlacement="below"` when its
+action needs a separate trailing row. The default values keep both inline;
+`--kui-state-banner-copy-gap` and `--kui-state-banner-copy-row-gap` adjust the
+stacked copy's spacing at an instance boundary.
+
+For a compact `Select`, set `triggerWidth` to `"fit-content"`, `"max-content"`,
+or `"fill"` and cap it with `--kui-select-trigger-max-width` when needed.
+Custom `renderSelected` text inherits the control color by default; the
+`--kui-select-selected-color`, `--kui-select-selected-font-size`, and
+`--kui-select-selected-font-weight` tokens configure its typography. Plain
+selected text stays on one ellipsized line when the trigger narrows.
+
 - `ResizableRegion` is an interactive controlled pane. `Grid` is the right answer for static equal-width columns; application CSS grid remains the answer for asymmetric or intrinsic tracks.
 - A `ResizableRegion`'s content spans the whole region, like its separator. Give
   it one child — normally a `Pane` — and that child fills the region, so the
@@ -211,6 +271,7 @@ an upstream component or recipe request.
 - `TokenSearchField` is a structured editor. A native input or `wa-input` is the right answer for ordinary text.
 
 For common structured search, use `createTokenSearchModel` from `@kerfjs/ui/token-search-model`, pass the model to `TokenSearchField`, and register it under the field id in `wireTokenSearchFields(root, { models })`. Rules parse `name:value` expressions and provide suggestions; the model owns chips, selection, removal, clear, and an optional evaluation result. Omit `model` and `models` for full manual control.
+When one root contains both kinds of field, a registered model enables chip keyboard behavior only for its own field. Other fields keep native editing unless the root opts into `keyboard` with an application removal callback.
 
 ## Toolbar composition
 

package/docs/document-baseline.md

@@ -24,6 +24,9 @@ whose child is a `Workbench`, `SplitView`, `NavStack`, or another percentage-
 height shell. Ordinary document-flow pages can import the baseline without the
 class. Do not put `.kui-app-root` on several sibling containers: each requests
 the full available document height.
+The class sets `height: 100%`, not a viewport minimum; the direct child shell
+must also fill its parent (for example with its `fill` prop). If the host page
+already supplies a definite height, use that host geometry instead.
 
 `kui-app-root` is the public class of the component catalog's
 `document-baseline` entry, so `kerf-ui-doctor` and the

package/llms.txt

@@ -151,6 +151,27 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   margin. Put `.kui-app-root` on the one direct mount container only when a
   percentage-height shell needs the provided `html` → `body` → app-root height
   chain. The baseline is not part of `styles.css` or component browser imports.
+- **Use compact layout options where needed.** `Text flush lineHeight="tight"`
+  fits short dialog copy; `ValueTable density="compact"` reduces row spacing,
+  with public row column, padding, and gap tokens for specific metadata layouts.
+  `ToolbarText size="xsmall"` suits a dense rail heading. The
+  `TokenSearchField` editor shrinks in narrow groups; its minimum width can be
+  set with `--kui-token-search-editor-min-width`.
+- **Use Toolbar zone options.** `responsive="trailing-priority"` moves an
+  expanded trailing control to a full second row at `responsiveAt`; the leading
+  title remains above it. Public leading-min-width, trailing-gap/justify, and
+  per-zone inline-padding tokens cover app-specific toolbar geometry.
+- **Position region restore controls declaratively.** A ResizableRegion has a
+  background token, `contentOverflow="visible"` for an anchored popup,
+  top/bottom `restorePosition`, typed `restoreInset`, and
+  `restorePlacement="inline"` for normal flow. FloatingToolbar also has
+  `placement="inline"`, per-edge inset tokens, and `safeAreaInsets`.
+- **Configure list rows through their APIs.** `ListItem density="spacious"`
+  gives option rows more room. `multiline` wraps labels, with
+  `multilineIconAlign="center"` when the icon should center on the whole copy.
+  `divider` owns row separators and `state="drag-target"` paints the drop
+  target. Public ListItem tokens set row, icon, label, and trailing geometry;
+  ListHeader height, title padding, and border tokens tune section density.
 - **Use `Row` for horizontal and `List` for vertical layout.** Both expose
   physical `hAlign`/`vAlign` props and typed gaps. Row defaults to left/full,
   an `xs` gap, and no wrapping; List retains full/top and zero-gap defaults.
@@ -374,6 +395,17 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   optional string `badge` for a terse count or status beside the title. It
   inherits the banner tone and is announced with the banner, so keep its text
   meaningful and never rely on color alone.
+- **Configure StateBanner copy and action placement.** `copyLayout="stacked"`
+  puts detail below the title and badge; `actionPlacement="below"` gives the
+  action a separate trailing row. The inline defaults remain compact.
+- **Size a Select through its API.** `triggerWidth` chooses `fit-content`,
+  `max-content`, or `fill`; `--kui-select-trigger-max-width` caps it. For custom
+  selected text, use the public color, font-size, and font-weight tokens; the
+  closed value ellipsizes when space runs out.
+- **Configure application tabs at their owners.** AppTab's `icon-only`
+  presentation keeps `name` accessible, `labelMaxWidth` ellipsizes a long name,
+  and `attention` uses `--kui-app-tab-attention-color`. TabBar's public
+  `--kui-tab-bar-strip-*` tokens set compact strip geometry.
 - **Use `Badge` for compact non-interactive metadata.** Configure its semantic
   tone, appearance, shape, and size instead of creating badge CSS in an app or
   consuming component. Use a real button or link for interactive content.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.59",
+  "version": "5.0.0-beta.60",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",

package/dist/chunk-6CINWX2E.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;;AAgBO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAuB;AACrB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,0BACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC9C,CAAA;AAAA,wBACA,GAAA,CAAC,IAAA,EAAA,EAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM;AAAA;AAAA;AAAA,GACzD;AAEJ;AC1BO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-6CINWX2E.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ValueTableRow({\n  label,\n  value,\n  icon,\n  className = '',\n  placeholder = false,\n  slot,\n}: ValueTableRowProps) {\n  return (\n    <div\n      class={`kui-value-table__row ${className}`.trim()}\n      data-has-icon={String(Boolean(icon))}\n      data-placeholder={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      <dt>\n        {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n        <span class=\"kui-value-table__label\">{label}</span>\n      </dt>\n      <dd>{placeholder ? <Skeleton width={em(10)} /> : value}</dd>\n    </div>\n  );\n}\n","import type { KerfUiContent } from './semantic-content.js';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n  label: string;\n  className?: string;\n  children: KerfUiContent;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ValueTable({\n  label,\n  className = '',\n  children,\n  slot,\n}: ValueTableProps) {\n  return (\n    <dl\n      class={`kui-value-table ${className}`.trim()}\n      data-component=\"value-table\"\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </dl>\n  );\n}\n"]}

package/dist/chunk-6YFHCLHG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toolbar.tsx"],"names":[],"mappings":";;;AAiEA,IAAM,KAAA,GAAQ,CACZ,KAAA,EACA,IAAA,KACI,OAAO,QAAA,CAAS,IAAI,IAAI,MAAA,GAAS,MAAA;AAEhC,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,GAAe,EAAA;AAAA,EACf,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,MAAA;AAAA,EACb,YAAA,GAAe,QAAA;AAAA,EACf,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAiB;AACf,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,iBAAA,EAAiB,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,MACvC,mBAAA,EAAmB,WAAA;AAAA,MACnB,iBAAA,EAAiB,UAAA;AAAA,MACjB,oBAAA,EAAoB,YAAA;AAAA,MACpB,4BAAA,EAA4B,KAAA,CAAM,aAAA,EAAe,aAAa,CAAA;AAAA,MAC9D,0BAAA,EAA0B,KAAA,CAAM,aAAA,EAAe,WAAW,CAAA;AAAA,MAC1D,6BAAA,EAA6B,KAAA,CAAM,aAAA,EAAe,cAAc,CAAA;AAAA,MAChE,2BAAA,EAA2B,KAAA,CAAM,aAAA,EAAe,YAAY,CAAA;AAAA,MAC5D,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEJ","file":"chunk-6YFHCLHG.js","sourcesContent":["import type { PaneSeparatorSide } from './pane.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport type { Sides } from './sides.js';\n\nexport interface ToolbarProps {\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  label?: string;\n  /**\n   * Physical divider edges in canonical top/right/bottom/left order, drawn\n   * always. Defaults to none: a toolbar pinned over or under scrolling content\n   * gets its divider from the scroll state instead — a `Pane` draws the line\n   * between its chrome and content while content is scrolled away beneath it,\n   * and `wireScrollDividers` `targets` can name a toolbar as chrome, which\n   * then draws its facing side the same way.\n   */\n  dividerSides?: Sides;\n  /** Horizontal treatment of the center zone. Defaults to centered content. */\n  centerAlign?: 'center' | 'stretch';\n  /**\n   * Component-owned responsive layout; applications choose the policy rather\n   * than restyling toolbar internals. Under every policy the trailing zone\n   * wraps its groups instead of clipping an action, and the center zone keeps\n   * its whole content width: when the zones do not fit one row, the leading\n   * title truncates with an ellipsis rather than the center overlapping it.\n   * - `none` keeps one row; the leading identity truncates first.\n   * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control\n   *   groups onto further rows.\n   * - `wrap` keeps one row while every zone fits at its natural width, and\n   *   otherwise moves the trailing zone below a whole leading identity.\n   * - `center-priority` gives an expanded center control the full row.\n   */\n  responsive?: 'none' | 'stack' | 'wrap' | 'center-priority';\n  /** Container width at which `responsive=\"stack\"` activates. */\n  responsiveAt?: 'compact' | 'narrow';\n  /**\n   * Screen edges this toolbar claims for device safe-area compensation, for an\n   * app bar or bottom bar that sits directly at a screen edge rather than in a\n   * Pane header or footer. Each listed side pads by the inset its surrounding\n   * layout reports through `--kui-edge-inset-*`, or the full device inset when\n   * nothing routes that edge, while the toolbar's box and dividers paint\n   * through. Omitted, the toolbar pads only the inline edges an owner such as\n   * a Pane header hands it, and never a block edge.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar's configuration, apart from its content: the props a composite\n * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel\n * toolbar) forwards, so the app configures that toolbar instead of styling it.\n */\nexport type ToolbarConfig = Pick<\n  ToolbarProps,\n  | 'dividerSides'\n  | 'centerAlign'\n  | 'responsive'\n  | 'responsiveAt'\n  | 'safeAreaEdges'\n>;\n\nconst claim = (\n  edges: readonly PaneSeparatorSide[] | undefined,\n  side: PaneSeparatorSide,\n) => (edges?.includes(side) ? 'true' : undefined);\n\nexport function Toolbar({\n  leading,\n  center,\n  trailing,\n  label,\n  dividerSides = '',\n  centerAlign = 'center',\n  responsive = 'none',\n  responsiveAt = 'narrow',\n  safeAreaEdges,\n  className = '',\n  slot,\n}: ToolbarProps) {\n  return (\n    <header\n      class={`kui-toolbar ${className}`.trim()}\n      data-component=\"toolbar\"\n      divider-sides={dividerSides || undefined}\n      data-has-center={String(Boolean(center))}\n      data-center-align={centerAlign}\n      data-responsive={responsive}\n      data-responsive-at={responsiveAt}\n      data-safe-area-block-start={claim(safeAreaEdges, 'block-start')}\n      data-safe-area-block-end={claim(safeAreaEdges, 'block-end')}\n      data-safe-area-inline-start={claim(safeAreaEdges, 'inline-start')}\n      data-safe-area-inline-end={claim(safeAreaEdges, 'inline-end')}\n      aria-label={label}\n      slot={slot}\n    >\n      <div class=\"kui-toolbar__leading\">{leading}</div>\n      <div class=\"kui-toolbar__center\">{center}</div>\n      <div class=\"kui-toolbar__trailing\">{trailing}</div>\n    </header>\n  );\n}\n\nexport type { Sides } from './sides.js';\n"]}

package/dist/chunk-EVYKTVBQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/state-banner.tsx"],"names":[],"mappings":";;;;;AA2BO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,OAAA,GAAU,QAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,MAAA,GAAS,OAAA,GAAU,IAAA;AAC9C,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,MAC/C,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,wCAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,UAC1D,yBACC,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAU,IAAA,EAAM,SAAA,EAC5C,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAO,GAAG,IAAI,CAAA,EAAG,IAAK,KAAA,EACjD,CAAA;AAAA,UAED,0BACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,0BAAA,EACV,8BAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,QAAO,CAAA,EAC5D;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC3D;AAEJ","file":"chunk-EVYKTVBQ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport { em } from './css-values.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nexport type StateBannerTone =\n  'neutral' | 'info' | 'pop' | 'success' | 'warning' | 'danger';\nexport type StateBannerUrgency = 'status' | 'alert';\n\nexport interface StateBannerProps {\n  title: string;\n  detail?: string;\n  /** Optional compact status or count shown beside the title. */\n  badge?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  tone?: StateBannerTone;\n  urgency?: StateBannerUrgency;\n  className?: string;\n  /** 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. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function StateBanner({\n  title,\n  detail,\n  badge,\n  icon,\n  action,\n  tone = 'info',\n  urgency = 'status',\n  className = '',\n  placeholder = false,\n  slot,\n}: StateBannerProps) {\n  const badgeTone = tone === 'info' ? 'brand' : tone;\n  return (\n    <section\n      class={`kui-state-banner ${className}`.trim()}\n      data-component=\"state-banner\"\n      data-tone={tone}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role={urgency}\n      aria-live={urgency === 'alert' ? 'assertive' : 'polite'}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n      <div class=\"kui-state-banner__copy\">\n        <strong>{placeholder ? <Skeleton width={em(10)} /> : title}</strong>\n        {badge && (\n          <Badge appearance=\"solid\" size=\"compact\" tone={badgeTone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : badge}\n          </Badge>\n        )}\n        {detail && (\n          <span class=\"kui-state-banner__detail\">\n            <span>{placeholder ? <Skeleton width={em(16)} /> : detail}</span>\n          </span>\n        )}\n      </div>\n      {action && <div class=\"kui-state-banner__action\">{action}</div>}\n    </section>\n  );\n}\n"]}

package/dist/chunk-M7QV3IHH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/floating-toolbar.tsx"],"names":[],"mappings":";;;AA4CO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,YAAA;AAAA,EACX,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,kBAAA;AAAA,MACf,eAAA,EAAe,QAAA;AAAA,MACf,IAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,KAAA,EAAO,KAAA,GAAQ,CAAA,6BAAA,EAAgC,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,MACzD,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-M7QV3IHH.js","sourcesContent":["import type { CssLength } from './css-values.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/** Where a {@link FloatingToolbar} floats within its positioned container. */\nexport type FloatingToolbarPosition =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n\nexport interface FloatingToolbarProps {\n  /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */\n  children: KerfUiContent;\n  /** Accessible name for the toolbar (required — it exposes `role=\"toolbar\"`). */\n  label: string;\n  /**\n   * Corner or edge it floats to inside its nearest positioned ancestor.\n   * Default: `'bottom-end'`.\n   */\n  position?: FloatingToolbarPosition;\n  /**\n   * Distance from the container edges named by `position`. Default:\n   * `space('m')` (16px, 8px past a top toolbar's own inset). Omit it inside a\n   * `Workbench`, `CollapsiblePanel`, or `ResizableRegion` restore corner: the\n   * corner owns the inset there and sets it to zero.\n   */\n  inset?: CssLength;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar that floats above the main content of its nearest positioned\n * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer\n * restore button) that sits over the content but NOT over dialogs or overlays\n * (it is not in the top layer). It is inset from the container edges by\n * `inset` (default `--kui-space-m`, i.e. 8px more than a top toolbar's own\n * inset); pass a typed length to move it. Inside a `Workbench`, `CollapsiblePanel`, or\n * `ResizableRegion` restore corner the corner owns the inset, so the toolbar\n * floats from the corner's own position. While one of those layouts has a\n * side overlay open over the toolbar's region (a Workbench rail overlay, a\n * `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal\n * `ResizableRegion`), the toolbar is hidden — unfocusable and out of the\n * accessibility tree — until the overlay closes. The app owns the controls\n * and their behavior — wire them with `delegate()` as usual.\n */\nexport function FloatingToolbar({\n  children,\n  label,\n  position = 'bottom-end',\n  inset,\n  className = '',\n  slot,\n}: FloatingToolbarProps) {\n  return (\n    <div\n      class={`kui-floating-toolbar ${className}`.trim()}\n      data-component=\"floating-toolbar\"\n      data-position={position}\n      role=\"toolbar\"\n      aria-label={label}\n      style={inset ? `--kui-floating-toolbar-inset:${inset}` : undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}