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

package/dist/styles/collapsible-panel.css

@@ -25,6 +25,12 @@
     --kui-edge-inset-inline-end,
     var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
   );
+  /* The content keeps its fixed expanded size (collapsing slides it rather
+     than squeezing it), so a flex parent must never shrink the track below
+     that size: a shrunk track only clips the content's trailing edge (a
+     rail's row badges, a drawer's last row). The panel holds its size and
+     the sibling work area gives way. */
+  flex-shrink: 0;
   overflow: hidden;
   background: var(--kui-color-surface);
 }
@@ -232,7 +238,7 @@
 .kui-collapsible-panel[data-presentation="overlay"] {
   position: fixed;
   z-index: var(--kui-collapsible-panel-overlay-z, 40);
-  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+  box-shadow: var(--kui-shadow-l);
 }
 
 [data-collapsible-overlay="true"] .kui-collapsible-panel--left,
@@ -265,37 +271,109 @@
   display: none;
 }
 
+/* A collapsed panel's restore control floats in a corner of the panel's own
+   container, never of the viewport, so a panel embedded in a page cannot float
+   it over page content outside that container. The container becomes the
+   corner's containing block and isolates its stacking only while a restore
+   control is shown, at zero specificity so an app's own positioning of that
+   container wins. The corner is inset from the container's edges plus the
+   unsafe area of each edge it reaches. The control belongs to the layer
+   beneath open overlays, two below the overlay z-index and so below the
+   compact overlay's backdrop: an open overlay covers it as it covers the rest
+   of the page, the Workbench rule. A collapsed overlay passes pointer events
+   through, so the control is usable again as soon as the overlay closes. */
+:where(:has(> .kui-collapsible-panel__restore)) {
+  position: relative;
+  isolation: isolate;
+  anchor-scope: --kui-restore-drawer;
+}
+
+/* An expanded bottom drawer beside the collapsed panel — a direct child of
+   that container or of one of its direct children (the app's work-area
+   column) — owns the container's bottom, so the corner floats above the
+   drawer's top edge instead of over it. The drawer publishes that edge as an
+   anchor; a drawer nested deeper, inside the work area's own content, belongs
+   to another layout and is scoped out. Without anchor positioning the corner
+   keeps the container's bottom edge. */
+.kui-collapsible-panel--bottom[data-presentation="inline"]:not(
+    [data-collapsed="true"],
+    [data-collapsible-overlay="true"] *,
+    [data-collapsible-responsive="hidden"] *
+  ) {
+  anchor-name: --kui-restore-drawer;
+}
+
+:where(:has(> .kui-collapsible-panel__restore)) > * > * > * {
+  anchor-scope: --kui-restore-drawer;
+}
+
 .kui-collapsible-panel__restore {
-  position: fixed;
-  z-index: var(--kui-collapsible-panel-restore-z, 42);
+  --_kui-collapsible-panel-restore-inset: var(
+    --kui-collapsible-panel-restore-inset,
+    1rem
+  );
+  /* The corner owns the inset, so a FloatingToolbar composed here floats
+     from this point instead of adding its own inset on top. */
+  --kui-floating-toolbar-inset: 0px;
+  position: absolute;
+  z-index: var(
+    --kui-collapsible-panel-restore-z,
+    calc(var(--kui-collapsible-panel-overlay-z, 40) - 2)
+  );
+  position-visibility: always;
   inset-block-end: calc(
-    var(--kui-collapsible-panel-restore-inset, 1rem) +
-      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+    var(--_kui-collapsible-panel-restore-inset) +
+      var(
+        --kui-edge-inset-block-end,
+        var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+      )
+  );
+  /* Above an expanded drawer's top edge when one is in scope (see above). */
+  inset-block-end: calc(
+    var(--_kui-collapsible-panel-restore-inset) +
+      anchor(
+        --kui-restore-drawer top,
+        var(
+          --kui-edge-inset-block-end,
+          var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+        )
+      )
   );
 }
 
 .kui-collapsible-panel__restore[data-position="bottom-start"] {
   inset-inline-start: calc(
-    var(--kui-collapsible-panel-restore-inset, 1rem) +
-      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+    var(--_kui-collapsible-panel-restore-inset) +
+      var(
+        --kui-edge-inset-inline-start,
+        var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+      )
   );
 }
 
 .kui-collapsible-panel__restore[data-position="bottom-end"] {
   inset-inline-end: calc(
-    var(--kui-collapsible-panel-restore-inset, 1rem) +
-      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+    var(--_kui-collapsible-panel-restore-inset) +
+      var(
+        --kui-edge-inset-inline-end,
+        var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+      )
   );
 }
 
 /* A button does not stretch between its insets the way a div does, so the
-   backdrop sizes itself to its containing block explicitly. */
+   backdrop sizes itself to its containing block explicitly. It sits one below
+   the overlay z-index, so an app that moves the overlay moves the backdrop
+   with it, and the restore controls stay beneath both. */
 .kui-collapsible-panel__backdrop {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
-  z-index: var(--kui-collapsible-panel-backdrop-z, 39);
+  z-index: var(
+    --kui-collapsible-panel-backdrop-z,
+    calc(var(--kui-collapsible-panel-overlay-z, 40) - 1)
+  );
   border: 0;
   padding: 0;
   background: var(--kui-color-scrim, rgb(0 0 0 / 32%));

package/dist/styles/floating-toolbar.css

@@ -1,7 +1,12 @@
 .kui-floating-toolbar {
   /* Inset from the container edges: a top toolbar sits 8px in, so this floats an
-     extra 8px past that (--kui-space-m = 16px). Override the token to reposition. */
-  --kui-floating-toolbar-inset: var(--kui-space-m, 1rem);
+     extra 8px past that (--kui-space-m = 16px). Override the token to reposition,
+     on the toolbar or on an ancestor composition boundary: a Workbench restore
+     corner sets it to 0 because the corner already owns the inset. */
+  --_kui-floating-toolbar-inset: var(
+    --kui-floating-toolbar-inset,
+    var(--kui-space-m, 1rem)
+  );
 
   /* 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
@@ -15,19 +20,19 @@
 }
 
 .kui-floating-toolbar[data-position^="bottom"] {
-  inset-block-end: var(--kui-floating-toolbar-inset);
+  inset-block-end: var(--_kui-floating-toolbar-inset);
 }
 
 .kui-floating-toolbar[data-position^="top"] {
-  inset-block-start: var(--kui-floating-toolbar-inset);
+  inset-block-start: var(--_kui-floating-toolbar-inset);
 }
 
 .kui-floating-toolbar[data-position$="-end"] {
-  inset-inline-end: var(--kui-floating-toolbar-inset);
+  inset-inline-end: var(--_kui-floating-toolbar-inset);
 }
 
 .kui-floating-toolbar[data-position$="-start"] {
-  inset-inline-start: var(--kui-floating-toolbar-inset);
+  inset-inline-start: var(--_kui-floating-toolbar-inset);
 }
 
 /* The centered edges span from the middle rather than an inline edge. */

package/dist/styles/foundation.css

@@ -80,13 +80,21 @@
   --kui-radius-pill: var(--wa-border-radius-pill, 999px);
   --kui-disclosure-icon-scale: 0.5;
   /* macOS Tahoe light semantics used by Hot Sheet 2, with a compatible dark extension. */
+  /* Every --kui-color-* token (and the focus-ring color) that reads a --wa-*
+     token falls back to the value src/webawesome.css assigns to that token,
+     including its light-dark() pair, so a page without the Web Awesome theme
+     resolves the same palette in both color schemes. A single light color
+     here would render, e.g., dark red danger text on a dark surface, and a
+     fallback that points at a different token (surface-raised at the surface,
+     text-link at the brand fill) silently diverges from the theme.
+     tests/browser/tone-contrast.spec.ts pins the parity for every token. */
   --kui-color-surface: var(
     --wa-color-surface-default,
     light-dark(#fff, #1c1c1e)
   );
   --kui-color-surface-raised: var(
     --wa-color-surface-raised,
-    var(--kui-color-surface)
+    light-dark(#fff, #2c2c2e)
   );
   --kui-color-surface-lowered: var(
     --wa-color-surface-lowered,
@@ -99,7 +107,7 @@
   );
   --kui-color-text-link: var(
     --wa-color-text-link,
-    var(--kui-color-brand-fill-loud)
+    var(--kui-color-brand-on-quiet)
   );
 
   --kui-color-neutral-fill-quiet: var(
@@ -116,7 +124,7 @@
   );
   --kui-color-neutral-border-quiet: var(
     --wa-color-neutral-border-quiet,
-    var(--kui-color-neutral-fill-normal)
+    light-dark(#e5e5ea, #38383a)
   );
   --kui-color-neutral-border-normal: var(
     --wa-color-neutral-border-normal,
@@ -141,7 +149,7 @@
 
   --kui-color-brand-fill-loud: var(
     --wa-color-brand-fill-loud,
-    light-dark(#0088ff, #64d2ff)
+    light-dark(#0075db, #64d2ff)
   );
   --kui-color-brand-fill-quiet: var(
     --wa-color-brand-fill-quiet,
@@ -179,21 +187,30 @@
     --wa-color-brand-border-loud,
     var(--kui-color-brand-fill-loud)
   );
+  /* The light brand/success/warning on-quiet values are Kerf-owned (mirrored
+     in src/webawesome.css): each is the Hot Sheet 2 hue darkened just enough to
+     clear WCAG AA (>=4.5:1) on the lowered page background (#f2f2f7), not only
+     on the white surface. The prior #1e6ef4 / #008932 / #a16a00 reached ~4.1:1
+     there. Brand #0c62f3 is 4.64:1, success #007f2e 4.62:1, warning #966200
+     4.65:1 on the page (5.2:1 on white). */
   --kui-color-brand-on-quiet: var(
     --wa-color-brand-on-quiet,
-    light-dark(#1e6ef4, #8acbff)
+    light-dark(#0c62f3, #8acbff)
   );
   --kui-color-brand-on-normal: var(
     --wa-color-brand-on-normal,
     var(--kui-color-brand-on-quiet)
   );
-  --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
+  --kui-color-brand-on-loud: var(
+    --wa-color-brand-on-loud,
+    light-dark(#fff, #111113)
+  );
   /* Brand accent text placed directly ON a brand fill (quiet or normal), such as
      the info StateBanner and Select's current option. Darker than brand-on-quiet
-     so it clears WCAG AA (>=4.5:1): brand-on-quiet (#1e6ef4) resolves to only
-     3.77:1 over brand-fill-normal (#d6ecff) and 4.15:1 over brand-fill-quiet
-     (#ebf6ff), while #1a5dcf (same hue) clears ~4.9:1 and ~5.2:1 there. The dark
-     value matches brand-on-quiet, which already passes over the dark fills. */
+     so it clears WCAG AA (>=4.5:1): brand-on-quiet (#0c62f3) resolves to only
+     4.26:1 over brand-fill-normal (#d6ecff), while #1a5dcf (same hue) clears
+     ~4.9:1 there and ~5.5:1 over brand-fill-quiet (#ebf6ff). The dark value
+     matches brand-on-quiet, which already passes over the dark fills. */
   --kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
 
   /* Pop is attractive emphasis without status meaning: use it for featured,
@@ -266,12 +283,19 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-success-on-quiet: var(--wa-color-success-on-quiet, #008932);
-  --kui-color-success-on-normal: var(--wa-color-success-on-normal, #006d28);
-  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #fff);
+  --kui-color-success-on-quiet: var(
+    --wa-color-success-on-quiet,
+    light-dark(#007f2e, #63e685)
+  );
+  --kui-color-success-on-normal: var(
+    --wa-color-success-on-normal,
+    light-dark(#006d28, #8cea9f)
+  );
+  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #1d1d1f);
   /* Success text placed ON a success fill (e.g. the success StateBanner). Darker
-     than success-on-quiet so it clears WCAG AA (>=4.5:1) over success-fill-quiet
-     (#e3f7e8), where #008932 reached only 4.05:1. Dark matches success-on-quiet. */
+     than success-on-quiet for margin over success-fill-quiet (#e3f7e8): the
+     original on-quiet #008932 reached only 4.05:1 there and today's #007f2e sits
+     at 4.60:1, while #00792c clears ~5:1. Dark matches success-on-quiet. */
   --kui-color-success-on-fill: light-dark(#00792c, #63e685);
 
   --kui-color-warning-fill-loud: var(--wa-color-warning-fill-loud, #ffcc00);
@@ -315,15 +339,25 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-warning-on-quiet: var(--wa-color-warning-on-quiet, #a16a00);
-  --kui-color-warning-on-normal: var(--wa-color-warning-on-normal, #5f3f00);
+  --kui-color-warning-on-quiet: var(
+    --wa-color-warning-on-quiet,
+    light-dark(#966200, #ffd84a)
+  );
+  --kui-color-warning-on-normal: var(
+    --wa-color-warning-on-normal,
+    light-dark(#5f3f00, #ffe27a)
+  );
   --kui-color-warning-on-loud: var(--wa-color-warning-on-loud, #1d1d1f);
   /* Warning text placed ON a warning fill (e.g. the warning StateBanner). Darker
-     than warning-on-quiet so it clears WCAG AA (>=4.5:1) over warning-fill-quiet
-     (#fffae8), where #a16a00 reached only 4.39:1. Dark matches warning-on-quiet. */
+     than warning-on-quiet for margin over warning-fill-quiet (#fffae8): the
+     original on-quiet #a16a00 reached only 4.39:1 there (today's #966200 is
+     4.97:1), while #8f5e00 clears ~5.3:1. Dark matches warning-on-quiet. */
   --kui-color-warning-on-fill: light-dark(#8f5e00, #ffd84a);
 
-  --kui-color-danger-fill-loud: var(--wa-color-danger-fill-loud, #ff383c);
+  --kui-color-danger-fill-loud: var(
+    --wa-color-danger-fill-loud,
+    light-dark(#eb0005, #ff383c)
+  );
   --kui-color-danger-fill-quiet: var(
     --wa-color-danger-fill-quiet,
     color-mix(
@@ -364,9 +398,26 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-danger-on-quiet: var(--wa-color-danger-on-quiet, #c20b20);
-  --kui-color-danger-on-normal: var(--wa-color-danger-on-normal, #8e0717);
-  --kui-color-danger-on-loud: var(--wa-color-danger-on-loud, #fff);
+  --kui-color-danger-on-quiet: var(
+    --wa-color-danger-on-quiet,
+    light-dark(#c20b20, #ff696c)
+  );
+  --kui-color-danger-on-normal: var(
+    --wa-color-danger-on-normal,
+    light-dark(#8e0717, #ff8a8c)
+  );
+  --kui-color-danger-on-loud: var(
+    --wa-color-danger-on-loud,
+    light-dark(#fff, #111113)
+  );
+  /* Danger text placed ON a danger fill (e.g. the danger StateBanner) and the
+     danger Badge's solid fill. The light value matches danger-on-quiet, which
+     already clears WCAG AA (5.7:1) over danger-fill-quiet. The dark value is
+     lighter than danger-on-quiet (#ff696c), which reached only 5.7:1 over the
+     dark fill-quiet (4.0:1 as dimmed banner detail) and left the solid badge's
+     dark text and placeholder skeleton the weakest of any tone on a mid-red
+     fill; #ffa0a2 matches the other tones' pale dark on-fill values. */
+  --kui-color-danger-on-fill: light-dark(#c20b20, #ffa0a2);
 
   /* Compatibility aliases retained for existing @kerfjs/ui consumers. */
   --kui-color-border: var(
@@ -386,12 +437,17 @@
   --kui-color-danger-text: var(--kui-color-danger-on-quiet);
   --kui-focus-ring: var(
     --wa-focus-ring,
-    3px solid var(--wa-color-focus, var(--kui-color-brand-fill-loud))
+    3px solid var(--wa-color-focus, light-dark(#007aff, #64d2ff))
+  );
+  /* Elevation mirrors webawesome.css's scheme-aware shadows: dark raises the
+     alpha so a raised surface still separates from a near-black page. */
+  --kui-shadow-s: var(
+    --wa-shadow-s,
+    0 1px 3px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5))
   );
-  --kui-shadow-s: var(--wa-shadow-s, 0 1px 3px rgb(0 0 0 / 0.14));
   --kui-shadow-l: var(
     --wa-shadow-l,
-    0 0.75rem 2rem rgb(0 0 0 / 0.09)
+    0 0.75rem 2rem light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.32))
   );
 }
 

package/dist/styles/list-action-row.css

@@ -45,7 +45,9 @@
   border-end-end-radius: 0;
 }
 
-.kui-list-action-row:has(.kui-list-action-row__primary:hover) {
+.kui-list-action-row:not([data-placeholder="true"]):has(
+    .kui-list-action-row__primary:hover
+  ) {
   --kui-list-action-row-border: var(--kui-list-action-row-hover-border);
   --kui-list-action-row-background: var(--kui-list-action-row-hover-background);
 }
@@ -92,12 +94,27 @@
   outline: none;
 }
 
-.kui-list-action-row__primary:disabled,
-.kui-list-action-row__trailing-action:disabled {
-  cursor: not-allowed;
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live row's tone (see the placeholder rule in skeleton.css). The
+   disabled tone follows the author's disabled props (the data-kui-disabled
+   marker), so a disabled button's placeholder is dimmed like the loaded one;
+   only the `not-allowed` cursor is reserved for the live row. */
+.kui-list-action-row
+  :is(
+    .kui-list-action-row__primary,
+    .kui-list-action-row__trailing-action
+  )[data-kui-disabled="true"] {
   opacity: 0.58;
 }
 
+.kui-list-action-row:not([data-placeholder="true"])
+  :is(
+    .kui-list-action-row__primary:disabled,
+    .kui-list-action-row__trailing-action:disabled
+  ) {
+  cursor: not-allowed;
+}
+
 .kui-list-action-row__icon {
   position: absolute;
   inset-block-start: 50%;
@@ -144,6 +161,9 @@
 
 .kui-list-action-row__status {
   display: inline-flex;
+  /* A full line even when it holds only a placeholder skeleton, which is
+     shorter than the text line it stands in for. */
+  min-block-size: 1lh;
   align-items: center;
   gap: 0.25rem;
 }
@@ -180,10 +200,11 @@
   opacity: 0;
 }
 
-.kui-list-action-row[data-trailing-visibility="interaction"]:is(
-    :hover,
-    :focus-within
-  )
+/* A placeholder is inert, so hovering it reveals nothing: the trailing action
+   keeps the live resting state (hidden until interaction). */
+.kui-list-action-row[data-trailing-visibility="interaction"]:not(
+    [data-placeholder="true"]
+  ):is(:hover, :focus-within)
   .kui-list-action-row__trailing-action {
   opacity: 1;
 }

package/dist/styles/list-header.css

@@ -187,8 +187,13 @@
   flex: none;
 }
 
-.kui-list-header__action:hover,
-.kui-list-header__toggle:hover {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live tone and gives no hover feedback (see the placeholder rule
+   in skeleton.css). A disabled control gives none either. */
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__action:hover:not(:disabled),
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__toggle:hover:not(:disabled) {
   border-color: var(--kui-color-neutral-border-normal);
   background: var(--kui-list-header-hover-background);
 }
@@ -199,14 +204,21 @@
   outline-offset: 1px;
 }
 
-.kui-list-header__action:disabled {
-  cursor: not-allowed;
+/* The disabled tone follows the author's `actionDisabled` (the
+   data-kui-disabled marker), so a disabled action or toggle's placeholder is
+   dimmed like the loaded one; only the `not-allowed` cursor is reserved for
+   the live header. The tone is the component's own, never Web Awesome's
+   native `button:disabled`, so it holds without webawesome.css. */
+.kui-list-header__action[data-kui-disabled="true"],
+.kui-list-header__toggle[data-kui-disabled="true"] {
   opacity: 0.48;
 }
 
-.kui-list-header__action:disabled:hover {
-  border-color: transparent;
-  background: transparent;
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__action:disabled,
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__toggle:disabled {
+  cursor: not-allowed;
 }
 
 .kui-list-header__action > svg,

package/dist/styles/list-item.css

@@ -78,17 +78,25 @@
   grid-column: 2;
 }
 
-.kui-list-item:hover {
+.kui-list-item:hover:not([data-placeholder="true"]) {
   border-color: var(--kui-list-item-hover-border);
   background: var(--kui-list-item-hover-background);
 }
 
-.kui-list-item:disabled {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live row's tone (see the placeholder rule in skeleton.css). The
+   disabled tone follows the author's `disabled` prop (the data-kui-disabled
+   marker), so a disabled row's placeholder is dimmed like the loaded row; only
+   the `not-allowed` cursor is reserved for the live row. */
+.kui-list-item[data-kui-disabled="true"] {
   color: var(--kui-color-neutral-on-quiet);
-  cursor: not-allowed;
   opacity: 0.58;
 }
 
+.kui-list-item:disabled:not([data-placeholder="true"]) {
+  cursor: not-allowed;
+}
+
 .kui-list-item[aria-current="page"],
 .kui-list-item[aria-pressed="true"] {
   border-color: var(--kui-list-item-selected-border);

package/dist/styles/resizable-region.css

@@ -146,16 +146,22 @@
 
 /* Responsive replacement policies. Overlay regions stay on their logical edge
    and stop participating in the parent's flex tracks; hidden regions are fully
-   replaced by application-owned compact UI. */
+   replaced by application-owned compact UI. An overlay floats over the work
+   area, so it paints the surface like an overlay CollapsiblePanel: without it
+   the content beneath (and the restore control stacked below it) shows
+   through the shadowed box. An inline region stays transparent and shows its
+   host's background. */
 .kui-resizable-region[data-presentation="overlay"] {
   position: absolute;
   z-index: var(--kui-resizable-region-overlay-z, 41);
-  max-width: var(--kui-resizable-region-overlay-max-width, 85vw);
-  max-height: var(--kui-resizable-region-overlay-max-height, 85vh);
-  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+  background: var(--kui-color-surface);
+  box-shadow: var(--kui-shadow-l);
 }
+/* Each overlay maximum caps only the resizable axis: a side overlay spans its
+   host's full height and a drawer its full width, like their inline tracks. */
 .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"] {
   inset-block: 0;
+  max-width: var(--kui-resizable-region-overlay-max-width, 85vw);
 }
 .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-edge="end"] {
   inset-inline-start: 0;
@@ -165,6 +171,7 @@
 }
 .kui-resizable-region[data-presentation="overlay"][data-axis="vertical"] {
   inset-inline: 0;
+  max-height: var(--kui-resizable-region-overlay-max-height, 85vh);
 }
 .kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-edge="end"] {
   inset-block-start: 0;
@@ -229,26 +236,87 @@
   }
 }
 
-/* A collapsed panel can supply its own affordance while Kerf owns consistent,
-   safe-area-aware viewport placement. */
+/* A collapsed region can supply its own affordance. It floats in a corner of
+   the region's own container, never of the viewport, so a region embedded in a
+   page cannot float it over page content outside that container. The
+   container becomes the corner's containing block and isolates its stacking
+   only while a restore control is shown, at zero specificity so an app's own
+   positioning of that container wins. The corner is inset from the
+   container's edges plus the unsafe area of each edge it reaches. The
+   control belongs to the layer beneath open overlays, two below the overlay
+   z-index: an open overlay region covers it as it covers the rest of the
+   work area, the Workbench rule. A collapsed overlay drops its pointer
+   events, so the control is usable again as soon as the overlay closes. */
+:where(:has(> .kui-resizable-region__restore)) {
+  position: relative;
+  isolation: isolate;
+  anchor-scope: --kui-restore-drawer;
+}
+/* An expanded bottom region (a vertical region resized from its top edge)
+   beside the collapsed one — a direct child of that container or of one of
+   its direct children (the app's work-area column) — owns the container's
+   bottom, so the corner floats above the drawer's top edge instead of over
+   it. CollapsiblePanel drawers publish the same anchor. A drawer nested
+   deeper, inside the work area's own content, belongs to another layout and
+   is scoped out. Without anchor positioning the corner keeps the container's
+   bottom edge. */
+.kui-resizable-region[data-axis="vertical"][data-edge="start"][data-presentation="inline"]:not(
+    [data-collapsed="true"]
+  ) {
+  anchor-name: --kui-restore-drawer;
+}
+:where(:has(> .kui-resizable-region__restore)) > * > * > * {
+  anchor-scope: --kui-restore-drawer;
+}
 .kui-resizable-region__restore {
-  position: fixed;
-  z-index: var(--kui-resizable-region-restore-z, 42);
+  --_kui-resizable-region-restore-inset: var(
+    --kui-resizable-region-restore-inset,
+    1rem
+  );
+  /* The corner owns the inset, so a FloatingToolbar composed here floats
+     from this point instead of adding its own inset on top. */
+  --kui-floating-toolbar-inset: 0px;
+  position: absolute;
+  z-index: var(
+    --kui-resizable-region-restore-z,
+    calc(var(--kui-resizable-region-overlay-z, 41) - 2)
+  );
+  position-visibility: always;
+  inset-block-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-block-end,
+        var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+      )
+  );
+  /* Above an expanded drawer's top edge when one is in scope (see above). */
   inset-block-end: calc(
-    var(--kui-resizable-region-restore-inset, 1rem) +
-      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+    var(--_kui-resizable-region-restore-inset) +
+      anchor(
+        --kui-restore-drawer top,
+        var(
+          --kui-edge-inset-block-end,
+          var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+        )
+      )
   );
 }
 .kui-resizable-region__restore[data-position="bottom-start"] {
   inset-inline-start: calc(
-    var(--kui-resizable-region-restore-inset, 1rem) +
-      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+    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="bottom-end"] {
   inset-inline-end: calc(
-    var(--kui-resizable-region-restore-inset, 1rem) +
-      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+    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__handle {

package/dist/styles/segmented-control.css

@@ -148,8 +148,28 @@
   outline-offset: 1px;
 }
 
-.kui-segmented-control__item:disabled {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   its choices keep the live tone. SegmentedControl renders no skeleton (its
+   choices are known; only the selection is unknown), so it does not load
+   skeleton.css and neutralizes disabled chrome itself, including Web Awesome's
+   native button:disabled. A choice the author disabled (the data-kui-disabled
+   marker) keeps the live disabled tone; only the `not-allowed` cursor is
+   reserved for the live control. */
+.kui-segmented-control[data-placeholder="true"] .kui-segmented-control__item {
+  cursor: default;
+}
+
+.kui-segmented-control[data-placeholder="true"]
+  .kui-segmented-control__item:not([data-kui-disabled="true"]) {
+  opacity: 1;
+}
+
+.kui-segmented-control__item[data-kui-disabled="true"] {
   opacity: 0.45;
+}
+
+.kui-segmented-control:not([data-placeholder="true"])
+  .kui-segmented-control__item:disabled {
   cursor: not-allowed;
 }