@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.111

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

@@ -10,16 +10,36 @@
   --kui-toolbar-control-pressed-background: var(--kui-color-neutral-fill-loud);
   --kui-toolbar-control-pressed-border: var(--kui-color-neutral-border-loud);
   --kui-toolbar-control-pressed-color: var(--kui-color-neutral-on-loud);
+  --kui-toolbar-group-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+  --kui-control-highlight-radius: max(
+    0px,
+    calc(
+      var(--kui-toolbar-group-radius) - var(--kui-layout-highlight-inset, 2px)
+    )
+  );
+  --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
+  /* Context the group provides to a composed child (an icon-only Select, in
+     select.css): the control slot the child fills so it is inset evenly on
+     every side and the group-owned focus ring stays concentric with the
+     visible control. The group sizes to the child's width. A default slot is
+     40px tall inside the 2px inset; a compact slot is the full 32px padding
+     box, and a lone compact child also overlaps the 1px inline padding. The
+     values are named after the group that provides them; the child reads
+     them from its own stylesheet. */
+  --_kui-toolbar-control-group-slot-height: 2.5rem;
+  --_kui-toolbar-control-group-slot-overlap: 0px;
+  --_kui-toolbar-control-group-slot-radius: var(--kui-toolbar-item-radius);
   display: inline-flex;
+  position: relative;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
   box-sizing: border-box;
   border: 1px solid var(--kui-toolbar-control-border);
-  border-radius: var(
-    --kui-toolbar-group-radius,
-    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
-  );
+  border-radius: var(--kui-toolbar-group-radius);
   color: var(--kui-toolbar-control-color);
   background: var(--kui-toolbar-control-background);
   align-items: center;
@@ -27,18 +47,124 @@
   gap: 0;
 }
 
