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

package/dist/styles/catalog/components/catalog-stage.css

@@ -1,13 +1,18 @@
+/* The preview stage fills the work area's scroller — and grows with a taller
+   specimen, never shrinking under it — behind a transparency checkerboard,
+   so a specimen's own surface (or lack of one) stays visible. */
 .kui-catalog__stage {
-  width: 100%;
-  min-height: 0;
   flex: 1 0 auto;
+  background-color: var(--kui-color-surface-lowered);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/svg%3E");
+  background-size: 1.5rem 1.5rem;
 }
 
+/* The centered specimen canvas, at the catalog's reading measure. */
 .kui-catalog__canvas {
   position: relative;
   display: grid;
-  width: min(100%, var(--kui-catalog-content-measure, 70rem));
+  width: min(100%, 70rem);
   min-width: 0;
   min-height: 100%;
   margin-inline: auto;
@@ -42,19 +47,9 @@
 
 .kui-catalog__geometry-border {
   border: 0 solid
-    color-mix(in srgb, var(--kui-color-accent-text) 72%, transparent);
+    color-mix(in srgb, var(--kui-color-brand-on-quiet) 72%, transparent);
 }
 
 .kui-catalog__geometry-margin {
   background: color-mix(in srgb, #f6a94c 55%, transparent);
 }
-
-@media (max-width: 52rem) {
-  .kui-catalog__stage {
-    min-height: 24rem;
-  }
-
-  .kui-catalog__canvas {
-    min-height: 16rem;
-  }
-}

package/dist/styles/catalog/components/catalog.css

@@ -1,22 +1,12 @@
+/* The catalog fills its container, which must have a definite height (the
+   `document.css` baseline's `.kui-app-root`, as for any Workbench). */
 .kui-catalog {
-  --kui-catalog-sidebar-width: 18rem;
-  --kui-catalog-content-measure: 70rem;
-
-  display: grid;
-  height: 100vh;
-  grid-template-columns: var(--kui-catalog-sidebar-width) minmax(0, 1fr);
-  overflow: hidden;
-}
-
-.kui-catalog[data-sidebar-collapsed="true"] {
-  grid-template-columns: 0 minmax(0, 1fr);
+  height: 100%;
 }
 
-@media (max-width: 52rem) {
-  .kui-catalog,
-  .kui-catalog[data-sidebar-collapsed="true"] {
-    height: auto;
-    min-height: 100vh;
-    grid-template-columns: 1fr;
-  }
+/* The brand mark, sized to sit inside a toolbar group. */
+.kui-catalog__mark {
+  display: block;
+  width: 2.125rem;
+  height: 2.125rem;
 }

package/dist/styles/catalog.css

@@ -1,10 +1,5 @@
 /* Public compatibility entrypoint. Each catalog component owns its styles. */
 @import "./catalog/components/catalog.css";
-@import "./catalog/components/catalog-sidebar.css";
-@import "./catalog/components/catalog-section-list.css";
-@import "./catalog/components/catalog-secondary-sections.css";
-@import "./catalog/components/catalog-detail.css";
 @import "./catalog/components/catalog-stage.css";
-@import "./catalog/components/catalog-resource-footer.css";
 @import "./catalog/components/catalog-example.css";
 @import "./catalog/components/catalog-example-stack.css";

package/dist/styles/collapsible-panel.css

@@ -47,7 +47,7 @@
     var(--kui-collapsible-panel-width, 17.5rem) +
       var(--_kui-collapsible-panel-safe-inline-start)
   );
-  border-inline-end: 1px solid var(--kui-color-border);
+  border-inline-end: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 .kui-collapsible-panel--right {
@@ -55,7 +55,7 @@
     var(--kui-collapsible-panel-width, 17.5rem) +
       var(--_kui-collapsible-panel-safe-inline-end)
   );
-  border-inline-start: 1px solid var(--kui-color-border);
+  border-inline-start: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 .kui-collapsible-panel--bottom {
@@ -67,7 +67,7 @@
   width: 100%;
   height: var(--_kui-collapsible-panel-extent);
   min-height: 0;
-  border-block-start: 1px solid var(--kui-color-border);
+  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 /* The panel's content sees the edges it touches; its interior edge is clear. */
@@ -111,18 +111,16 @@
     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-collapsible-panel__content
+  > :not(
+    :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;
@@ -130,34 +128,132 @@
 }
 
 /* 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"] *
+   no longer reach that edge. The container flags the edge it has handed to a
+   panel in a non-inheriting property, and a style query zeroes that edge on
+   the container's children only; the panel that owns the edge (the first
+   left, the last right or bottom) inherits the container's value back.
+   Selecting the siblings themselves (`:has(~ panel)`, `panel ~ *`) makes
+   every element a sibling-rule candidate, so in Chromium each insertion into
+   a long list restyles the list's other rows. The flag is set by a keyed
+   `:has(> panel)` on the container and read by a parent style lookup, so a
+   list without a panel in it pays nothing. */
+@property --_kui-collapsible-panel-owns-inline-start {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_kui-collapsible-panel-owns-inline-end {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_kui-collapsible-panel-owns-block-end {
+  syntax: "*";
+  inherits: false;
+}
+
+:where(
+  :has(
+    > .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;
+) {
+  --_kui-collapsible-panel-owns-inline-start: true;
 }
 
-:has(
-  ~ .kui-collapsible-panel--right[data-presentation="inline"]:not(
+:where(
+  :has(
+    > .kui-collapsible-panel--right[data-presentation="inline"]:not(
+        [data-collapsed="true"],
+        [data-collapsible-overlay="true"] *,
+        [data-collapsible-responsive="hidden"] *
+      )
+  )
+) {
+  --_kui-collapsible-panel-owns-inline-end: true;
+}
+
+:where(
+  :has(
+    > .kui-collapsible-panel--bottom[data-presentation="inline"]:not(
+        [data-collapsed="true"],
+        [data-collapsible-overlay="true"] *,
+        [data-collapsible-responsive="hidden"] *
+      )
+  )
+) {
+  --_kui-collapsible-panel-owns-block-end: true;
+}
+
+@container style(--_kui-collapsible-panel-owns-inline-start: true) {
+  :where(*) {
+    --kui-edge-inset-inline-start: 0px;
+  }
+}
+
+@container style(--_kui-collapsible-panel-owns-inline-end: true) {
+  :where(*) {
+    --kui-edge-inset-inline-end: 0px;
+  }
+}
+
+@container style(--_kui-collapsible-panel-owns-block-end: true) {
+  :where(*) {
+    --kui-edge-inset-block-end: 0px;
+  }
+}
+
+:where(
+  .kui-collapsible-panel--left[data-presentation="inline"]:not(
       [data-collapsed="true"],
       [data-collapsible-overlay="true"] *,
-      [data-collapsible-responsive="hidden"] *
+      [data-collapsible-responsive="hidden"] *,
+      .kui-collapsible-panel--left[data-presentation="inline"]:not(
+          [data-collapsed="true"],
+          [data-collapsible-overlay="true"] *,
+          [data-collapsible-responsive="hidden"] *
+        )
+        ~ *
     )
 ) {
-  --kui-edge-inset-inline-end: 0px;
+  --kui-edge-inset-inline-start: inherit;
 }
 
-:has(
-  ~ .kui-collapsible-panel--bottom[data-presentation="inline"]:not(
+:where(
+  .kui-collapsible-panel--right[data-presentation="inline"]:not(
       [data-collapsed="true"],
       [data-collapsible-overlay="true"] *,
-      [data-collapsible-responsive="hidden"] *
+      [data-collapsible-responsive="hidden"] *,
+      :has(
+        ~ .kui-collapsible-panel--right[data-presentation="inline"]:not(
+            [data-collapsed="true"],
+            [data-collapsible-overlay="true"] *,
+            [data-collapsible-responsive="hidden"] *
+          )
+      )
     )
 ) {
-  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-end: inherit;
+}
+
+:where(
+  .kui-collapsible-panel--bottom[data-presentation="inline"]:not(
+      [data-collapsed="true"],
+      [data-collapsible-overlay="true"] *,
+      [data-collapsible-responsive="hidden"] *,
+      :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: inherit;
 }
 
 .kui-collapsible-panel[data-collapsed="true"] {
@@ -292,10 +388,19 @@
    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(
+   anchor only there, beside a CollapsiblePanel or ResizableRegion restore
+   control (matched by their restore attributes); a drawer nested deeper,
+   inside the work area's own content, belongs to another layout and
+   publishes nothing. The selector ends on the drawer, not on a universal
+   `> * > * > *` scope below the container: a universal selector after a
+   :has() container restyles every child of every ancestor of a DOM change in
+   Chromium. Without anchor positioning the corner keeps the container's
+   bottom edge. */
+:where(
+    :has(> [data-panel-restore], > [data-region-restore]),
+    :has(> [data-panel-restore], > [data-region-restore]) > *
+  )
+  > .kui-collapsible-panel--bottom[data-presentation="inline"]:not(
     [data-collapsed="true"],
     [data-collapsible-overlay="true"] *,
     [data-collapsible-responsive="hidden"] *
@@ -303,10 +408,6 @@
   anchor-name: --kui-restore-drawer;
 }
 
-:where(:has(> .kui-collapsible-panel__restore)) > * > * > * {
-  anchor-scope: --kui-restore-drawer;
-}
-
 .kui-collapsible-panel__restore {
   --_kui-collapsible-panel-restore-inset: var(
     --kui-collapsible-panel-restore-inset,
@@ -316,6 +417,8 @@
      from this point instead of adding its own inset on top. */
   --kui-floating-toolbar-inset: 0px;
   position: absolute;
+  /* Hidden while an open side overlay covers the content (see below). */
+  visibility: var(--_kui-floating-covered, inherit);
   z-index: var(
     --kui-collapsible-panel-restore-z,
     calc(var(--kui-collapsible-panel-overlay-z, 40) - 2)
@@ -361,6 +464,56 @@
   );
 }
 
+/* An open side overlay — the wireSidebar compact overlay or a static
+   `presentation="overlay"` panel — covers the content beside it, so that
+   content's floating controls (a FloatingToolbar, another panel's restore
+   corner) are hidden, not merely stacked beneath it: they never paint over
+   the overlay whatever stacking context an app puts them in, and hidden they
+   leave the tab order and the accessibility tree. They come back as the
+   overlay closes. The flag is read by FloatingToolbar and the
+   layouts' restore corners; the overlay panels themselves are exempt, so
+   their own floating controls stay. */
+[data-collapsible-overlay="true"]:has(
+  .kui-collapsible-panel:is(
+      .kui-collapsible-panel--left,
+      .kui-collapsible-panel--right
+    ):not([data-collapsed="true"])
+) {
+  --_kui-floating-covered: hidden;
+}
+
+[data-collapsible-overlay="true"] .kui-collapsible-panel {
+  --_kui-floating-covered: initial;
+}
+
+/* A static overlay panel sets the flag on its container and clears it again
+   on the overlay panels in it, so it reaches the overlay's siblings only —
+   never through a universal selector below the :has() container
+   (`:has(…) > :not(…)`), which in Chromium restyles every child of every
+   ancestor of a DOM change. */
+:where(
+  :has(
+    > .kui-collapsible-panel:is(
+        .kui-collapsible-panel--left,
+        .kui-collapsible-panel--right
+      )[data-presentation="overlay"]:not([data-collapsed="true"])
+  )
+) {
+  --_kui-floating-covered: hidden;
+}
+
+:where(
+    :has(
+      > .kui-collapsible-panel:is(
+          .kui-collapsible-panel--left,
+          .kui-collapsible-panel--right
+        )[data-presentation="overlay"]:not([data-collapsed="true"])
+    )
+  )
+  > .kui-collapsible-panel[data-presentation="overlay"] {
+  --_kui-floating-covered: initial;
+}
+
 /* A button does not stretch between its insets the way a div does, so the
    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
@@ -396,7 +549,7 @@
 }
 
 .kui-collapsible-panel__toggle:hover {
-  border-color: var(--kui-color-border);
+  border-color: var(--kui-color-neutral-border-normal);
   background: var(--kui-color-neutral-fill-normal);
 }
 

package/dist/styles/content-item.css

@@ -0,0 +1,30 @@
+/* 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)
+  );
+}
+
+/* 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);
+}

package/dist/styles/floating-toolbar.css

@@ -13,6 +13,11 @@
      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) flags that region,
+     and the toolbar hides — out of the tab order and the accessibility tree —
+     rather than risk painting over the overlay. */
+  visibility: var(--_kui-floating-covered, inherit);
   display: flex;
   color-scheme: dark;
   align-items: center;

package/dist/styles/foundation.css

@@ -79,6 +79,33 @@
   --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,
@@ -419,22 +446,6 @@
      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-pop: var(--kui-color-pop-fill-quiet);
-  --kui-color-pop-text: var(--kui-color-pop-on-fill);
-  --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, light-dark(#007aff, #64d2ff))
@@ -468,9 +479,7 @@
     --kui-color-pop-on-normal: currentColor;
     --kui-color-pop-on-loud: HighlightText;
     --kui-color-pop-on-fill: currentColor;
-    --kui-color-pop: Canvas;
-    --kui-color-pop-text: currentColor;
-    --kui-color-border: currentColor;
+    --kui-color-neutral-border-normal: currentColor;
     --kui-focus-ring: 3px solid currentColor;
   }
 }

package/dist/styles/layout.css

@@ -1,4 +1,5 @@
 @import "./pane.css";
+@import "./content-item.css";
 
 /* Shared application content geometry for Pane children and standalone stacks. */
 
@@ -10,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;

package/dist/styles/list-action-row.css

@@ -140,7 +140,6 @@
     2.75rem - (2 * var(--kui-layout-item-padding, 0.5rem))
   );
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
   align-items: center;
 }
@@ -151,6 +150,14 @@
   min-width: 0;
 }
 
+/* The label is a grid container, and `text-overflow` never reaches a grid
+   item's text, so each text line of the stack ellipsizes itself. */
+.kui-list-action-row__primary-label,
+.kui-list-action-row__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .kui-list-action-row__description,
 .kui-list-action-row__status {
   color: var(--kui-color-neutral-on-quiet);
@@ -181,6 +188,11 @@
   white-space: normal;
 }
 
+.kui-list-action-row[data-multiline="true"]
+  :is(.kui-list-action-row__primary-label, .kui-list-action-row__description) {
+  overflow: visible;
+}
+
 .kui-list-action-row[data-multiline="true"] .kui-list-action-row__icon {
   inset-block-start: calc(
     var(--kui-layout-item-padding, 0.5rem) + (1lh / 2)

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

@@ -1,5 +1,4 @@
-.kui-list-inset-text,
-.kui-list-inset-text--horizontal {
+.kui-list-inset-text {
   margin: 0;
   border: 0 solid transparent;
   padding: 0;

package/dist/styles/list-item.css

@@ -128,13 +128,17 @@
   display: grid;
   min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* The label is a grid container, and `text-overflow` never reaches a grid
+   item's text, so each line of the stack clips and ellipsizes itself: a long
+   label ends in "…" before the trailing slot instead of being cut mid-glyph. */
 .kui-list-item__primary-label,
 .kui-list-item__description {
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .kui-list-item__description {
@@ -160,6 +164,15 @@
   white-space: normal;
 }
 
+/* A multiline row shows its whole label, so a single word wider than the
+   column (a long component or file name) breaks onto the next line rather
+   than running under the trailing slot. */
+.kui-list-item[data-multiline="true"]
+  :is(.kui-list-item__primary-label, .kui-list-item__description) {
+  overflow: visible;
+  overflow-wrap: anywhere;
+}
+
 .kui-list-item[data-multiline="true"] .kui-list-item__icon {
   align-self: start;
   margin-block-start: calc((1lh - 1.125rem) / 2);

package/dist/styles/list.css

@@ -1,5 +1,5 @@
 .kui-list {
-  --kui-list-divider-color: var(--kui-color-border);
+  --kui-list-divider-color: var(--kui-color-neutral-border-normal);
   --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