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

package/dist/styles/collapsible-panel.css

@@ -2,34 +2,158 @@
    to zero (one reflow, no per-frame width/height animation) while the fixed-size
    content slides out via transform (composited, clipped by overflow). The same
    technique as Workbench and the catalog sidebar (docs/18). */
+/* Safe areas: the panel docks to one screen edge, so its surface grows by
+   that edge's unsafe inset and its content compensates for every edge the
+   panel still touches, never its interior edge. An expanded inline panel also
+   takes its edge away from its direct siblings; collapsing it hands the edge
+   back. A panel wrapped in an app-owned grid cell cannot see its siblings, so
+   that app routes `--kui-edge-inset-*` itself (docs/app-layouts.md). */
 .kui-collapsible-panel {
+  --_kui-collapsible-panel-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-collapsible-panel-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-collapsible-panel-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-collapsible-panel-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
   overflow: hidden;
   background: var(--kui-color-surface);
 }
 
 .kui-collapsible-panel--left,
 .kui-collapsible-panel--right {
-  width: var(--kui-collapsible-panel-width, 17.5rem);
+  width: var(--_kui-collapsible-panel-extent);
   min-width: 0;
   height: 100%;
 }
 
 .kui-collapsible-panel--left {
+  --_kui-collapsible-panel-extent: calc(
+    var(--kui-collapsible-panel-width, 17.5rem) +
+      var(--_kui-collapsible-panel-safe-inline-start)
+  );
   border-inline-end: 1px solid var(--kui-color-border);
 }
 
 .kui-collapsible-panel--right {
+  --_kui-collapsible-panel-extent: calc(
+    var(--kui-collapsible-panel-width, 17.5rem) +
+      var(--_kui-collapsible-panel-safe-inline-end)
+  );
   border-inline-start: 1px solid var(--kui-color-border);
 }
 
 .kui-collapsible-panel--bottom {
+  --_kui-collapsible-panel-extent: calc(
+    var(--kui-collapsible-panel-height, 13.75rem) +
+      var(--_kui-collapsible-panel-safe-block-end)
+  );
   position: relative;
   width: 100%;
-  height: var(--kui-collapsible-panel-height, 13.75rem);
+  height: var(--_kui-collapsible-panel-extent);
   min-height: 0;
   border-block-start: 1px solid var(--kui-color-border);
 }
 
+/* The panel's content sees the edges it touches; its interior edge is clear. */
+.kui-collapsible-panel > .kui-collapsible-panel__content {
+  --kui-edge-inset-block-start: var(--_kui-collapsible-panel-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-collapsible-panel-safe-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-collapsible-panel-safe-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-collapsible-panel-safe-inline-end);
+}
+
+.kui-collapsible-panel--left > .kui-collapsible-panel__content {
+  --kui-edge-inset-inline-end: 0px;
+}
+
+.kui-collapsible-panel--right > .kui-collapsible-panel__content {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+.kui-collapsible-panel--bottom > .kui-collapsible-panel__content {
+  --kui-edge-inset-block-start: 0px;
+}
+
+/* Content whose only child is a Pane or layout lets that child own the insets;
+   anything else is padded here and sees a cleared context. */
+.kui-collapsible-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);
+}
+
+.kui-collapsible-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;
+}
+
+/* An expanded inline panel is the region at its edge, so its direct siblings
+   no longer reach that edge. */
+.kui-collapsible-panel--left[data-presentation="inline"]:not(
+    [data-collapsed="true"],
+    [data-collapsible-overlay="true"] *,
+    [data-collapsible-responsive="hidden"] *
+  )
+  ~ * {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+:has(
+  ~ .kui-collapsible-panel--right[data-presentation="inline"]:not(
+      [data-collapsed="true"],
+      [data-collapsible-overlay="true"] *,
+      [data-collapsible-responsive="hidden"] *
+    )
+) {
+  --kui-edge-inset-inline-end: 0px;
+}
+
+:has(
+  ~ .kui-collapsible-panel--bottom[data-presentation="inline"]:not(
+      [data-collapsed="true"],
+      [data-collapsible-overlay="true"] *,
+      [data-collapsible-responsive="hidden"] *
+    )
+) {
+  --kui-edge-inset-block-end: 0px;
+}
+
 .kui-collapsible-panel[data-collapsed="true"] {
   border: 0;
 }
@@ -65,7 +189,7 @@
 
 .kui-collapsible-panel--left .kui-collapsible-panel__content,
 .kui-collapsible-panel--right .kui-collapsible-panel__content {
-  width: var(--kui-collapsible-panel-width, 17.5rem);
+  width: var(--_kui-collapsible-panel-extent);
 }
 
 .kui-collapsible-panel--bottom .kui-collapsible-panel__content {
@@ -73,7 +197,7 @@
   inset-inline: 0;
   inset-block-end: 0;
   width: 100%;
-  height: var(--kui-collapsible-panel-height, 13.75rem);
+  height: var(--_kui-collapsible-panel-extent);
 }
 
 .kui-collapsible-panel[data-collapse-motion="none"]
@@ -164,9 +288,13 @@
   );
 }
 