+.kui-toolbar-control-group[data-busy="true"] > svg,
+.kui-toolbar-control-group[data-busy="true"]
+  > :not(.kui-toolbar-control-group__busy-spinner)
+  svg {
+  visibility: hidden;
+}
+
+/* A group that shows text hides its whole control content under the spinner,
+   so the label never shows through it; the content keeps its box, so the
+   group keeps its size. */
+.kui-toolbar-control-group[data-busy="true"]:is(
+    [data-content="text"],
+    [data-content="mixed"]
+  )
+  > :not(.kui-toolbar-control-group__busy-spinner) {
+  visibility: hidden;
+}
+
+.kui-toolbar-control-group__busy-spinner {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  transform: translate(-50%, -50%);
+  place-items: center;
+  pointer-events: none;
+}
+
+.kui-toolbar-control-group__busy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* In a Toolbar zone, a group shorter than the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) takes half the difference as a
+   top margin, so it centers in the band by its own size. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group {
+  align-self: flex-start;
+  margin-block-start: max(
+    0px,
+    calc(
+      (
+          var(--_kui-toolbar-band) -
+            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+        ) /
+        2
+    )
+  );
+}
+
+.kui-toolbar-control-group[data-visibility="compact-only"] {
+  display: none;
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar-control-group[data-visibility="compact-only"] {
+    display: inline-flex;
+  }
+}
+
+@container kui-toolbar (max-width: 14rem) {
+  .kui-toolbar-control-group[data-visibility="hide-collapsed-tiny"][data-expanded="false"] {
+    display: none;
+  }
+}
+
+/* An expanded trailing control owns the compact row when sibling groups opt
+   into yielding. Scoping to the trailing zone keeps independent center and
+   leading controls visible, and the siblings return when it closes. */
+@container kui-toolbar (max-width: 30rem) {
+  .kui-toolbar__trailing:has(> .kui-toolbar-control-group[data-expanded="true"])
+    > .kui-toolbar-control-group[data-visibility="yield-to-expanded-sibling"]:not(
+      [data-expanded="true"]
+    ) {
+    display: none;
+  }
+}
+
+/* A sibling of an expanded trailing control yields to the trailing-priority
+   row the Toolbar moves that control onto: the same container queries and
+   responsiveAt keys as the Toolbar's own row (toolbar.css), so the group
+   hides exactly while the row is active and never wraps onto a third row at
+   a threshold restated with hideBelow. */
+@container kui-toolbar (max-width: 52rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"]
+    > .kui-toolbar__trailing:has(> [data-expanded="true"])
+    > .kui-toolbar-control-group[data-visibility="yield-to-priority-row"]:not(
+      [data-expanded="true"]
+    ) {
+    display: none;
+  }
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"]
+    > .kui-toolbar__trailing:has(> [data-expanded="true"])
+    > .kui-toolbar-control-group[data-visibility="yield-to-priority-row"]:not(
+      [data-expanded="true"]
+    ) {
+    display: none;
+  }
+}
+
 /* `shape="rounded"` swaps the default pill radius for the design system's softer
-   rounded-rectangle radius on both the group and its items (custom properties
-   inherit to the item rules that read them). */
+   rounded rectangle. The shared highlight contract derives every inner hover or
+   selected surface from this outer radius and the group's full inset. */
 .kui-toolbar-control-group[data-shape="rounded"] {
   --kui-toolbar-group-radius: var(
     --kui-layout-rounded-radius,
     calc(1px + 0.6875rem)
   );
-  --kui-toolbar-item-radius: var(
-    --kui-layout-rounded-radius,
-    calc(1px + 0.6875rem)
-  );
 }
 
 .kui-toolbar-control-group[data-tone="dark"] {
@@ -49,11 +175,234 @@
   );
   --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536);
   --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+  /* A 14% surface wash over the loud fill: visible hover feedback that keeps
+     the on-loud icon above 3:1 over a light page (about 3.4:1; a 28% wash
+     measured 2.7:1) and well above it in dark (about 5.8:1). */
   --kui-toolbar-control-hover-background: color-mix(
     in srgb,
-    var(--kui-color-surface) 28%,
+    var(--kui-color-surface) 14%,
+    transparent
+  );
+}
+.kui-toolbar-control-group[data-size="compact"] {
+  --kui-toolbar-group-size: 2.125rem;
+  --_kui-toolbar-control-group-slot-height: 2rem;
+  --_kui-toolbar-control-group-slot-overlap: 1px;
+  --_kui-toolbar-control-group-slot-radius: max(
+    0px,
+    calc(var(--kui-toolbar-group-radius) - 1px)
+  );
+  gap: 4px; /* Compensating for -2px margins */
+}
+.kui-toolbar-control-group[data-density="tight"] {
+  --kui-layout-item-padding: 0.3125rem;
+}
+.kui-toolbar-control-group[data-overflow="scroll"] {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.kui-toolbar-control-group[data-overflow="wrap"] {
+  max-width: 100%;
+  height: auto;
+  flex-wrap: wrap;
+}
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group[data-overflow="wrap"] {
+  margin-block-start: 0;
+  align-self: center;
+}
+.kui-toolbar-control-group[data-content="search"] {
+  /* The group owns the open/close width motion, and a collapsible search
+     inside follows it on every frame (no second, lagging width transition,
+     which left an empty band). For the length of the opening it also asks the
+     search to keep its query on one line, so the group's clip reveals the
+     query instead of re-wrapping it every frame (KF-CXQB30). */
+  --_kui-toolbar-group-search-width-duration: 0s;
+  --_kui-toolbar-group-search-reveal-duration: 0.25s;
+  width: min(var(--kui-search-field-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;
+}
+
+/* A fill search spans a content-sized group's line. A `sizing="grow"` group
+   keeps its own grow basis instead (below): taking the whole line would make
+   it the line's hypothetical size and wrap every sibling group. */
+.kui-toolbar-control-group[data-content="search"]:not([data-sizing="grow"]):has(
+    > .kui-search-field[data-expanded="true"][data-fill="true"]
+  ) {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.kui-toolbar-control-group[data-content="search"]:has(
+    .kui-search-field__suggestions
+  ) {
+  overflow: visible;
+}
+.kui-toolbar-control-group[data-content="search"][data-expanded="true"][data-expanded-overflow="visible"] {
+  height: auto;
+  overflow: visible;
+}
+.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="search"]:has(
+    > .kui-search-field[data-expanded="false"][data-fill="true"]
+  ) {
+  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 auto;
+}
+
+.kui-toolbar-control-group[data-sizing="grow"][data-expanded="true"] {
+  --_kui-toolbar-group-grow-search-width: 100%;
+  /* The grown group's content-box width at its basis (basis minus the 1px
+     border and 1px padding on each side). A collapsible search lays its editor
+     out at least this wide while the group's flex size animates open, so the
+     clipped query is revealed rather than re-wrapped every frame (KF-50K0JM). */
+  --_kui-toolbar-group-grow-search-min-width: calc(
+    var(--kui-toolbar-group-grow-basis, 19rem) - 4px
+  );
+  width: auto;
+  min-width: var(--kui-toolbar-group-grow-basis, 19rem);
+  flex: 1 1 var(--kui-toolbar-group-grow-basis, 19rem);
+}
+
+/* A grow search animates its flex size, not `width`: an expanded grow group's
+   `width: auto` cannot interpolate, so it used to snap open while the search
+   inside animated, leaving an empty band (KF-50K0JM). The collapsed state names
+   a definite basis and minimum so all three flex lengths interpolate. */
+.kui-toolbar-control-group[data-content="search"][data-sizing="grow"] {
+  /* The group's flex size owns this motion; its basis-wide minimum (above)
+     already keeps the query on one line. */
+  --_kui-toolbar-group-search-reveal-duration: 0s;
+  transition-property:
+    width, flex-basis, flex-grow, min-width, background-color, border-color;
+  transition-duration: 0.25s, 0.25s, 0.25s, 0.25s, 0.2s, 0.2s;
+  transition-timing-function: ease;
+}
+.kui-toolbar-control-group[data-content="search"][data-sizing="grow"][data-expanded="false"] {
+  min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+}
+.kui-toolbar-control-group[data-sizing="fill"] {
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 100%;
+}
+
+/* Auto margin consumes the free space before this group on its flex line;
+   when the expanded fill search takes a whole line, the margin resolves to 0. */
+.kui-toolbar[data-responsive="stack"]
+  > :is(.kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group[data-placement="end"] {
+  margin-inline-start: auto;
+}
+
+/* A fill search crosses from the preceding control line to its own line.
+   Move its visual down one control band as it opens without changing layout. */
+.kui-toolbar[data-responsive="stack"]
+  > :is(.kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group[data-content="search"][data-sizing="fill"][data-expanded="true"] {
+  animation: kui-toolbar-fill-search-enter 0.25s ease-out both;
+}
+
+@keyframes kui-toolbar-fill-search-enter {
+  from {
+    transform: translateY(
+      calc(
+        -1 * (var(--_kui-toolbar-band) + var(--kui-toolbar-gap, 0.5rem))
+      )
+    );
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@container kui-toolbar (max-width: 30rem) {
+  .kui-toolbar-control-group[data-sizing="grow"][data-expanded="true"] {
+    --_kui-toolbar-group-grow-search-min-width: 0px;
+    width: 100%;
+    min-width: 0;
+    flex: 1 1 100%;
+  }
+
+  /* Here the grown search takes its own line. Animating its basis would push
+     the trailing siblings and then jump the group to the next line mid-way, so
+     it opens and closes in one frame with the search filling it. */
+  .kui-toolbar-control-group[data-content="search"][data-sizing="grow"] {
+    transition-property: background-color, border-color;
+    transition-duration: 0.2s;
+  }
+}
+.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:not(:where(.kui-popup-menu > *)) {
+  line-height: normal;
+}
+/* Toolbar controls never wrap. Web Awesome's label part is a plain block, so a
+   slotted icon (a block SVG) and its text would otherwise stack vertically —
+   lay them out on one row the way native mixed buttons already are. */
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::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,
+    var(--kui-color-neutral-fill-loud) 64%,
     transparent
   );
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+}
+.kui-toolbar-control-group[data-selected-tone="neutral"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-neutral-on-normal);
+  --kui-toolbar-control-selected-background: var(
+    --kui-color-neutral-fill-normal
+  );
+}
+.kui-toolbar-control-group[data-selected-tone="pop"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
+.kui-toolbar-control-group[data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-border: transparent;
+  --kui-toolbar-control-selected-background: var(--kui-color-brand-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-brand-on-normal);
+}
+.kui-toolbar-control-group[data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-background: transparent;
+  --kui-toolbar-control-selected-border: var(--kui-color-brand-border-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-background: var(--kui-color-pop-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-border: var(--kui-color-pop-border-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
 }
 
 .kui-toolbar-control-group[data-appearance="borderless"] {
@@ -69,9 +418,188 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
+/* In overlay NavStack chrome (`chromePresentation="overlay"`), an overlay
+   NavStack bottom toolbar (`bottomToolbarPresentation="overlay"`), cross-fading
+   copies included, an overlay Pane header (`headerPresentation="overlay"`), or
+   a DialogSurface floating header's actions (`headerPresentation="floating"`),
+   the group sits on the translucent chrome material with arbitrary content
+   scrolling beneath it. Its quiet control color over its own translucent fill
+   falls below AA there over the worst-case backdrop (about 3.0:1 in light
+   over black, 3.5:1 in dark over white), so an untoned group's controls take
+   the normal text color (well above 4.5:1 in both), as an untoned
+   ToolbarText's title does. A dark-toned group (or an avatar scrim) keeps its
+   own loud colors. */
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > .kui-dialog-surface__header
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]) {
+  --kui-toolbar-control-color: var(--kui-color-text);
+}
+
+/* `material="glass"`: the group floats over imagery or a clear toolbar on the
+   translucent chrome material (foundation.css), blurred and saturated, the
+   per-control glass pills of overlay chrome. The fill and filter come from the
+   shared tokens, so the group inherits every opaque fallback they carry
+   (reduced transparency, increased contrast, static effects, no
+   backdrop-filter). The group's own 1px border becomes the specular edge, a
+   translucent white highlight, instead of a gray border plus a highlight; a
+   soft two-layer shadow lifts it off the content beneath.
+
+   Controls take the normal text color: over its own 80% surface material the
+   quiet control color falls below AA over the worst-case backdrop, while the
+   text color stays well above it (about 10:1 light over black, 8:1 dark over
+   white). Hover mixes a text-color tint into the material itself, so a lone
+   control's whole-group hover keeps a fill rather than replacing it with a
+   bare tint. A raised or outline selection paints an opaque surface pill, so
+   the brand selected color keeps AA over any content. A borderless group has
+   no surface and ignores the material. */
+.kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: light-dark(
+    rgb(255 255 255 / 0.72),
+    rgb(255 255 255 / 0.16)
+  );
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  box-shadow:
+    0 0.0625rem 0.1875rem light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.32)),
+    0 0.375rem 1.125rem light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.28));
+}
+
+.kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"],
+    [data-tone="dark"],
+    [data-scrim="true"]
+  ) {
+  --kui-toolbar-control-background: var(--kui-chrome-material);
+  --kui-toolbar-control-color: var(--kui-color-text);
+  --kui-toolbar-control-hover-background: color-mix(
+    in srgb,
+    var(--kui-color-text) 12%,
+    var(--kui-chrome-material)
+  );
+}
+
+/* A dark glass group keeps its loud translucent fill and on-loud colors; its
+   edge is a faint white rim in either scheme. */
+.kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: rgb(255 255 255 / 0.18);
+}
+
+.kui-toolbar-control-group[data-material="glass"][data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-background: var(--kui-color-surface);
+}
+
+/* Wherever the chrome material turns opaque, the glass edge returns to the
+   group's normal border and a dark glass group to its opaque loud fill. The
+   default glass fill already follows the material tokens. */
+@supports not (
+  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
+) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+  }
+
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+    --kui-toolbar-control-border: var(
+      --kui-toolbar-control-dark-border,
+      #353536
+    );
+  }
+}
+
+@media (prefers-reduced-transparency: reduce),
+  (prefers-contrast: more),
+  (update: slow) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+  }
+
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+    --kui-toolbar-control-border: var(
+      --kui-toolbar-control-dark-border,
+      #353536
+    );
+  }
+}
+
+:root[data-kui-effects="static"]
+  .kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+}
+
+:root[data-kui-effects="static"]
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+  --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536);
+}
+
+@media (forced-colors: active) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    border-color: CanvasText;
+    color: CanvasText;
+    background-color: Canvas;
+    box-shadow: none;
+  }
+}
+
+/* `selectedChrome="none"`: a pressed control paints like its unpressed
+   neighbors, for an icon-state toggle whose glyph already shows the state.
+   One button opts out alone with `data-selected-chrome="none"`. After the
+   tone and appearance rules above, so it wins over their selected fills. */
+.kui-toolbar-control-group[data-selected-chrome="none"],
+.kui-toolbar-control-group
+  > :is(button, wa-button)[data-selected-chrome="none"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-border: transparent;
+  --kui-toolbar-control-selected-background: transparent;
+  --kui-toolbar-control-selected-color: var(--kui-toolbar-control-color);
+}
+
+/* The group lays out its own native and raw Web Awesome children. A composed
+   PopupMenu (`.kui-popup-menu`) or Select sizes itself in the
+   group's context from its own stylesheet (popup-menu.css, select.css); the
+   group names those children by class only to key its own state on them. */
+.kui-toolbar-control-group > :is(button, wa-button, .kui-toolbar-action-link),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
   flex: 0 0 auto;
 }
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
+  display: inline-flex;
+}
+
+.kui-toolbar-control-group > button:has(> .kui-badge[data-placement="corner"]) {
+  position: relative;
+}
 
 .kui-toolbar-control-group > button {
   appearance: none;
@@ -92,35 +620,195 @@
   place-items: center;
 }
 
