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

package/dist/styles/tab-bar.css

@@ -38,32 +38,17 @@
   --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);
   --kui-tab-bar-border: var(--kui-color-neutral-border-quiet);
 }
-/* A segmented strip's outer ends follow the pill track. The first tab's
-   leading corners, and a filled strip's last tab's trailing corners, are
-   pill-rounded, and a compact tab is inset from the track's ends by the same
-   distance as from its top and bottom, so each end is concentric with the
-   track. Only fill allocation carries the last tab to the track's trailing
-   end; an intrinsic strip's last tab stops short of it and keeps the segment
-   radius, as do the corners between tabs. */
+/* A segmented strip's outer ends follow the pill track: a compact tab is inset
+   from the track's ends by the same distance as from its top and bottom, so
+   each end is concentric with the track. AppTab rounds its own outer corners
+   to match in this context (see app-tab.css); TabBar never styles AppTab. */
 .kui-tab-bar[data-presentation="segmented"]
-  .kui-tab-bar__tabs:has(> [data-component="app-tab"][data-size="compact"]) {
+  .kui-tab-bar__tabs:has(> .kui-app-tab[data-size="compact"]) {
   padding-inline: calc(
     (var(--kui-toolbar-group-size, calc(2px + 2.625rem)) - 2rem) /
       2 - 1px
   );
 }
-.kui-tab-bar[data-presentation="segmented"]
-  .kui-tab-bar__tabs
-  > [data-component="app-tab"]:first-child {
-  border-start-start-radius: var(--kui-radius-pill);
-  border-end-start-radius: var(--kui-radius-pill);
-}
-.kui-tab-bar[data-presentation="segmented"][data-allocation="fill"]
-  .kui-tab-bar__tabs
-  > [data-component="app-tab"]:last-child {
-  border-start-end-radius: var(--kui-radius-pill);
-  border-end-end-radius: var(--kui-radius-pill);
-}
 .kui-tab-bar[data-presentation="inspector"] {
   min-height: 2.125rem;
   padding: 0;
@@ -72,14 +57,6 @@
   min-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;
 }
@@ -100,3 +77,77 @@
 .kui-tab-bar__end {
   margin-inline-start: auto;
 }
+
+/* Overflow dividers: a line on each side of the tab strip beyond which tabs
+   are scrolled out of view, as `wireScrollDividers` reports through the
+   strip's `data-scroll-overflow` (physical sides). A rail strip has no
+   visible track, so the bar draws the line with its own pseudo-elements,
+   ordered onto the strip's edges: `::before` between the leading zone and the
+   strip, `::after` between the strip and the trailing zone. Each is 1px wide
+   and gives back its width and one gap through a negative margin, so it
+   overlaps the strip's edge and never moves a tab or an action; hidden, it is
+   transparent. A segmented or inspector strip already draws a bordered track,
+   so its overflowing side takes the divider color on that border instead of
+   a straight line across its rounded end. */
+.kui-tab-bar > .kui-tab-bar__leading {
+  order: -2;
+}
+
+.kui-tab-bar > :is(.kui-tab-bar__trailing, .kui-tab-bar__end) {
+  order: 1;
+}
+
+.kui-tab-bar::before,
+.kui-tab-bar::after {
+  content: "";
+  position: relative;
+  z-index: 1;
+  width: 1px;
+  background: transparent;
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
+}
+
+.kui-tab-bar::before {
+  order: -1;
+  margin-inline-end: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar::after {
+  margin-inline-start: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="l"]
+  )::before,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
+  )::before,
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
+  )::after,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="l"]
+  )::after {
+  background: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.kui-tab-bar:not([data-presentation="rail"])
+  > .kui-tab-bar__tabs[data-scroll-overflow*="l"] {
+  border-left-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.kui-tab-bar:not([data-presentation="rail"])
+  > .kui-tab-bar__tabs[data-scroll-overflow*="r"] {
+  border-right-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}

package/dist/styles/tab-scaffold.css

@@ -96,10 +96,24 @@
   );
   padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
     var(--_kui-tab-scaffold-safe-inline-end);
-  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
+  /* Chrome divider: with `chromeDividers="scroll"` (the default, no
+     attribute) the bar's 1px top border shows only while the active scene's
+     content continues below it — never at the scroll end or when the content
+     fits. `wireScrollDividers` reports that state through
+     `data-scroll-divider`; `always` shows it without the wiring, and `none`
+     never. The border is always there and only its color changes, so
+     showing it never moves the bar or a tab. */
+  border-block-start: 1px solid
+    var(--_kui-tab-scaffold-bar-divider, transparent);
   background: var(--kui-color-surface);
 }
 
