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

package/dist/styles/nav-stack.css

@@ -58,68 +58,35 @@
   opacity: 0;
 }
 
+/* The chrome hosts the stack's real top Toolbar. It hands that toolbar the
+   edges the stack still touches through the edge context (never the bottom,
+   which the viewport owns); the toolbar pads for the sides it claims with
+   `safeAreaEdges` while its box paints through them. */
 .kui-nav-stack__chrome {
-  display: flex;
-  min-width: 0;
-  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);
+  --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
+  --kui-edge-inset-inline-start: var(--_kui-nav-stack-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
   background: var(--kui-color-surface);
 }
 
-.kui-nav-stack__lead {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  align-items: center;
-  gap: var(--kui-space-2xs);
-}
-
-.kui-nav-stack__back {
-  display: grid;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: inherit;
-  background: transparent;
-  cursor: pointer;
-  place-items: center;
-}
-
-.kui-nav-stack__back:hover {
-  border-color: var(--kui-color-border);
-  background: var(--kui-color-neutral-fill-normal);
-}
-
-.kui-nav-stack__back:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-nav-stack__back-icon {
-  display: block;
+/* A navigation bar is one control band tall: the toolbar keeps its inline
+   padding and any claimed block inset, but drops the block gap so the bar is
+   the band height (44px) plus the unsafe inset it clears. */
+.kui-nav-stack__chrome > .kui-nav-stack__toolbar {
+  min-height: calc(
+    var(--_kui-toolbar-band) + var(--_kui-toolbar-safe-block-start) +
+      var(--_kui-toolbar-safe-block-end)
+  );
+  padding-block: var(--_kui-toolbar-safe-block-start)
+    var(--_kui-toolbar-safe-block-end);
 }
 
-/* The title is ToolbarText (which owns its font, height, and ellipsis); it just
-   needs to flex to fill the lead zone beside the back control. */
+/* The title fills the leading zone beside the back control and truncates. */
 .kui-nav-stack__title {
   flex: 1 1 auto;
   min-width: 0;
 }
 
-.kui-nav-stack__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--kui-space-2xs);
-}
-
 .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);
@@ -174,18 +141,16 @@
     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-nav-stack__view
+  > :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;
@@ -214,7 +179,7 @@
   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);
+  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
   background: var(--kui-color-surface);
 }
 

package/dist/styles/pane.css

@@ -9,7 +9,8 @@
   min-height: 0;
   padding: 0;
   box-sizing: border-box;
-  border: 0 solid var(--kui-pane-separator-color, var(--kui-color-border));
+  border: 0 solid
+    var(--kui-pane-separator-color, var(--kui-color-neutral-border-normal));
   border-block-start-width: var(--kui-pane-separator-block-start-width);
   border-block-end-width: var(--kui-pane-separator-block-end-width);
   border-inline-start-width: var(--kui-pane-separator-inline-start-width);
@@ -145,3 +146,34 @@
   flex-direction: column;
   grid-area: footer;
 }
+
+/* `chromePlacement="auto"`: the header and footer stay pinned while the pane
+   is tall enough; below 480px of height (30rem, so it scales with the text
+   size) the whole pane scrolls as one column instead, so tall chrome can never
+   squeeze the content to nothing. The pane is its own size container and lays
+   its slots out as a column: while tall, the content fills the space between
+   the chrome and scrolls itself, and the pane never scrolls; while short, the
+   content takes its natural height and the pane scrolls. */
+.kui-pane[data-chrome-placement="auto"] {
+  container: kui-pane / size;
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  overscroll-behavior: contain;
+}
+
+.kui-pane[data-chrome-placement="auto"]
+  > :is(.kui-pane__header, .kui-pane__footer) {
+  flex: none;
+}
+
+.kui-pane[data-chrome-placement="auto"] > .kui-pane__content {
+  flex: 1 1 0;
+}
+
+@container kui-pane (max-height: 30rem) {
+  .kui-pane[data-chrome-placement="auto"] > .kui-pane__content {
+    flex: none;
+    overflow: visible;
+  }
+}

package/dist/styles/popup-menu.css

@@ -10,3 +10,81 @@
   white-space: nowrap;
   clip-path: inset(50%);
 }
