@kerfjs/ui 5.0.0-beta.50 → 5.0.0-beta.51

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

@@ -21,6 +21,15 @@
     )
   );
   --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
+  /* Internal group-to-child contract: the control slot a composed child (an
+     icon-only Select) fills so it is inset evenly on every side and the
+     group-owned focus ring stays concentric with the visible control. The
+     group sizes to the child's width. A default slot is 40px tall inside the
+     2px inset; a compact slot is the full 32px padding box, and a lone
+     compact child also overlaps the 1px inline padding. */
+  --_kui-toolbar-slot-height: 2.5rem;
+  --_kui-toolbar-slot-overlap: 0px;
+  --_kui-toolbar-slot-radius: var(--kui-toolbar-item-radius);
   display: inline-flex;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
@@ -71,6 +80,13 @@
 }
 .kui-toolbar-control-group[data-size="compact"] {
   --kui-toolbar-group-size: 2.125rem;
+  --_kui-toolbar-slot-height: 2rem;
+  --_kui-toolbar-slot-overlap: 1px;
+  --_kui-toolbar-slot-radius: max(
+    0px,
+    calc(var(--kui-toolbar-group-radius) - 1px)
+  );
+  gap: 4px; /* Compensating for -2px margins */
 }
 .kui-toolbar-control-group[data-density="tight"] {
   --kui-layout-item-padding: 0.3125rem;
@@ -105,6 +121,18 @@
   display: flex;
   gap: var(--kui-space-xs);
 }
+.kui-toolbar-control-group[data-content="mixed"] wa-button {
+  line-height: normal;
+}
+/* Toolbar controls never wrap. Web Awesome's label part is a plain block, so a
+   slotted icon (a block SVG) and its text would otherwise stack vertically —
+   lay them out on one row the way native mixed buttons already are. */
+.kui-toolbar-control-group wa-button::part(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kui-space-xs);
+  white-space: nowrap;
+}
 .kui-toolbar-control-group[data-content="avatar"][data-scrim="true"] {
   --kui-toolbar-control-background: color-mix(
     in srgb,
@@ -234,6 +262,15 @@
   height: 1rem;
 }
 
+/* Nested Web Awesome buttons take the group's control height, not the theme's
+   44px standalone control height. */
+.kui-toolbar-control-group wa-button {
+  --wa-form-control-height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"] wa-button {
+  --wa-form-control-height: 2rem;
+}
+
 .kui-toolbar-control-group > wa-button,
 .kui-toolbar-control-group > wa-dropdown,
 .kui-toolbar-control-group > wa-dropdown > wa-button,
@@ -260,6 +297,13 @@
   min-height: 2rem;
 }
 
+/* A compact icon button is a 32px circle like its compact wa-button and
+   Select siblings; the default 8px inline padding around a 16px icon made its
+   selected highlight a 34x32 oval. */
+.kui-toolbar-control-group[data-size="compact"][data-content="icon"] > button {
+  padding-inline: 0;
+}
+
 .kui-toolbar-control-group[data-menu-inset="standard"] wa-dropdown::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
@@ -287,6 +331,13 @@
   border-radius: var(--kui-toolbar-group-radius);
 }
 
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown,
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-button {
+  margin: -2px;
+}
+
 /* A compact icon-only trigger may stay square, but a mixed-content dropdown
    trigger must grow for its slotted label plus Web Awesome's caret. Otherwise
    the fixed 32px base centers both outside its host, painting the label across
@@ -301,20 +352,14 @@
 }
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
   > wa-dropdown
-  > wa-button {
-  /* WebKit does not contribute a custom element's shadow-part caret to the
-     host's intrinsic inline size. Give the standard short text trigger an
-     engine-stable floor; max-content still wins for longer light-DOM labels,
-     and consumers can raise the public variable for localized copy. */
-  width: var(--kui-toolbar-dropdown-trigger-width, 4.125rem);
+  > wa-button::part(base) {
+  width: max-content;
 }
 
-.kui-toolbar-control-group[data-single="true"] > wa-dropdown,
-.kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button,
 .kui-toolbar-control-group[data-single="true"]
   > wa-dropdown
   > wa-button::part(base) {
-  width: 3rem;
+  width: max-content;
 }
 
 .kui-toolbar-control-group wa-button {
@@ -345,7 +390,7 @@
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
-    > :is(button, wa-button, wa-dropdown, .kui-toolbar-action-link)
+    > :is(button, wa-button, wa-dropdown, wa-select, .kui-toolbar-action-link)
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -362,7 +407,7 @@
    inner layer inset from the border (KF-J9P1ZD — a heading toolbar's lone Close/
    Done action). */
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button, .kui-toolbar-action-link):only-child
+    > :is(button, wa-button, wa-select, .kui-toolbar-action-link):only-child
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -379,6 +424,15 @@
   background: transparent;
 }
 