+.kui-tab-scaffold:not([data-chrome-dividers])
+  > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
+.kui-tab-scaffold[data-chrome-dividers="always"] > .kui-tab-scaffold__bar {
+  --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
+}
+
 .kui-tab-scaffold__tab {
   display: flex;
   flex: 1 1 0;
@@ -168,3 +182,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a TabScaffold fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="tab-scaffold"]:only-child {
+  height: 100%;
+}

package/dist/styles/text.css

@@ -30,3 +30,19 @@ span.kui-text {
   border: 0;
   padding: 0;
 }
+
+/* A ListHeader's label: the title's single text child, set as a compact,
+   uppercase, single-line label that truncates with an ellipsis. The title is
+   a div around a heading or, for a toggle header, the toggle button around
+   an inline span. */
+.kui-list-header__title > .kui-text {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}

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

@@ -21,15 +21,17 @@
     )
   );
   --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
-  /* Internal group-to-child contract: the control slot a composed child (an
-     icon-only Select) fills so it is inset evenly on every side and the
-     group-owned focus ring stays concentric with the visible control. The
-     group sizes to the child's width. A default slot is 40px tall inside the
-     2px inset; a compact slot is the full 32px padding box, and a lone
-     compact child also overlaps the 1px inline padding. */
-  --_kui-toolbar-slot-height: 2.5rem;
-  --_kui-toolbar-slot-overlap: 0px;
-  --_kui-toolbar-slot-radius: var(--kui-toolbar-item-radius);
+  /* Context the group provides to a composed child (an icon-only Select, in
+     select.css): the control slot the child fills so it is inset evenly on
+     every side and the group-owned focus ring stays concentric with the
+     visible control. The group sizes to the child's width. A default slot is
+     40px tall inside the 2px inset; a compact slot is the full 32px padding
+     box, and a lone compact child also overlaps the 1px inline padding. The
+     values are named after the group that provides them; the child reads
+     them from its own stylesheet. */
+  --_kui-toolbar-control-group-slot-height: 2.5rem;
+  --_kui-toolbar-control-group-slot-overlap: 0px;
+  --_kui-toolbar-control-group-slot-radius: var(--kui-toolbar-item-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));
@@ -44,6 +46,23 @@
   gap: 0;
 }
 
+/* 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. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group {
+  margin-block-start: max(
+    0px,
+    calc(
+      (
+          var(--_kui-toolbar-band) -
+            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+        ) /
+        2
+    )
+  );
+}
+
 .kui-toolbar-control-group[data-visibility="compact-only"] {
   display: none;
 }
@@ -80,9 +99,9 @@
 }
 .kui-toolbar-control-group[data-size="compact"] {
   --kui-toolbar-group-size: 2.125rem;
-  --_kui-toolbar-slot-height: 2rem;
-  --_kui-toolbar-slot-overlap: 1px;
-  --_kui-toolbar-slot-radius: max(
+  --_kui-toolbar-control-group-slot-height: 2rem;
+  --_kui-toolbar-control-group-slot-overlap: 1px;
+  --_kui-toolbar-control-group-slot-radius: max(
     0px,
     calc(var(--kui-toolbar-group-radius) - 1px)
   );
@@ -121,13 +140,15 @@
   display: flex;
   gap: var(--kui-space-xs);
 }
-.kui-toolbar-control-group[data-content="mixed"] wa-button {
+.kui-toolbar-control-group[data-content="mixed"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
   line-height: normal;
 }
 /* Toolbar controls never wrap. Web Awesome's label part is a plain block, so a
    slotted icon (a block SVG) and its text would otherwise stack vertically —
    lay them out on one row the way native mixed buttons already are. */
-.kui-toolbar-control-group wa-button::part(label) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::part(label) {
   display: inline-flex;
   align-items: center;
   gap: var(--kui-space-xs);
@@ -183,11 +204,15 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group
-  > :is(button, wa-button, wa-dropdown, .kui-toolbar-action-link) {
+/* The group lays out its own native and raw Web Awesome children. A composed
+   PopupMenu (`wa-dropdown.kui-popup-menu`) or Select sizes itself in the
+   group's context from its own stylesheet (popup-menu.css, select.css); the
+   group names those children by class only to key its own state on them. */
+.kui-toolbar-control-group > :is(button, wa-button, .kui-toolbar-action-link),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
   flex: 0 0 auto;
 }
-.kui-toolbar-control-group > wa-dropdown {
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
   display: inline-flex;
 }
 
@@ -268,7 +293,7 @@
 }
 
 .kui-toolbar-control-group > button svg,
