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

package/dist/styles/pane.css

@@ -21,6 +21,47 @@
   grid-template-rows: auto minmax(0, 1fr) auto;
 }
 
+/* Safe areas. The pane root never pads, so its background and separators paint
+   through an unsafe area; its slots compensate on the edges the pane still
+   touches. The inherited `--kui-edge-inset-*` context says how far each edge
+   still reaches into an unsafe area: layouts clear an edge a region does not
+   reach, and an unset edge means the full device inset. Every slot clears the
+   context once it has applied it, so nested content never double-insets. */
+.kui-pane {
+  --_kui-pane-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-pane-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-pane-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-pane-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.kui-pane[data-safe-area-block-start="false"] {
+  --_kui-pane-safe-block-start: 0px;
+}
+
+.kui-pane[data-safe-area-block-end="false"] {
+  --_kui-pane-safe-block-end: 0px;
+}
+
+.kui-pane[data-safe-area-inline-start="false"] {
+  --_kui-pane-safe-inline-start: 0px;
+}
+
+.kui-pane[data-safe-area-inline-end="false"] {
+  --_kui-pane-safe-inline-end: 0px;
+}
+
 .kui-pane[data-separator-block-start="true"] {
   --kui-pane-separator-block-start-width: var(--kui-pane-separator-width, 1px);
 }
@@ -37,26 +78,70 @@
   --kui-pane-separator-inline-end-width: var(--kui-pane-separator-width, 1px);
 }
 
+/* Child selectors outrank the `.kui-content` reset the content slot also carries. */
+.kui-pane > :is(.kui-pane__header, .kui-pane__content, .kui-pane__footer) {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+  padding-inline: var(--_kui-pane-safe-inline-start)
+    var(--_kui-pane-safe-inline-end);
+}
+
 .kui-pane__header,
 .kui-pane__toolbar {
   display: flex;
   min-width: 0;
+  padding-block-start: var(--_kui-pane-safe-block-start);
   flex-direction: column;
   grid-area: header;
 }
 
+/* A header or footer holding only a Toolbar hands the toolbar its inline edges
+   instead of padding around it, so the toolbar's dividers still reach the
+   pane edge while its controls clear the unsafe area. */
+.kui-pane
+  > :is(.kui-pane__header, .kui-pane__footer):has(
+    > [data-component="toolbar"]:only-child
+  ) {
+  --kui-edge-inset-inline-start: var(--_kui-pane-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-pane-safe-inline-end);
+  padding-inline: 0;
+}
+
+/* The scrolling content takes the block insets as padding inside the scroller
+   (and matching scroll padding), so content scrolls under an unsafe edge yet
+   its first and last items can always be scrolled clear of it. A header or
+   footer already owns that edge. */
 .kui-pane__content {
+  --_kui-pane-content-block-start: var(--_kui-pane-safe-block-start);
+  --_kui-pane-content-block-end: var(--_kui-pane-safe-block-end);
   min-width: 0;
   min-height: 0;
-  padding: 0;
   overflow: auto;
   grid-area: content;
   overscroll-behavior: contain;
+  scroll-padding-block: var(--_kui-pane-content-block-start)
+    var(--_kui-pane-content-block-end);
+}
+
+.kui-pane > .kui-pane__content {
+  padding-block: var(--_kui-pane-content-block-start)
+    var(--_kui-pane-content-block-end);
+}
+
+.kui-pane__header ~ .kui-pane__content {
+  --_kui-pane-content-block-start: 0px;
+}
+
+.kui-pane__content:has(~ .kui-pane__footer) {
+  --_kui-pane-content-block-end: 0px;
 }
 
 .kui-pane__footer {
   display: flex;
   min-width: 0;
+  padding-block-end: var(--_kui-pane-safe-block-end);
   flex-direction: column;
   grid-area: footer;
 }

package/dist/styles/resizable-region.css

@@ -2,15 +2,25 @@
   --kui-resizable-region-separator-color: var(--kui-color-border);
   --kui-resizable-region-handle-color: var(--kui-color-neutral-on-quiet);
   --kui-resizable-region-handle-active-color: var(--kui-color-text-link);