+/* A toolbar Select beside other controls highlights its own pill on hover,
+   like its button and dropdown siblings; a lone Select instead lifts the whole
+   group (above). */
+.kui-toolbar-control-group:not([data-single="true"])
+  > wa-select:not(:only-child):hover::part(combobox) {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
 /* A plain <button> child paints its own box for the selected state. */
 .kui-toolbar-control-group[data-single="false"] > button[aria-pressed="true"] {
   border-color: var(--kui-toolbar-control-selected-border);
@@ -409,6 +463,15 @@
   outline-offset: 1px;
 }
 
+/* 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. */
+.kui-toolbar-control-group[data-focus-ring="control"]
+  > wa-select:focus-within::part(combobox) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
 .kui-toolbar-control-group[data-focus-ring="outline"]:focus-within {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
@@ -420,6 +483,22 @@
     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) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus) {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
 .kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
     > :is(button, wa-button)[aria-pressed="true"]
   ) {

package/dist/styles/toolbar-text.css

@@ -46,8 +46,11 @@
   font-size: var(--kui-font-s);
 }
 
+/* Every size keeps the inherited UI sans stack: compact identity text is a
+   label, not code. (A monospace role here resolved through Web Awesome's
+   `ui-monospace, monospace` code stack; Chromium does not
+   recognize `ui-monospace`, so small labels fell back to generic monospace.) */
 .kui-toolbar-text[data-size="small"] {
-  font-family: var(--kui-font-mono);
   font-size: var(--kui-font-xs);
 }
 

package/dist/styles/toolbar.css

@@ -1,11 +1,7 @@
 .kui-toolbar {
   display: grid;
   width: 100%;
-  min-height: calc(
-    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      (2 * var(--kui-toolbar-gap, 0.5rem))
-  );
-  padding: var(--kui-toolbar-gap, 0.5rem);
+  /* min-height and padding: see the safe-area rules below. */
   box-sizing: border-box;
   color: var(--kui-color-text);
   background: transparent;
@@ -16,6 +12,78 @@
   font-family: var(--kui-font-sans);
 }
 