-.kui-toolbar-control-group wa-button > svg,
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) > svg,
 .kui-toolbar-control-group > .kui-toolbar-action-link svg {
   display: block;
   width: 1rem;
@@ -276,34 +301,43 @@
 }
 
 /* Nested Web Awesome buttons take the group's control height, not the theme's
-   44px standalone control height. */
-.kui-toolbar-control-group wa-button {
+   44px standalone control height. The group's `wa-button` rules style only raw
+   buttons: a composed PopupMenu's trigger (`.kui-popup-menu > wa-button`) is
+   excluded inside a zero-specificity `:where()` and takes the same metrics
+   from popup-menu.css. */
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   --wa-form-control-height: 2.5rem;
 }
-.kui-toolbar-control-group[data-size="compact"] wa-button {
+.kui-toolbar-control-group[data-size="compact"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
   --wa-form-control-height: 2rem;
 }
 
 .kui-toolbar-control-group > wa-button,
-.kui-toolbar-control-group > wa-dropdown,
-.kui-toolbar-control-group > wa-dropdown > wa-button,
-.kui-toolbar-control-group > wa-dropdown > wa-button::part(base) {
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base) {
   min-width: 2.5rem;
   height: 2.5rem;
 }
 .kui-toolbar-control-group[data-size="compact"] > button,
 .kui-toolbar-control-group[data-size="compact"] > .kui-toolbar-action-link,
 .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-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base),
 .kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
-  wa-dropdown
+  wa-dropdown:not(.kui-popup-menu)
   wa-button,
 .kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
-  wa-dropdown
+  wa-dropdown:not(.kui-popup-menu)
   wa-button::part(base) {
   min-width: 2rem;
   height: 2rem;
@@ -320,16 +354,17 @@
 /* `standard` keeps each menu's own standard inset: a raw wa-dropdown takes the
    8px surface inset, while a PopupMenu keeps the Select listbox inset it
    shares (popup-menu.css). The explicit compact and list-zero choices apply to
-   every nested menu. */
+   every nested menu; a PopupMenu applies them to itself (popup-menu.css). */
 .kui-toolbar-control-group[data-menu-inset="standard"]
-  wa-dropdown:not([data-component="popup-menu"])::part(menu) {
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
-.kui-toolbar-control-group[data-menu-inset="compact"] wa-dropdown::part(menu) {
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0.25rem;
 }
 .kui-toolbar-control-group[data-menu-inset="list-zero"]
-  wa-dropdown::part(menu) {
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0;
 }
 
@@ -350,7 +385,7 @@
 }
 
 .kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
-  > wa-dropdown,
+  > wa-dropdown:not(.kui-popup-menu),
 .kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
   > wa-button {
   margin: -2px;
@@ -361,26 +396,26 @@
    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-dropdown:not(.kui-popup-menu)
   > wa-button,
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   min-width: max-content;
 }
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   width: max-content;
 }
 
 .kui-toolbar-control-group[data-single="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   width: max-content;
 }
 
-.kui-toolbar-control-group wa-button {
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   display: inline-flex;
   line-height: 0;
   align-items: center;
@@ -388,7 +423,8 @@
   --wa-color-fill-quiet: transparent;
 }
 
-.kui-toolbar-control-group wa-button::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::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. */
@@ -402,20 +438,29 @@
   );
 }
 
-.kui-toolbar-control-group wa-button:hover::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *)):hover::part(base) {
   border-color: var(--kui-toolbar-control-border);
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
-    > :is(button, wa-button, wa-dropdown, wa-select, .kui-toolbar-action-link)
+    > :is(
+      button,
+      wa-button,
+      .kui-popup-menu,
+      wa-dropdown:not(.kui-popup-menu),
+      .kui-select,
+      .kui-toolbar-action-link
+    )
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]
   > :is(button, wa-button, .kui-toolbar-action-link):hover,
-.kui-toolbar-control-group[data-single="true"] wa-button:hover::part(base) {
+.kui-toolbar-control-group[data-single="true"]
+  wa-button:not(:where(.kui-popup-menu > *)):hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
@@ -425,7 +470,7 @@
    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, wa-select, .kui-toolbar-action-link):only-child
+    > :is(button, wa-button, .kui-select, .kui-toolbar-action-link):only-child
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -437,19 +482,13 @@
 .kui-toolbar-control-group:not([data-single="true"]):has(
     > :is(button, wa-button):only-child
   )
