@kerfjs/ui 5.0.0-beta.7 → 5.0.0-beta.71

package/dist/styles/content-item.css

@@ -0,0 +1,75 @@
+/* One self-contained content-item: 8px inline margin, a real 1px border
+   (transparent unless framed), 8px padding, and a rounded or pill radius.
+   Rendered by ContentItem; the classes stay public for other elements. */
+
+.kui-content-item {
+  min-width: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: var(--kui-layout-item-border-width, 1px) solid
+    var(--kui-content-item-border, transparent);
+  border-radius: var(
+    --kui-content-item-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+  background: var(--kui-content-item-background, transparent);
+}
+
+.kui-content-item--pill {
+  --kui-content-item-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+}
+
+.kui-content-item--flush {
+  padding-block: 0;
+  border-block-width: 0;
+}
+
+/* A visible frame for a content item that marks a real distinction: the
+   standard neutral border, same geometry (the border is always reserved). */
+.kui-content-item--framed {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+}
+
+.kui-content-item[data-interactive="true"] {
+  color: var(--kui-color-neutral-on-normal);
+  cursor: pointer;
+}
+
+.kui-content-item[data-interactive="true"]:hover:not(
+    [data-disabled="true"],
+    [data-selected="true"]
+  ),
+.kui-content-item[data-interactive="true"][data-kui-pressed="true"]:not(
+    [data-selected="true"]
+  ) {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+  --kui-content-item-background: var(--kui-color-neutral-fill-normal);
+}
+
+.kui-content-item[data-interactive="true"]:active:not([data-disabled="true"]) {
+  --kui-content-item-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-normal) 75%,
+    var(--kui-color-neutral-fill-loud)
+  );
+}
+
+.kui-content-item[data-interactive="true"][data-selected="true"] {
+  --kui-content-item-border: var(--kui-color-brand-border-quiet);
+  --kui-content-item-background: var(--kui-color-brand-fill-normal);
+}
+
+.kui-content-item[data-interactive="true"]:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-content-item[data-interactive="true"][data-disabled="true"] {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 0.58;
+  cursor: not-allowed;
+}

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/floating-toolbar.css

@@ -0,0 +1,119 @@
+.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,
+     on the toolbar or on an ancestor composition boundary. */
+  --_kui-floating-toolbar-inset: var(
+    --kui-floating-toolbar-inset,
+    var(--kui-space-m, 1rem)
+  );
+  --_kui-floating-toolbar-safe-block-start: 0px;
+  --_kui-floating-toolbar-safe-block-end: 0px;
+  --_kui-floating-toolbar-safe-inline-start: 0px;
+  --_kui-floating-toolbar-safe-inline-end: 0px;
+
+  /* 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
+     dark so the controls read as one distinct floating layer over any theme. */
+  position: absolute;
+  z-index: 4;
+  /* A layout whose open side overlay covers this toolbar's region (a
+     Workbench rail, a CollapsiblePanel, a ResizableRegion) provides its own
+     covered context to that region, and the toolbar hides — out of the tab
+     order and the accessibility tree — rather than risk painting over the
+     overlay. Any enclosing layout's covered context hides it. */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
+  display: flex;
+  color-scheme: dark;
+  align-items: center;
+  gap: var(--kui-space-xs, 0.5rem);
+}
+
+.kui-floating-toolbar[data-safe-area-insets="true"] {
+  --_kui-floating-toolbar-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-floating-toolbar-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-floating-toolbar-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-floating-toolbar-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+/* In a layout's restore corner the corner already owns the inset, so the
+   toolbar floats from the corner itself. Zero specificity: the toolbar's own
+   `inset` (or an app rule on the toolbar) still wins, while a token inherited
+   from outside the corner does not. */
+:where(
+    .kui-workbench__restore,
+    .kui-collapsible-panel__restore,
+    .kui-resizable-region__restore
+  )
+  :where(.kui-floating-toolbar) {
+  --kui-floating-toolbar-inset: 0px;
+}
+
+.kui-floating-toolbar[data-position^="bottom"] {
+  inset-block-end: calc(
+    var(
+        --kui-floating-toolbar-inset-block-end,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-block-end)
+  );
+}
+
+.kui-floating-toolbar[data-position^="top"] {
+  inset-block-start: calc(
+    var(
+        --kui-floating-toolbar-inset-block-start,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-block-start)
+  );
+}
+
+.kui-floating-toolbar[data-position$="-end"] {
+  inset-inline-end: calc(
+    var(
+        --kui-floating-toolbar-inset-inline-end,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-inline-end)
+  );
+}
+
+.kui-floating-toolbar[data-position$="-start"] {
+  inset-inline-start: calc(
+    var(
+        --kui-floating-toolbar-inset-inline-start,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-inline-start)
+  );
+}
+
+/* The centered edges span from the middle rather than an inline edge. */
+.kui-floating-toolbar[data-position="bottom"],
+.kui-floating-toolbar[data-position="top"] {
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+.kui-floating-toolbar[data-placement="inline"] {
+  position: static;
+  transform: none;
+}

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);
@@ -58,25 +58,70 @@
   --kui-layout-content-gap: var(--kui-space-l);
   --kui-layout-control-gap: var(--kui-space-xs);
   --kui-layout-metadata-gap: var(--kui-space-2xs);
+  --kui-layout-highlight-inset: 2px;
   --kui-layout-rounded-radius: calc(1px + 0.6875rem);
   --kui-layout-pill-radius: calc(1px + 1.3125rem);
   --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);
   --kui-radius-circle: var(--wa-border-radius-circle, 50%);
   --kui-radius-pill: var(--wa-border-radius-pill, 999px);
   --kui-disclosure-icon-scale: 0.5;
