@kerfjs/ui 5.0.0-beta.53 → 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);
 }
@@ -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/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 {