-.kui-toolbar-control-group > button:hover {
+/* A native button that is disabled, or kept focusable with aria-disabled,
+   dims and drops hover chrome. */
+.kui-toolbar-control-group > button:is(:disabled, [aria-disabled="true"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.kui-toolbar-control-group
+  > button:not(:disabled, [aria-disabled="true"]):hover {
+  border-color: var(--kui-toolbar-control-border);
+  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;
+}
+
+/* An icon tile: a non-interactive icon placed directly in a group (a panel
+   heading's identity glyph) takes the same 40px slot and 16px visual as an
+   icon button, so it centers in the group and lines up with button icons,
+   without a hover surface or a focusable control that does nothing. */
+.kui-toolbar-control-group > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  padding: 0.75rem;
+  box-sizing: content-box;
+  flex: 0 0 auto;
+}
+
 .kui-toolbar-control-group > button svg,
-.kui-toolbar-control-group wa-button > svg {
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) > svg,
+.kui-toolbar-control-group > .kui-toolbar-action-link svg {
   display: block;
   width: 1rem;
   height: 1rem;
 }
 
+/* Nested Web Awesome buttons take the group's control height, not the theme's
+   44px standalone control height. The group's `wa-button` rules style only raw
+   buttons: a composed PopupMenu's trigger (`.kui-popup-menu > wa-button`) is
+   excluded inside a zero-specificity `:where()` and takes the same metrics
+   from popup-menu.css. */
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
+  --wa-form-control-height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
+  --wa-form-control-height: 2rem;
+}
+
 .kui-toolbar-control-group > wa-button,
-.kui-toolbar-control-group > wa-dropdown,
-.kui-toolbar-control-group > wa-dropdown > wa-button,
-.kui-toolbar-control-group > wa-dropdown > wa-button::part(base) {
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base) {
   min-width: 2.5rem;
   height: 2.5rem;
 }
+.kui-toolbar-control-group[data-size="compact"] > button,
+.kui-toolbar-control-group[data-size="compact"] > .kui-toolbar-action-link,
+.kui-toolbar-control-group[data-size="compact"] > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown:not(.kui-popup-menu)
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown:not(.kui-popup-menu)
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  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;
+}
+
+/* `standard` keeps each menu's own standard inset: a raw wa-dropdown takes the
+   8px surface inset, while a PopupMenu keeps the Select listbox inset it
+   shares (popup-menu.css). The explicit compact and list-zero choices apply to
+   every nested menu; a PopupMenu applies them to itself (popup-menu.css). */
+.kui-toolbar-control-group[data-menu-inset="standard"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown:not(.kui-popup-menu)::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
+   neighboring trigger position stable. */
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"] {
+  --kui-layout-item-padding: 0.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > button[aria-pressed="true"] {
+  position: relative;
+  z-index: 1;
+  height: var(--kui-toolbar-group-size);
+  margin: -2px;
+  border-radius: var(--kui-toolbar-group-radius);
+}
+
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown:not(.kui-popup-menu),
+.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
+   the separator and the caret beyond the group border. */
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > 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-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
-  width: 3rem;
+  width: max-content;
 }
 
