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

package/dist/styles/workbench.css

@@ -1,5 +1,8 @@
 .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;
@@ -39,6 +42,9 @@
     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;
@@ -69,7 +75,10 @@
   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);
@@ -185,6 +194,7 @@
     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;
@@ -253,16 +263,197 @@
   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;
+}
+
+/* Where the engine can extend a clip past the panel's edge, an expanded
+   panel lets exactly the handle's outer half through, so the hit target
+   straddles the separator like a ResizableRegion handle does. Collapsing drops
+   the margin again before the content slides out. */
+@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);
-  max-width: var(--kui-workbench-overlay-max-width, 85vw);
-  max-height: var(--kui-workbench-overlay-max-height, 85vh);
-  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+  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;
 }
 
@@ -274,41 +465,312 @@
   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;
 }
 
+/* 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:has(
+  > .kui-workbench__rail[data-responsive-overlay-at],
+  > .kui-workbench__center > .kui-workbench__drawer[data-responsive-overlay-at]
+) {
+  container: kui-workbench / inline-size;
+}
+
+@container kui-workbench (max-width: 44rem) {
+  .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);
+  }
+
+  .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:has(
+      > .kui-workbench__rail--left[data-responsive-overlay-at="narrow"][data-presentation="inline"]
+    )
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  }
+
+  .kui-workbench:has(
+      > .kui-workbench__rail--right[data-responsive-overlay-at="narrow"][data-presentation="inline"]
+    )
+    > .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);
+  }
+
+  .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:has(
+    ~ .kui-workbench__drawer[data-responsive-overlay-at="narrow"][data-presentation="inline"]
+  ) {
+    --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  }
+}
+
+@container kui-workbench (max-width: 28rem) {
+  .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);
+  }
+
+  .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:has(
+      > .kui-workbench__rail--left[data-responsive-overlay-at="compact"][data-presentation="inline"]
+    )
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  }
+
+  .kui-workbench:has(
+      > .kui-workbench__rail--right[data-responsive-overlay-at="compact"][data-presentation="inline"]
+    )
+    > .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);
+  }
+
+  .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:has(
+    ~ .kui-workbench__drawer[data-responsive-overlay-at="compact"][data-presentation="inline"]
+  ) {
+    --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  }
+}
+
+/* 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 {
-  position: fixed;
-  z-index: var(--kui-workbench-restore-z, 42);
+  --_kui-workbench-restore-inset: var(
+    --kui-workbench-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-workbench-restore-z,
+    calc(var(--kui-workbench-overlay-z, 41) - 2)
+  );
   inset-block-end: calc(
-    var(--kui-workbench-restore-inset, 1rem) +
-      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+    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, 1rem) +
-      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+    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, 1rem) +
-      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+    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)
   );
 }
 

package/dist/toolbar-text.js

@@ -1,4 +1,4 @@
-export { ToolbarText } from './chunk-YZV2PTY4.js';
+export { ToolbarText } from './chunk-TZ5IHWB2.js';
 
 
 

package/dist/value-table.js

@@ -1,4 +1,4 @@
-export { ValueTable, ValueTableRow } from './chunk-2S7OWAEV.js';
+export { ValueTable, ValueTableRow } from './chunk-44IG7PFV.js';
 
 
 

package/dist/wire-resizable-regions.d.ts

@@ -9,7 +9,8 @@ interface WireResizableRegionsOptions {
     onPreview?: (change: ResizeCommit) => void;
     onCommit: (change: ResizeCommit) => void;
 }
+
 /** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */
-declare function wireResizableRegions(root: HTMLElement, { step, largeStep, onPreview, onCommit, }: WireResizableRegionsOptions): () => void;
+declare function wireResizableRegions(root: HTMLElement, options: WireResizableRegionsOptions): () => void;
 
 export { type ResizeCommit, type WireResizableRegionsOptions, wireResizableRegions };

package/dist/wire-resizable-regions.js

@@ -1,4 +1,5 @@
-export { wireResizableRegions } from './chunk-EKYZCRCX.js';
+export { wireResizableRegions } from './chunk-XQV2B4IL.js';
+
 
 
 //# sourceMappingURL=wire-resizable-regions.js.map

package/dist/wire-tab-bars.js

@@ -1,3 +1,3 @@
-export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
+export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
 
 //# sourceMappingURL=wire-tab-bars.js.map