@kerfjs/ui 5.0.0-beta.61 → 5.0.0-beta.63

package/dist/styles/list-item.css

@@ -1,9 +1,4 @@
 .kui-list-item {
-  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
-  --kui-list-item-color: var(--kui-color-neutral-on-normal);
-  --kui-list-item-hover-background: var(--kui-color-neutral-fill-quiet);
-  --kui-list-item-selected-color: var(--kui-color-neutral-on-normal);
-  --kui-list-item-selected-background: var(--kui-color-brand-fill-normal);
   display: grid;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
   min-height: var(--kui-list-item-min-height, 2.75rem);
@@ -24,7 +19,7 @@
     --kui-list-item-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
-  color: var(--kui-list-item-color);
+  color: var(--kui-list-item-color, var(--kui-color-neutral-on-normal));
   background: var(--kui-list-item-background, transparent);
   cursor: pointer;
   grid-template-columns: var(--kui-list-item-columns, minmax(0, 1fr) auto);
@@ -55,14 +50,20 @@
 
 .kui-list-item[data-divider="before"],
 .kui-list-item[data-divider="both"] {
-  border-block-start-color: var(--kui-list-group-divider-color);
+  border-block-start-color: var(
+    --kui-list-group-divider-color,
+    var(--kui-color-neutral-border-quiet)
+  );
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
 
 .kui-list-item[data-divider="after"],
 .kui-list-item[data-divider="both"] {
-  border-block-end-color: var(--kui-list-group-divider-color);
+  border-block-end-color: var(
+    --kui-list-group-divider-color,
+    var(--kui-color-neutral-border-quiet)
+  );
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
@@ -99,7 +100,10 @@
     --kui-list-item-hover-border,
     var(--kui-color-neutral-border-normal)
   );
-  background: var(--kui-list-item-hover-background);
+  background: var(
+    --kui-list-item-hover-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
 }
 
 /* A placeholder is disabled to stay inert, but it is loading, not unavailable:
@@ -124,8 +128,14 @@
     --kui-list-item-selected-border,
     var(--kui-color-brand-border-quiet)
   );
-  color: var(--kui-list-item-selected-color);
-  background: var(--kui-list-item-selected-background);
+  color: var(
+    --kui-list-item-selected-color,
+    var(--kui-color-neutral-on-normal)
+  );
+  background: var(
+    --kui-list-item-selected-background,
+    var(--kui-color-brand-fill-normal)
+  );
   font-weight: 650;
 }
 

package/dist/styles/lucide-icon.css

@@ -4,3 +4,8 @@
   height: 1em;
   flex: none;
 }
+
+[data-lucide][data-size] {
+  width: var(--_kui-lucide-size);
+  height: var(--_kui-lucide-size);
+}

package/dist/styles/nav-stack.css

@@ -100,6 +100,13 @@
   inset: 0;
 }
 
+.kui-nav-stack__view[data-appearance="sunken"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
 /* 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
@@ -217,4 +224,10 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="nav-stack"]:only-child {
   height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }

package/dist/styles/pane.css

@@ -22,6 +22,33 @@
   grid-template-rows: auto minmax(0, 1fr) auto;
 }
 
+/* Paint the active scroll owner once, so alpha lowered colors do not stack.
+   Fixed chrome leaves the content slot scrolling; auto chrome lets the Pane
+   root scroll in its short mode, while its content remains transparent. */
+.kui-pane[data-appearance="sunken"] > .kui-pane__content {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
+.kui-pane[data-appearance="sunken"][data-chrome-placement="auto"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
+.kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
+  > .kui-pane__content {
+  background: transparent;
+}
+
+.kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
+  > :is(.kui-pane__header, .kui-pane__footer) {
+  background: var(--kui-pane-chrome-background, var(--kui-color-surface));
+}
+
 /* 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
@@ -149,9 +176,10 @@
 
 /* Chrome dividers: one line under the header and one over the footer, where
    the pinned chrome meets the scrolling content, whatever the chrome holds.
-   `chromeDividers="scroll"` (the default, no attribute) draws each only while
+   `chromeDividers="scroll"` (the plain-pane default, no attribute) draws each only while
    `wireScrollDividers` reports content scrolled away beneath it through
-   `data-scroll-divider` on the slot; `always` draws both; `none` neither. The
+   `data-scroll-divider` on the slot; a sunken pane defaults to `always`, which
+   draws both; `none` draws neither. The
    line is an inset shadow inside the slot, so showing or hiding it never
    moves the chrome or the content. */
 .kui-pane > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
@@ -217,6 +245,12 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="pane"]:only-child {
   height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }
 
 /* As the only child of a NavStack view or a TabScaffold scene, a Pane fills

package/dist/styles/popup-menu.css

@@ -11,10 +11,9 @@
   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). */
+/* PopupMenu shares the Select's caret motion, surface inset, row rhythm,
+   current-row fill, and group titles from the popup-choice contract in
+   foundation.css. Only checkbox items reserve a check column. */
 
 /* The trigger caret turns to face the open menu, like the Select's. */
 .kui-popup-menu > wa-button::part(caret) {
@@ -34,14 +33,20 @@
 }
 
 .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. */
+  /* A plain command starts at the checkbox glyph's leading edge. The glyph
+     sits half a smaller-font em beyond the row's base inset; its label starts
+     after the full check column below. */
   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)
-    );
+    calc(var(--_kui-popup-row-padding-inline-start) + 0.4375em);
+}
+.kui-popup-menu wa-dropdown-item[type="checkbox"] {
+  /* Web Awesome marks every sibling checkbox-adjacent; reserve this column
+     only on items whose checked state was explicitly supplied. */
+  padding-inline-start: 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);

