@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.51

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

@@ -213,30 +213,7 @@
   margin-inline-start: 0.375rem;
 }
 
-.kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
-  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
-  max-width: 100%;
-  height: auto;
-  min-width: 0;
-  overflow: hidden;
-  /* 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,
-    border-color 0.2s ease;
-}
-
-.kui-toolbar-control-group[data-expanded="false"]:has(
-    > .kui-token-search[data-collapsible="true"]
-  ) {
-  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
-  flex: 0 0 auto;
-}
-
-.kui-toolbar-control-group > .kui-token-search[data-collapsible="true"] {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"] {
   --kui-token-search-line-size: 2rem;
 
   min-height: 2.5rem;
@@ -250,14 +227,12 @@
   box-shadow: none;
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"]:focus-within {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
   border-color: var(--kui-color-focus);
   background: var(--kui-token-search-background);
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"][data-expanded="false"] {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"] {
   width: 2.5rem;
   min-width: 2.5rem;
   height: 2.5rem;
@@ -265,23 +240,13 @@
   padding: 0;
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"][data-expanded="false"]
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"]
   .kui-token-search__expand {
   padding-inline: 0;
 }
 
-.kui-toolbar-control-group:has(
-    > .kui-token-search[data-collapsible="true"]
-  ):focus-within {
-  border-color: var(--kui-color-text-link);
-  box-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .kui-token-search[data-collapsible="true"],
-  .kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
+  .kui-token-search[data-collapsible="true"] {
     transition-duration: 0s;
   }
 }

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

@@ -21,6 +21,15 @@
     )
   );
   --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);
   display: inline-flex;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
@@ -35,6 +44,16 @@
   gap: 0;
 }
 
+.kui-toolbar-control-group[data-visibility="compact-only"] {
+  display: none;
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar-control-group[data-visibility="compact-only"] {
+    display: inline-flex;
+  }
+}
+
 /* `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. */