+  /* Extra track a horizontal region adds when it reaches an unsafe screen edge,
+     so its surface paints through the unsafe area while its committed size
+     stays the content width. A composing layout sets it on the region (a
+     SplitView list does); it never inherits into a nested region. */
+  --kui-resizable-region-edge-extent: 0px;
   position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
 }
 .kui-resizable-region[data-axis="horizontal"] {
-  width: var(--kui-resizable-region-size);
+  width: calc(
+    var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
+  );
   height: 100%;
-  flex: 0 0 var(--kui-resizable-region-size);
+  flex: 0 0
+    calc(
+      var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
+    );
 }
 .kui-resizable-region[data-axis="vertical"] {
   width: 100%;
@@ -21,12 +31,25 @@
 .kui-resizable-region[data-collapsed="true"] {
   overflow: visible;
 }
+/* The content spans the whole region, like the separator does. A vertical
+   stack keeps several children at their natural height, while a lone child —
+   typically a Pane or a layout — fills the region, so it owns its scrolling
+   and reaches the region's far edge. */
 .kui-resizable-region__content {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
 }
+.kui-resizable-region[data-axis="vertical"] > .kui-resizable-region__content {
+  flex-grow: 1;
+}
+.kui-resizable-region__content > :only-child {
+  flex: 1 1 auto;
+  min-height: 0;
+}
 .kui-resizable-region[data-content-overflow="auto"]
   > .kui-resizable-region__content {
   overflow: auto;
@@ -62,8 +85,14 @@
     [data-collapse-motion="none"]
   )
   > .kui-resizable-region__content {
-  width: var(--kui-resizable-region-expanded-size);
-  min-width: var(--kui-resizable-region-expanded-size);
+  width: calc(
+    var(--kui-resizable-region-expanded-size) +
+      var(--kui-resizable-region-edge-extent)
+  );
+  min-width: calc(
+    var(--kui-resizable-region-expanded-size) +
+      var(--kui-resizable-region-edge-extent)
+  );
 }
 .kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
     [data-collapse-motion="none"]
@@ -72,6 +101,25 @@
   height: var(--kui-resizable-region-expanded-size);
   min-height: var(--kui-resizable-region-expanded-size);
 }
