@kerfjs/ui 5.0.0-beta.75 → 5.0.0-beta.76

package/dist/styles/components/actions/popup-menu/popup-menu.css

@@ -0,0 +1,285 @@
+/* An icon-only trigger's accessible name: Web Awesome names its button from the
+   slotted content, so the label is present but visually hidden. */
+.kui-popup-menu__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+/* PopupMenu shares the Select's caret motion, surface inset, row rhythm,
+   current-row fill, and group titles from the popup-choice contract in
+   foundation.css. Only checkbox items reserve a check column. */
+
+/* The trigger caret turns to face the open menu, like the Select's. */
+.kui-popup-menu > wa-button::part(caret) {
+  rotate: 0deg;
+  transition: var(--_kui-popup-caret-transition);
+}
+.kui-popup-menu[open] > wa-button::part(caret) {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+
+/* The Select's popup fades in place; Web Awesome's dropdown also scales from
+   90%. Holding the scale leaves the shared fade. */
+.kui-popup-menu::part(menu) {
+  padding: var(--_kui-popup-inset);
+  gap: var(--_kui-popup-row-gap);
+  scale: none !important;
+}
+
+.kui-popup-menu wa-dropdown-item {
+  /* A plain command starts at the checkbox glyph's leading edge. The glyph
+     sits half a smaller-font em beyond the row's base inset; its label starts
+     after the full check column below. */
+  padding: var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
+    calc(var(--_kui-popup-row-padding-inline-start) + 0.4375em);
+}
+.kui-popup-menu wa-dropdown-item[type="checkbox"] {
+  /* Web Awesome marks every sibling checkbox-adjacent; reserve this column
+     only on items whose checked state was explicitly supplied. */
+  padding-inline-start: calc(
+    var(--_kui-popup-row-padding-inline-start) +
+      var(--_kui-popup-row-check-width)
+  );
+}
+/* Web Awesome's nested submenu owns its item host padding. Move its exposed
+   checkmark inside the panel and leave room for the label beside it. */
+.kui-popup-menu
+  wa-dropdown-item[slot="submenu"][type="checkbox"]::part(checkmark) {
+  margin-inline-start: 0;
+}
+.kui-popup-menu wa-dropdown-item[slot="submenu"][type="checkbox"]::part(label) {
+  padding-inline-start: 1em;
+}
+.kui-popup-menu wa-dropdown-item::part(label) {
+  padding-block: var(--_kui-popup-row-label-padding-block);
+  line-height: var(--_kui-popup-row-label-line-height);
+}
+/* A keyboard-focused item is the menu's current row: the Select's brand fill,
+   with no second focus ring inside the open popup. */
+.kui-popup-menu wa-dropdown-item:focus-visible {
+  outline: none;
+  color: var(--_kui-popup-row-current-color);
+  background-color: var(--_kui-popup-row-current-background);
+}
+.kui-popup-menu > wa-divider,
+.kui-popup-menu wa-divider[slot="submenu"] {
+  --spacing: 0.5em;
+}
+
+/* Center the icon on the label's line, like the Select's start slot. */
+.kui-popup-menu wa-dropdown-item::part(icon) {
+  display: flex;
+  align-self: center;
+}
+.kui-popup-menu__icon {
+  display: inline-flex;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+  flex: none;
+  /* Web Awesome spaces a slotted item icon 0.75em from its label (an
+     !important shadow rule). Sizing that em makes the gap the Select's. */
+  font-size: calc(var(--_kui-popup-row-icon-gap) / 0.75);
+}
+.kui-popup-menu__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.kui-popup-menu__details {
+  display: inline-flex;
+  align-items: center;
+}
+
+.kui-popup-menu__details svg {
+  display: block;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+}
+
+.kui-popup-menu[data-trigger="context"] {
+  display: inline-block;
+  width: 0;
+  height: 0;
+}
+
+.kui-popup-menu__context-anchor {
+  position: fixed;
+  top: var(--kui-popup-menu-context-y, 0px);
+  left: var(--kui-popup-menu-context-x, 0px);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* A group title matches the Select's group title. It is a styled element
+   rather than a slotted heading, whose Web Awesome metrics are !important. */
+.kui-popup-menu__heading {
+  padding: var(--_kui-popup-group-title-padding);
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-2xs);
+  font-weight: var(--_kui-popup-group-title-font-weight);
+  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/components/actions/toolbar/toolbar.css

@@ -0,0 +1,392 @@
+.kui-toolbar {
+  display: grid;
+  width: 100%;
+  /* min-height and padding: see the safe-area rules below. */
+  box-sizing: border-box;
+  color: var(--kui-color-text);
+  background: transparent;
+  /* 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-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem))) +
+      var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
+  );
+  padding-block: calc(
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        var(--_kui-toolbar-safe-block-start)
+    )
+    calc(
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        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);
+}
+
+.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;
+  --_kui-toolbar-divider-bottom: transparent;
+  --_kui-toolbar-divider-left: transparent;
+  box-shadow:
+    inset 0 1px var(--_kui-toolbar-divider-top),
+    inset -1px 0 var(--_kui-toolbar-divider-right),
+    inset 0 -1px var(--_kui-toolbar-divider-bottom),
+    inset 1px 0 var(--_kui-toolbar-divider-left);
+}
+
+.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: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: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:is([divider-sides*="l"], [data-scroll-divider*="l"]) {
+  --_kui-toolbar-divider-left: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+/* The control band. Every zone reserves one group-height row at the top of
+   the toolbar, and each item is centered in that band by its own size, not by
+   its siblings: a group or title shorter than the band takes half the
+   difference as a top margin, and anything taller (a wrapped title, a
+   multi-line search, a second trailing row) starts at the band's top and grows
+   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.
+   `--_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). A direct primary wa-button in
+   trailing is centered here without altering its Web Awesome chrome. */
+.kui-toolbar {
+  --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+}
+
+.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: flex-start;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+}
+
+/* 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
+   zone anchors to the last column via -2/-1, so it stays flush right for both
+   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;
+  /* 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 {
+  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 {
+  margin-block-start: max(
+    0px,
+    calc((var(--_kui-toolbar-band) - var(--wa-form-control-height)) / 2)
+  );
+  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,
+.kui-toolbar__leading:empty,
+.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;
+  }
+}