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

package/dist/styles/popup-menu.css

@@ -88,3 +88,154 @@
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
+
+/* In a ToolbarControlGroup a PopupMenu sizes itself in the group's context:
+   the group lays out its own native and raw Web Awesome children and names a
+   PopupMenu only to key its own state on it. The trigger takes the group's
+   control height (40px, or 32px in a compact group). A mixed-content trigger
+   in a nested-dropdown group grows for its label plus the caret; a fixed 32px
+   base would center both outside its host, painting the label across the
+   separator and the caret beyond the group border. */
+/* The trigger button takes the group's control metrics, as the group's own
+   raw wa-button children do (toolbar-control-group.css excludes this
+   trigger). The PopupMenu ancestor sits in `:where()` so each rule keeps the
+   specificity of the group's matching raw-child rule and resolves against the
+   group's attribute-keyed variants exactly as they do. */
+.kui-toolbar-control-group :where(wa-dropdown.kui-popup-menu) > wa-button {
+  --wa-form-control-height: 2.5rem;
+  display: inline-flex;
+  line-height: 0;
+  align-items: center;
+  justify-content: center;
+  --wa-color-fill-quiet: transparent;
+}
+.kui-toolbar-control-group[data-size="compact"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  --wa-form-control-height: 2rem;
+}
+.kui-toolbar-control-group[data-content="mixed"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  line-height: normal;
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button
+  > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+/* Toolbar controls never wrap: a slotted icon and its label share one row. */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kui-space-xs);
+  white-space: nowrap;
+}
+/* At least a circle around an icon-only trigger, with the group's item radius;
+   hover lifts the trigger like a group button, except in a `single` group,
+   whose whole surface shows the hover (toolbar-control-group.css). */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button: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"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown.kui-popup-menu {
+  margin: -2px;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+.kui-toolbar-control-group[data-single="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+
+/* The menu insets a composing parent asks for. A PopupMenu applies them to
+   itself; its default is the Select listbox inset above, which a
+   ToolbarControlGroup's `standard` inset keeps. A PopupSurface's inset follows
+   the group's, so a surface wins when both apply. */
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}

package/dist/styles/resizable-region.css

@@ -6,14 +6,22 @@
   --kui-resizable-region-handle-active-color: var(--kui-color-text-link);
   /* Extra track a horizontal region adds when it reaches an unsafe screen edge,
      so its surface paints through the unsafe area while its committed size
-     stays the content width. A composing layout sets it on the region (a
-     SplitView list does); it never inherits into a nested region. */
+     stays the content width. The region sets it itself from the context of a
+     layout that places it at an edge (a SplitView list); it never inherits
+     into a nested region. */
   --kui-resizable-region-edge-extent: 0px;
   position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
 }
+/* As a split SplitView's list, the region's track grows by the unsafe
+   inline-start inset the SplitView provides, while its committed size stays
+   the content width. A collapsed region stays shut. */
+.kui-split-view[data-split-mode="split"]
+  > .kui-resizable-region:not([data-collapsed="true"]) {
+  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
+}
 .kui-resizable-region[data-axis="horizontal"] {
   width: calc(
     var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
@@ -218,8 +226,9 @@
    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
+   closes. The ResizableRegion's own covered context,
+   `--_kui-resizable-region-covered`, 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
@@ -231,7 +240,7 @@
       )
   )
 ) {
-  --_kui-floating-covered: hidden;
+  --_kui-resizable-region-covered: hidden;
 }
 :where(
     :has(
@@ -241,7 +250,7 @@
     )
   )
   > .kui-resizable-region[data-presentation="overlay"] {
-  --_kui-floating-covered: initial;
+  --_kui-resizable-region-covered: initial;
 }
 
 @container (max-width: 44rem) {
@@ -311,12 +320,15 @@
     --kui-resizable-region-restore-inset,
     1rem
   );