+/* While expanded, the sliding content follows the region's actual track, so a
+   region its parent clamps (a max-width, a narrow container) never shows
+   content past its separator. The fixed expanded size above only matters once
+   the track collapses to zero and the content slides out. */
+.kui-resizable-region[data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapsed="true"]
+  )
+  > .kui-resizable-region__content {
+  width: 100%;
+  min-width: 0;
+}
+.kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapsed="true"]
+  )
+  > .kui-resizable-region__content {
+  height: auto;
+  min-height: 0;
+  flex: 1 1 0;
+}
 .kui-resizable-region[data-axis="horizontal"][data-edge="end"][data-collapsed="true"]
   > .kui-resizable-region__content {
   transform: translateX(-100%);
@@ -259,14 +307,54 @@
   .kui-resizable-region__handle {
   top: -10px;
 }
+/* wireResizableRegions sets data-handle-inset when a parent clamps the track
+   and the separator has less room past it than the handle's overhang, which
+   puts it at the parent's edge. The handle then sits wholly inside the region
+   and keeps its separator line on the region's edge, so a clipping ancestor
+   never cuts off half of the hit target or its focus ring. */
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
+  > .kui-resizable-region__handle {
+  right: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
+  > .kui-resizable-region__handle::before {
+  right: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="start"]
+  > .kui-resizable-region__handle {
+  left: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="start"]
+  > .kui-resizable-region__handle::before {
+  left: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="end"]
+  > .kui-resizable-region__handle {
+  bottom: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="end"]
+  > .kui-resizable-region__handle::before {
+  bottom: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="start"]
+  > .kui-resizable-region__handle {
+  top: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="start"]
+  > .kui-resizable-region__handle::before {
+  top: 0;
+}
 .kui-resizable-region__handle:hover,
 .kui-resizable-region__handle:focus-visible {
   color: var(--kui-resizable-region-handle-active-color);
 }
+/* The ring stays wholly inside the handle's box (the focus ring is 3px).
+   The handle runs the region's full length, and those ends usually meet a
+   clipping ancestor's edge, which would otherwise shave the ring there. */
 .kui-resizable-region__handle:focus-visible {
   border-radius: var(--kui-radius-s);
   outline: var(--kui-focus-ring);
-  outline-offset: -2px;
+  outline-offset: -3px;
 }
 .kui-resizable-region__handle-icon {
   position: relative;

package/dist/styles/row.css

@@ -1,5 +1,9 @@
 .kui-row {
   --kui-row-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every Row so a nested Row never
+     inherits its ancestor's; the inline style overrides them per prop. */
+  --_kui-row-gap: var(--kui-row-gap);
+  --_kui-row-flex: 0 1 auto;
   --_kui-row-inset-top: 0;
   --_kui-row-inset-right: 0;
   --_kui-row-inset-bottom: 0;
@@ -99,3 +103,9 @@
   align-items: baseline;
   align-content: baseline;
 }
+
+/* `fill`: the layout root of a definite-height parent (an app root or a
+   fixed-height frame) takes its full height. Inside a flex layout use `flex`. */
+.kui-row[data-fill="true"] {
+  height: 100%;
+}

package/dist/styles/select.css

@@ -39,13 +39,48 @@
   outline: none;
   box-shadow: none;
 }
+/* An icon-only trigger shows the selected icon and the disclosure caret as one
+   pill, the same control family as a toolbar popup-menu dropdown (an icon +
+   caret wa-button): symmetric 8px inline padding, 12px from the icon to the
+   caret's 20px box, the caret glyph size, and the control height, so the icon
+   sits left of center to balance the caret. Inside a ToolbarControlGroup the
+   trigger takes the group's control-slot height, overlap, and radius
+   (`--_kui-toolbar-slot-*`) so it is inset evenly on every side, the group
+   sizes to the trigger (wider than tall), and the group-owned focus ring
+   stays concentric with it. */
 .kui-select[data-selected-presentation="icon-only"] {
-  width: 2rem;
+  --_kui-select-height: 2.75rem;
+  width: max-content;
+}
+.kui-select[data-selected-presentation="icon-only"][data-size="compact"] {
+  --_kui-select-height: 2rem;
 }
 .kui-select[data-selected-presentation="icon-only"]::part(combobox) {
-  width: 2rem;
-  min-width: 2rem;
-  padding-inline: 0.4375rem;
+  min-height: var(--_kui-toolbar-slot-height, var(--_kui-select-height));
+  padding-inline: 0.5rem;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+}
+/* Only a lone trigger takes the group's slot overlap and radius; beside
+   sibling controls it keeps the group's gap, end insets, and item radius, as
+   they do. */
+.kui-select[data-selected-presentation="icon-only"]:only-child {
+  margin-inline: calc(var(--_kui-toolbar-slot-overlap, 0px) * -1);
+}
+.kui-select[data-selected-presentation="icon-only"]:only-child::part(combobox) {
+  border-radius: var(
+    --_kui-toolbar-slot-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+}
+/* The popup-menu wa-button draws the same chevron glyph at 0.875em inside a
+   20px box; match its box, spacing, and glyph size rather than the smaller
+   form-field disclosure scale. */
+.kui-select[data-selected-presentation="icon-only"]::part(expand-icon) {
+  margin-inline-start: 0.75rem;
+  transform: scale(0.875);
 }
 .kui-select[data-selected-presentation="icon-only"]::part(display-input) {
   position: absolute;

package/dist/styles/split-view.css

@@ -5,6 +5,26 @@
   height: 100%;
   overflow: hidden;
   background: var(--kui-color-surface);
+  /* Safe areas: the list column grows by the inline-start unsafe inset and each
+     pane compensates only for the edges it touches — never the shared interior
+     edge. The compact form hands the context to its NavStack. See pane.css for
+     the `--kui-edge-inset-*` edge context. */
+  --_kui-split-view-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-split-view-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-split-view-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-split-view-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
 }
 
 /* The list pane; when not resizable it takes an intrinsic column and the detail
@@ -13,7 +33,10 @@
   min-width: 0;
   min-height: 0;
   flex: 0 0 auto;
-  width: var(--kui-split-view-list-width, 20rem);
+  width: calc(
+    var(--kui-split-view-list-width, 20rem) +
+      var(--_kui-split-view-safe-inline-start)
+  );
   border-inline-end: 1px solid var(--kui-color-border);
 }
 
@@ -28,6 +51,89 @@
   min-height: 0;
 }
 
+/* A resizable list keeps its committed size as content width; its region's
+   track grows by the unsafe inset it reaches. A collapsed region stays shut. */
+.kui-split-view[data-split-mode="split"]
+  > [data-component="resizable-region"]:not([data-collapsed="true"]) {
+  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
+}
+
+.kui-split-view__list,
+.kui-split-view__detail {
+  --kui-edge-inset-block-start: var(--_kui-split-view-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-split-view-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-split-view-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-split-view-safe-inline-end);
+}
+
+.kui-split-view__list {
+  --kui-edge-inset-inline-end: 0px;
+}
+
+.kui-split-view__detail {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+/* Each pane pads for the edges it touches unless its only child is a Pane or
+   layout, which then owns the insets. */
+.kui-split-view__list:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+),
+.kui-split-view__detail: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);
+}
+
+.kui-split-view__list:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  )
+  > *,
+.kui-split-view__detail: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;
+}
+
 /* Compact mode is a full-bleed NavStack. */
 .kui-split-view--compact {
   display: block;

package/dist/styles/tab-scaffold.css

@@ -6,9 +6,32 @@
   overflow: hidden;
   flex-direction: column;
   background: var(--kui-color-surface);
+  /* Safe areas: the scenes and the bar paint through unsafe areas; the bar
+     compensates for the bottom and inline edges, and the scenes for the top
+     and inline edges (see pane.css for the `--kui-edge-inset-*` context). */
+  --_kui-tab-scaffold-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-tab-scaffold-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-tab-scaffold-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-tab-scaffold-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
 }
 
 .kui-tab-scaffold__scenes {
+  --kui-edge-inset-block-start: var(--_kui-tab-scaffold-safe-block-start);
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: var(--_kui-tab-scaffold-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-tab-scaffold-safe-inline-end);
   position: relative;
   flex: 1;
   min-height: 0;
@@ -23,6 +46,44 @@
   inset: 0;
 }
 
