@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/styles/workbench.css

@@ -1,28 +1,68 @@
 .kui-workbench {
+  position: relative;
+  /* The rail and drawer overlays and the restore controls stack within the
+     Workbench, never against the page around it. */
+  isolation: isolate;
   display: flex;
   min-width: 0;
   min-height: 0;
   height: 100%;
   overflow: hidden;
   background: var(--kui-color-surface);
+  /* Safe areas: every track paints through the unsafe area it reaches (a rail
+     or drawer grows by that inset), and each region's content compensates only
+     for the edges the region still touches. An expanded inline rail takes its
+     edge away from the center; collapsing it hands the edge back. See pane.css
+     for the `--kui-edge-inset-*` edge context. */
+  --_kui-workbench-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-workbench-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-workbench-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-workbench-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
 }
 
 /* Side rails. Collapsing snaps the flex track to zero (one reflow) while the
    fixed-width content slides out via transform (composited, clipped) — never a
    per-frame width animation. See docs/18 / the KF-7QKJRK catalog sidebar. */
 .kui-workbench__rail {
-  flex: 0 0 var(--kui-workbench-rail-width, 17.5rem);
+  --kui-edge-inset-block-start: var(--_kui-workbench-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  --_kui-workbench-rail-extent: calc(
+    var(--kui-workbench-rail-width, 17.5rem) +
+      var(--_kui-workbench-rail-safe-inset)
+  );
+  /* The size is the whole track, separator border included, in or out of
+     flow and whatever box model the app defaults to. */
+  box-sizing: border-box;
+  flex: 0 0 var(--_kui-workbench-rail-extent);
   min-width: 0;
   overflow: hidden;
   background: var(--kui-color-surface);
 }
 
 .kui-workbench__rail--left {
-  border-inline-end: 1px solid var(--kui-color-border);
+  --_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-neutral-border-normal);
 }
 
 .kui-workbench__rail--right {
-  border-inline-start: 1px solid var(--kui-color-border);
+  --_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-neutral-border-normal);
 }
 
 .kui-workbench__rail[data-collapsed="true"] {
@@ -30,7 +70,19 @@
   border-inline: 0;
 }
 