+/* A button does not stretch between its insets the way a div does, so the
+   backdrop sizes itself to its containing block explicitly. */
 .kui-collapsible-panel__backdrop {
   position: fixed;
   inset: 0;
+  width: 100%;
+  height: 100%;
   z-index: var(--kui-collapsible-panel-backdrop-z, 39);
   border: 0;
   padding: 0;

package/dist/styles/document.css

@@ -0,0 +1,23 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+.kui-app-root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface-lowered);
+  font-family: var(--kui-font-sans);
+  line-height: 1.45;
+}
+
+:where(a) {
+  color: var(--kui-color-text-link);
+}

package/dist/styles/foundation.css

@@ -10,13 +10,13 @@
     "Segoe UI",
     sans-serif
   );
-  --kui-font-mono: var(
-    --wa-font-family-code,
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace
-  );
+  /* Kerf owns the code stack rather than deferring to Web Awesome's
+     `ui-monospace, monospace`: Chromium does not recognize `ui-monospace`, and
+     the generic `monospace` ends any stack, so named fallbacks after it would
+     never apply. Kerf's Web Awesome theme points `--wa-font-family-code` here. */
+  --kui-font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
   --kui-font-2xs: var(--wa-font-size-2xs, 11px);
   --kui-font-xs: var(--wa-font-size-xs, 12px);
   --kui-font-s: var(--wa-font-size-s, 14px);
@@ -64,6 +64,15 @@
   --kui-toolbar-group-inner-size: 2.625rem;
   --kui-toolbar-group-size: calc(2px + var(--kui-toolbar-group-inner-size));
   --kui-toolbar-gap: var(--kui-layout-item-gap);
+  /* Device safe-area insets, in logical terms. Panes and layouts read these
+     through the inherited `--kui-edge-inset-*` edge context: surfaces paint
+     through the unsafe area while their content gains compensating padding on
+     the edges it still touches (docs/app-layouts.md "Safe areas"). Override
+     them to simulate a device or to reserve space for app-owned chrome. */
+  --kui-safe-area-block-start: env(safe-area-inset-top, 0px);
+  --kui-safe-area-block-end: env(safe-area-inset-bottom, 0px);
+  --kui-safe-area-inline-start: env(safe-area-inset-left, 0px);
+  --kui-safe-area-inline-end: env(safe-area-inset-right, 0px);
   --kui-radius-s: var(--wa-border-radius-s, 0.1875rem);
   --kui-radius-m: var(--wa-border-radius-m, 0.375rem);
   --kui-radius-l: var(--wa-border-radius-l, 0.75rem);
@@ -386,6 +395,11 @@
   );
 }
 
