@kerfjs/ui 5.0.0-beta.53 → 5.0.0-beta.55

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);
+  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/state-banner.css

@@ -179,16 +179,25 @@
   > *::before {
   content: "\200b";
 }
+/* The clip lives on an inner span, not on the detail itself. WebKit still
+   applies the CSS 2.1 rule that an inline-block whose overflow is not
+   `visible` takes its baseline from its bottom margin edge, so a clipped
+   inline-block detail rose off the title's baseline there and pushed the
+   title and badge down. An inline flex container's baseline is its first
+   item's text baseline in every engine, whatever that item's overflow. */
 .kui-state-banner__detail {
-  display: inline-block;
+  display: inline-flex;
   max-width: 100%;
-  overflow: clip;
   color: var(--_kui-state-banner-detail);
   font-size: var(--kui-font-2xs);
-  text-overflow: ellipsis;
   vertical-align: baseline;
   white-space: nowrap;
 }
+.kui-state-banner__detail > span {
+  min-width: 0;
+  overflow: clip;
+  text-overflow: ellipsis;
+}
 .kui-state-banner__action {
   justify-self: end;
 }
@@ -216,6 +225,6 @@
      relationship: a content-sized badge one item gap after the title, on the
      title's baseline. */
   .kui-state-banner__detail {
-    display: block;
+    display: flex;
   }
 }

package/dist/styles/styles.css

@@ -22,6 +22,7 @@
 @import "./loading-spinner.css";
 @import "./skeleton.css";
 @import "./select.css";
+@import "./popup-menu.css";
 @import "./segmented-control.css";
 @import "./token-search-field.css";
 @import "./state-banner.css";

package/dist/styles/tab-bar.css

@@ -18,9 +18,11 @@
 .kui-tab-bar__tabs {
   display: flex;
   min-width: 0;
-  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
-  overflow-x: auto;
+  /* Scroll along the strip only: overflow-x alone computes overflow-y to auto,
+     so any vertical excess would let the strip scroll vertically on touch. */
+  overflow: auto hidden;
   box-sizing: border-box;
   border: 1px solid var(--kui-tab-bar-border);
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
@@ -36,12 +38,38 @@
   --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);
   --kui-tab-bar-border: var(--kui-color-neutral-border-quiet);
 }
+/* A segmented strip's outer ends follow the pill track. The first tab's
+   leading corners, and a filled strip's last tab's trailing corners, are
+   pill-rounded, and a compact tab is inset from the track's ends by the same
+   distance as from its top and bottom, so each end is concentric with the
+   track. Only fill allocation carries the last tab to the track's trailing
+   end; an intrinsic strip's last tab stops short of it and keeps the segment
+   radius, as do the corners between tabs. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs:has(> [data-component="app-tab"][data-size="compact"]) {
+  padding-inline: calc(
+    (var(--kui-toolbar-group-size, calc(2px + 2.625rem)) - 2rem) /
+      2 - 1px
+  );
+}
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs
+  > [data-component="app-tab"]:first-child {
+  border-start-start-radius: var(--kui-radius-pill);
+  border-end-start-radius: var(--kui-radius-pill);
+}
+.kui-tab-bar[data-presentation="segmented"][data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > [data-component="app-tab"]:last-child {
+  border-start-end-radius: var(--kui-radius-pill);
+  border-end-end-radius: var(--kui-radius-pill);
+}
 .kui-tab-bar[data-presentation="inspector"] {
   min-height: 2.125rem;
   padding: 0;
 }
 .kui-tab-bar[data-presentation="inspector"] .kui-tab-bar__tabs {
-  height: 2.125rem;
+  min-height: 2.125rem;
   border-radius: var(--kui-radius-s);
 }
 .kui-tab-bar[data-allocation="fill"] [data-component="app-tab"] {

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 {

package/dist/styles/toolbar.css

@@ -6,7 +6,7 @@
   color: var(--kui-color-text);
   background: transparent;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
+  align-items: start;
   gap: var(--kui-toolbar-gap, 0.5rem);
   container: kui-toolbar / inline-size;
   font-family: var(--kui-font-sans);
@@ -128,15 +128,56 @@
   );
 }
 
+/* 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