+.kui-workbench__rail[data-separator="hidden"],
+.kui-workbench__drawer[data-separator="hidden"] {
+  border-color: transparent;
+}
+
+/* The center is the overlay drawer's containing block, so a drawer that
+   leaves the flow still covers exactly the work-area column it docks under. */
 .kui-workbench__center {
+  position: relative;
+  --kui-edge-inset-block-start: var(--_kui-workbench-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
   display: flex;
   flex: 1;
   min-width: 0;
@@ -39,18 +91,162 @@
   flex-direction: column;
 }
 
+.kui-workbench[data-left-inline-expanded="true"] > .kui-workbench__center {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+.kui-workbench[data-right-inline-expanded="true"] > .kui-workbench__center {
+  --kui-edge-inset-inline-end: 0px;
+}
+
 .kui-workbench__main {
+  position: relative;
   flex: 1;
   min-height: 0;
   overflow: auto;
 }
 
+:is(.kui-workbench__main, .kui-workbench__rail, .kui-workbench__drawer):is(
+  :focus-visible,
+  [data-outlined="true"]
+) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+/* A sole Pane can host an opaque full-width scroller above the main outline.
+   Keep the selected work-area ring in the final paint layer, without blocking
+   controls in that Pane. Other main compositions retain their own outline. */
+.kui-workbench__main:has(> [data-component="pane"]:only-child):is(
+    :focus-visible,
+    [data-outlined="true"]
+  )::after {
+  position: absolute;
+  z-index: 1;
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+  content: "";
+  inset: 0;
+  pointer-events: none;
+}
+
+/* When no Pane chrome is composed, the Workbench region owns its scroll.
+   A resizable auto-overflow panel instead scrolls its content box so its
+   separator handle remains fixed. Paint only that owner. */
+.kui-workbench__main[data-appearance="sunken"],
+:is(.kui-workbench__rail, .kui-workbench__drawer)[data-appearance="sunken"] {
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+}
+
+:is(
+    .kui-workbench__rail,
+    .kui-workbench__drawer
+  )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"] {
+  background: transparent;
+}
+
+:is(
+    .kui-workbench__rail,
+    .kui-workbench__drawer
+  )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"]
+  > .kui-workbench__panel-content {
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+}
+
+.kui-workbench__main[data-drawer-inline-expanded="true"] {
+  --_kui-workbench-content-edge-block-end: 0px;
+}
+
+/* The main area and each panel's content are the consumers: they pad for the
+   edges their region still touches, the main area inside its scroller so
+   content scrolls under an unsafe edge but can always be scrolled clear. A
+   region whose only child is a Pane or layout lets that child own the insets. */
+.kui-workbench__center,
+.kui-workbench__rail,
+.kui-workbench__drawer {
+  --_kui-workbench-content-edge-block-start: var(--kui-edge-inset-block-start);
+  --_kui-workbench-content-edge-block-end: var(--kui-edge-inset-block-end);
+  --_kui-workbench-content-edge-inline-start: var(
+    --kui-edge-inset-inline-start
+  );
+  --_kui-workbench-content-edge-inline-end: var(--kui-edge-inset-inline-end);
+}
+
+.kui-workbench__main,
+.kui-workbench__panel-content {
+  /* Clear the public context at the region, so arbitrary app children inherit
+     zero without a selector whose subject is every child in the document. */
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
+.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
+  )
+) {
+  padding-block: var(--_kui-workbench-content-edge-block-start)
+    var(--_kui-workbench-content-edge-block-end);
+  padding-inline: var(--_kui-workbench-content-edge-inline-start)
+    var(--_kui-workbench-content-edge-inline-end);
+  scroll-padding-block: var(--_kui-workbench-content-edge-block-start)
+    var(--_kui-workbench-content-edge-block-end);
+}
+
+/* A nested Workbench owns its safe-area insets. Other sole layout children
+   restore this context from their own stylesheets. */
+:is(.kui-workbench__main, .kui-workbench__panel-content)
+  > [data-component="workbench"]:only-child {
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
+}
+
+/* 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. Each of those components fills the
+   region from its own stylesheet (pane.css, nav-stack.css, split-view.css,
+   tab-navigator.css); a nested Workbench fills it here. */
+:is(.kui-workbench__main, .kui-workbench__panel-content)
+  > [data-component="workbench"]:only-child {
+  height: 100%;
+}
+
 /* Bottom drawer — the vertical analogue of a rail. */
 .kui-workbench__drawer {
-  flex: 0 0 var(--kui-workbench-drawer-height, 13.75rem);
+  --kui-edge-inset-block-start: 0px;
+  --_kui-workbench-drawer-extent: calc(
+    var(--kui-workbench-drawer-height, 13.75rem) +
+      var(--_kui-workbench-safe-block-end)
+  );
+  box-sizing: border-box;
+  position: relative;
+  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);
 }
 
@@ -59,20 +255,57 @@
   border-block-start: 0;
 }
 
+.kui-workbench__rail[data-content-overflow="auto"],
+.kui-workbench__drawer[data-content-overflow="auto"] {
+  overflow: auto;
+}
+
+.kui-workbench__rail[data-content-overflow="visible"],
+.kui-workbench__drawer[data-content-overflow="visible"] {
+  z-index: var(--kui-workbench-popup-z, 5);
+  overflow: visible;
+}
+
+.kui-workbench__rail:has(wa-dropdown[open]),
+.kui-workbench__drawer:has(wa-dropdown[open]) {
+  z-index: var(--kui-workbench-popup-z, 5);
+}
+
 /* The fixed-size sliding content. The rail/drawer keeps a definite size on its
    content so the transform reads as a slide, not a squeeze. */
 .kui-workbench__rail .kui-workbench__panel-content {
-  width: var(--kui-workbench-rail-width, 17.5rem);
+  width: var(--_kui-workbench-rail-extent);
   height: 100%;
   transition: transform 200ms ease;
 }
 
 .kui-workbench__drawer .kui-workbench__panel-content {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
   width: 100%;
-  height: var(--kui-workbench-drawer-height, 13.75rem);
+  height: var(--_kui-workbench-drawer-extent);
   transition: transform 200ms ease;
 }
 