package/dist/styles/resizable-region.css

@@ -73,6 +73,15 @@
   > .kui-resizable-region__content {
   overflow: visible;
 }
+/* An open Web Awesome dropdown (including PopupMenu) releases both clipping
+   ancestors without rerendering the region during the dropdown lifecycle. */
+.kui-resizable-region:has(wa-dropdown[open]) {
+  z-index: var(--kui-resizable-region-popup-z, 5);
+  overflow: visible;
+}
+.kui-resizable-region:has(wa-dropdown[open]) > .kui-resizable-region__content {
+  overflow: visible;
+}
 .kui-resizable-region[data-separator="hidden"] {
   --kui-resizable-region-separator-color: transparent;
 }

package/dist/styles/select.css

@@ -108,6 +108,21 @@
   margin-inline-start: 0.75rem;
   transform: scale(0.875);
 }
+.kui-select[data-caret="false"]::part(expand-icon) {
+  display: none;
+}
+.kui-select[data-selected-presentation="icon-only"][data-caret="false"]::part(
+    combobox
+  ) {
+  width: var(
+    --_kui-toolbar-control-group-slot-height,
+    var(--_kui-select-height)
+  );
+  justify-content: center;
+}
+.kui-select[data-caret="false"] .kui-select__placeholder-chevron {
+  display: none;
+}
 .kui-select[data-selected-presentation="icon-only"]::part(display-input) {
   position: absolute;
   width: 1px;
@@ -207,6 +222,17 @@
   min-width: 0;
   flex: 1 1 auto;
 }
+/* A label can use the free start-slot width to truncate, but a caret-free
+   icon must keep its intrinsic width so the combobox can center the glyph. */
+.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]::part(
+    start
+  ) {
+  flex: 0 0 auto;
+}
+.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]
+  .kui-select__custom-selected {
+  margin-inline-end: 0 !important;
+}
 .kui-select--custom-selected::part(display-input) {
   position: absolute;
   width: 1px;

package/dist/styles/split-view.css

@@ -137,4 +137,10 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="split-view"]:only-child {
   height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }

package/dist/styles/sunken-panel.css

@@ -1,9 +1,12 @@
 .kui-sunken-panel {
+  /* Reset the private value on each panel so nested panels do not inherit it. */
+  --_kui-sunken-panel-flex: 0 1 auto;
   display: flex;
   min-width: 0;
   min-height: 0;
   padding: var(--kui-sunken-panel-padding, 0.5rem);
   box-sizing: border-box;
+  flex: var(--_kui-sunken-panel-flex, initial);
   border-radius: var(
     --kui-sunken-panel-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
@@ -17,6 +20,10 @@
   gap: var(--kui-sunken-panel-gap, 0.5rem);
 }
 
+.kui-sunken-panel[data-fill="true"] {
+  height: 100%;
+}
+
 .kui-sunken-panel[data-shape="square"] {
   border-radius: 0;
 }

package/dist/styles/tab-bar.css

@@ -45,6 +45,9 @@
   scroll-padding-inline: var(--kui-tab-bar-strip-scroll-padding-inline, 0);
   overscroll-behavior-inline: contain;
 }
+.kui-tab-bar[data-icon-only-at] .kui-tab-bar__tabs {
+  container: kui-tab-bar-tabs / inline-size;
+}
 .kui-tab-bar[data-presentation="segmented"],
 .kui-tab-bar[data-presentation="inspector"] {
   --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);

package/dist/styles/tab-scaffold.css

@@ -46,6 +46,13 @@
   inset: 0;
 }
 
+.kui-tab-scaffold__scene[data-appearance="sunken"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
 /* 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. */
@@ -191,4 +198,10 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="tab-scaffold"]:only-child {
   height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }

package/dist/styles/text.css

@@ -3,6 +3,35 @@
   box-sizing: border-box;
   border: 1px solid transparent;
   margin: 0;
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
+.kui-text[data-wrap="anywhere"] {
+  overflow-wrap: anywhere;
+}
+
+.kui-text[data-wrap="nowrap"] {
+  white-space: nowrap;
+}
+
+.kui-text[data-wrap="truncate"] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+span.kui-text[data-wrap="truncate"] {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.kui-text__clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_kui-text-max-lines);
 }
 
 .kui-text[data-tone="quiet"] {

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

@@ -6,6 +6,7 @@
   --kui-token-search-line-size: 2.125rem;
 
   display: grid;
+  position: relative;
   width: 100%;
   min-width: 0;
   min-height: 2.75rem;
@@ -139,6 +140,7 @@
 
 .kui-token-search__clear {
   grid-column: 3;
+  border-radius: var(--kui-radius-pill);
 }
 
 .kui-token-search__trailing {
@@ -147,13 +149,24 @@
 
 .kui-token-search__suggestions {
   display: grid;
-  grid-column: 2 / -1;
-  min-width: 0;
-  padding: 0.25rem;
-  border: 1px solid var(--kui-token-search-border);
+  position: absolute;
+  z-index: 20;
+  inset-block-start: calc(100% + 0.25rem);
+  inset-inline-start: 0;
+  width: min(max(100%, 15rem), calc(100vw - 1rem));
+  max-height: 15rem;
+  padding: var(--_kui-popup-inset);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
   border-radius: var(--kui-radius-pill);
-  background: var(--kui-token-search-background);
-  gap: 0.125rem;
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-m);
+  gap: var(--_kui-popup-row-gap);
+  overflow-y: auto;
+}
+
+.kui-token-search__suggestions:has(> :nth-child(2)) {
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
 }
 
 .kui-token-search__suggestion {
@@ -200,6 +213,12 @@
     border-color 0.2s ease;
 }
 
+.kui-token-search[data-collapsible="true"][data-expanded="true"]:has(
+    .kui-token-search__suggestions
+  ) {
+  overflow: visible;
+}
+
 .kui-token-search[data-collapsible="true"][data-expanded="false"] {
   width: 2.75rem;
   min-width: 2.75rem;
@@ -256,6 +275,10 @@
   box-shadow: none;
 }
 
+.kui-token-search[data-presentation="toolbar-group"] .kui-token-search__clear {
+  border-radius: var(--kui-control-highlight-radius);
+}
+
 .kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
   border-color: var(--kui-color-focus);
   background: var(--kui-token-search-background);

package/dist/styles/toolbar-control-group.css

@@ -33,6 +33,7 @@
   --_kui-toolbar-control-group-slot-overlap: 0px;
   --_kui-toolbar-control-group-slot-radius: var(--kui-toolbar-item-radius);
   display: inline-flex;
+  position: relative;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
@@ -46,6 +47,34 @@
   gap: 0;
 }
 