-  /* The corner owns the inset, so a FloatingToolbar composed here floats
-     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);
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
   z-index: var(
     --kui-resizable-region-restore-z,
     calc(var(--kui-resizable-region-overlay-z, 41) - 2)

package/dist/styles/select.css

@@ -49,10 +49,10 @@
    caret wa-button): symmetric 8px inline padding, 12px from the icon to the
    caret's 20px box, the caret glyph size, and the control height, so the icon
    sits left of center to balance the caret. Inside a ToolbarControlGroup the
-   trigger takes the group's control-slot height, overlap, and radius
-   (`--_kui-toolbar-slot-*`) so it is inset evenly on every side, the group
-   sizes to the trigger (wider than tall), and the group-owned focus ring
-   stays concentric with it. */
+   trigger takes the control-slot height, overlap, and radius the group
+   provides (`--_kui-toolbar-control-group-slot-*`) so it is inset evenly on
+   every side, the group sizes to the trigger (wider than tall), and the
+   group-owned focus ring stays concentric with it. */
 .kui-select[data-selected-presentation="icon-only"] {
   --_kui-select-height: 2.75rem;
   width: max-content;
@@ -61,7 +61,10 @@
   --_kui-select-height: 2rem;
 }
 .kui-select[data-selected-presentation="icon-only"]::part(combobox) {
-  min-height: var(--_kui-toolbar-slot-height, var(--_kui-select-height));
+  min-height: var(
+    --_kui-toolbar-control-group-slot-height,
+    var(--_kui-select-height)
+  );
   padding-inline: 0.5rem;
   border-radius: var(
     --kui-toolbar-item-radius,
@@ -72,14 +75,32 @@
    sibling controls it keeps the group's gap, end insets, and item radius, as
    they do. */
 .kui-select[data-selected-presentation="icon-only"]:only-child {
-  margin-inline: calc(var(--_kui-toolbar-slot-overlap, 0px) * -1);
+  margin-inline: calc(var(--_kui-toolbar-control-group-slot-overlap, 0px) * -1);
 }
 .kui-select[data-selected-presentation="icon-only"]:only-child::part(combobox) {
   border-radius: var(
-    --_kui-toolbar-slot-radius,
+    --_kui-toolbar-control-group-slot-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
 }
+/* In a ToolbarControlGroup, a Select beside other controls highlights its own
+   pill on hover, like its button and dropdown siblings; a lone Select instead
+   lifts the whole group (toolbar-control-group.css). */
+.kui-toolbar-control-group:not([data-single="true"])
+  > .kui-select:not(:only-child):hover::part(combobox) {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+/* With the group's 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"]
+  > .kui-select:not([open]):focus-within::part(combobox) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
 /* The popup-menu wa-button draws the same chevron glyph at 0.875em inside a
    20px box; match its box, spacing, and glyph size rather than the smaller
    form-field disclosure scale. */
@@ -99,13 +120,6 @@
   .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) {

package/dist/styles/skeleton.css

@@ -7,9 +7,10 @@
   height: 1em;
   border-radius: var(--kui-skeleton-radius);
   /* Deliberately unanimated: a flat, subtle fill that reads as "not yet loaded"
-     without drawing the eye or implying progress. A host with its own solid
-     fill (a solid Badge) supplies `--_kui-skeleton-fill` derived from its
-     foreground, since a text-color tint vanishes on a saturated fill. */
+     without drawing the eye or implying progress. On a host with its own
+     solid fill (a solid Badge) the skeleton derives `--_kui-skeleton-fill`
+     from the host's foreground, since a text-color tint vanishes on a
+     saturated fill. */
   background: var(
     --_kui-skeleton-fill,
     color-mix(in srgb, var(--kui-color-text) 12%, transparent)
@@ -17,6 +18,19 @@
   vertical-align: middle;
 }
 
+/* A placeholder's skeleton inside a solid badge: the generic text-color tint is
+   nearly invisible on the saturated fill, so derive it from the on-solid
+   foreground the badge provides, which contrasts with the fill in every tone
+   and color scheme. Quiet and outline badges sit on a pale fill and keep the
+   generic tint. */
+.kui-badge[data-appearance="solid"] .kui-skeleton {
+  --_kui-skeleton-fill: color-mix(
+    in srgb,
+    var(--_kui-badge-on-solid) 45%,
+    transparent
+  );
+}
+
 .kui-skeleton[data-block="true"] {
   display: block;
 }
@@ -63,3 +77,16 @@
     background: GrayText;
   }
 }
+
+/* A placeholder StateBanner's badge holds this skeleton instead of text. With
+   no text, the skeleton's baseline would be synthesized from its bottom edge,
+   sitting the badge higher than the live one by a font-dependent amount. A
+   zero-width character gives it a text baseline in the badge's own font and
+   line height, exactly where the live badge's text baseline falls on every
+   platform. */
+.kui-state-banner[data-placeholder="true"]
+  .kui-state-banner__copy
+  > .kui-badge
+  > .kui-skeleton::before {
+  content: "\200b";
+}

package/dist/styles/split-view.css

@@ -51,13 +51,6 @@
   min-height: 0;
 }
 
-/* A resizable list keeps its committed size as content width; its region's
-   track grows by the unsafe inset it reaches. A collapsed region stays shut. */
-.kui-split-view[data-split-mode="split"]
-  > [data-component="resizable-region"]:not([data-collapsed="true"]) {
-  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
-}
-
 .kui-split-view__list,
 .kui-split-view__detail {
   --kui-edge-inset-block-start: var(--_kui-split-view-safe-block-start);
@@ -135,3 +128,13 @@
   display: block;
   height: 100%;
 }
+
+/* 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 SplitView 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="split-view"]:only-child {
+  height: 100%;
+}

package/dist/styles/state-banner.css

@@ -160,25 +160,6 @@
   margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   font-size: var(--kui-font-xs);
 }
-/* The badge is taller than the title's line. Negative block margins keep it
-   out of the line-height calculation, so a wrapped title's lines stay evenly
-   spaced whichever line the badge lands on. */
-.kui-state-banner__badge {
-  margin-block: -0.5em;
-  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
-  vertical-align: baseline;
-}
-/* A placeholder badge holds a skeleton instead of text. With no text, the
-   skeleton's baseline would be synthesized from its bottom edge, sitting the
-   badge higher than the live one by a font-dependent amount. A zero-width
-   character gives it a text baseline in the badge's own font and line
-   height, exactly where the live badge's text baseline falls on every
-   platform. */
-.kui-state-banner[data-placeholder="true"]
-  .kui-state-banner__badge
-  > *::before {
-  content: "\200b";
-}
 /* The clip lives on an inner span, not on the detail itself. WebKit still
    applies the CSS 2.1 rule that an inline-block whose overflow is not
    `visible` takes its baseline from its bottom margin edge, so a clipped

package/dist/styles/surface-scaffold.css

@@ -40,12 +40,17 @@
 .kui-popup-surface {
   display: inline-flex;
 }
-.kui-popup-surface[data-inset="standard"] > wa-dropdown::part(menu) {
+/* The surface insets the menu of a raw wa-dropdown it wraps. A PopupMenu
+   applies the surface's inset to itself (popup-menu.css). */
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
-.kui-popup-surface[data-inset="compact"] > wa-dropdown::part(menu) {
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0.25rem;
 }
-.kui-popup-surface[data-inset="list-zero"] > wa-dropdown::part(menu) {
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0;
 }

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;
+}