+  /* Private popup-choice contract. A Select's listbox and a PopupMenu's menu
+     both read these, so a value list and a command menu draw one surface
+     inset, one row geometry (Web Awesome's option metrics plus Kerf's label
+     rhythm), one reserved check column, one current-row fill, one group-title
+     style, and one disclosure-caret motion. The em values resolve against the
+     row that reads them. */
+  --_kui-popup-inset: 0.25rem;
+  --_kui-popup-row-gap: 0.125rem;
+  --_kui-popup-row-padding-block: 0.5em;
+  --_kui-popup-row-padding-inline-start: 0.25em;
+  --_kui-popup-row-padding-inline-end: 1em;
+  --_kui-popup-row-check-width: calc(
+    2 * var(--wa-font-size-smaller, round(calc(1em / 1.125), 1px))
+  );
+  --_kui-popup-row-icon-size: 1rem;
+  --_kui-popup-row-icon-gap: 0.5rem;
+  --_kui-popup-row-label-padding-block: 0.35rem;
+  --_kui-popup-row-label-line-height: 1.25;
+  --_kui-popup-row-current-background: var(--kui-color-brand-fill-normal);
+  /* Current row text sits on the brand fill; the darker on-fill accent clears
+     WCAG AA there (brand-on-quiet is 4.26:1 over that fill). */
+  --_kui-popup-row-current-color: var(--kui-color-brand-on-fill);
+  --_kui-popup-group-title-padding: 0.2rem 0.75rem 0.3rem;
+  --_kui-popup-group-title-font-weight: 750;
+  --_kui-popup-caret-open-rotation: -180deg;
+  --_kui-popup-caret-transition: rotate var(--wa-transition-slow, 0.3s)
+    var(--wa-transition-easing, ease);
   /* macOS Tahoe light semantics used by Hot Sheet 2, with a compatible dark extension. */