+.kui-workbench__rail[data-collapse-motion="none"] .kui-workbench__panel-content,
+.kui-workbench__drawer[data-collapse-motion="none"]
+  .kui-workbench__panel-content {
+  transition: none;
+}
+
+:is(.kui-workbench__rail, .kui-workbench__drawer)[data-resizing="true"]
+  > .kui-workbench__panel-content {
+  transition: none;
+}
+
+.kui-workbench__rail[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  .kui-workbench__panel-content,
+.kui-workbench__drawer[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  .kui-workbench__panel-content {
+  opacity: 0;
+}
+
 .kui-workbench__rail--left[data-collapsed="true"]
   .kui-workbench__panel-content {
   transform: translateX(-100%);
@@ -87,8 +320,767 @@
   transform: translateY(100%);
 }
 
+/* Opt-in resizable panels. The size lives in the resize wiring's track
+   property, which the wiring updates live during a drag, so the rail width or
+   drawer height follows it; collapsing leaves it alone, so the panel expands
+   back to the size it had. These rules precede the presentation rules below,
+   which must keep winning for overlay and hidden panels. */
+.kui-workbench__rail[data-resizable="true"] {
+  --kui-workbench-rail-width: var(--kui-resizable-region-size);
+  position: relative;
+}
+
+.kui-workbench__drawer[data-resizable="true"] {
+  --kui-workbench-drawer-height: var(--kui-resizable-region-size);
+}
+
+/* The work area keeps a minimum width beside the rails (the Workbench's
+   `mainMinSize`) and a minimum height above the drawer (`mainMinHeight`),
+   never larger than the Workbench itself. Inline panels, fixed or resizable,
+   give way instead: when the container narrows the rails shrink in proportion
+   to their sizes, when it gets shorter the drawer shrinks, and their content
+   follows the shown size. The wiring stops a resize where the work area would
+   drop below the minimum. */
+.kui-workbench[data-main-min-size] > .kui-workbench__center {
+  min-width: min(var(--_kui-workbench-main-min-width), 100%);
+}
+
+.kui-workbench[data-main-min-height]
+  > .kui-workbench__center
+  > .kui-workbench__main {
+  min-height: min(var(--_kui-workbench-main-min-height), 100%);
+}
+
+.kui-workbench__rail[data-presentation="inline"]:not([data-collapsed="true"]),
+.kui-workbench__drawer[data-presentation="inline"]:not(
+    [data-collapsed="true"]
+  ) {
+  flex-shrink: 1;
+}
+
+/* Low specificity, so a responsive overlay (below) restores the fixed size. */
+.kui-workbench__rail:where(
+    [data-presentation="inline"]:not([data-collapsed="true"])
+  )
+  > .kui-workbench__panel-content {
+  width: 100%;
+}
+
+.kui-workbench__drawer:where(
+    [data-presentation="inline"]:not([data-collapsed="true"])
+  )
+  > .kui-workbench__panel-content {
+  height: 100%;
+}
+
+/* The panel clips its sliding content, so a scrolling panel scrolls its
+   content box instead of itself: the separator handle is a child of the panel
+   and must not scroll away with the content. */
+.kui-workbench__rail[data-resizable="true"][data-content-overflow="auto"],
+.kui-workbench__drawer[data-resizable="true"][data-content-overflow="auto"] {
+  overflow: hidden;
+}
+
+.kui-workbench__rail[data-resizable="true"][data-content-overflow="auto"]
+  > .kui-workbench__panel-content,
+.kui-workbench__drawer[data-resizable="true"][data-content-overflow="auto"]
+  > .kui-workbench__panel-content {
+  overflow: auto;
+}
+
+/* The separator handle: the 20px hit target and dormant grip a
+   ResizableRegion handle has. The panel's own border stays the visible
+   separator line. By default the target sits wholly inside the panel, at its
+   inner edge, because the panel clips its sliding content. */
+.kui-workbench__handle {
+  position: absolute;
+  z-index: 3;
+  display: grid;
+  color: var(--kui-color-neutral-on-quiet);
+  place-items: center;
+  touch-action: none;
+}
+
+.kui-workbench__rail > .kui-workbench__handle {
+  inset-block: 0;
+  width: 20px;
+  cursor: col-resize;
+}
+
+.kui-workbench__rail--left > .kui-workbench__handle {
+  inset-inline-end: 0;
+}
+
+.kui-workbench__rail--right > .kui-workbench__handle {
+  inset-inline-start: 0;
+}
+
+.kui-workbench__drawer > .kui-workbench__handle {
+  inset-inline: 0;
+  inset-block-start: 0;
+  height: 20px;
+  cursor: row-resize;
+}
+
+.kui-workbench__rail[data-collapsed="true"] > .kui-workbench__handle,
+.kui-workbench__drawer[data-collapsed="true"] > .kui-workbench__handle,
+.kui-workbench__rail:not([data-presentation="inline"]) > .kui-workbench__handle,
+.kui-workbench__drawer:not([data-presentation="inline"])
+  > .kui-workbench__handle {
+  display: none;
+}
+
+/* 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"],
+      [data-content-overflow="visible"]
+    ),
+  .kui-workbench__drawer[data-resizable="true"]:not(
+      [data-collapsed="true"],
+      [data-content-overflow="visible"]
+    ) {
+    overflow: clip;
+    overflow-clip-margin: 10px;
+  }
+
+  .kui-workbench__rail--left[data-resizable="true"] > .kui-workbench__handle {
+    inset-inline-end: -10px;
+  }
+
+  .kui-workbench__rail--right[data-resizable="true"] > .kui-workbench__handle {
+    inset-inline-start: -10px;
+  }
+
+  .kui-workbench__drawer[data-resizable="true"] > .kui-workbench__handle {
+    inset-block-start: -10px;
+  }
+}
+
+.kui-workbench__handle:hover,
+.kui-workbench__handle:focus-visible {
+  color: var(--kui-color-text-link);
+}
+
+/* The ring stays wholly inside the handle's box, as a ResizableRegion
+   handle's does. */
+.kui-workbench__handle:focus-visible {
+  border-radius: var(--kui-radius-s);
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-workbench__handle-icon {
+  position: relative;
+  display: grid;
+  width: 0.9rem;
+  height: 0.9rem;
+  opacity: 0;
+  pointer-events: none;
+  place-items: center;
+}
+
+.kui-workbench__handle-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.kui-workbench__handle:hover .kui-workbench__handle-icon,
+.kui-workbench__handle:focus-visible .kui-workbench__handle-icon {
+  opacity: 1;
+}
+
+/* Overlay stacking order: both rails stack above the bottom drawer, one below
+   the overlay z-index, as inline rails span the Workbench's full height beside
+   the drawer's column; the right rail stacks above the left (document order).
+   Restore controls stack below every overlay (see .kui-workbench__restore). */
+.kui-workbench__rail[data-presentation="overlay"],
+.kui-workbench__drawer[data-presentation="overlay"] {
+  position: absolute;
+  z-index: var(--kui-workbench-overlay-z, 41);
+  box-shadow: var(--kui-shadow-l);
+}
+
+/* An out-of-flow rail sizes to its content plus its border, so it takes its
+   extent explicitly, as its in-flow flex basis does, border included. Each
+   overlay maximum caps only the panel's own axis: a rail spans the
+   Workbench's full height and a drawer its full width. */
+.kui-workbench__rail[data-presentation="overlay"] {
+  width: var(--_kui-workbench-rail-extent);
+  max-width: var(--kui-workbench-overlay-max-width, 85vw);
+  inset-block: 0;
+}
+
+.kui-workbench__rail--left[data-presentation="overlay"] {
+  inset-inline-start: 0;
+}
+
+.kui-workbench__rail--right[data-presentation="overlay"] {
+  inset-inline-end: 0;
+}
+
+/* The drawer's content is absolutely positioned against its bottom edge, so
+   an out-of-flow drawer has no content height of its own: it takes its extent
+   explicitly, as the in-flow track does through its flex basis. */
+.kui-workbench__drawer[data-presentation="overlay"] {
+  z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+  height: var(--_kui-workbench-drawer-extent);
+  max-height: var(--kui-workbench-overlay-max-height, 85vh);
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+
+/* Optional shared backdrop sits over work-area controls and restores, below
+   the overlay drawer and rails. It is last in document order so an equal-z
+   restore control cannot receive the outside press. */
+.kui-workbench__backdrop {
+  position: absolute;
+  z-index: calc(var(--kui-workbench-overlay-z, 41) - 2);
+  display: none;
+  inset: 0;
+  background: var(--kui-color-scrim, rgb(0 0 0 / 32%));
+}
+
+.kui-workbench[data-overlay-backdrop="true"]:is(
+    [data-rail-overlay-expanded="true"],
+    [data-drawer-overlay-expanded="true"]
+  )
+  > .kui-workbench__backdrop {
+  display: block;
+}
+
+/* A collapsed overlay keeps its box for the slide-out, so it drops its surface
+   and shadow; the sliding content carries the surface instead. */
+.kui-workbench__rail[data-presentation="overlay"][data-collapsed="true"],
+.kui-workbench__drawer[data-presentation="overlay"][data-collapsed="true"] {
+  background: transparent;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+/* Overlay content fills the rail inside its separator border, so it is
+   clamped with the rail and carries the surface through the slide-out. */
+.kui-workbench__rail[data-presentation="overlay"]
+  > .kui-workbench__panel-content {
+  width: 100%;
+  background: var(--kui-color-surface);
+}
+
+/* The overlay content fills the drawer box below its separator border, so it
+   is clamped with the box and carries the surface through the slide-out. */
+.kui-workbench__drawer[data-presentation="overlay"]
+  > .kui-workbench__panel-content {
+  height: 100%;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__rail[data-presentation="hidden"],
+.kui-workbench__drawer[data-presentation="hidden"] {
+  display: none;
+}
+
+/* Responsive overlay panels. A rail or the drawer with `responsiveOverlayAt`
+   presents as an overlay — out of flow, over the work area, without a
+   separator — below the Workbench's own container breakpoint (`narrow`: 704px
+   or less, `compact`: 448px or less, as `ResizableRegion`'s
+   `responsiveFillAt`), and inline above it. The Workbench becomes a named
+   inline-size container only when a panel opts in. The work area keeps its
+   safe-area inset under an overlay panel. */
+.kui-workbench[data-responsive-overlay="true"] {
+  container: kui-workbench / inline-size;
+}
+
+/* A numeric pixel threshold is measured by wireWorkbench and marked on the
+   panel. Keep its overlay geometry and covered work area in step with that
+   single mark, including when the app changes the threshold at render time. */
+.kui-workbench__rail[data-responsive-overlay-active="true"] {
+  position: absolute;
+  z-index: var(--kui-workbench-overlay-z, 41);
+  width: var(--_kui-workbench-rail-extent);
+  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-active="true"] {
+  inset-inline-start: 0;
+}
+
+.kui-workbench__rail--right[data-responsive-overlay-active="true"] {
+  inset-inline-end: 0;
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"][data-collapsed="true"],
+.kui-workbench__drawer[data-responsive-overlay-active="true"][data-collapsed="true"] {
+  background: transparent;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"]
+  > .kui-workbench__panel-content {
+  width: 100%;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"]
+  > .kui-workbench__handle,
+.kui-workbench__drawer[data-responsive-overlay-active="true"]
+  > .kui-workbench__handle {
+  display: none;
+}
+
+.kui-workbench[data-numeric-overlays~="left"] > .kui-workbench__center {
+  --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+}
+
+.kui-workbench[data-numeric-overlays~="right"] > .kui-workbench__center {
+  --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
+}
+
+.kui-workbench__drawer[data-responsive-overlay-active="true"] {
+  position: absolute;
+  anchor-name: none;
+  z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+  height: var(--_kui-workbench-drawer-extent);
+  max-height: var(--kui-workbench-overlay-max-height, 85vh);
+  inset-inline: 0;
+  inset-block-end: 0;
+  box-shadow: var(--kui-shadow-l);
+  clip-path: none;
+}
+
+.kui-workbench__drawer[data-responsive-overlay-active="true"]
+  > .kui-workbench__panel-content {
+  height: 100%;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench[data-numeric-overlays~="drawer"]
+  > .kui-workbench__center
+  > .kui-workbench__main {
+  --_kui-workbench-content-edge-block-end: var(--_kui-workbench-safe-block-end);
+}
+
+.kui-workbench[data-overlay-backdrop="true"][data-numeric-overlays~="open"]
+  > .kui-workbench__backdrop {
+  display: block;
+}
+
+@container kui-workbench (max-width: 44rem) {
+  .kui-workbench[data-overlay-backdrop="true"]:is(
+      [data-left-responsive-expanded="narrow"],
+      [data-right-responsive-expanded="narrow"],
+      [data-drawer-responsive-expanded="narrow"]
+    )
+    > .kui-workbench__backdrop {
+    display: block;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="narrow"] {
+    position: absolute;
+    z-index: var(--kui-workbench-overlay-z, 41);
+    width: var(--_kui-workbench-rail-extent);
+    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"] {
+    inset-inline-start: 0;
+  }
+
+  .kui-workbench__rail--right[data-responsive-overlay-at="narrow"] {
+    inset-inline-end: 0;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="narrow"][data-collapsed="true"] {
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="narrow"]
+    > .kui-workbench__panel-content {
+    width: 100%;
+    background: var(--kui-color-surface);
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="narrow"]
+    > .kui-workbench__handle {
+    display: none;
+  }
+
+  .kui-workbench[data-left-responsive-inline="narrow"]
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  }
+
+  .kui-workbench[data-right-responsive-inline="narrow"]
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="narrow"] {
+    position: absolute;
+    anchor-name: none;
+    z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+    height: var(--_kui-workbench-drawer-extent);
+    max-height: var(--kui-workbench-overlay-max-height, 85vh);
+    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"] {
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="narrow"]
+    > .kui-workbench__panel-content {
+    height: 100%;
+    background: var(--kui-color-surface);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="narrow"]
+    > .kui-workbench__handle {
+    display: none;
+  }
+
+  .kui-workbench__main[data-drawer-responsive-inline="narrow"] {
+    --_kui-workbench-content-edge-block-end: var(
+      --_kui-workbench-safe-block-end
+    );
+  }
+}
+
+@container kui-workbench (max-width: 28rem) {
+  .kui-workbench[data-overlay-backdrop="true"]:is(
+      [data-left-responsive-expanded="compact"],
+      [data-right-responsive-expanded="compact"],
+      [data-drawer-responsive-expanded="compact"]
+    )
+    > .kui-workbench__backdrop {
+    display: block;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="compact"] {
+    position: absolute;
+    z-index: var(--kui-workbench-overlay-z, 41);
+    width: var(--_kui-workbench-rail-extent);
+    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"] {
+    inset-inline-start: 0;
+  }
+
+  .kui-workbench__rail--right[data-responsive-overlay-at="compact"] {
+    inset-inline-end: 0;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="compact"][data-collapsed="true"] {
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="compact"]
+    > .kui-workbench__panel-content {
+    width: 100%;
+    background: var(--kui-color-surface);
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="compact"]
+    > .kui-workbench__handle {
+    display: none;
+  }
+
+  .kui-workbench[data-left-responsive-inline="compact"]
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  }
+
+  .kui-workbench[data-right-responsive-inline="compact"]
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="compact"] {
+    position: absolute;
+    anchor-name: none;
+    z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+    height: var(--_kui-workbench-drawer-extent);
+    max-height: var(--kui-workbench-overlay-max-height, 85vh);
+    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"] {
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="compact"]
+    > .kui-workbench__panel-content {
+    height: 100%;
+    background: var(--kui-color-surface);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="compact"]
+    > .kui-workbench__handle {
+    display: none;
+  }
+
+  .kui-workbench__main[data-drawer-responsive-inline="compact"] {
+    --_kui-workbench-content-edge-block-end: var(
+      --_kui-workbench-safe-block-end
+    );
+  }
+}
+
+/* Release the panel and its sliding/scrolling content while a PopupMenu or
+   Web Awesome dropdown is open. This comes after resize clipping and keeps
+   the popup in place through wa-show/wa-after-hide without a prop change. */
+.kui-workbench__rail:not([data-collapsed="true"]):has(wa-dropdown[open]),
+.kui-workbench__drawer:not([data-collapsed="true"]):has(wa-dropdown[open]) {
+  overflow: visible;
+  clip-path: none;
+}
+.kui-workbench__rail:not([data-collapsed="true"]):has(wa-dropdown[open])
+  > .kui-workbench__panel-content,
+.kui-workbench__drawer:not([data-collapsed="true"]):has(wa-dropdown[open])
+  > .kui-workbench__panel-content {
+  overflow: visible;
+}
+
+/* A collapsed panel's restore control floats in a corner of the Workbench
+   itself, never of the viewport, so an embedded Workbench cannot float it over
+   page chrome outside it. It is inset from the corner plus the unsafe area of
+   each edge that corner reaches. The drawer's control sits in the work-area
+   column it restores (the center is its containing block), inset from the
+   edges that column still reaches, so it never lands on an expanded rail.
+   It belongs to the layer beneath the overlays, two below the overlay
+   z-index: an open overlay covers it as it covers the rest of the work area,
+   so no other panel's control floats over the overlay's content. A collapsed
+   overlay drops its pointer events, so the control stays usable beneath it. */
+.kui-workbench__restore {
+  --_kui-workbench-restore-inset: var(
+    --kui-workbench-restore-inset,
+    1rem
+  );
+  position: absolute;
+  /* Hidden while an open rail overlay covers the work area (see below). */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
+  z-index: var(
+    --kui-workbench-restore-z,
+    calc(var(--kui-workbench-overlay-z, 41) - 2)
+  );
+  inset-block-end: calc(
+    var(--_kui-workbench-restore-inset) + var(--_kui-workbench-safe-block-end)
+  );
+}
+
+.kui-workbench__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--_kui-workbench-restore-inset) +
+      var(--_kui-workbench-safe-inline-start)
+  );
+}
+
+.kui-workbench__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--_kui-workbench-restore-inset) + var(--_kui-workbench-safe-inline-end)
+  );
+}
+
+/* An expanded inline bottom drawer owns the bottom of the work-area column,
+   which reaches the Workbench's bottom corners once a rail collapses, so a
+   collapsed rail's control floats the restore inset above the drawer's top
+   edge instead of over it — the standalone CollapsiblePanel rule, scoped to
+   this Workbench so a nested Workbench or an enclosing layout never sees its
+   drawer. The drawer publishes that edge only while it is expanded and in
+   flow: an overlay drawer, static or responsive (see the container queries
+   above), covers the control as every open overlay does. Without anchor
+   positioning the control keeps the Workbench corner. */
+.kui-workbench {
+  anchor-scope: --kui-restore-drawer;
+}
+
+.kui-workbench__drawer:where(
+  [data-presentation="inline"]:not([data-collapsed="true"])
+) {
+  anchor-name: --kui-restore-drawer;
+}
+
+.kui-workbench > .kui-workbench__restore {
+  position-visibility: always;
+  inset-block-end: calc(
+    var(--_kui-workbench-restore-inset) +
+      anchor(--kui-restore-drawer top, var(--_kui-workbench-safe-block-end))
+  );
+}
+
+.kui-workbench__center > .kui-workbench__restore {
+  inset-block-end: calc(
+    var(--_kui-workbench-restore-inset) + var(--kui-edge-inset-block-end)
+  );
+}
+
+.kui-workbench__center > .kui-workbench__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--_kui-workbench-restore-inset) + var(--kui-edge-inset-inline-start)
+  );
+}
+
+.kui-workbench__center > .kui-workbench__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--_kui-workbench-restore-inset) + var(--kui-edge-inset-inline-end)
+  );
+}
+
+/* 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 Workbench's own covered context,
+   `--_kui-workbench-covered`, is set on the rail's siblings only (never on
+   the open rail), so the overlay's own floating controls stay; FloatingToolbar
+   and the layouts' restore corners read it. A direct child
+   resolves the Workbench's own container query, never a nested one's. */
+.kui-workbench[data-rail-overlay-expanded="true"]
+  > :is(.kui-workbench__center, .kui-workbench__restore) {
+  --_kui-workbench-covered: hidden;
+}
+
+.kui-workbench[data-numeric-overlays~="rail-open"]
+  > :is(.kui-workbench__center, .kui-workbench__restore) {
+  --_kui-workbench-covered: hidden;
+}
+
+@container kui-workbench (max-width: 44rem) {
+  .kui-workbench:is(
+      [data-left-responsive-expanded="narrow"],
+      [data-right-responsive-expanded="narrow"]
+    )
+    > :is(.kui-workbench__center, .kui-workbench__restore) {
+    --_kui-workbench-covered: hidden;
+  }
+}
+
+@container kui-workbench (max-width: 28rem) {
+  .kui-workbench:is(
+      [data-left-responsive-expanded="compact"],
+      [data-right-responsive-expanded="compact"]
+    )
+    > :is(.kui-workbench__center, .kui-workbench__restore) {
+    --_kui-workbench-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:is(
+    [data-responsive-overlay-at="narrow"],
+    [data-responsive-overlay-at="compact"],
+    [data-responsive-overlay-active="true"]
+  ) {
+    width: calc(
+      100% - var(--kui-workbench-overlay-dismiss-margin, 2.75rem)
+    );
+    max-width: none;
+  }
+
+  .kui-workbench__rail:is(
+      [data-responsive-overlay-at="narrow"],
+      [data-responsive-overlay-at="compact"],
+      [data-responsive-overlay-active="true"]
+    )[data-compact-overlay="full"] {
+    width: 100%;
+  }
+}