@@ -61,18 +80,59 @@
 }
 .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(
+    0px,
+    calc(var(--kui-toolbar-group-radius) - 1px)
+  );
+  gap: 4px; /* Compensating for -2px margins */
 }
 .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) {
+.kui-toolbar-control-group[data-overflow="scroll"] {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.kui-toolbar-control-group[data-content="search"] {
+  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  max-width: 100%;
+  height: auto;
+  min-width: 0;
+  overflow: hidden;
+  flex: 0 1 auto;
+  transition:
+    width 0.25s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+.kui-toolbar-control-group[data-content="search"][data-expanded="false"] {
+  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 auto;
+}
+.kui-toolbar-control-group[data-content="text"]
+  > :is(button, wa-button, .kui-toolbar-action-link),
+.kui-toolbar-control-group[data-content="mixed"]
+  > :is(button, wa-button, .kui-toolbar-action-link) {
   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="mixed"] wa-button {
+  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) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kui-space-xs);
+  white-space: nowrap;
+}
 .kui-toolbar-control-group[data-content="avatar"][data-scrim="true"] {
   --kui-toolbar-control-background: color-mix(
     in srgb,
@@ -123,7 +183,8 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
+.kui-toolbar-control-group
+  > :is(button, wa-button, wa-dropdown, .kui-toolbar-action-link) {
   flex: 0 0 auto;
 }
 .kui-toolbar-control-group > wa-dropdown {
@@ -154,13 +215,62 @@
   background: var(--kui-toolbar-control-hover-background);
 }
 
+.kui-toolbar-control-group > .kui-toolbar-action-link {
+  position: relative;
+  display: inline-flex;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.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))
+  );
+  color: inherit;
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kui-space-2xs);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.kui-toolbar-control-group > .kui-toolbar-action-link:hover {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-action-link code {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 .kui-toolbar-control-group > button svg,
-.kui-toolbar-control-group wa-button > svg {
+.kui-toolbar-control-group wa-button > svg,
+.kui-toolbar-control-group > .kui-toolbar-action-link svg {
   display: block;
   width: 1rem;
   height: 1rem;
 }
 
+/* Nested Web Awesome buttons take the group's control height, not the theme's
+   44px standalone control height. */
+.kui-toolbar-control-group wa-button {
+  --wa-form-control-height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"] wa-button {
+  --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,
@@ -169,6 +279,7 @@
   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,
@@ -186,6 +297,24 @@
   min-height: 2rem;
 }
 
+/* A compact icon button is a 32px circle like its compact wa-button and
+   Select siblings; the default 8px inline padding around a 16px icon made its
+   selected highlight a 34x32 oval. */
+.kui-toolbar-control-group[data-size="compact"][data-content="icon"] > button {
+  padding-inline: 0;
+}
+
+.kui-toolbar-control-group[data-menu-inset="standard"] wa-dropdown::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-toolbar-control-group[data-menu-inset="compact"] wa-dropdown::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown::part(menu) {
+  padding: 0;
+}
+
 /* 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
@@ -202,6 +331,13 @@
   border-radius: var(--kui-toolbar-group-radius);
 }
 
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown,
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-button {
+  margin: -2px;
+}
+
 /* 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
@@ -216,20 +352,14 @@
 }
 .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);
+  > wa-button::part(base) {
+  width: max-content;
 }
 
-.kui-toolbar-control-group[data-single="true"] > wa-dropdown,
-.kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button,
 .kui-toolbar-control-group[data-single="true"]
   > wa-dropdown
   > wa-button::part(base) {
-  width: 3rem;
+  width: max-content;
 }
 
 .kui-toolbar-control-group wa-button {
@@ -260,12 +390,13 @@
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
-    > :is(button, wa-button, wa-dropdown)
+    > :is(button, wa-button, wa-dropdown, wa-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):hover,
+.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) {
   border-color: transparent;
   background: transparent;
@@ -276,15 +407,15 @@
    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
+    > :is(button, wa-button, wa-select, .kui-toolbar-action-link):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, .kui-toolbar-action-link):only-child
   )
-  > :is(button, wa-button):hover,
+  > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group:not([data-single="true"]):has(
     > :is(button, wa-button):only-child
   )
@@ -293,6 +424,15 @@
   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 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);
@@ -317,21 +457,48 @@
   box-shadow: var(--kui-toolbar-control-selected-shadow);
 }
 
-.kui-toolbar-control-group > :is(button, wa-button):focus-visible {
+.kui-toolbar-control-group
+  > :is(button, wa-button, .kui-toolbar-action-link):focus-visible {
+  outline: var(--kui-focus-ring);
+  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. */
+.kui-toolbar-control-group[data-focus-ring="control"]
+  > wa-select:focus-within::part(combobox) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within {
   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])
-) {
+.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+/* Chromium and WebKit do not propagate :focus-within from a focused
+   light-DOM child (an open wa-select's active wa-option) through the host's
+   popup shadow tree, so the group ring vanished while its Select listbox was
+   open. A focused light-DOM descendant still 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) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
+.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus) {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
 .kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
     > :is(button, wa-button)[aria-pressed="true"]
   ) {
@@ -346,6 +513,12 @@
   color: var(--kui-toolbar-control-pressed-color);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .kui-toolbar-control-group[data-content="search"] {
+    transition-duration: 0s;
+  }
+}
+
 /* 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

package/dist/styles/toolbar-text.css

@@ -18,6 +18,10 @@
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
+  /* Keep the line box larger than the font's em square. Glyph ink can extend
+     below a 1em line box, so clipping for ellipsis must not also shave off
+     descenders such as g, j, p, q, and y. */
+  line-height: 1.2;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -42,8 +46,11 @@
   font-size: var(--kui-font-s);
 }
 
+/* Every size keeps the inherited UI sans stack: compact identity text is a
+   label, not code. (A monospace role here resolved through Web Awesome's
+   `ui-monospace, monospace` code stack; Chromium does not
+   recognize `ui-monospace`, so small labels fell back to generic monospace.) */
 .kui-toolbar-text[data-size="small"] {
-  font-family: var(--kui-font-mono);
   font-size: var(--kui-font-xs);
 }
 

package/dist/styles/toolbar.css

@@ -1,11 +1,7 @@
 .kui-toolbar {
   display: grid;
   width: 100%;
-  min-height: calc(
-    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      (2 * var(--kui-toolbar-gap, 0.5rem))
-  );
-  padding: var(--kui-toolbar-gap, 0.5rem);
+  /* min-height and padding: see the safe-area rules below. */
   box-sizing: border-box;
   color: var(--kui-color-text);
   background: transparent;
@@ -16,6 +12,78 @@
   font-family: var(--kui-font-sans);
 }
 
+/* Safe areas: a toolbar compensates only for the inline edges its owner hands
+   it through `--kui-edge-inset-inline-*` (a Pane header or footer does), so its
+   box and dividers keep reaching the edge while its zones clear the unsafe
+   area. Unset means none: a toolbar embedded in content never pads for the
+   device. An app bar or bottom bar at a screen edge claims its sides with
+   `safeAreaEdges`; each claimed side pads by the routed edge context, or the
+   full device inset when nothing routes it (the Pane rule), so the top bar of
+   a shell clears the status area. A Pane header or footer clears the context
+   for its children, so a claimed side there never double-insets. Its zones
+   then see a cleared context. */
+.kui-toolbar {
+  --_kui-toolbar-safe-block-start: 0px;
+  --_kui-toolbar-safe-block-end: 0px;
+  --_kui-toolbar-safe-inline-start: var(--kui-edge-inset-inline-start, 0px);
+  --_kui-toolbar-safe-inline-end: var(--kui-edge-inset-inline-end, 0px);
+  /* The minimum height grows by any claimed block inset, so a toolbar a flex
+     column shrinks still keeps a whole control row clear of the unsafe area. */
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem)) +
+      var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
+  );
+  padding-block: calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-start)
+    )
+    calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-end)
+    );
+  padding-inline: calc(
+      var(--kui-toolbar-gap, 0.5rem) +
+        var(--_kui-toolbar-safe-inline-start)
+    )
+    calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-inline-end)
+    );
+}
+
+.kui-toolbar[data-safe-area-block-start="true"] {
+  --_kui-toolbar-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-block-end="true"] {
+  --_kui-toolbar-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-inline-start="true"] {
+  --_kui-toolbar-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-inline-end="true"] {
+  --_kui-toolbar-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.kui-toolbar > * {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
 .kui-toolbar[data-has-center="false"] {
   grid-template-columns: minmax(0, 1fr) auto;
 }
@@ -85,9 +153,47 @@
   grid-column: 2;
 }
 
+.kui-toolbar[data-center-align="stretch"] > .kui-toolbar__center {
+  justify-content: flex-start;
+}
+
+.kui-toolbar[data-center-align="stretch"] > .kui-toolbar__center > * {
+  width: 100%;
+  flex-basis: 100%;
+}
+
 .kui-toolbar__trailing {
   justify-content: flex-end;
   grid-column: -2 / -1;
+  /* Trailing actions never clip (KF-4EYES0): the zone wraps its groups, so its
+     track can shrink only to the widest single group. When one row cannot hold
+     every group, the next group moves to a new trailing-aligned row instead of
+     overflowing the toolbar. */
+  flex-wrap: wrap;
+}
+
+/* Content-driven wrap: one row while every zone fits at its natural width;
+   otherwise the trailing zone moves below the identity, still trailing-aligned,
+   instead of truncating the leading title or clipping an action. For panel,
+   inspector, and dialog headings whose identity must stay whole. */
+.kui-toolbar[data-responsive="wrap"] {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__leading {
+  max-width: 100%;
+  flex: 1 1 auto;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__center {
+  flex: 1 1 auto;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__trailing {
+  max-width: 100%;
+  flex: 0 1 auto;
+  margin-inline-start: auto;
 }
 
 .kui-toolbar[data-has-center="false"] .kui-toolbar__center,
@@ -95,3 +201,61 @@
 .kui-toolbar__trailing:empty {
   display: none;
 }
+
+/* Stacked topology. A container query only matches an ancestor container, so
+   these rules style the zones (whose query container is this toolbar) rather
+   than the toolbar's own grid template, which a self query can never reach.
+   Each zone spans every column track, one zone per row, so no empty track or
+   column gap narrows a stacked zone. Stacked control zones wrap at group
+   granularity (KF-4EYES0: a stacked trailing zone clipped its last action at
+   phone widths), so every group stays whole, reachable, and full size; the
+   leading identity keeps its single-line truncation. */
+@container kui-toolbar (max-width: 52rem) {
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
+    > :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing) {
+    width: 100%;
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+  }
+
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
+    > :is(.kui-toolbar__center, .kui-toolbar__trailing) {
+    flex-wrap: wrap;
+  }
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
+    > :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing) {
+    width: 100%;
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+  }
+
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
+    > :is(.kui-toolbar__center, .kui-toolbar__trailing) {
+    flex-wrap: wrap;
+  }
+}
+
+/* Center priority. As with the stacked topology, the toolbar cannot query its
+   own width, so these rules style the zones: while the center holds an expanded
+   control, the leading and trailing zones leave and the center spans every
+   column track (including the gaps the vacated tracks still own), taking the
+   whole row. */
+@container kui-toolbar (max-width: 42rem) {
+  .kui-toolbar[data-responsive="center-priority"]:has(
+      > .kui-toolbar__center [data-expanded="true"]
+    )
+    > .kui-toolbar__center {
+    width: 100%;
+    grid-column: 1 / -1;
+  }
+
+  .kui-toolbar[data-responsive="center-priority"]:has(
+      > .kui-toolbar__center [data-expanded="true"]
+    )
+    > :is(.kui-toolbar__leading, .kui-toolbar__trailing) {
+    display: none;
+  }
+}