@kerfjs/ui 5.0.0-beta.54 → 5.0.0-beta.56

package/dist/styles/tab-scaffold.css

@@ -66,18 +66,16 @@
   scroll-padding-block-start: var(--kui-edge-inset-block-start);
 }
 
-.kui-tab-scaffold__scene:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > * {
+.kui-tab-scaffold__scene
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
   --kui-edge-inset-block-start: 0px;
   --kui-edge-inset-block-end: 0px;
   --kui-edge-inset-inline-start: 0px;
@@ -98,7 +96,7 @@
   );
   padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
     var(--_kui-tab-scaffold-safe-inline-end);
-  border-block-start: 1px solid var(--kui-color-border);
+  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
   background: var(--kui-color-surface);
 }
 
@@ -120,7 +118,7 @@
 }
 
 .kui-tab-scaffold__tab[aria-selected="true"] {
-  color: var(--kui-color-accent-text);
+  color: var(--kui-color-brand-on-quiet);
 }
 
 .kui-tab-scaffold__tab:focus-visible {
@@ -129,10 +127,34 @@
 }
 
 .kui-tab-scaffold__tab-icon {
+  position: relative;
   display: grid;
   place-items: center;
 }
 
+/* The iOS tab-bar badge: over the icon's top-trailing corner, its leading
+   edge just past the icon's center line so a longer count grows outward. The
+   Badge keeps its own geometry; only this anchor is positioned. Without an
+   icon the badge stays in flow above the label. */
+.kui-tab-scaffold__tab-badge {
+  display: flex;
+  pointer-events: none;
+}
+
+.kui-tab-scaffold__tab-icon > .kui-tab-scaffold__tab-badge {
+  position: absolute;
+  inset-block-start: -0.4375rem;
+  inset-inline-start: calc(50% + 0.1875rem);
+}
+
+/* The text-free dot never grows, so it centers on the icon's top-trailing
+   corner instead: half over the glyph, half outside it. */
+.kui-tab-scaffold__tab-icon
+  > .kui-tab-scaffold__tab-badge[data-badge-kind="dot"] {
+  inset-block-start: -0.125rem;
+  inset-inline-start: calc(100% - 0.3125rem);
+}
+
 .kui-tab-scaffold__tab-icon svg {
   width: 1.375rem;
   height: 1.375rem;

package/dist/styles/text.css

@@ -10,7 +10,7 @@
 }
 
 .kui-text[data-tone="danger"] {
-  color: var(--kui-color-danger-text);
+  color: var(--kui-color-danger-on-quiet);
 }
 
 .kui-text[data-size="compact"] {

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

@@ -1,8 +1,8 @@
 .kui-token-search {
   --kui-token-search-background: var(--kui-color-surface);
-  --kui-token-search-border: var(--kui-color-border);
-  --kui-token-search-token-background: var(--kui-color-accent);
-  --kui-token-search-token-foreground: var(--kui-color-accent-text);
+  --kui-token-search-border: var(--kui-color-neutral-border-normal);
+  --kui-token-search-token-background: var(--kui-color-brand-fill-normal);
+  --kui-token-search-token-foreground: var(--kui-color-brand-on-quiet);
   --kui-token-search-line-size: 2.125rem;
 
   display: grid;
@@ -53,7 +53,7 @@
   padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
   box-sizing: border-box;
   outline: 0;
-  caret-color: var(--kui-color-accent-text);
+  caret-color: var(--kui-color-brand-on-quiet);
   font-size: var(--kui-font-s);
   line-height: 1.35;
   white-space: pre-wrap;

package/dist/styles/toolbar-control-group.css

@@ -254,6 +254,19 @@
   white-space: nowrap;
 }
 
+/* An icon tile: a non-interactive icon placed directly in a group (a panel
+   heading's identity glyph) takes the same 40px slot and 16px visual as an
+   icon button, so it centers in the group and lines up with button icons,
+   without a hover surface or a focusable control that does nothing. */
+.kui-toolbar-control-group > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  padding: 0.75rem;
+  box-sizing: content-box;
+  flex: 0 0 auto;
+}
+
 .kui-toolbar-control-group > button svg,
 .kui-toolbar-control-group wa-button > svg,
 .kui-toolbar-control-group > .kui-toolbar-action-link svg {
@@ -304,7 +317,12 @@
   padding-inline: 0;
 }
 