-.kui-toolbar-control-group wa-button {
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   display: inline-flex;
   line-height: 0;
   align-items: center;
@@ -128,7 +816,8 @@
   --wa-color-fill-quiet: transparent;
 }
 
-.kui-toolbar-control-group wa-button::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::part(base) {
   /* Match min-width to the 40px height so an icon-only button's highlight is at
      least a circle, not a vertical oval — the host is 40px wide but the base
      part was sizing to its ~32px content. Text/caret buttons grow past it. */
@@ -142,45 +831,107 @@
   );
 }
 
-.kui-toolbar-control-group wa-button:hover::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *), [disabled]):hover::part(base) {
   border-color: var(--kui-toolbar-control-border);
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
-    > :is(button, wa-button, wa-dropdown)
+    > :is(
+      button:not(:disabled, [aria-disabled="true"]),
+      wa-button:not([disabled]),
+      .kui-popup-menu,
+      wa-dropdown:not(.kui-popup-menu),
+      .kui-select,
+      .kui-toolbar-action-link
+    )
   ):hover {
-  background: var(--kui-toolbar-control-hover-background);
+  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"] wa-button:hover::part(base) {
+.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:not(:where(.kui-popup-menu > *), [disabled]):hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
 
 /* A group holding exactly one control behaves like `single` even without the
    flag: the whole group background changes on hover instead of highlighting an
-   inner layer inset from the border (KF-J9P1ZD — a PanelHeader's lone Close/
+   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:not(:disabled, [aria-disabled="true"]),
+        wa-button:not([disabled]),
+        .kui-select,
+        .kui-toolbar-action-link
+      ):nth-child(1 of :where(:not([data-toolbar-visibility-state]))):where(
+        :nth-last-child(1 of :not([data-toolbar-visibility-state]))
+      )
   ):hover {
-  background: var(--kui-toolbar-control-hover-background);
+  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):nth-child(
+        1 of :where(:not([data-toolbar-visibility-state]))
+      ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
   )
-  > :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
+    > :is(button, wa-button):nth-child(
+        1 of :where(:not([data-toolbar-visibility-state]))
+      ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
   )
-  wa-button:hover::part(base) {
+  > wa-button:hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
 
+/* A lone control's hover replaces the whole group's fill (above). A dark
+   group's hover tint is a translucent surface wash meant to lie OVER its loud
+   fill, as it does on one control of a dark group; replacing the fill with it
+   left a near-white circle behind the dark tone's white icon on a light page
+   (about 1.3:1). So a dark lone group keeps its fill and paints the tint over
+   it as an image layer. Avatar groups paint their image as the background and
+   keep the plain rule. */
+.kui-toolbar-control-group[data-tone="dark"][data-single="true"]:not(
+    [data-content="avatar"]
+  ):has(
+    > :is(
+      button:not(:disabled, [aria-disabled="true"]),
+      wa-button:not([disabled]),
+      .kui-popup-menu,
+      wa-dropdown:not(.kui-popup-menu),
+      .kui-select,
+      .kui-toolbar-action-link
+    )
+  ):hover,
+.kui-toolbar-control-group[data-tone="dark"]:not(
+    [data-single="true"],
+    [data-content="avatar"]
+  ):has(
+    > :is(
+        button:not(:disabled, [aria-disabled="true"]),
+        wa-button:not([disabled]),
+        .kui-select,
+        .kui-toolbar-action-link
+      ):nth-child(1 of :where(:not([data-toolbar-visibility-state]))):where(
+        :nth-last-child(1 of :not([data-toolbar-visibility-state]))
+      )
+  ):hover {
+  background-color: var(--kui-toolbar-control-background);
+  background-image: linear-gradient(
+    var(--kui-toolbar-control-hover-background) 0 0
+  );
+}
+
+/* A toolbar Select beside other controls highlights its own pill on hover
+   (select.css); a lone Select instead lifts the whole group (above). */
+
 /* A plain <button> child paints its own box for the selected state. */
 .kui-toolbar-control-group[data-single="false"] > button[aria-pressed="true"] {
   border-color: var(--kui-toolbar-control-selected-border);
@@ -205,11 +956,78 @@
   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 (select.css). */
+
+.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within:not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu > [aria-expanded="true"],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
+.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within:not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu > [aria-expanded="true"],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+/* A group-owned ring (outline or halo) is off while a Select listbox or a
+   PopupMenu inside the group is open: the open popup shows focus, as the
+   per-control Select and PopupMenu triggers already do, and the ring returns
+   when the popup closes with focus still in the group. The exclusion sits in
+   a forgiving :where(), so an engine without :has() keeps the ring.
+
+   Chromium and WebKit do not propagate :focus-within from a focused
+   light-DOM child through a host's popup shadow tree, so a focused light-DOM
+   descendant also owns the group ring. Kept as separate rules so an engine
+   without :has() keeps the :focus-within ring. */
+.kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus):not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu > [aria-expanded="true"],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus):not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu > [aria-expanded="true"],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
+  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"]
   ) {
@@ -223,3 +1041,148 @@
   > :is(button, wa-button)[aria-pressed="true"] {
   color: var(--kui-toolbar-control-pressed-color);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-toolbar-control-group[data-content="search"],
+  .kui-toolbar-control-group[data-content="search"][data-sizing="grow"] {
+    --_kui-toolbar-group-search-reveal-duration: 0s;
+    transition-duration: 0s;
+  }
+
+  .kui-toolbar[data-responsive="stack"]
+    > :is(.kui-toolbar__center, .kui-toolbar__trailing)
+    > .kui-toolbar-control-group[data-content="search"][data-sizing="fill"][data-expanded="true"] {
+    animation: none;
+  }
+}
+
+/* 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
+   lone control belongs to the outer group surface; in a group of choices the
+   image belongs only to the selected highlight. */
+.kui-toolbar-control-group[data-content="avatar"] {
+  background-origin: border-box;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
+  ) {
+  background-image: var(--kui-toolbar-avatar-image);
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
+  )
+  > :is(button, wa-button) {
+  color: transparent;
+}
+
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
+  )
+  > button[aria-pressed="true"],
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
+  )
+  > wa-button[aria-pressed="true"]::part(base) {
+  color: transparent;
+  background-image: var(--kui-toolbar-avatar-image);
+  background-origin: border-box;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+/* Explicit quiet palette only for a lone decorative icon tile. The structural
+   guard keeps interactive, mixed and borderless groups on their existing chrome. */
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="neutral"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-neutral-fill-quiet);
+  border-color: var(--kui-color-neutral-border-quiet);
+  color: var(--kui-color-neutral-on-quiet);
+}
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="brand"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-brand-fill-quiet);
+  border-color: var(--kui-color-brand-border-quiet);
+  color: var(--kui-color-brand-on-quiet);
+}
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="success"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-success-fill-quiet);
+  border-color: var(--kui-color-success-border-quiet);
+  color: var(--kui-color-success-on-quiet);
+}
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="warning"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-warning-fill-quiet);
+  border-color: var(--kui-color-warning-border-quiet);
+  color: var(--kui-color-warning-on-quiet);
+}
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="danger"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-danger-fill-quiet);
+  border-color: var(--kui-color-danger-border-quiet);
+  color: var(--kui-color-danger-on-quiet);
+}
+.kui-toolbar-control-group[data-toolbar-width-hidden="true"],
+.kui-toolbar-control-group__busy-status[data-toolbar-width-hidden="true"],
+.kui-toolbar-control-group:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+),
+.kui-toolbar-control-group__busy-status:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-control-group > [data-toolbar-visibility-state],
+.kui-toolbar-control-group__busy-status > [data-toolbar-visibility-state] {
+  display: none;
+}