+/* Safe areas: a toolbar compensates only for the inline edges its owner hands
+   it through `--kui-edge-inset-inline-*` (a Pane header or footer does), so its
+   box and dividers keep reaching the edge while its zones clear the unsafe
+   area. Unset means none: a toolbar embedded in content never pads for the
+   device. An app bar or bottom bar at a screen edge claims its sides with
+   `safeAreaEdges`; each claimed side pads by the routed edge context, or the
+   full device inset when nothing routes it (the Pane rule), so the top bar of
+   a shell clears the status area. A Pane header or footer clears the context
+   for its children, so a claimed side there never double-insets. Its zones
+   then see a cleared context. */
+.kui-toolbar {
+  --_kui-toolbar-safe-block-start: 0px;
+  --_kui-toolbar-safe-block-end: 0px;
+  --_kui-toolbar-safe-inline-start: var(--kui-edge-inset-inline-start, 0px);
+  --_kui-toolbar-safe-inline-end: var(--kui-edge-inset-inline-end, 0px);
+  /* The minimum height grows by any claimed block inset, so a toolbar a flex
+     column shrinks still keeps a whole control row clear of the unsafe area. */
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem)) +
+      var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
+  );
+  padding-block: calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-start)
+    )
+    calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-end)
+    );
+  padding-inline: calc(
+      var(--kui-toolbar-gap, 0.5rem) +
+        var(--_kui-toolbar-safe-inline-start)
+    )
+    calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-inline-end)
+    );
+}
+
+.kui-toolbar[data-safe-area-block-start="true"] {
+  --_kui-toolbar-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-block-end="true"] {
+  --_kui-toolbar-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-inline-start="true"] {
+  --_kui-toolbar-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-inline-end="true"] {
+  --_kui-toolbar-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.kui-toolbar > * {
+  --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-toolbar[data-has-center="false"] {
   grid-template-columns: minmax(0, 1fr) auto;
 }
@@ -97,6 +165,35 @@
 .kui-toolbar__trailing {
   justify-content: flex-end;
   grid-column: -2 / -1;
+  /* 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
+     overflowing the toolbar. */
+  flex-wrap: wrap;
+}
+
+/* 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,
+   inspector, and dialog headings whose identity must stay whole. */
+.kui-toolbar[data-responsive="wrap"] {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__leading {
+  max-width: 100%;
+  flex: 1 1 auto;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__center {
+  flex: 1 1 auto;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__trailing {
+  max-width: 100%;
+  flex: 0 1 auto;
+  margin-inline-start: auto;
 }
 
 .kui-toolbar[data-has-center="false"] .kui-toolbar__center,
@@ -105,59 +202,54 @@
   display: none;
 }
 
+/* Stacked topology. A container query only matches an ancestor container, so
+   these rules style the zones (whose query container is this toolbar) rather
+   than the toolbar's own grid template, which a self query can never reach.
+   Each zone spans every column track, one zone per row, so no empty track or
+   column gap narrows a stacked zone. Stacked control zones wrap at group
+   granularity (KF-4EYES0: a stacked trailing zone clipped its last action at
+   phone widths), so every group stays whole, reachable, and full size; the
+   leading identity keeps its single-line truncation. */
 @container kui-toolbar (max-width: 52rem) {
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"] {
-    height: auto;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "leading" "center" "trailing";
-    row-gap: var(--kui-toolbar-gap, 0.5rem);
-  }
-
   .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
-    > .kui-toolbar__leading,
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
-    > .kui-toolbar__center,
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
-    > .kui-toolbar__trailing {
+    > :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing) {
     width: 100%;
-    grid-column: 1;
+    grid-column: 1 / -1;
     justify-content: flex-start;
   }
-}
 
-@container kui-toolbar (max-width: 44rem) {
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"] {
-    height: auto;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "leading" "center" "trailing";
-    row-gap: var(--kui-toolbar-gap, 0.5rem);
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
+    > :is(.kui-toolbar__center, .kui-toolbar__trailing) {
+    flex-wrap: wrap;
   }
+}
 
+@container kui-toolbar (max-width: 44rem) {
   .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
-    > .kui-toolbar__leading,
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
-    > .kui-toolbar__center,
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
-    > .kui-toolbar__trailing {
+    > :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing) {
     width: 100%;
-    grid-column: 1;
+    grid-column: 1 / -1;
     justify-content: flex-start;
   }
-}
 
-@container kui-toolbar (max-width: 42rem) {
-  .kui-toolbar[data-responsive="center-priority"]:has(
-      > .kui-toolbar__center [data-expanded="true"]
-    ) {
-    grid-template-columns: minmax(0, 1fr);
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
+    > :is(.kui-toolbar__center, .kui-toolbar__trailing) {
+    flex-wrap: wrap;
   }
+}
 
+/* Center priority. As with the stacked topology, the toolbar cannot query its
+   own width, so these rules style the zones: while the center holds an expanded
+   control, the leading and trailing zones leave and the center spans every
+   column track (including the gaps the vacated tracks still own), taking the
+   whole row. */
+@container kui-toolbar (max-width: 42rem) {
   .kui-toolbar[data-responsive="center-priority"]:has(
       > .kui-toolbar__center [data-expanded="true"]
     )
     > .kui-toolbar__center {
     width: 100%;
-    grid-column: 1;
+    grid-column: 1 / -1;
   }
 
   .kui-toolbar[data-responsive="center-priority"]:has(

package/dist/styles/webawesome.css

@@ -177,8 +177,8 @@
     --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
     /* Field inset: a 1px border with 8px inside it, the same content-item
        geometry the Kerf primitives use (docs/layout.md). WA's defaults are a
-       larger 0.75em/1em pad; this brings every form field onto our 8px rhythm
-       (and a ~40px single-line control height). */
+       larger 0.75em/1em pad; this brings every form field onto our 8px rhythm.
+       The single-line control height is set on the controls below. */
     --wa-form-control-border-width: var(--kui-layout-item-border-width, 1px);
     --wa-form-control-padding-block: var(
       --kui-layout-item-padding,
@@ -193,6 +193,18 @@
     --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
     --wa-tooltip-arrow-size: 0px;
     --kui-wa-popover-arrow-size: 0px;
+    /* Web Awesome's own `ui-monospace, monospace` renders the generic face
+       (Courier) in Chromium; use Kerf's named code stack for its components. */
+    --wa-font-family-code: var(
+      --kui-font-mono,
+      ui-monospace,
+      SFMono-Regular,
+      "SF Mono",
+      Menlo,
+      Consolas,
+      "Liberation Mono",
+      monospace
+    );
     --kui-wa-carousel-dot-size: 7px;
     --kui-wa-carousel-dot-hit-size: 20px;
     --kui-wa-carousel-control-size: 28px;
@@ -403,6 +415,17 @@
     padding: var(--kui-wa-surface-inset);
   }
 
+  /* A plain-string `label` renders straight into the title part, so it would
+     sit at the bare surface inset while body content (list-inset text, Text)
+     starts one bordered item further in. Inset the default title by that item
+     step so the header label lines up with the body's text and icons. A
+     slotted label element owns its own geometry and is left alone. */
+  wa-dialog:not(:has(> [slot="label"]))::part(title) {
+    padding-inline: calc(
+      var(--kui-layout-item-padding, 0.5rem) + 0.0625rem
+    );
+  }
+
   wa-dialog::part(body) {
     padding: var(--kui-wa-surface-inset);
   }
@@ -457,6 +480,29 @@
     --arrow-size: var(--kui-wa-popover-arrow-size);
   }
 
+  /* Default-size single-line controls share Kerf's 44px control height (the
+     Select field, toolbar groups, and list rows), so a Web Awesome field,
+     button, or button radio sits flush beside a Kerf Select instead of 9px
+     shorter. The height is 2.75em of the control's own font size (44px at the
+     16px default), so size="large" grows proportionally; size="small" stays
+     Web Awesome's deliberately compact secondary control. It is scoped to the
+     controls rather than the root because Web Awesome also derives tag, copy
+     button, and toast geometry from this token. A ToolbarControlGroup still
+     sizes its own nested buttons. */
+  :is(
+    wa-button,
+    wa-color-picker,
+    wa-input,
+    wa-known-date,
+    wa-number-input,
+    wa-radio-group,
+    wa-select,
+    wa-textarea,
+    wa-time-input
+  ):not([size="small"]) {
+    --wa-form-control-height: round(2.75em, 1px);
+  }
+
   /* A form field's top label is inset by the field's own border + inline padding
      (1px + 8px = 9px) so the label text lines up with the value inside the field,
      and it is styled exactly like a ListHeader label: uppercase, xs, quiet. */

package/dist/styles/workbench.css

@@ -6,23 +6,56 @@
   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)
+  );
+  flex: 0 0 var(--_kui-workbench-rail-extent);
   min-width: 0;
   overflow: hidden;
   background: var(--kui-color-surface);
 }
 
 .kui-workbench__rail--left {
+  --_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);
 }
 
 .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);
 }
 