+
+/* A PopupMenu draws exactly the Select's popup: the same caret motion, surface
+   inset, row geometry, reserved check column, current-row fill, and group
+   titles, all read from the private popup-choice contract in foundation.css
+   (select.css reads the same values). */
+
+/* The trigger caret turns to face the open menu, like the Select's. */
+.kui-popup-menu > wa-button::part(caret) {
+  rotate: 0deg;
+  transition: var(--_kui-popup-caret-transition);
+}
+.kui-popup-menu[open] > wa-button::part(caret) {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+
+/* The Select's popup fades in place; Web Awesome's dropdown also scales from
+   90%. Holding the scale leaves the shared fade. */
+.kui-popup-menu::part(menu) {
+  padding: var(--_kui-popup-inset);
+  gap: var(--_kui-popup-row-gap);
+  scale: none !important;
+}
+
+.kui-popup-menu > wa-dropdown-item {
+  /* Leading inset plus the Select's check column, so item icons and labels
+     start where a Select option's do. */
+  padding: var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
+    calc(
+      var(--_kui-popup-row-padding-inline-start) +
+        var(--_kui-popup-row-check-width)
+    );
+}
+.kui-popup-menu > wa-dropdown-item::part(label) {
+  padding-block: var(--_kui-popup-row-label-padding-block);
+  line-height: var(--_kui-popup-row-label-line-height);
+}
+/* A keyboard-focused item is the menu's current row: the Select's brand fill,
+   with no second focus ring inside the open popup. */
+.kui-popup-menu > wa-dropdown-item:focus-visible {
+  outline: none;
+  color: var(--_kui-popup-row-current-color);
+  background-color: var(--_kui-popup-row-current-background);
+}
+.kui-popup-menu > wa-divider {
+  --spacing: 0.5em;
+}
+
+/* Center the icon on the label's line, like the Select's start slot. */
+.kui-popup-menu > wa-dropdown-item::part(icon) {
+  display: flex;
+  align-self: center;
+}
+.kui-popup-menu__icon {
+  display: inline-flex;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+  flex: none;
+  /* Web Awesome spaces a slotted item icon 0.75em from its label (an
+     !important shadow rule). Sizing that em makes the gap the Select's. */
+  font-size: calc(var(--_kui-popup-row-icon-gap) / 0.75);
+}
+.kui-popup-menu__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* A group title matches the Select's group title. It is a styled element
+   rather than a slotted heading, whose Web Awesome metrics are !important. */
+.kui-popup-menu__heading {
+  padding: var(--_kui-popup-group-title-padding);
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-2xs);
+  font-weight: var(--_kui-popup-group-title-font-weight);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}

package/dist/styles/resizable-region.css