-  wa-button:hover::part(base) {
+  > wa-button:hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
 
-/* A toolbar Select beside other controls highlights its own pill on hover,
-   like its button and dropdown siblings; a lone Select instead lifts the whole
-   group (above). */
-.kui-toolbar-control-group:not([data-single="true"])
-  > wa-select:not(:only-child):hover::part(combobox) {
-  border-color: var(--kui-toolbar-control-border);
-  background: var(--kui-toolbar-control-hover-background);
-}
+/* A toolbar Select beside other controls highlights its own pill on hover
+   (select.css); a lone Select instead lifts the whole group (above). */
 
 /* A plain <button> child paints its own box for the selected state. */
 .kui-toolbar-control-group[data-single="false"] > button[aria-pressed="true"] {
@@ -481,25 +520,29 @@
   outline-offset: 1px;
 }
 
-/* With per-control rings, a composed Select paints its own ring even when it
-   was told the group owns it: nothing else would show focus. It matches the
-   sibling controls' ring and offset. While its listbox is open the popup shows
-   focus instead, so the trigger ring stays off, as a PopupMenu trigger's does. */
-.kui-toolbar-control-group[data-focus-ring="control"]
-  > wa-select:not([open]):focus-within::part(combobox) {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
+/* With per-control rings, a composed Select paints its own ring (select.css). */
 
 .kui-toolbar-control-group[data-focus-ring="outline"]:focus-within:not(
-    :where(:has(wa-select[open], wa-dropdown[open]))
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
   ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
 .kui-toolbar-control-group[data-focus-ring="halo"]:focus-within:not(
-    :where(:has(wa-select[open], wa-dropdown[open]))
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
   ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px
@@ -517,14 +560,26 @@
    descendant also owns the group ring. Kept as separate rules so an engine
    without :has() keeps the :focus-within ring. */
 .kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus):not(
-    :where(:has(wa-select[open], wa-dropdown[open]))
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
   ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
 .kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus):not(
-    :where(:has(wa-select[open], wa-dropdown[open]))
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
   ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px

package/dist/styles/toolbar-text.css

@@ -12,6 +12,27 @@
   align-items: center;
 }
 
+/* In a Toolbar zone, a title fills the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) and centers its first line in
+   it; further lines of a wrapped title continue below the band. These rules
+   precede the size and wrap rules below, which keep their own minimum
+   heights. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text {
+  height: auto;
+  min-height: var(--_kui-toolbar-band);
+}
+
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text[data-wrap="true"] {
+  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
+}
+
+/* A filling title grows into its row's free space and truncates there. */
+.kui-toolbar-text[data-fill="true"] {
+  flex: 1 1 auto;
+}
+
 /* 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 {

package/dist/styles/toolbar.css

@@ -104,28 +104,28 @@
     inset 1px 0 var(--_kui-toolbar-divider-left);
 }
 
-.kui-toolbar[divider-sides*="t"] {
+.kui-toolbar:is([divider-sides*="t"], [data-scroll-divider*="t"]) {
   --_kui-toolbar-divider-top: var(
     --kui-toolbar-divider-color,
     var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="r"] {
+.kui-toolbar:is([divider-sides*="r"], [data-scroll-divider*="r"]) {
   --_kui-toolbar-divider-right: var(
     --kui-toolbar-divider-color,
     var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="b"] {
+.kui-toolbar:is([divider-sides*="b"], [data-scroll-divider*="b"]) {
   --_kui-toolbar-divider-bottom: var(
     --kui-toolbar-divider-color,
     var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="l"] {
+.kui-toolbar:is([divider-sides*="l"], [data-scroll-divider*="l"]) {
   --_kui-toolbar-divider-left: var(
     --kui-toolbar-divider-color,
     var(--kui-color-neutral-border-normal)
@@ -140,7 +140,10 @@
    down. A growing item therefore never moves the other items or its own top.
    Centering the zones in the toolbar row instead dropped every control to the
    middle of a two-line title. The band is resolved here, on the toolbar, so a
-   compact group's own smaller group size never redefines it. */
+   compact group's own smaller group size never redefines it.
+   `--_kui-toolbar-band` is context the toolbar provides: a ToolbarControlGroup
+   and a ToolbarText each center themselves in it from their own stylesheets
+   (toolbar-control-group.css, toolbar-text.css). */
 .kui-toolbar {
   --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
 }
@@ -155,33 +158,6 @@
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-control-group"] {
-  margin-block-start: max(
-    0px,
-    calc(
-      (
-          var(--_kui-toolbar-band) -
-            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
-        ) /
-        2
-    )
-  );
-}
-
-/* A title fills the band and centers its first line in it; further lines of a
-   wrapped title continue below the band. */
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-text"] {
-  height: auto;
-  min-height: var(--_kui-toolbar-band);
-}
-
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-text"][data-wrap="true"] {
-  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
-}
-
 /* Pin each zone to its column so a display:none (empty) leading or center zone
    doesn't let the trailing zone auto-place into the first column — which left an
    extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing