@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/styles/toolbar-text.css

@@ -12,27 +12,102 @@
   align-items: center;
 }
 
+button.kui-toolbar-text {
+  appearance: none;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  font-family: inherit;
+  text-align: start;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+
+button.kui-toolbar-text:hover {
+  background: var(--kui-color-neutral-fill-normal);
+}
+
+button.kui-toolbar-text:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 0.125rem;
+}
+
+/* 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 {
+  align-self: flex-start;
+  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 title with supporting copy stacks the two lines and centers them together
+   in the control band (growing past it only when they do not fit), so
+   trailing groups stay on the band and both lines start at the same edge. */
+.kui-toolbar-text[data-has-description="true"] {
+  height: auto;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.kui-toolbar-text__description {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 400;
+  letter-spacing: normal;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 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 {
   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;
 }
 
-.kui-toolbar-text[data-size="xlarge"] {
-  /* Matches the page/panel title: the same responsive clamp so a PanelHeader
-     title reads at the page-title scale without a bespoke override. Height grows
-     to the larger text (the fixed 40px would clip its ascenders). */
+.kui-toolbar-text:is([data-size="xlarge"], [data-size="xlarge-fixed"]) {
+  /* Both title sizes keep page/panel title color and geometry. Height grows to
+     their text instead of clipping ascenders in the default 40px box. */
   height: auto;
   min-height: 2.75rem;
   color: var(--kui-color-text);
-  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
   letter-spacing: -0.025em;
 }
 
+.kui-toolbar-text[data-size="xlarge"] {
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+}
+
+.kui-toolbar-text[data-size="xlarge-fixed"] {
+  font-size: var(--kui-font-l);
+}
+
 .kui-toolbar-text[data-size="large"] {
   font-size: var(--kui-font-m);
   letter-spacing: -0.015em;
@@ -42,11 +117,101 @@
   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);
 }
 
+.kui-toolbar-text[data-size="xsmall"] {
+  font-size: var(--kui-font-2xs);
+}
+
+/* A lone title in a balanced center is a navigation bar's title (a NavStack
+   view beside its back control): it keeps the page-title color it had leading
+   at the root, at whatever size, so the title does not dim as it centers. */
+.kui-toolbar[data-center-align="balanced"]
+  > .kui-toolbar__center
+  > .kui-toolbar-text:only-child:not([data-tone]) {
+  color: var(--kui-color-text);
+}
+
+/* In an overlay Pane header (`headerPresentation="overlay"`), overlay
+   NavStack chrome (`chromePresentation="overlay"`), or an overlay NavStack
+   bottom toolbar (`bottomToolbarPresentation="overlay"`), cross-fading
+   copies included, the title sits on the translucent chrome material with
+   arbitrary content scrolling beneath it. Quiet colors fall below AA there
+   over the worst-case backdrop (the material over black in light, white in
+   dark): the default title color
+   measures about 3.8:1 (light) and the description about 3.2:1 (light) and
+   4.1:1 (dark). The title takes the normal text color (about 10.5:1 and
+   8.3:1), and the description lifts halfway toward it (about 5.9:1 in both
+   themes), so it still reads as secondary but keeps AA. A ToolbarText in a
+   DialogSurface floating header (`headerPresentation="floating"`), slotted
+   as the dialog's label or into its header actions, sits on the raised chrome
+   material and takes the same lift. See docs/accessibility.md "Chrome
+   material". */
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-text:not([data-tone]),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
+    [data-tone]
+  ),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > :is([slot="label"], [slot="header-actions"])
+  .kui-toolbar-text:not([data-tone]),
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-text:not([data-tone]),
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-text:not([data-tone]) {
+  color: var(--kui-color-text);
+}
+
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
+    [data-tone]
+  )
+  .kui-toolbar-text__description,
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > :is([slot="label"], [slot="header-actions"])
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-text-quiet),
+    var(--kui-color-text) 50%
+  );
+}
+
+.kui-toolbar-text[data-tone="dark"] {
+  color: var(--kui-color-neutral-on-loud);
+}
+
+button.kui-toolbar-text[data-tone="dark"]:hover {
+  background: color-mix(in srgb, var(--kui-color-surface) 28%, transparent);
+}
+
 /* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
 .kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
   text-overflow: clip;
@@ -61,7 +226,10 @@
   min-height: 2.5rem;
 }
 
-.kui-toolbar-text[data-size="xlarge"][data-wrap="true"] {
+.kui-toolbar-text:is(
+    [data-size="xlarge"],
+    [data-size="xlarge-fixed"]
+  )[data-wrap="true"] {
   min-height: 2.75rem;
 }
 
@@ -90,3 +258,12 @@
   line-clamp: none;
   max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
 }
+.kui-toolbar-text[data-toolbar-width-hidden="true"],
+.kui-toolbar-text:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-text > [data-toolbar-visibility-state] {
+  display: none;
+}

package/dist/styles/toolbar.css

@@ -1,25 +1,129 @@
 .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;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
+  /* The center track's minimum is `auto`, not 0, so it resolves to the center
+     zone's own min-width (its content width, below): when the zones do not all
+     fit, the auto leading track is what shrinks and its title truncates, and
+     the center group never overflows its track onto the leading identity. */
+  grid-template-columns: auto 1fr auto;
+  align-items: start;
   gap: var(--kui-toolbar-gap, 0.5rem);
   container: kui-toolbar / inline-size;
   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-band) + (2 * var(--_kui-toolbar-block-inset)) +
+      var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
+  );
+  padding-block: calc(
+      var(--_kui-toolbar-block-inset) + var(--_kui-toolbar-safe-block-start)
+    )
+    calc(var(--_kui-toolbar-block-inset) + var(--_kui-toolbar-safe-block-end));
+  padding-inline: calc(
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        var(--_kui-toolbar-safe-inline-start)
+    )
+    calc(
+      var(--kui-toolbar-inset, 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;
 }
 
+/* Equal side tracks center the middle zone on the toolbar's content box even
+   when one side has no controls. Side content still shrinks or wraps within
+   its own track, and responsive policies below may move a zone to a new row. */
+.kui-toolbar[data-center-align="balanced"][data-has-center="true"] {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+/* A lone title in a balanced center (a navigation bar's title beside a back
+   control) centers on the toolbar while the side zones leave room, moves away
+   from a wider side when they do not, and truncates before it reaches a side
+   control: the side tracks keep their content width and the title's track
+   may shrink to nothing, so the title, unlike center controls, gives way
+   first. */
+.kui-toolbar[data-center-align="balanced"][data-has-center="true"]:has(
+    > .kui-toolbar__center > .kui-toolbar-text:only-child
+  ) {
+  grid-template-columns:
+    minmax(max-content, 1fr) minmax(0, max-content)
+    minmax(max-content, 1fr);
+}
+
+.kui-toolbar[data-center-align="balanced"]
+  > .kui-toolbar__center:has(> .kui-toolbar-text:only-child) {
+  min-width: 0;
+}
+
+.kui-toolbar[data-responsive="trailing-priority"][data-has-center="false"]:has(
+    > .kui-toolbar__trailing [data-expanded="true"]
+  ) {
+  grid-template-columns:
+    minmax(0, 1fr)
+    minmax(0, var(--kui-token-search-expanded-width, 30rem));
+}
+
 .kui-toolbar {
   --_kui-toolbar-divider-top: transparent;
   --_kui-toolbar-divider-right: transparent;
@@ -32,39 +136,63 @@
     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-border)
+    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-border)
+    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-border)
+    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-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
+/* Every zone reserves a group-height control band. Direct custom content
+   centers against its zone's height by default. ToolbarText,
+   ToolbarControlGroup, and standalone wa-button keep their own first-band
+   placement, so taller siblings do not move their controls off that axis.
+   `--_kui-toolbar-band` is context those components use for that placement. */
+.kui-toolbar {
+  --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  --_kui-toolbar-block-inset: var(
+    --kui-toolbar-inset,
+    var(--kui-toolbar-gap, 0.5rem)
+  );
+}
+
+/* Compact density: a 34px band (the compact ToolbarControlGroup's size) with
+   3px block insets makes a 40px header for an embedded panel or card. The
+   inline insets and zone gap keep the standard 8px. */
+.kui-toolbar[data-density="compact"] {
+  --_kui-toolbar-band: 2.125rem;
+  --_kui-toolbar-block-inset: var(--kui-toolbar-inset, 0.1875rem);
+}
+
 .kui-toolbar__leading,
 .kui-toolbar__center,
 .kui-toolbar__trailing {
   display: flex;
   min-width: 0;
+  min-height: var(--_kui-toolbar-band);
+  padding-inline: var(--kui-toolbar-zone-padding-inline, 0px);
+  box-sizing: border-box;
   align-items: center;
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
@@ -76,18 +204,146 @@
    the 3- and 2-column layouts, and still stacks under the leading zone when a
    consumer collapses the toolbar to a single column. */
 .kui-toolbar__leading {
+  min-width: var(--kui-toolbar-leading-min-width, 0px);
+  padding-inline: var(
+    --kui-toolbar-leading-padding-inline,
+    var(--kui-toolbar-zone-padding-inline, 0px)
+  );
   grid-column: 1;
-  overflow: hidden;
+  /* Keep a shrinking title clipped while letting the 3px focus outline plus
+     its 1px offset paint past the zone edge. `hidden` cropped the ring of the
+     first control in this zone. */
+  overflow: clip;
+  overflow-clip-margin: 4px;
 }
 
 .kui-toolbar__center {
+  /* The center content never compresses below its own width (a group cannot
+     shrink or clip its controls). The track above takes this as its minimum, so
+     the leading identity gives way first, the way a platform toolbar truncates
+     its title before it overlaps the centered controls. */
+  min-width: min-content;
+  padding-inline: var(
+    --kui-toolbar-center-padding-inline,
+    var(--kui-toolbar-zone-padding-inline, 0px)
+  );
   justify-content: center;
   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;
+  padding-inline: var(
+    --kui-toolbar-trailing-padding-inline,
+    var(--kui-toolbar-zone-padding-inline, 0px)
+  );
+  justify-content: var(--kui-toolbar-trailing-justify, flex-end);
+  justify-self: var(--kui-toolbar-trailing-justify-self, stretch);
   grid-column: -2 / -1;
+  gap: var(--kui-toolbar-trailing-gap, var(--kui-toolbar-gap, 0.5rem));
+  /* 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;
+}
+
+.kui-toolbar__trailing > wa-button:not(:where(.kui-icon-button)) {
+  margin-block-start: max(
+    0px,
+    calc((var(--_kui-toolbar-band) - var(--wa-form-control-height)) / 2)
+  );
+  align-self: flex-start;
+  flex: 0 0 auto;
+}
+
+/* An expanded trailing search gets a complete second row while the leading
+   identity and optional center controls remain in the first. The query styles
+   descendants because a toolbar cannot query its own container width. */
+@container kui-toolbar (max-width: 52rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"][data-has-center="false"]:has(
+      > .kui-toolbar__trailing [data-expanded="true"]
+    )
+    > .kui-toolbar__leading {
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"]:has(
+      > .kui-toolbar__trailing [data-expanded="true"]
+    )
+    > .kui-toolbar__trailing {
+    width: 100%;
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: stretch;
+  }
+
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"]
+    > .kui-toolbar__trailing
+    > [data-expanded="true"] {
+    width: 100%;
+    flex: 1 1 100%;
+  }
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"][data-has-center="false"]:has(
+      > .kui-toolbar__trailing [data-expanded="true"]
+    )
+    > .kui-toolbar__leading {
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"]:has(
+      > .kui-toolbar__trailing [data-expanded="true"]
+    )
+    > .kui-toolbar__trailing {
+    width: 100%;
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: stretch;
+  }
+
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"]
+    > .kui-toolbar__trailing
+    > [data-expanded="true"] {
+    width: 100%;
+    flex: 1 1 100%;
+  }
+}
+
+/* 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 +351,93 @@
 .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;
+  }
+}
+.kui-toolbar > [data-toolbar-visibility-probe] {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+  contain: layout paint;
+}
+
+.kui-toolbar > [data-toolbar-visibility-probe] > div {
+  position: absolute;
+  top: 0;
+  height: 0;
+  min-width: 0;
+  max-width: none;
+  padding: 0;
+  border: 0;
+  margin: 0;
+}
+
+/* A typed sentinel distinguishes invalid/unresolved input from a valid zero. */
+@property --kui-toolbar-visibility-length {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: -1px;
+}
+.kui-toolbar > [data-toolbar-visibility-probe] > div {
+  left: var(--kui-toolbar-visibility-length);
+  width: var(--kui-toolbar-visibility-length);
+}