+:root:dir(rtl) {
+  --kui-safe-area-inline-start: env(safe-area-inset-right, 0px);
+  --kui-safe-area-inline-end: env(safe-area-inset-left, 0px);
+}
+
 @media (prefers-contrast: more) {
   :root {
     --kui-color-pop-fill-quiet: Canvas;

package/dist/styles/grid.css

@@ -1,5 +1,9 @@
 .kui-grid {
   --kui-grid-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every Grid so a nested Grid never
+     inherits its ancestor's; the inline style overrides them per prop. */
+  --_kui-grid-gap: var(--kui-grid-gap);
+  --_kui-grid-flex: 0 1 auto;
 
   display: grid;
   min-width: 0;
@@ -9,3 +13,9 @@
   grid-template-columns: repeat(var(--_kui-grid-columns), minmax(0, 1fr));
   gap: var(--_kui-grid-gap, var(--kui-grid-gap));
 }
+
+/* `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-grid[data-fill="true"] {
+  height: 100%;
+}

package/dist/styles/list-header.css

@@ -46,6 +46,10 @@
   vertical-align: middle;
 }
 
+.kui-list-header[data-width="content"]:not([data-inline="true"]) {
+  width: auto;
+}
+
 .kui-list-header[data-inline="true"] > .kui-list-header__title,
 .kui-list-header[data-inline="true"] > .kui-list-header__action {
   vertical-align: middle;
@@ -96,66 +100,6 @@
   white-space: nowrap;
 }
 
-/* Passive labels use Text for semantic heading markup. The title wrapper
-   already owns the transparent alignment border, so avoid counting a second
-   border before Text's standard content padding. */
-.kui-list-header__label.kui-text {
-  border: 0;
-}
-
-.kui-list-header__badge {
-  display: inline-flex;
-  min-height: 1.5rem;
-  padding-inline: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  color: var(--kui-color-neutral-on-quiet);
-  background: var(--kui-color-neutral-fill-quiet);
-  align-items: center;
-  flex: none;
-  font-size: var(--kui-font-xs);
-  line-height: 1;
-}
-
-.kui-list-header__count {
-  display: inline-grid;
-  min-width: 1.35rem;
-  height: 1.35rem;
-  padding-inline: 0.35rem;
-  box-sizing: border-box;
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  color: var(--kui-color-neutral-on-quiet);
-  background: var(--kui-color-neutral-fill-quiet);
-  place-items: center;
-  flex: none;
-  font-size: var(
-    --kui-list-header-count-font-size,
-    var(--wa-font-size-3xs, 0.625rem)
-  );
-  font-weight: 700;
-  letter-spacing: 0;
-  line-height: 1;
-}
-
-.kui-list-header[data-indicator-tone="accent"]
-  :is(.kui-list-header__count, .kui-list-header__badge) {
-  color: var(--kui-color-brand-on-normal);
-  background: var(--kui-color-brand-fill-normal);
-}
-
-.kui-list-header[data-indicator-tone="pop"]
-  :is(.kui-list-header__count, .kui-list-header__badge) {
-  color: var(--kui-color-pop-on-normal);
-  background: var(--kui-color-pop-fill-normal);
-}
-
-.kui-list-header[data-indicator-tone="danger"]
-  :is(.kui-list-header__count, .kui-list-header__badge) {
-  color: var(--kui-color-danger-on-normal);
-  background: var(--kui-color-danger-fill-normal);
-}
-
 .kui-list-header__action,
 .kui-list-header__action-layer {
   display: grid;
@@ -179,11 +123,56 @@
   padding: var(--kui-layout-item-padding, 0.5rem);
   align-items: center;
   justify-content: center;
+  position: relative;
   align-self: center;
   cursor: pointer;
   flex: none;
 }
 
+/* The fitted square is the visual and hover surface; the pointer target is at
+   least 44px in both dimensions. A transparent, out-of-flow layer extends the
+   button's hit area evenly around the square without moving layout or painting
+   anything, and hovering it lights the unchanged fitted square. Standard headers
+   are 44px tall and reserve the 4px inline slot at the logical end, so the
+   extension stays inside the header; the leading 4px falls in the 8px gap before
+   the dormant title. Offsets are from the padding box, hence the extra 1px for the
+   border. */
+.kui-list-header__action::before {
+  --_kui-list-header-action-hit-outset: min(
+    0px,
+    calc((var(--_kui-list-header-action-size) - 2.75rem) / 2)
+  );
+  content: "";
+  position: absolute;
+  inset: calc(var(--_kui-list-header-action-hit-outset) - 1px);
+}
+
+/* Compact headers are 36px tall like the rest of the compact List family, so the
+   hit area widens to 44px but never reaches past the header into a neighboring
+   row or header. */
+.kui-list-header[data-density="compact"] .kui-list-header__action::before {
+  inset-block: -1px;
+}
+
+/* Trailing icon actions share one axis: a toolbar control centers its glyph in a
+   44px group slot flush with the 8px inline margin, so the fitted action centers
+   itself in a slot of that same size instead of sitting flush at the margin
+   (which put its glyph ~4px outside a Pane header's trailing toolbar glyph). The
+   slot, not the button, grows by the difference, so the fitted hover square and
+   its 18px visual are unchanged. Inline headers carry no outer geometry. */
+.kui-list-header:not([data-inline="true"]) > .kui-list-header__action {
+  margin-inline-end: max(
+    0px,
+    calc(
+      (
+          var(--kui-toolbar-group-size, calc(2px + 2.625rem)) -
+            var(--_kui-list-header-action-size)
+        ) /
+        2
+    )
+  );
+}
+
 .kui-list-header__toggle {
   padding: var(--kui-layout-item-padding, 0.5rem);
   appearance: none;

package/dist/styles/list-inset-control.css

@@ -1,11 +1,18 @@
 .kui-list-inset-control {
   display: flex;
   margin: 0;
-  justify-content: stretch;
   align-items: stretch;
   gap: 0.5rem;
 }
 
+/* `justify-content: stretch` is a no-op on a flex row, so the documented
+   stretch comes from the children: each grows from its natural width to share
+   the row, and may shrink below its intrinsic minimum instead of overflowing. */
+.kui-list-inset-control > * {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 .kui-list-inset-control[data-sides*="t"] {
   margin-top: var(--kui-layout-inline-margin, 0.5rem);
 }

package/dist/styles/list-item.css

@@ -139,6 +139,12 @@
 .kui-list-item[data-multiline="true"] {
   height: fit-content;
   white-space: normal;
+  /* Size the single grid row to its content and center that track in the
+     44px minimum, instead of stretching it. The start-aligned icon then
+     measures its first-line offset from the same edge the centered label
+     starts at; a stretched track left a short label centered 1.4px below
+     the icon's first-line position. */
+  align-content: center;
 }
 
 .kui-list-item[data-multiline="true"] .kui-list-item__label {

package/dist/styles/list.css

@@ -1,6 +1,11 @@
 .kui-list {
   --kui-list-divider-color: var(--kui-color-border);
   --kui-list-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every List so a nested List that
+     omits `gap` or `flex` never inherits its ancestor's; the component's inline
+     style overrides these defaults for the props it does set. */
+  --_kui-list-gap: 0;
+  --_kui-list-flex: 0 1 auto;
   --_kui-list-inset-top: 0;
   --_kui-list-inset-right: 0;
   --_kui-list-inset-bottom: 0;
@@ -120,3 +125,9 @@
 .kui-list[divider-sides*="l"] {
   --_kui-list-divider-left: var(--kui-list-divider-color);
 }
+
+/* `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-list[data-fill="true"] {
+  height: 100%;
+}

package/dist/styles/nav-stack.css

@@ -7,10 +7,33 @@
   overflow: hidden;
   flex-direction: column;
   background: var(--kui-color-surface);
+  /* Safe areas: the stack's surfaces paint through unsafe areas; its chrome,
+     bottom toolbar, and each view compensate for the edges the stack still
+     touches (see pane.css for the `--kui-edge-inset-*` edge context). */
+  --_kui-nav-stack-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-nav-stack-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-nav-stack-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-nav-stack-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
 }
 
 .kui-nav-stack__chrome,
 .kui-nav-stack__bottom {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
   transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
 }
 
@@ -38,8 +61,12 @@
 .kui-nav-stack__chrome {
   display: flex;
   min-width: 0;
-  min-height: calc(2px + 2.625rem);
-  padding-inline: var(--kui-space-xs);
+  min-height: calc(2px + 2.625rem + var(--_kui-nav-stack-safe-block-start));
+  padding-block-start: var(--_kui-nav-stack-safe-block-start);
+  padding-inline: calc(
+      var(--kui-space-xs) + var(--_kui-nav-stack-safe-inline-start)
+    )
+    calc(var(--kui-space-xs) + var(--_kui-nav-stack-safe-inline-end));
   align-items: center;
   gap: var(--kui-space-xs);
   background: var(--kui-color-surface);
@@ -94,12 +121,28 @@
 }
 
 .kui-nav-stack__viewport {
+  --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-nav-stack-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
   position: relative;
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
 
+/* The top chrome and the bottom toolbar own their edges; transient chrome
+   copies from a transition do not. */
+.kui-nav-stack__chrome ~ .kui-nav-stack__viewport {
+  --kui-edge-inset-block-start: 0px;
+}
+
+.kui-nav-stack__viewport:has(
+  ~ .kui-nav-stack__bottom:not(.kui-nav-stack__chrome-copy)
+) {
+  --kui-edge-inset-block-end: 0px;
+}
+
 .kui-nav-stack__view {
   position: absolute;
   overflow: auto;
@@ -108,6 +151,47 @@
   inset: 0;
 }
 
+/* Each view is its region's scroll owner: block insets become padding inside
+   the scroller so content scrolls under an unsafe edge but can always be
+   scrolled clear. A view whose only child is a Pane or layout lets that child
+   own the insets instead. */
+.kui-nav-stack__view: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-nav-stack__view: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;
+}
+
 /* Only the active view (and any view mid-exit) is shown; lower entries stay
    mounted for state/focus but hidden behind it. */
 .kui-nav-stack__view[data-nav-active="false"] {
@@ -127,6 +211,9 @@
 }
 
 .kui-nav-stack__bottom {
+  padding-block-end: var(--_kui-nav-stack-safe-block-end);
+  padding-inline: var(--_kui-nav-stack-safe-inline-start)
+    var(--_kui-nav-stack-safe-inline-end);
   border-block-start: 1px solid var(--kui-color-border);
   background: var(--kui-color-surface);
 }