+.kui-toolbar-control-group[data-busy="true"] > svg,
+.kui-toolbar-control-group[data-busy="true"]
+  > :not(.kui-toolbar-control-group__busy-spinner)
+  svg {
+  visibility: hidden;
+}
+
+.kui-toolbar-control-group__busy-spinner {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  transform: translate(-50%, -50%);
+  place-items: center;
+  pointer-events: none;
+}
+
+.kui-toolbar-control-group__busy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* In a Toolbar zone, a group shorter than the toolbar's control band (the
    `--_kui-toolbar-band` the Toolbar provides) takes half the difference as a
    top margin, so it centers in the band by its own size. */
@@ -126,6 +155,12 @@
     background-color 0.2s ease,
     border-color 0.2s ease;
 }
+
+.kui-toolbar-control-group[data-content="search"]:has(
+    .kui-token-search__suggestions
+  ) {
+  overflow: visible;
+}
 .kui-toolbar-control-group[data-content="search"][data-expanded="false"] {
   width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   flex: 0 0 auto;

package/dist/styles/toolbar-text.css

@@ -47,17 +47,23 @@
   text-overflow: ellipsis;
 }
 
-.kui-toolbar-text[data-size="xlarge"] {
-  /* Matches page/panel titles: the same responsive clamp so a heading toolbar
-     title reads at the page-title scale without a bespoke override. Height grows
-     to the larger text (the fixed 40px would clip its ascenders). */
+.kui-toolbar-text:is([data-size="xlarge"], [data-size="xlarge-fixed"]) {
+  /* Both title sizes keep page/panel title color and geometry. Height grows to
+     their text instead of clipping ascenders in the default 40px box. */
   height: auto;
   min-height: 2.75rem;
   color: var(--kui-color-text);
-  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
   letter-spacing: -0.025em;
 }
 
+.kui-toolbar-text[data-size="xlarge"] {
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+}
+
+.kui-toolbar-text[data-size="xlarge-fixed"] {
+  font-size: var(--kui-font-l);
+}
+
 .kui-toolbar-text[data-size="large"] {
   font-size: var(--kui-font-m);
   letter-spacing: -0.015em;
@@ -93,7 +99,10 @@
   min-height: 2.5rem;
 }
 
-.kui-toolbar-text[data-size="xlarge"][data-wrap="true"] {
+.kui-toolbar-text:is(
+    [data-size="xlarge"],
+    [data-size="xlarge-fixed"]
+  )[data-wrap="true"] {
   min-height: 2.75rem;
 }
 

package/dist/styles/toolbar.css

@@ -95,6 +95,13 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
+/* Equal side tracks center the middle zone on the toolbar's content box even
+   when one side has no controls. Side content still shrinks or wraps within
+   its own track, and responsive policies below may move a zone to a new row. */
+.kui-toolbar[data-center-align="balanced"][data-has-center="true"] {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
 .kui-toolbar[data-responsive="trailing-priority"][data-has-center="false"]:has(
     > .kui-toolbar__trailing [data-expanded="true"]
   ) {