@kerfjs/ui 5.0.0-beta.4 → 5.0.0-beta.41

package/dist/styles/styles.css

@@ -4,19 +4,24 @@
 @import "./disclosure-arrow.css";
 @import "./toolbar.css";
 @import "./toolbar-control-group.css";
+@import "./surface-scaffold.css";
 @import "./toolbar-text.css";
-@import "./menu-action-row.css";
-@import "./menu-item.css";
-@import "./menu-header.css";
+@import "./text.css";
+@import "./list.css";
+@import "./row.css";
+@import "./spacer.css";
+@import "./list-action-row.css";
+@import "./list-item.css";
+@import "./list-header.css";
 @import "./resizable-region.css";
 @import "./app-tab.css";
+@import "./catalog.css";
 @import "./tab-bar.css";
-@import "./page-header.css";
 @import "./loading-spinner.css";
+@import "./skeleton.css";
 @import "./select.css";
 @import "./segmented-control.css";
 @import "./token-search-field.css";
 @import "./state-banner.css";
 @import "./empty-state.css";
-@import "./dialog-header.css";
 @import "./value-table.css";

package/dist/styles/sunken-panel.css

@@ -0,0 +1,22 @@
+.kui-sunken-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--kui-sunken-panel-padding, 0.5rem);
+  box-sizing: border-box;
+  border-radius: var(
+    --kui-sunken-panel-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+  color: var(--kui-sunken-panel-foreground, var(--kui-color-text));
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+  flex-direction: column;
+  gap: var(--kui-sunken-panel-gap, 0.5rem);
+}
+
+.kui-sunken-panel[data-shape="square"] {
+  border-radius: 0;
+}

package/dist/styles/surface-scaffold.css