+/* A scene is its region's scroll owner, so its top inset is padding inside
+   the scroller. A scene whose only child is a Pane or layout (usually a
+   NavStack) lets that child own the insets instead. */
+.kui-tab-scaffold__scene: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-start: var(--kui-edge-inset-block-start);
+  padding-inline: var(--kui-edge-inset-inline-start)
+    var(--kui-edge-inset-inline-end);
+  scroll-padding-block-start: var(--kui-edge-inset-block-start);
+}
+
+.kui-tab-scaffold__scene: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;
+}
+
 .kui-tab-scaffold__scene[data-active="false"] {
   visibility: hidden;
 }
@@ -33,8 +94,10 @@
   padding-block-start: var(--kui-space-2xs);
   /* Respect the home-indicator safe area on iOS-class devices. */
   padding-block-end: calc(
-    var(--kui-space-2xs) + env(safe-area-inset-bottom, 0px)
+    var(--kui-space-2xs) + var(--_kui-tab-scaffold-safe-block-end)
   );
+  padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
+    var(--_kui-tab-scaffold-safe-inline-end);
   border-block-start: 1px solid var(--kui-color-border);
   background: var(--kui-color-surface);
 }

package/dist/styles/text.css

@@ -24,3 +24,9 @@
 .kui-text[data-border="none"] {
   border: 0;
 }
+
+span.kui-text {
+  margin: 0;
+  border: 0;
+  padding: 0;
+}