@@ -1,5 +1,7 @@
 .kui-resizable-region {
-  --kui-resizable-region-separator-color: var(--kui-color-border);
+  --kui-resizable-region-separator-color: var(
+    --kui-color-neutral-border-normal
+  );
   --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,
@@ -211,6 +213,36 @@
 .kui-resizable-region[data-presentation="hidden"] {
   display: none;
 }
+/* An open side overlay (a horizontal region) covers the work area beside it,
+   so that area's floating controls (a FloatingToolbar, a 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. It is set on the overlay's container and cleared again on the
+   overlay regions in it, so it reaches the overlay's siblings only. It is
+   never set by a universal selector below the :has() container (`:has(…) >
+   :not(…)`): Chromium then restyles every child of every ancestor of a DOM
+   change, which made each change in a long list about 30× slower. */
+:where(
+  :has(
+    > .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"]:not(
+        [data-collapsed="true"]
+      )
+  )
+) {
+  --_kui-floating-covered: hidden;
+}
+:where(
+    :has(
+      > .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"]:not(
+          [data-collapsed="true"]
+        )
+    )
+  )
+  > .kui-resizable-region[data-presentation="overlay"] {
+  --_kui-floating-covered: initial;
+}
 
 @container (max-width: 44rem) {
   .kui-resizable-region[data-responsive-fill-at="narrow"] {
@@ -256,18 +288,24 @@
    beside the collapsed one — a direct child of 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. CollapsiblePanel drawers publish the same 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-resizable-region[data-axis="vertical"][data-edge="start"][data-presentation="inline"]:not(
+   it. The region publishes that edge as an anchor only there, beside a
+   CollapsiblePanel or ResizableRegion restore control (matched by their
+   restore attributes); CollapsiblePanel drawers publish the same anchor. A
+   drawer nested deeper, inside the work area's own content, belongs to
+   another layout and publishes nothing. The selector ends on the region, 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-resizable-region[data-axis="vertical"][data-edge="start"][data-presentation="inline"]:not(
     [data-collapsed="true"]
   ) {
   anchor-name: --kui-restore-drawer;
 }
-:where(:has(> .kui-resizable-region__restore)) > * > * > * {
-  anchor-scope: --kui-restore-drawer;
-}
 .kui-resizable-region__restore {
   --_kui-resizable-region-restore-inset: var(
     --kui-resizable-region-restore-inset,
@@ -277,6 +315,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 above). */
+  visibility: var(--_kui-floating-covered, inherit);
   z-index: var(
     --kui-resizable-region-restore-z,
     calc(var(--kui-resizable-region-overlay-z, 41) - 2)
@@ -379,7 +419,10 @@
    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. */
+   never cuts off half of the hit target or its focus ring. The grip stays
+   centered in the handle there: the separator is the clipping edge, so a grip
+   centered on it would be cut in half. Everywhere else the grip is drawn on
+   the separator line. */
 .kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
   > .kui-resizable-region__handle {
   right: 0;

package/dist/styles/select.css

@@ -23,6 +23,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* A multiple Select summarizes its choices in the display text (installed by
+   select/register) instead of drawing a removable tag per choice. */
+.kui-select[multiple]::part(tags) {
+  display: none;
+}
 .kui-select[data-size="compact"]::part(combobox) {
   min-height: 2rem;
 }
@@ -94,6 +99,13 @@
   .kui-select__icon[slot="start"] {
   margin-inline-end: 0 !important;
 }
+/* A multiple icon-only trigger: its fixed icon, then a count badge while any
+   choice is chosen, 4px from the icon (the caret keeps its 12px after it).
+   The summary that ends its label (and accessible name) stays inline text, so
+   a visible label reads "Labels: Bug, Docs" in place of the hidden value. */
+.kui-select__count {
+  margin-inline-start: 0.25rem;
+}
 .kui-select::part(start),
 .kui-select::part(end),
 .kui-select::part(expand-icon) {
@@ -102,7 +114,21 @@
 .kui-select::part(expand-icon) {
   transform: scale(var(--kui-disclosure-icon-scale, 0.5));
 }
+.kui-select::part(expand-icon) {
+  transition: var(--_kui-popup-caret-transition);
+}
+.kui-select[open]::part(expand-icon) {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+/* The open listbox already shows where focus is (its current option), so the
+   trigger drops its focus ring while the popup is visible, as a PopupMenu
+   trigger does; the ring returns when the popup closes with focus still on
+   the control. */
+.kui-select[open]::part(combobox) {
+  outline-color: transparent;
+}
 .kui-select::part(listbox) {
+  padding: var(--_kui-popup-inset);
   width: max-content;
   min-width: 100%;
   max-width: min(20rem, calc(100vw - 1.25rem));
@@ -114,28 +140,29 @@
   align-items: center;
 }
 .kui-select wa-option {
-  --wa-form-control-activated-color: var(--kui-color-brand-fill-normal);
-  /* Current option text sits on the activated brand fill; use the darker on-fill
-     accent so it clears WCAG AA (brand-on-quiet is 4.26:1 over that fill). */
-  --current-text-color: var(--kui-color-brand-on-fill);
+  --wa-form-control-activated-color: var(--_kui-popup-row-current-background);
+  --current-text-color: var(--_kui-popup-row-current-color);
+  padding: var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-start);
 }
 .kui-select wa-option::part(start) {
   align-self: center;
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--_kui-popup-row-icon-gap);
   margin-top: 0;
 }
 .kui-select wa-option::part(label) {
   min-width: 0;
-  padding-block: 0.35rem;
-  line-height: 1.25;
+  padding-block: var(--_kui-popup-row-label-padding-block);
+  line-height: var(--_kui-popup-row-label-line-height);
   overflow-wrap: normal;
   word-break: normal;
   white-space: normal;
 }
 .kui-select__icon {
   display: inline-flex;
-  width: 1rem;
-  height: 1rem;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
   flex: none;
 }
 .kui-select > .kui-select__icon[slot="start"] {
@@ -173,10 +200,10 @@
   border-block-start: 1px solid var(--kui-color-neutral-border-quiet);
 }
 .kui-select__group-title {
-  padding: 0.2rem 0.75rem 0.3rem;
+  padding: var(--_kui-popup-group-title-padding);
   color: var(--kui-color-neutral-on-quiet);
   font-size: var(--kui-font-2xs);
-  font-weight: 750;
+  font-weight: var(--_kui-popup-group-title-font-weight);
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
@@ -208,7 +235,7 @@
   justify-content: space-between;
   gap: 0.5rem;
   padding-inline: var(--kui-layout-item-padding, 0.5rem);
-  border: 1px solid var(--kui-color-border);
+  border: 1px solid var(--kui-color-neutral-border-normal);
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   background: var(--kui-color-surface);
 }

package/dist/styles/split-view.css

@@ -37,7 +37,7 @@
     var(--kui-split-view-list-width, 20rem) +
       var(--_kui-split-view-safe-inline-start)
   );
-  border-inline-end: 1px solid var(--kui-color-border);
+  border-inline-end: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 .kui-split-view__list[data-resizable="true"] {
@@ -104,30 +104,26 @@
     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-split-view__list
+  > :not(
+    :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(
+    :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;

package/dist/styles/tab-scaffold.css

@@ -66,18 +66,16 @@
   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-tab-scaffold__scene
+  > :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;
@@ -98,7 +96,7 @@
   );
   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);
+  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
   background: var(--kui-color-surface);
 }
 
@@ -120,7 +118,7 @@
 }
 
 .kui-tab-scaffold__tab[aria-selected="true"] {
-  color: var(--kui-color-accent-text);
+  color: var(--kui-color-brand-on-quiet);
 }
 
 .kui-tab-scaffold__tab:focus-visible {
@@ -129,10 +127,34 @@
 }
 
 .kui-tab-scaffold__tab-icon {
+  position: relative;
   display: grid;
   place-items: center;
 }
 
+/* The iOS tab-bar badge: over the icon's top-trailing corner, its leading
+   edge just past the icon's center line so a longer count grows outward. The
+   Badge keeps its own geometry; only this anchor is positioned. Without an
+   icon the badge stays in flow above the label. */
+.kui-tab-scaffold__tab-badge {
+  display: flex;
+  pointer-events: none;
+}
+
+.kui-tab-scaffold__tab-icon > .kui-tab-scaffold__tab-badge {
+  position: absolute;
+  inset-block-start: -0.4375rem;
+  inset-inline-start: calc(50% + 0.1875rem);
+}
+
+/* The text-free dot never grows, so it centers on the icon's top-trailing
+   corner instead: half over the glyph, half outside it. */
+.kui-tab-scaffold__tab-icon
+  > .kui-tab-scaffold__tab-badge[data-badge-kind="dot"] {
+  inset-block-start: -0.125rem;
+  inset-inline-start: calc(100% - 0.3125rem);
+}
+
 .kui-tab-scaffold__tab-icon svg {
   width: 1.375rem;
   height: 1.375rem;

package/dist/styles/text.css

@@ -10,7 +10,7 @@
 }
 
 .kui-text[data-tone="danger"] {
-  color: var(--kui-color-danger-text);
+  color: var(--kui-color-danger-on-quiet);
 }
 
 .kui-text[data-size="compact"] {

package/dist/styles/token-search-field.css

@@ -1,8 +1,8 @@
 .kui-token-search {
   --kui-token-search-background: var(--kui-color-surface);
-  --kui-token-search-border: var(--kui-color-border);
-  --kui-token-search-token-background: var(--kui-color-accent);
-  --kui-token-search-token-foreground: var(--kui-color-accent-text);
+  --kui-token-search-border: var(--kui-color-neutral-border-normal);
+  --kui-token-search-token-background: var(--kui-color-brand-fill-normal);
+  --kui-token-search-token-foreground: var(--kui-color-brand-on-quiet);
   --kui-token-search-line-size: 2.125rem;
 
   display: grid;
@@ -53,7 +53,7 @@
   padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
   box-sizing: border-box;
   outline: 0;
-  caret-color: var(--kui-color-accent-text);
+  caret-color: var(--kui-color-brand-on-quiet);
   font-size: var(--kui-font-s);
   line-height: 1.35;
   white-space: pre-wrap;