+  /* Every --kui-color-* token (and the focus-ring color) that reads a --wa-*
+     token falls back to the value src/webawesome.css assigns to that token,
+     including its light-dark() pair, so a page without the Web Awesome theme
+     resolves the same palette in both color schemes. A single light color
+     here would render, e.g., dark red danger text on a dark surface, and a
+     fallback that points at a different token (surface-raised at the surface,
+     text-link at the brand fill) silently diverges from the theme.
+     tests/browser/tone-contrast.spec.ts pins the parity for every token. */
   --kui-color-surface: var(
     --wa-color-surface-default,
     light-dark(#fff, #1c1c1e)
   );
   --kui-color-surface-raised: var(
     --wa-color-surface-raised,
-    var(--kui-color-surface)
+    light-dark(#fff, #2c2c2e)
   );
   --kui-color-surface-lowered: var(
     --wa-color-surface-lowered,
@@ -89,7 +134,7 @@
   );
   --kui-color-text-link: var(
     --wa-color-text-link,
-    var(--kui-color-brand-fill-loud)
+    var(--kui-color-brand-on-quiet)
   );
 
   --kui-color-neutral-fill-quiet: var(
@@ -106,7 +151,7 @@
   );
   --kui-color-neutral-border-quiet: var(
     --wa-color-neutral-border-quiet,
-    var(--kui-color-neutral-fill-normal)
+    light-dark(#e5e5ea, #38383a)
   );
   --kui-color-neutral-border-normal: var(
     --wa-color-neutral-border-normal,
@@ -131,7 +176,7 @@
 
   --kui-color-brand-fill-loud: var(
     --wa-color-brand-fill-loud,
-    light-dark(#0088ff, #64d2ff)
+    light-dark(#0075db, #64d2ff)
   );
   --kui-color-brand-fill-quiet: var(
     --wa-color-brand-fill-quiet,
@@ -169,15 +214,60 @@
     --wa-color-brand-border-loud,
     var(--kui-color-brand-fill-loud)
   );
+  /* The light brand/success/warning on-quiet values are Kerf-owned (mirrored
+     in src/webawesome.css): each is the Hot Sheet 2 hue darkened just enough to
+     clear WCAG AA (>=4.5:1) on the lowered page background (#f2f2f7), not only
+     on the white surface. The prior #1e6ef4 / #008932 / #a16a00 reached ~4.1:1
+     there. Brand #0c62f3 is 4.64:1, success #007f2e 4.62:1, warning #966200
+     4.65:1 on the page (5.2:1 on white). */
   --kui-color-brand-on-quiet: var(
     --wa-color-brand-on-quiet,
-    light-dark(#1e6ef4, #8acbff)
+    light-dark(#0c62f3, #8acbff)
   );
   --kui-color-brand-on-normal: var(
     --wa-color-brand-on-normal,
     var(--kui-color-brand-on-quiet)
   );
-  --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
+  --kui-color-brand-on-loud: var(
+    --wa-color-brand-on-loud,
+    light-dark(#fff, #111113)
+  );
+  /* Brand accent text placed directly ON a brand fill (quiet or normal), such as
+     the info StateBanner and Select's current option. Darker than brand-on-quiet
+     so it clears WCAG AA (>=4.5:1): brand-on-quiet (#0c62f3) resolves to only
+     4.26:1 over brand-fill-normal (#d6ecff), while #1a5dcf (same hue) clears
+     ~4.9:1 there and ~5.5:1 over brand-fill-quiet (#ebf6ff). The dark value
+     matches brand-on-quiet, which already passes over the dark fills. */
+  --kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
+
+  /* Pop is attractive emphasis without status meaning: use it for featured,
+     novel, or celebratory content, never as a success/danger substitute. */
+  --kui-color-pop-fill-loud: light-dark(#af34d4, #da8fff);
+  --kui-color-pop-fill-quiet: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 10%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-fill-normal: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 18%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-quiet: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 36%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-normal: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 58%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-loud: var(--kui-color-pop-fill-loud);
+  --kui-color-pop-on-quiet: light-dark(#792498, #e8a5ff);
+  --kui-color-pop-on-normal: var(--kui-color-pop-on-quiet);
+  --kui-color-pop-on-loud: light-dark(#fff, #241126);
+  --kui-color-pop-on-fill: var(--kui-color-pop-on-quiet);
 
   --kui-color-success-fill-loud: var(--wa-color-success-fill-loud, #34c759);
   --kui-color-success-fill-quiet: var(
@@ -220,9 +310,20 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-success-on-quiet: var(--wa-color-success-on-quiet, #008932);
-  --kui-color-success-on-normal: var(--wa-color-success-on-normal, #006d28);
-  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #fff);
+  --kui-color-success-on-quiet: var(
+    --wa-color-success-on-quiet,
+    light-dark(#007f2e, #63e685)
+  );
+  --kui-color-success-on-normal: var(
+    --wa-color-success-on-normal,
+    light-dark(#006d28, #8cea9f)
+  );
+  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #1d1d1f);
+  /* Success text placed ON a success fill (e.g. the success StateBanner). Darker
+     than success-on-quiet for margin over success-fill-quiet (#e3f7e8): the
+     original on-quiet #008932 reached only 4.05:1 there and today's #007f2e sits
+     at 4.60:1, while #00792c clears ~5:1. Dark matches success-on-quiet. */
+  --kui-color-success-on-fill: light-dark(#00792c, #63e685);
 
   --kui-color-warning-fill-loud: var(--wa-color-warning-fill-loud, #ffcc00);
   --kui-color-warning-fill-quiet: var(
@@ -265,11 +366,25 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-warning-on-quiet: var(--wa-color-warning-on-quiet, #a16a00);
-  --kui-color-warning-on-normal: var(--wa-color-warning-on-normal, #5f3f00);
+  --kui-color-warning-on-quiet: var(
+    --wa-color-warning-on-quiet,
+    light-dark(#966200, #ffd84a)
+  );
+  --kui-color-warning-on-normal: var(
+    --wa-color-warning-on-normal,
+    light-dark(#5f3f00, #ffe27a)
+  );
   --kui-color-warning-on-loud: var(--wa-color-warning-on-loud, #1d1d1f);
+  /* Warning text placed ON a warning fill (e.g. the warning StateBanner). Darker
+     than warning-on-quiet for margin over warning-fill-quiet (#fffae8): the
+     original on-quiet #a16a00 reached only 4.39:1 there (today's #966200 is
+     4.97:1), while #8f5e00 clears ~5.3:1. Dark matches warning-on-quiet. */
+  --kui-color-warning-on-fill: light-dark(#8f5e00, #ffd84a);
 
-  --kui-color-danger-fill-loud: var(--wa-color-danger-fill-loud, #ff383c);
+  --kui-color-danger-fill-loud: var(
+    --wa-color-danger-fill-loud,
+    light-dark(#eb0005, #ff383c)
+  );
   --kui-color-danger-fill-quiet: var(
     --wa-color-danger-fill-quiet,
     color-mix(
@@ -310,38 +425,61 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-danger-on-quiet: var(--wa-color-danger-on-quiet, #c20b20);
-  --kui-color-danger-on-normal: var(--wa-color-danger-on-normal, #8e0717);
-  --kui-color-danger-on-loud: var(--wa-color-danger-on-loud, #fff);
+  --kui-color-danger-on-quiet: var(
+    --wa-color-danger-on-quiet,
+    light-dark(#c20b20, #ff696c)
+  );
+  --kui-color-danger-on-normal: var(
+    --wa-color-danger-on-normal,
+    light-dark(#8e0717, #ff8a8c)
+  );
+  --kui-color-danger-on-loud: var(
+    --wa-color-danger-on-loud,
+    light-dark(#fff, #111113)
+  );
+  /* Danger text placed ON a danger fill (e.g. the danger StateBanner) and the
+     danger Badge's solid fill. The light value matches danger-on-quiet, which
+     already clears WCAG AA (5.7:1) over danger-fill-quiet. The dark value is
+     lighter than danger-on-quiet (#ff696c), which reached only 5.7:1 over the
+     dark fill-quiet (4.0:1 as dimmed banner detail) and left the solid badge's
+     dark text and placeholder skeleton the weakest of any tone on a mid-red
+     fill; #ffa0a2 matches the other tones' pale dark on-fill values. */
+  --kui-color-danger-on-fill: light-dark(#c20b20, #ffa0a2);
 
-  /* Compatibility aliases retained for existing @kerfjs/ui consumers. */
-  --kui-color-border: var(
-    --wa-color-surface-border,
-    var(--kui-color-neutral-border-normal)
-  );
-  --kui-color-border-quiet: var(--kui-color-neutral-border-quiet);
-  --kui-color-accent: var(--kui-color-brand-fill-normal);
-  --kui-color-accent-text: var(--kui-color-brand-on-quiet);
-  --kui-color-success: var(--kui-color-success-fill-quiet);
-  --kui-color-success-text: var(--kui-color-success-on-quiet);
-  --kui-color-warning: var(--kui-color-warning-fill-quiet);
-  --kui-color-warning-text: var(--kui-color-warning-on-quiet);
-  --kui-color-danger: var(--kui-color-danger-fill-quiet);
-  --kui-color-danger-text: var(--kui-color-danger-on-quiet);
   --kui-focus-ring: var(
     --wa-focus-ring,
-    3px solid var(--wa-color-focus, var(--kui-color-brand-fill-loud))
+    3px solid var(--wa-color-focus, light-dark(#007aff, #64d2ff))
+  );
+  /* Elevation mirrors webawesome.css's scheme-aware shadows: dark raises the
+     alpha so a raised surface still separates from a near-black page. */
+  --kui-shadow-s: var(
+    --wa-shadow-s,
+    0 1px 3px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5))
   );
-  --kui-shadow-s: var(--wa-shadow-s, 0 1px 3px rgb(0 0 0 / 0.14));
   --kui-shadow-l: var(
     --wa-shadow-l,
-    0 0.75rem 2rem rgb(0 0 0 / 0.09)
+    0 0.75rem 2rem light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.32))
   );
 }
 
+: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-border: currentColor;
+    --kui-color-pop-fill-quiet: Canvas;
+    --kui-color-pop-fill-normal: Canvas;
+    --kui-color-pop-fill-loud: Highlight;
+    --kui-color-pop-border-quiet: currentColor;
+    --kui-color-pop-border-normal: currentColor;
+    --kui-color-pop-border-loud: currentColor;
+    --kui-color-pop-on-quiet: currentColor;
+    --kui-color-pop-on-normal: currentColor;
+    --kui-color-pop-on-loud: HighlightText;
+    --kui-color-pop-on-fill: currentColor;
+    --kui-color-neutral-border-normal: currentColor;
     --kui-focus-ring: 3px solid currentColor;
   }
 }

package/dist/styles/grid.css

@@ -0,0 +1,35 @@
+.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;
+  min-height: 0;
+  box-sizing: border-box;
+  flex: var(--_kui-grid-flex, initial);
+  grid-template-columns: repeat(var(--_kui-grid-columns), minmax(0, 1fr));
+  gap: var(--_kui-grid-gap, var(--kui-grid-gap));
+}
+
+.kui-grid[data-min-column-width="true"] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--_kui-grid-min-column-width)), 1fr)
+  );
+}
+
+.kui-grid[data-auto-fill="true"] {
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(100%, var(--_kui-grid-min-column-width)), 1fr)
+  );
+}
+
+/* `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/layout.css

@@ -1,24 +1,7 @@
-/* Shared application geometry: unpadded panes containing toolbars and content. */
-.kui-pane {
-  display: grid;
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-}
+@import "./pane.css";
+@import "./content-item.css";
 
-.kui-pane__toolbar,
-.kui-pane__footer {
-  min-width: 0;
-}
-
-.kui-pane__content {
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
+/* Shared application content geometry for Pane children and standalone stacks. */
 
 .kui-content {
   display: flex;
@@ -28,27 +11,6 @@
   gap: var(--kui-layout-content-gap, 1.5rem);
 }
 
-.kui-content-item {
-  min-width: 0;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: var(--kui-layout-item-border-width, 1px) solid
-    var(--kui-content-item-border, transparent);
-  border-radius: var(
-    --kui-content-item-radius,
-    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
-  );
-  background: var(--kui-content-item-background, transparent);
-}
-
-.kui-content-item--pill {
-  --kui-content-item-radius: var(
-    --kui-layout-pill-radius,
-    calc(1px + 1.3125rem)
-  );
-}
-
 .kui-control-cluster {
   display: flex;
   min-width: 0;