@@ -37,6 +70,10 @@
 }
 
 .kui-workbench__center {
+  --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;
@@ -45,16 +82,111 @@
   flex-direction: column;
 }
 
+.kui-workbench:has(
+    > .kui-workbench__rail--left[data-presentation="inline"]:not(
+        [data-collapsed="true"]
+      )
+  )
+  > .kui-workbench__center {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+.kui-workbench:has(
+    > .kui-workbench__rail--right[data-presentation="inline"]:not(
+        [data-collapsed="true"]
+      )
+  )
+  > .kui-workbench__center {
+  --kui-edge-inset-inline-end: 0px;
+}
+
 .kui-workbench__main {
   flex: 1;
   min-height: 0;
   overflow: auto;
 }
 
+.kui-workbench__main:has(
+  ~ .kui-workbench__drawer[data-presentation="inline"]:not(
+      [data-collapsed="true"]
+    )
+) {
+  --kui-edge-inset-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__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-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
+  padding-inline: var(--kui-edge-inset-inline-start)
+    var(--kui-edge-inset-inline-end);
+  scroll-padding-block: var(--kui-edge-inset-block-start)
+    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
+    )
+  )
+  > * {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
 /* Bottom drawer — the vertical analogue of a rail. */
 .kui-workbench__drawer {
+  --kui-edge-inset-block-start: 0px;
+  --_kui-workbench-drawer-extent: calc(
+    var(--kui-workbench-drawer-height, 13.75rem) +
+      var(--_kui-workbench-safe-block-end)
+  );
   position: relative;
-  flex: 0 0 var(--kui-workbench-drawer-height, 13.75rem);
+  flex: 0 0 var(--_kui-workbench-drawer-extent);
   min-height: 0;
   overflow: hidden;
   border-block-start: 1px solid var(--kui-color-border);
@@ -80,7 +212,7 @@
 /* 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;
 }
@@ -90,7 +222,7 @@
   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;
 }