@@ -0,0 +1,51 @@
+.kui-dialog-surface > wa-dialog {
+  --width: min(35rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-size="small"] > wa-dialog {
+  --width: min(25rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-size="large"] > wa-dialog {
+  --width: min(50rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-body-inset="none"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
+  padding: 0;
+}
+.kui-dialog-surface[data-body-inset="compact"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="compact"] > wa-dialog::part(footer) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-dialog-surface[data-body-inset="comfortable"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="comfortable"] > wa-dialog::part(footer) {
+  padding: var(--kui-wa-container-inset, 1rem);
+}
+.kui-dialog-surface[data-presentation="side-sheet"] > wa-dialog::part(dialog) {
+  width: min(30rem, 100vw);
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  margin-inline-end: 0;
+  border-radius: var(--kui-radius-l) 0 0 var(--kui-radius-l);
+}
+.kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog {
+  --width: 100vw;
+}
+.kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog::part(dialog) {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: 0;
+}
+.kui-popup-surface {
+  display: inline-flex;
+}
+.kui-popup-surface[data-inset="standard"] > wa-dropdown::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"] > wa-dropdown::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"] > wa-dropdown::part(menu) {
+  padding: 0;
+}

package/dist/styles/tab-bar.css

@@ -31,6 +31,30 @@
   gap: 0;
   overscroll-behavior-inline: contain;
 }
+.kui-tab-bar[data-presentation="segmented"],
+.kui-tab-bar[data-presentation="inspector"] {
+  --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);
+  --kui-tab-bar-border: var(--kui-color-neutral-border-quiet);
+}
+.kui-tab-bar[data-presentation="inspector"] {
+  min-height: 2.125rem;
+  padding: 0;
+}
+.kui-tab-bar[data-presentation="inspector"] .kui-tab-bar__tabs {
+  height: 2.125rem;
+  border-radius: var(--kui-radius-s);
+}
+.kui-tab-bar[data-allocation="fill"] [data-component="app-tab"] {
+  min-width: 0;
+  flex: 1 1 0;
+}
+.kui-tab-bar[data-allocation="fill"] [data-component="app-tab"] > [role="tab"] {
+  width: 100%;
+  justify-content: center;
+}
+.kui-tab-bar[data-trailing-placement="adjacent"] .kui-tab-bar__tabs {
+  flex: 0 1 auto;
+}
 
 .kui-tab-bar__tabs::-webkit-scrollbar {
   display: none;

package/dist/styles/tab-scaffold.css

@@ -0,0 +1,85 @@
+.kui-tab-scaffold {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__scenes {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Every tab stays mounted (its NavStack keeps its stack and scroll); only the
+   active scene is shown. */
+.kui-tab-scaffold__scene {
+  position: absolute;
+  overflow: auto;
+  inset: 0;
+}
+
+.kui-tab-scaffold__scene[data-active="false"] {
+  visibility: hidden;
+}
+
+.kui-tab-scaffold__bar {
+  display: flex;
+  flex: 0 0 auto;
+  padding-block-start: var(--kui-space-2xs);
+  /* Respect the home-indicator safe area on iOS-class devices. */
+  padding-block-end: calc(
+    var(--kui-space-2xs) + env(safe-area-inset-bottom, 0px)
+  );
+  border-block-start: 1px solid var(--kui-color-border);
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__tab {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: var(--kui-space-2xs) var(--kui-space-xs);
+  border: 0;
+  color: var(--kui-color-text-quiet);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.kui-tab-scaffold__tab[aria-selected="true"] {
+  color: var(--kui-color-accent-text);
+}
+
+.kui-tab-scaffold__tab:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
+.kui-tab-scaffold__tab-icon {
+  display: grid;
+  place-items: center;
+}
+
+.kui-tab-scaffold__tab-icon svg {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+.kui-tab-scaffold__tab-label {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  font-size: var(--kui-font-2xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/text.css

@@ -0,0 +1,6 @@
+.kui-text {
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  margin: 0;
+}

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

@@ -159,7 +159,12 @@
   width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
   max-width: 100%;
   overflow: hidden;
-  flex: 0 1 var(--kui-token-search-expanded-width, 30rem);
+  /* Size the inline axis through `width` only. A `flex-basis` of the expanded
+     width would drive the MAIN axis, which is the field's HEIGHT inside a flex
+     column — stretching the field tall (KF-EPEM88). `flex: 0 1 auto` keeps the
+     no-grow / may-shrink behavior a toolbar row wants without leaking the width
+     into the cross axis. */
+  flex: 0 1 auto;
   transition:
     width 0.25s ease,
     background-color 0.2s ease,
@@ -214,7 +219,10 @@
   height: auto;
   min-width: 0;
   overflow: hidden;
-  flex: 0 1 var(--kui-token-search-expanded-width, 30rem);
+  /* Same reason as the field above (KF-EPEM88): drive the inline size through
+     `width`, not `flex-basis`, so a group placed in a flex column is not
+     stretched to the expanded width in its cross axis. */
+  flex: 0 1 auto;
   transition:
     width 0.25s ease,
     background-color 0.2s ease,
@@ -234,6 +242,10 @@
   min-height: 2.5rem;
   padding: 0.25rem 0.375rem;
   border: 0;
+  /* This field is the group's inset visual layer. Inherit the same concentric
+     radius contract as buttons instead of retaining TokenSearchField's own pill
+     radius when the group switches to `shape="rounded"`. */
+  border-radius: var(--kui-control-highlight-radius);
   background: transparent;
   box-shadow: none;
 }

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

@@ -10,16 +10,24 @@
   --kui-toolbar-control-pressed-background: var(--kui-color-neutral-fill-loud);
   --kui-toolbar-control-pressed-border: var(--kui-color-neutral-border-loud);
   --kui-toolbar-control-pressed-color: var(--kui-color-neutral-on-loud);
+  --kui-toolbar-group-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+  --kui-control-highlight-radius: max(
+    0px,
+    calc(
+      var(--kui-toolbar-group-radius) - var(--kui-layout-highlight-inset, 2px)
+    )
+  );
+  --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
   display: inline-flex;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
   box-sizing: border-box;
   border: 1px solid var(--kui-toolbar-control-border);
-  border-radius: var(
-    --kui-toolbar-group-radius,
-    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
-  );
+  border-radius: var(--kui-toolbar-group-radius);
   color: var(--kui-toolbar-control-color);
   background: var(--kui-toolbar-control-background);
   align-items: center;
@@ -27,6 +35,16 @@
   gap: 0;
 }
 
+/* `shape="rounded"` swaps the default pill radius for the design system's softer
+   rounded rectangle. The shared highlight contract derives every inner hover or
+   selected surface from this outer radius and the group's full inset. */
+.kui-toolbar-control-group[data-shape="rounded"] {
+  --kui-toolbar-group-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+}
+
 .kui-toolbar-control-group[data-tone="dark"] {
   --kui-toolbar-control-background: color-mix(
     in srgb,
@@ -41,8 +59,66 @@
     transparent
   );
 }
+.kui-toolbar-control-group[data-size="compact"] {
+  --kui-toolbar-group-size: 2.125rem;
+}
+.kui-toolbar-control-group[data-density="tight"] {
+  --kui-layout-item-padding: 0.3125rem;
+}
+.kui-toolbar-control-group[data-content="text"] > :is(button, wa-button),
+.kui-toolbar-control-group[data-content="mixed"] > :is(button, wa-button) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"] > button {
+  display: flex;
+  gap: var(--kui-space-xs);
+}
+.kui-toolbar-control-group[data-content="avatar"][data-scrim="true"] {
+  --kui-toolbar-control-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-loud) 64%,
+    transparent
+  );
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+}
+.kui-toolbar-control-group[data-selected-tone="neutral"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-neutral-on-normal);
+  --kui-toolbar-control-selected-background: var(
+    --kui-color-neutral-fill-normal
+  );
+}
+.kui-toolbar-control-group[data-selected-tone="pop"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
+.kui-toolbar-control-group[data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-border: transparent;
+  --kui-toolbar-control-selected-background: var(--kui-color-brand-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-brand-on-normal);
+}
+.kui-toolbar-control-group[data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-background: transparent;
+  --kui-toolbar-control-selected-border: var(--kui-color-brand-border-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-background: var(--kui-color-pop-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-border: var(--kui-color-pop-border-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
 
 .kui-toolbar-control-group[data-appearance="borderless"] {
+  /* A borderless group has no base fill to lift from, so the default
+     surface-colored hover/selected background is invisible against the page.
+     Use a visible neutral tint so buttons still show hover/press feedback
+     (KF-WZDQS8). */
+  --kui-toolbar-control-hover-background: var(--kui-color-neutral-fill-normal);
+  --kui-toolbar-control-selected-background: var(
+    --kui-color-neutral-fill-normal
+  );
   border-color: transparent;
   background: transparent;
 }
@@ -50,6 +126,9 @@
 .kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
   flex: 0 0 auto;
 }
+.kui-toolbar-control-group > wa-dropdown {
+  display: inline-flex;
+}
 
 .kui-toolbar-control-group > button {
   appearance: none;
@@ -89,6 +168,61 @@
   min-width: 2.5rem;
   height: 2.5rem;
 }
+.kui-toolbar-control-group[data-size="compact"] > button,
+.kui-toolbar-control-group[data-size="compact"] > wa-button,
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown,
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
+
+/* Compact mixed controls keep the default horizontal breathing room. Their
+   raised selection grows over the group's own border instead of becoming a
+   smaller inset lozenge, while negative margins keep the outer geometry and
+   neighboring trigger position stable. */
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"] {
+  --kui-layout-item-padding: 0.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > button[aria-pressed="true"] {
+  position: relative;
+  z-index: 1;
+  height: var(--kui-toolbar-group-size);
+  margin: -2px;
+  border-radius: var(--kui-toolbar-group-radius);
+}
+
+/* A compact icon-only trigger may stay square, but a mixed-content dropdown
+   trigger must grow for its slotted label plus Web Awesome's caret. Otherwise
+   the fixed 32px base centers both outside its host, painting the label across
+   the separator and the caret beyond the group border. */
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button {
+  /* WebKit does not contribute a custom element's shadow-part caret to the
+     host's intrinsic inline size. Give the standard short text trigger an
+     engine-stable floor; max-content still wins for longer light-DOM labels,
+     and consumers can raise the public variable for localized copy. */
+  width: var(--kui-toolbar-dropdown-trigger-width, 4.125rem);
+}
 
 .kui-toolbar-control-group[data-single="true"] > wa-dropdown,
 .kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button,
@@ -107,6 +241,10 @@
 }
 
 .kui-toolbar-control-group wa-button::part(base) {
+  /* Match min-width to the 40px height so an icon-only button's highlight is at
+     least a circle, not a vertical oval — the host is 40px wide but the base
+     part was sizing to its ~32px content. Text/caret buttons grow past it. */
+  min-width: 2.5rem;
   min-height: 2.5rem;
   box-sizing: border-box;
   border: 1px solid transparent;
@@ -118,13 +256,13 @@
 
 .kui-toolbar-control-group wa-button:hover::part(base) {
   border-color: var(--kui-toolbar-control-border);
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
     > :is(button, wa-button, wa-dropdown)
   ):hover {
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"] > :is(button, wa-button):hover,
@@ -133,19 +271,67 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group[data-single="false"]
-  > :is(button, wa-button)[aria-pressed="true"] {
+/* A group holding exactly one control behaves like `single` even without the
+   flag: the whole group background changes on hover instead of highlighting an
+   inner layer inset from the border (KF-J9P1ZD — a heading toolbar's lone Close/
+   Done action). */
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  ):hover {
+  background-color: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  )
+  > :is(button, wa-button):hover,
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  )
+  wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+
+/* A plain <button> child paints its own box for the selected state. */
+.kui-toolbar-control-group[data-single="false"] > button[aria-pressed="true"] {
   border-color: var(--kui-toolbar-control-selected-border);
   color: var(--kui-toolbar-control-selected-color);
   background: var(--kui-toolbar-control-selected-background);
   box-shadow: var(--kui-toolbar-control-selected-shadow);
 }
 
+/* A wa-button's visual is ::part(base), not the outer 40px host box (which has no
+   pill radius). Paint the selected background/border/shadow on ::part(base) —
+   mirroring the hover rule — so the selected state matches the pill radius/size
+   and stays inside the group's border instead of overflowing it as an oversized
+   square (KF-5BDDQ9). The selected text color rides on the host and inherits in. */
+.kui-toolbar-control-group[data-single="false"]
+  > wa-button[aria-pressed="true"] {
+  color: var(--kui-toolbar-control-selected-color);
+}
+.kui-toolbar-control-group[data-single="false"]
+  > wa-button[aria-pressed="true"]::part(base) {
+  border-color: var(--kui-toolbar-control-selected-border);
+  background: var(--kui-toolbar-control-selected-background);
+  box-shadow: var(--kui-toolbar-control-selected-shadow);
+}
+
 .kui-toolbar-control-group > :is(button, wa-button):focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
+/* A composed Select can delegate focus paint to the group so the visible ring
+   follows the group's selected pill/rounded geometry instead of Web Awesome's
+   form-control radius. */
+.kui-toolbar-control-group:has(
+  > .kui-select[data-focus-ring-owner="group"]:is(:focus-within, [open])
+) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
 .kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
     > :is(button, wa-button)[aria-pressed="true"]
   ) {
@@ -159,3 +345,44 @@
   > :is(button, wa-button)[aria-pressed="true"] {
   color: var(--kui-toolbar-control-pressed-color);
 }
+
+/* Avatar controls paint the image as chrome rather than inserting a replaced
+   <img> into the control. `background-size: contain` is the background-image
+   equivalent of `object-fit: contain`: the whole avatar remains visible. A
+   lone control belongs to the outer group surface; in a group of choices the
+   image belongs only to the selected highlight. */
+.kui-toolbar-control-group[data-content="avatar"] {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(> :is(button, wa-button):only-child)
+  ) {
+  background-image: var(--kui-toolbar-avatar-image);
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(> :is(button, wa-button):only-child)
+  )
+  > :is(button, wa-button) {
+  color: transparent;
+}
+
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(> :is(button, wa-button):only-child)
+  )
+  > button[aria-pressed="true"],
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(> :is(button, wa-button):only-child)
+  )
+  > wa-button[aria-pressed="true"]::part(base) {
+  color: transparent;
+  background-image: var(--kui-toolbar-avatar-image);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}

package/dist/styles/toolbar-text.css

@@ -9,11 +9,30 @@
   color: var(--kui-color-neutral-on-quiet);
   font-weight: 650;
   line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   align-items: center;
 }
 
+/* The text lives in a block child, not directly in the flex box, so
+   `text-overflow: ellipsis` actually applies (it is a no-op on a flex item). */
+.kui-toolbar-text__text {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  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). */
+  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="large"] {
   font-size: var(--kui-font-m);
   letter-spacing: -0.015em;
@@ -27,3 +46,47 @@
   font-family: var(--kui-font-mono);
   font-size: var(--kui-font-xs);
 }
+
+/* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
+.kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
+  text-overflow: clip;
+}
+
+/* Wrap onto multiple lines. The box grows to fit and switches from the centered
+   single-line row to a top-aligned block with readable leading; a min-height keeps
+   a one-line label at the toolbar row height. */
+.kui-toolbar-text[data-wrap="true"] {
+  align-items: flex-start;
+  height: auto;
+  min-height: 2.5rem;
+}
+
+.kui-toolbar-text[data-size="xlarge"][data-wrap="true"] {
+  min-height: 2.75rem;
+}
+
+.kui-toolbar-text[data-wrap="true"] .kui-toolbar-text__text {
+  white-space: normal;
+  line-height: 1.25;
+}
+
+/* Wrap capped to N lines with an ellipsis at the cut. `-webkit-line-clamp` needs
+   the box display and emits the … itself; the unprefixed `line-clamp` follows for
+   engines that ship it. */
+.kui-toolbar-text[data-wrap="true"][data-max-lines] .kui-toolbar-text__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--kui-toolbar-text-max-lines);
+  line-clamp: var(--kui-toolbar-text-max-lines);
+  overflow: hidden;
+}
+
+/* Wrap capped to N lines without an ellipsis: clip at a max-height instead of
+   line-clamp (which always ellipsizes). */
+.kui-toolbar-text[data-wrap="true"][data-max-lines][data-ellipsis="false"]
+  .kui-toolbar-text__text {
+  display: block;
+  -webkit-line-clamp: none;
+  line-clamp: none;
+  max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
+}