-.kui-toolbar-control-group[data-menu-inset="standard"] wa-dropdown::part(menu) {
+/* `standard` keeps each menu's own standard inset: a raw wa-dropdown takes the
+   8px surface inset, while a PopupMenu keeps the Select listbox inset it
+   shares (popup-menu.css). The explicit compact and list-zero choices apply to
+   every nested menu. */
+.kui-toolbar-control-group[data-menu-inset="standard"]
+  wa-dropdown:not([data-component="popup-menu"])::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
 .kui-toolbar-control-group[data-menu-inset="compact"] wa-dropdown::part(menu) {
@@ -465,35 +483,49 @@
 
 /* With per-control rings, a composed Select paints its own ring even when it
    was told the group owns it: nothing else would show focus. It matches the
-   sibling controls' ring and offset. */
+   sibling controls' ring and offset. While its listbox is open the popup shows
+   focus instead, so the trigger ring stays off, as a PopupMenu trigger's does. */
 .kui-toolbar-control-group[data-focus-ring="control"]
-  > wa-select:focus-within::part(combobox) {
+  > wa-select:not([open]):focus-within::part(combobox) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within {
+.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within:not(
+    :where(:has(wa-select[open], wa-dropdown[open]))
+  ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within {
+.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within:not(
+    :where(:has(wa-select[open], wa-dropdown[open]))
+  ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
 }
 
-/* Chromium and WebKit do not propagate :focus-within from a focused
-   light-DOM child (an open wa-select's active wa-option) through the host's
-   popup shadow tree, so the group ring vanished while its Select listbox was
-   open. A focused light-DOM descendant still owns the group ring. Kept as
-   separate rules so an engine without :has() keeps the :focus-within ring. */
-.kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus) {
+/* A group-owned ring (outline or halo) is off while a Select listbox or a
+   PopupMenu inside the group is open: the open popup shows focus, as the
+   per-control Select and PopupMenu triggers already do, and the ring returns
+   when the popup closes with focus still in the group. The exclusion sits in
+   a forgiving :where(), so an engine without :has() keeps the ring.
+
+   Chromium and WebKit do not propagate :focus-within from a focused
+   light-DOM child through a host's popup shadow tree, so a focused light-DOM
+   descendant also owns the group ring. Kept as separate rules so an engine
+   without :has() keeps the :focus-within ring. */
+.kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus):not(
+    :where(:has(wa-select[open], wa-dropdown[open]))
+  ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus) {
+.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus):not(
+    :where(:has(wa-select[open], wa-dropdown[open]))
+  ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);

package/dist/styles/toolbar.css

@@ -5,8 +5,12 @@
   box-sizing: border-box;
   color: var(--kui-color-text);
   background: transparent;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
+  /* The center track's minimum is `auto`, not 0, so it resolves to the center
+     zone's own min-width (its content width, below): when the zones do not all
+     fit, the auto leading track is what shrinks and its title truncates, and
+     the center group never overflows its track onto the leading identity. */
+  grid-template-columns: auto 1fr auto;
+  align-items: start;
   gap: var(--kui-toolbar-gap, 0.5rem);
   container: kui-toolbar / inline-size;
   font-family: var(--kui-font-sans);
@@ -103,40 +107,81 @@
 .kui-toolbar[divider-sides*="t"] {
   --_kui-toolbar-divider-top: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
 .kui-toolbar[divider-sides*="r"] {
   --_kui-toolbar-divider-right: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
 .kui-toolbar[divider-sides*="b"] {
   --_kui-toolbar-divider-bottom: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
 .kui-toolbar[divider-sides*="l"] {
   --_kui-toolbar-divider-left: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
+/* The control band. Every zone reserves one group-height row at the top of
+   the toolbar, and each item is centered in that band by its own size, not by
+   its siblings: a group or title shorter than the band takes half the
+   difference as a top margin, and anything taller (a wrapped title, a
+   multi-line search, a second trailing row) starts at the band's top and grows
+   down. A growing item therefore never moves the other items or its own top.
+   Centering the zones in the toolbar row instead dropped every control to the
+   middle of a two-line title. The band is resolved here, on the toolbar, so a
+   compact group's own smaller group size never redefines it. */
+.kui-toolbar {
+  --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+}
+
 .kui-toolbar__leading,
 .kui-toolbar__center,
 .kui-toolbar__trailing {
   display: flex;
   min-width: 0;
-  align-items: center;
+  min-height: var(--_kui-toolbar-band);
+  align-items: flex-start;
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > [data-component="toolbar-control-group"] {
+  margin-block-start: max(
+    0px,
+    calc(
+      (
+          var(--_kui-toolbar-band) -
+            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+        ) /
+        2
+    )
+  );
+}
+
+/* A title fills the band and centers its first line in it; further lines of a
+   wrapped title continue below the band. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > [data-component="toolbar-text"] {
+  height: auto;
+  min-height: var(--_kui-toolbar-band);
+}
+
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > [data-component="toolbar-text"][data-wrap="true"] {
+  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
+}
+
 /* Pin each zone to its column so a display:none (empty) leading or center zone
    doesn't let the trailing zone auto-place into the first column — which left an
    extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing
@@ -149,6 +194,11 @@
 }
 
 .kui-toolbar__center {
+  /* The center content never compresses below its own width (a group cannot
+     shrink or clip its controls). The track above takes this as its minimum, so
+     the leading identity gives way first, the way a platform toolbar truncates
+     its title before it overlaps the centered controls. */
+  min-width: min-content;
   justify-content: center;
   grid-column: 2;
 }

package/dist/styles/value-table.css

@@ -1,6 +1,6 @@
 .kui-value-table {
   --kui-value-table-background: var(--kui-color-surface-lowered);
-  --kui-value-table-border: var(--kui-color-border);
+  --kui-value-table-border: var(--kui-color-neutral-border-normal);
   --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
   display: grid;
   margin-block: 0;
@@ -22,7 +22,14 @@
   padding-block: 0.5rem;
   padding-inline: var(--_kui-value-table-inline-padding);
   box-sizing: border-box;
-  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+  /* Two content-sized tracks share the free space equally, and each stops
+     growing once its content fits. A short value keeps its whole width and a
+     long label takes the rest (ending a word that still does not fit in an
+     ellipsis); a short label keeps its width beside a long, wrapping value;
+     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);
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
@@ -42,7 +49,12 @@
 }
 .kui-value-table__row dt {
   display: flex;
+  /* The label hugs its content (up to its column) rather than stretching, so
+     its box does not change with the value's width — a placeholder row keeps
+     the live row's label geometry beside its skeleton value. */
+  max-width: 100%;
   min-width: 0;
+  justify-self: start;
   color: var(--kui-color-text-quiet);
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
@@ -60,6 +72,11 @@
 }
 .kui-value-table__label {
   min-width: 0;
+  overflow: hidden;
+  /* A multi-word label wraps at spaces; a single word wider than the label
+     column (a long component or file name) ends in an ellipsis instead of
+     running under the value. */
+  text-overflow: ellipsis;
 }
 .kui-value-table__row dd {
   display: flex;

package/dist/styles/webawesome.css

@@ -499,7 +499,9 @@
     padding-inline: var(--kui-wa-control-inset) !important;
   }
 
-  wa-dropdown-item {
+  /* A PopupMenu item owns the Select option geometry instead (popup-menu.css),
+     so a command menu and a value list draw identical rows. */
+  wa-dropdown-item:not([data-component="popup-menu"] > *) {
     padding-inline: var(--kui-wa-control-inset) !important;
   }
 

package/dist/styles/workbench.css

@@ -55,14 +55,14 @@
   --_kui-workbench-rail-safe-inset: var(--_kui-workbench-safe-inline-start);
   --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
   --kui-edge-inset-inline-end: 0px;
-  border-inline-end: 1px solid var(--kui-color-border);
+  border-inline-end: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 .kui-workbench__rail--right {
   --_kui-workbench-rail-safe-inset: var(--_kui-workbench-safe-inline-end);
   --kui-edge-inset-inline-start: 0px;
   --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
-  border-inline-start: 1px solid var(--kui-color-border);
+  border-inline-start: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 .kui-workbench__rail[data-collapsed="true"] {
@@ -157,36 +157,52 @@
     var(--kui-edge-inset-block-end);
 }
 
-.kui-workbench__main:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > *,
-.kui-workbench__panel-content:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > * {
+/* Every other child sees a cleared context. The exemption is tested on the
+   child itself, never as `region:not(:has(…)) > *`: a `:has()` before a
+   universal child makes each child of the region re-check the region's
+   `:has()` on every DOM change (~46ms per restyle for 1000 rows in Chromium).
+   SplitView, NavStack, TabScaffold, and CollapsiblePanel content use the same
+   shape. */
+.kui-workbench__main
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ),
+.kui-workbench__panel-content
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
   --kui-edge-inset-block-start: 0px;
   --kui-edge-inset-block-end: 0px;
   --kui-edge-inset-inline-start: 0px;
   --kui-edge-inset-inline-end: 0px;
 }
 
+/* A region whose only child is a Pane or layout lets it fill the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is(.kui-workbench__main, .kui-workbench__panel-content)
+  > :is(
+    [data-component="pane"],
+    [data-component="nav-stack"],
+    [data-component="split-view"],
+    [data-component="workbench"],
+    [data-component="tab-scaffold"]
+  ):only-child {
+  height: 100%;
+}
+
 /* Bottom drawer — the vertical analogue of a rail. */
 .kui-workbench__drawer {
   --kui-edge-inset-block-start: 0px;
@@ -199,7 +215,7 @@
   flex: 0 0 var(--_kui-workbench-drawer-extent);
   min-height: 0;
   overflow: hidden;
-  border-block-start: 1px solid var(--kui-color-border);
+  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
   background: var(--kui-color-surface);
 }
 
@@ -373,10 +389,64 @@
   display: none;
 }
 
-/* Where the engine can extend a clip past the panel's edge, an expanded
-   panel lets exactly the handle's outer half through, so the hit target
-   straddles the separator like a ResizableRegion handle does. Collapsing drops
-   the margin again before the content slides out. */
+/* An expanded panel lets exactly the handle's outer half through its clip, so
+   the hit target straddles the separator like a ResizableRegion handle does
+   and the grip is drawn centered on the separator line. Collapsing drops the
+   extension again before the content slides out. Engines that can extend a
+   clip past the panel's edge do it with `overflow-clip-margin`; the rest
+   (WebKit) clip with a `clip-path` that reaches past the panel's edges. That
+   also makes the panel a stacking context, so the panel stacks at the
+   handle's own level to keep the handle's outer half above the work area
+   beside it. The clip and the stacking level sit at low specificity, so a
+   responsive overlay presentation (below) replaces both. */
+@supports not (overflow-clip-margin: 10px) {
+  .kui-workbench__rail[data-resizable="true"][data-presentation="inline"]:not(
+      [data-collapsed="true"],
+      [data-content-overflow="visible"]
+    ),
+  .kui-workbench__drawer[data-resizable="true"][data-presentation="inline"]:not(
+      [data-collapsed="true"],
+      [data-content-overflow="visible"]
+    ) {
+    overflow: visible;
+  }
+
+  .kui-workbench__rail:where(
+    [data-resizable="true"][data-presentation="inline"]:not(
+        [data-collapsed="true"],
+        [data-content-overflow="visible"]
+      )
+  ) {
+    z-index: 3;
+    clip-path: inset(0 -10px);
+  }
+
+  .kui-workbench__drawer:where(
+    [data-resizable="true"][data-presentation="inline"]:not(
+        [data-collapsed="true"],
+        [data-content-overflow="visible"]
+      )
+  ) {
+    z-index: 3;
+    clip-path: inset(-10px 0 0);
+  }
+
+  .kui-workbench__rail--left[data-resizable="true"][data-presentation="inline"]
+    > .kui-workbench__handle {
+    inset-inline-end: -10px;
+  }
+
+  .kui-workbench__rail--right[data-resizable="true"][data-presentation="inline"]
+    > .kui-workbench__handle {
+    inset-inline-start: -10px;
+  }
+
+  .kui-workbench__drawer[data-resizable="true"][data-presentation="inline"]
+    > .kui-workbench__handle {
+    inset-block-start: -10px;
+  }
+}
+
 @supports (overflow-clip-margin: 10px) {
   .kui-workbench__rail[data-resizable="true"]:not(
       [data-collapsed="true"],
@@ -528,6 +598,7 @@
     max-width: var(--kui-workbench-overlay-max-width, 85vw);
     inset-block: 0;
     box-shadow: var(--kui-shadow-l);
+    clip-path: none;
   }
 
   .kui-workbench__rail--left[data-responsive-overlay-at="narrow"] {
@@ -578,6 +649,7 @@
     inset-inline: 0;
     inset-block-end: 0;
     box-shadow: var(--kui-shadow-l);
+    clip-path: none;
   }
 
   .kui-workbench__drawer[data-responsive-overlay-at="narrow"][data-collapsed="true"] {
@@ -612,6 +684,7 @@
     max-width: var(--kui-workbench-overlay-max-width, 85vw);
     inset-block: 0;
     box-shadow: var(--kui-shadow-l);
+    clip-path: none;
   }
 
   .kui-workbench__rail--left[data-responsive-overlay-at="compact"] {
@@ -662,6 +735,7 @@
     inset-inline: 0;
     inset-block-end: 0;
     box-shadow: var(--kui-shadow-l);
+    clip-path: none;
   }
 
   .kui-workbench__drawer[data-responsive-overlay-at="compact"][data-collapsed="true"] {
@@ -707,6 +781,8 @@
      from this point instead of adding its own inset on top. */
   --kui-floating-toolbar-inset: 0px;
   position: absolute;
+  /* Hidden while an open rail overlay covers the work area (see below). */
+  visibility: var(--_kui-floating-covered, inherit);
   z-index: var(
     --kui-workbench-restore-z,
     calc(var(--kui-workbench-overlay-z, 41) - 2)
@@ -774,8 +850,66 @@
   );
 }
 
+/* An open rail overlay — static or a responsive one whose breakpoint applies —
+   covers the work area, so the work area's floating controls (a
+   FloatingToolbar in main, the drawer's restore corner, the other rail's
+   restore corner) are hidden, not merely stacked beneath it: they never paint
+   over the overlay whatever stacking context an app puts them in, and hidden
+   they leave the tab order and the accessibility tree. They come back as the
+   overlay closes. The flag is set on the rail's siblings only (never on the
+   open rail), so the overlay's own floating controls stay, and it is read by
+   FloatingToolbar and the layouts' restore corners. A direct child
+   resolves the Workbench's own container query, never a nested one's. */
+.kui-workbench:has(
+    > .kui-workbench__rail[data-presentation="overlay"]:not(
+        [data-collapsed="true"]
+      )
+  )
+  > :is(.kui-workbench__center, .kui-workbench__restore) {
+  --_kui-floating-covered: hidden;
+}
+
+@container kui-workbench (max-width: 44rem) {
+  .kui-workbench:has(
+      > .kui-workbench__rail[data-responsive-overlay-at="narrow"][data-presentation="inline"]:not(
+          [data-collapsed="true"]
+        )
+    )
+    > :is(.kui-workbench__center, .kui-workbench__restore) {
+    --_kui-floating-covered: hidden;
+  }
+}
+
+@container kui-workbench (max-width: 28rem) {
+  .kui-workbench:has(
+      > .kui-workbench__rail[data-responsive-overlay-at="compact"][data-presentation="inline"]:not(
+          [data-collapsed="true"]
+        )
+    )
+    > :is(.kui-workbench__center, .kui-workbench__restore) {
+    --_kui-floating-covered: hidden;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-workbench__panel-content {
     transition: none;
   }
 }
+
+/* On a compact (phone-sized) Workbench an overlay rail fills the Workbench
+   less a dismiss margin on the side away from its edge, so a press beside it
+   closes it (the wiring's outside press); `compactOverlay: "full"` fills the
+   Workbench. The rail's resize and configured size stop applying there. */
+@container kui-workbench (max-width: 28rem) {
+  .kui-workbench__rail[data-responsive-overlay-at] {
+    width: calc(
+      100% - var(--kui-workbench-overlay-dismiss-margin, 2.75rem)
+    );
+    max-width: none;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at][data-compact-overlay="full"] {
+    width: 100%;
+  }
+}