@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/styles/text-field.css

@@ -0,0 +1,193 @@
+/* TextField: a label above one bordered box (the input with an optional
+   leading icon and clear button), then supporting or error text. */
+.kui-text-field {
+  --_kui-text-field-height: round(2.75em, 1px);
+  display: flex;
+  width: auto;
+  min-width: 0;
+  flex-direction: column;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+}
+.kui-text-field[data-size="compact"] {
+  --_kui-text-field-height: round(calc(1rem + 1.2em), 1px);
+  font-size: var(--kui-font-s, 0.875rem);
+}
+/* The label matches every Kerf form control's label (Select's too). */
+.kui-text-field__label {
+  display: block;
+  margin-block-end: 0.375rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+/* A required field's asterisk; the input itself reports `required`. */
+.kui-text-field__required {
+  margin-inline-start: 0.1em;
+}
+.kui-text-field__box {
+  display: flex;
+  box-sizing: border-box;
+  min-height: var(--_kui-text-field-height);
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
+  color: var(--kui-color-text);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background-color: var(--kui-color-surface);
+  cursor: text;
+}
+.kui-text-field__box:focus-within {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+.kui-text-field[data-invalid] > .kui-text-field__box {
+  border-color: var(--kui-color-danger-border-loud);
+}
+.kui-text-field__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--kui-color-neutral-on-quiet);
+}
+/* The box draws the chrome, so the input resets every native (and global
+   form-control) style of its own. */
+.kui-text-field__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: calc(var(--_kui-text-field-height) - 2px);
+  min-height: 0;
+  flex: 1 1 auto;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  line-height: 1.2;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  background: transparent;
+  box-shadow: none;
+  opacity: 1;
+  transition: none;
+  appearance: none;
+}
+.kui-text-field__input::placeholder {
+  color: var(--kui-color-text-quiet);
+  opacity: 1;
+}
+/* A multi-line field: the box holds only the textarea, which pads itself so
+   its scrollbar reaches the border. */
+.kui-text-field[data-multiline] > .kui-text-field__box {
+  align-items: stretch;
+  padding: 0;
+}
+.kui-text-field[data-multiline] .kui-text-field__input {
+  height: calc(
+    var(--_kui-text-field-rows, 3) * 1lh + 2 * var(--_kui-text-field-block-pad)
+  );
+  padding: var(--_kui-text-field-block-pad) 0.5rem;
+  line-height: 1.45;
+  resize: vertical;
+  --_kui-text-field-block-pad: 0.275rem;
+}
+/* Growing from `rows` to `maxRows` with its content, then scrolling. */
+.kui-text-field[data-multiline="grow"] .kui-text-field__input {
+  height: auto;
+  min-height: calc(
+    var(--_kui-text-field-rows, 3) * 1lh + 2 * var(--_kui-text-field-block-pad)
+  );
+  max-height: calc(
+    var(--_kui-text-field-max-rows) * 1lh + 2 * var(--_kui-text-field-block-pad)
+  );
+  field-sizing: content;
+  resize: none;
+}
+.kui-text-field__clear {
+  display: inline-flex;
+  width: 1.75rem;
+  height: 1.75rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-inline-end: -0.25rem;
+  color: var(--kui-color-neutral-on-quiet);
+  border: none;
+  border-radius: var(--kui-radius-circle, 50%);
+  background: transparent;
+  cursor: pointer;
+}
+.kui-text-field__clear > [data-lucide] {
+  width: 1rem;
+  height: 1rem;
+}
+.kui-text-field__clear:hover {
+  color: var(--kui-color-text);
+}
+.kui-text-field__clear:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+/* Only a field with a value offers to clear it. */
+.kui-text-field__input:placeholder-shown ~ .kui-text-field__clear {
+  display: none;
+}
+.kui-text-field__hint,
+.kui-text-field__error {
+  display: block;
+  margin-block-start: 0.4375rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-text-field[data-size="compact"]
+  :is(.kui-text-field__hint, .kui-text-field__error) {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+.kui-text-field__error {
+  color: var(--kui-color-danger-on-quiet);
+}
+/* A live character count trails the hint on the same line. */
+.kui-text-field__footer {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+.kui-text-field__footer > .kui-text-field__hint {
+  flex: 1 1 auto;
+}
+.kui-text-field__count {
+  flex: none;
+  margin-inline-start: auto;
+  margin-block-start: 0.4375rem;
+  padding-inline-end: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs, 0.75rem);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.6;
+}
+.kui-text-field__hint + .kui-text-field__error {
+  margin-block-start: 0;
+}
+.kui-text-field:has(.kui-text-field__input:disabled) > .kui-text-field__box {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+/* A touch field below 16px makes iOS magnify the page on focus. */
+@media (hover: none) and (pointer: coarse) {
+  .kui-text-field[data-size="compact"] .kui-text-field__input {
+    font-size: max(16px, 1em);
+  }
+}
+@media (forced-colors: active) {
+  .kui-text-field__box {
+    border-color: CanvasText;
+  }
+}

package/dist/styles/text.css

@@ -7,21 +7,19 @@
   overflow-wrap: normal;
 }
 
-/* Match the themed Web Awesome form-control label without introducing a
-   native <label> that would falsely point at a non-form preview. */
+/* Match every Kerf form control's label (TextField, Select) without
+   introducing a native <label> that would falsely point at a non-form
+   preview. */
 .kui-text__field-label {
   box-sizing: border-box;
   min-width: 0;
-  padding-inline: calc(
-    var(--wa-form-control-border-width, 1px) +
-      var(--wa-form-control-padding-inline, 0.5rem)
-  );
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
   margin: 0 0 0.5em;
-  color: var(--kui-color-neutral-on-quiet, var(--wa-color-text-quiet));
-  font-size: var(--kui-font-xs, var(--wa-font-size-xs));
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
   font-weight: 650;
   letter-spacing: 0.04em;
-  line-height: var(--wa-line-height-condensed);
+  line-height: 1.2;
   text-transform: uppercase;
 }
 
@@ -100,6 +98,10 @@ span.kui-text[data-wrap="truncate"] {
   font-size: var(--kui-font-xs);
 }
 
+.kui-text[data-size="medium"] {
+  font-size: var(--kui-font-m);
+}
+
 .kui-text[data-size="large"] {
   font-size: var(--kui-font-l);
 }
@@ -181,10 +183,10 @@ span.kui-text {
 .kui-list-header:is([data-size="m"], [data-size="l"], [data-size="xl"])
   .kui-list-header__title
   > .kui-text {
-  font-family: var(--wa-font-family-heading, var(--kui-font-sans));
-  font-weight: var(--wa-font-weight-heading, 600);
+  font-family: var(--kui-font-sans);
+  font-weight: 600;
   letter-spacing: normal;
-  line-height: var(--wa-line-height-condensed, 1.2);
+  line-height: 1.2;
   text-transform: none;
 }
 

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

@@ -54,6 +54,17 @@
   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%;
@@ -183,7 +194,7 @@
      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-token-search-expanded-width, 30rem), 100%);
+  width: min(var(--kui-search-field-expanded-width, 30rem), 100%);
   max-width: 100%;
   height: auto;
   min-width: 0;
@@ -196,14 +207,14 @@
 }
 
 .kui-toolbar-control-group[data-content="search"]:has(
-    > .kui-token-search[data-expanded="true"][data-fill="true"]
+    > .kui-search-field[data-expanded="true"][data-fill="true"]
   ) {
   width: 100%;
   flex: 1 1 auto;
 }
 
 .kui-toolbar-control-group[data-content="search"]:has(
-    .kui-token-search__suggestions
+    .kui-search-field__suggestions
   ) {
   overflow: visible;
 }
@@ -217,7 +228,7 @@
 }
 
 .kui-toolbar-control-group[data-content="search"]:has(
-    > .kui-token-search[data-expanded="false"][data-fill="true"]
+    > .kui-search-field[data-expanded="false"][data-fill="true"]
   ) {
   width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   flex: 0 0 auto;
@@ -306,17 +317,9 @@
   }
 }
 .kui-toolbar-control-group[data-content="text"]
-  > :is(
-    button,
-    wa-button:not(:where(.kui-icon-button)),
-    .kui-toolbar-action-link
-  ),
+  > :is(button, wa-button, .kui-toolbar-action-link),
 .kui-toolbar-control-group[data-content="mixed"]
-  > :is(
-    button,
-    wa-button:not(:where(.kui-icon-button)),
-    .kui-toolbar-action-link
-  ) {
+  > :is(button, wa-button, .kui-toolbar-action-link) {
   min-width: max-content;
 }
 .kui-toolbar-control-group[data-content="mixed"] > button {
@@ -324,14 +327,14 @@
   gap: var(--kui-space-xs);
 }
 .kui-toolbar-control-group[data-content="mixed"]
-  wa-button:not(:where(.kui-popup-menu > *, .kui-icon-button)) {
+  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 > *, .kui-icon-button))::part(label) {
+  wa-button:not(:where(.kui-popup-menu > *))::part(label) {
   display: inline-flex;
   align-items: center;
   gap: var(--kui-space-xs);
@@ -402,14 +405,7 @@
   > .kui-pane__header
   .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
 .kui-dialog-surface[data-header-presentation="floating"]
-  > wa-dialog
-  > .kui-toolbar-control-group[slot="header-actions"]:not(
-    [data-tone="dark"],
-    [data-scrim="true"]
-  ),
-.kui-dialog-surface[data-header-presentation="floating"]
-  > wa-dialog
-  > [slot="header-actions"]
+  > .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
@@ -554,10 +550,7 @@
    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:not(:where(.kui-icon-button))
-  )[data-selected-chrome="none"] {
+  > :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;
@@ -565,15 +558,10 @@
 }
 
 /* The group lays out its own native and raw Web Awesome children. A composed
-   PopupMenu (`wa-dropdown.kui-popup-menu`) or Select sizes itself in the
+   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:not(:where(.kui-icon-button)),
-    .kui-toolbar-action-link
-  ),
+.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;
 }
@@ -581,6 +569,10 @@
   display: inline-flex;
 }
 
+.kui-toolbar-control-group > button:has(> .kui-badge[data-placement="corner"]) {
+  position: relative;
+}
+
 .kui-toolbar-control-group > button {
   appearance: none;
   display: grid;
@@ -666,9 +658,7 @@
 }
 
 .kui-toolbar-control-group > button svg,
-.kui-toolbar-control-group
-  wa-button:not(:where(.kui-popup-menu > *, .kui-icon-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;
@@ -680,44 +670,40 @@
    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 > *, .kui-icon-button)) {
+.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 > *, .kui-icon-button)) {
+  wa-button:not(:where(.kui-popup-menu > *)) {
   --wa-form-control-height: 2rem;
 }
 
-.kui-toolbar-control-group > wa-button:not(:where(.kui-icon-button)),
+.kui-toolbar-control-group > wa-button,
 .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:not(:where(.kui-icon-button)),
-.kui-toolbar-control-group
-  > wa-dropdown:not(.kui-popup-menu)
-  > wa-button:not(:where(.kui-icon-button))::part(base) {
+  > 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:not(:where(.kui-icon-button)),
+.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:not(:where(.kui-icon-button)),
+  > wa-button,
 .kui-toolbar-control-group[data-size="compact"]
   > wa-dropdown:not(.kui-popup-menu)
-  > wa-button:not(:where(.kui-icon-button))::part(base),
+  > wa-button::part(base),
 .kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
   wa-dropdown:not(.kui-popup-menu)
-  wa-button:not(:where(.kui-icon-button)),
+  wa-button,
 .kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
   wa-dropdown:not(.kui-popup-menu)
-  wa-button:not(:where(.kui-icon-button))::part(base) {
+  wa-button::part(base) {
   min-width: 2rem;
   height: 2rem;
   min-height: 2rem;
@@ -766,7 +752,7 @@
 .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:not(:where(.kui-icon-button)) {
+  > wa-button {
   margin: -2px;
 }
 
@@ -776,26 +762,25 @@
    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:not(:where(.kui-icon-button)),
+  > wa-button,
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
   > wa-dropdown:not(.kui-popup-menu)
-  > wa-button:not(:where(.kui-icon-button))::part(base) {
+  > 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:not(:where(.kui-icon-button))::part(base) {
+  > wa-button::part(base) {
   width: max-content;
 }
 
 .kui-toolbar-control-group[data-single="true"]
   > wa-dropdown:not(.kui-popup-menu)
-  > wa-button:not(:where(.kui-icon-button))::part(base) {
+  > wa-button::part(base) {
   width: max-content;
 }
 
-.kui-toolbar-control-group
-  wa-button:not(:where(.kui-popup-menu > *, .kui-icon-button)) {
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   display: inline-flex;
   line-height: 0;
   align-items: center;
@@ -804,7 +789,7 @@
 }
 
 .kui-toolbar-control-group
-  wa-button:not(:where(.kui-popup-menu > *, .kui-icon-button))::part(base) {
+  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. */
@@ -819,10 +804,7 @@
 }
 
 .kui-toolbar-control-group
-  wa-button:not(
-    :where(.kui-popup-menu > *, .kui-icon-button),
-    [disabled]
-  ):hover::part(base) {
+  wa-button:not(:where(.kui-popup-menu > *), [disabled]):hover::part(base) {
   border-color: var(--kui-toolbar-control-border);
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -841,16 +823,9 @@
 }
 
 .kui-toolbar-control-group[data-single="true"]
-  > :is(
-    button,
-    wa-button:not(:where(.kui-icon-button)),
-    .kui-toolbar-action-link
-  ):hover,
+  > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group[data-single="true"]
-  wa-button:not(
-    :where(.kui-popup-menu > *, .kui-icon-button),
-    [disabled]
-  ):hover::part(base) {
+  wa-button:not(:where(.kui-popup-menu > *), [disabled]):hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
@@ -873,25 +848,17 @@
 }
 
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(
-        button,
-        wa-button:not(:where(.kui-icon-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, .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:not(:where(.kui-icon-button)),
-    .kui-toolbar-action-link
-  ):hover,
+  > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button:not(:where(.kui-icon-button))):nth-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:not(:where(.kui-icon-button)):hover::part(base) {
+  > wa-button:hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
@@ -951,22 +918,18 @@
    and stays inside the group's border instead of overflowing it as an oversized
    square (KF-5BDDQ9). The selected text color rides on the host and inherits in. */
 .kui-toolbar-control-group[data-single="false"]
-  > wa-button:not(:where(.kui-icon-button))[aria-pressed="true"] {
+  > wa-button[aria-pressed="true"] {
   color: var(--kui-toolbar-control-selected-color);
 }
 .kui-toolbar-control-group[data-single="false"]
-  > wa-button:not(:where(.kui-icon-button))[aria-pressed="true"]::part(base) {
+  > wa-button[aria-pressed="true"]::part(base) {
   border-color: var(--kui-toolbar-control-selected-border);
   background: var(--kui-toolbar-control-selected-background);
   box-shadow: var(--kui-toolbar-control-selected-shadow);
 }
 
 .kui-toolbar-control-group
-  > :is(
-    button,
-    wa-button:not(:where(.kui-icon-button)),
-    .kui-toolbar-action-link
-  ):focus-visible {
+  > :is(button, wa-button, .kui-toolbar-action-link):focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
@@ -977,7 +940,7 @@
     :where(
       :has(
         .kui-select[open],
-        .kui-popup-menu[open],
+        .kui-popup-menu > [aria-expanded="true"],
         wa-dropdown:not(.kui-popup-menu)[open]
       )
     )
@@ -990,7 +953,7 @@
     :where(
       :has(
         .kui-select[open],
-        .kui-popup-menu[open],
+        .kui-popup-menu > [aria-expanded="true"],
         wa-dropdown:not(.kui-popup-menu)[open]
       )
     )
@@ -1014,7 +977,7 @@
     :where(
       :has(
         .kui-select[open],
-        .kui-popup-menu[open],
+        .kui-popup-menu > [aria-expanded="true"],
         wa-dropdown:not(.kui-popup-menu)[open]
       )
     )
@@ -1027,7 +990,7 @@
     :where(
       :has(
         .kui-select[open],
-        .kui-popup-menu[open],
+        .kui-popup-menu > [aria-expanded="true"],
         wa-dropdown:not(.kui-popup-menu)[open]
       )
     )
@@ -1047,7 +1010,7 @@
 }
 
 .kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]
-  > :is(button, wa-button:not(:where(.kui-icon-button)))[aria-pressed="true"] {
+  > :is(button, wa-button)[aria-pressed="true"] {
   color: var(--kui-toolbar-control-pressed-color);
 }
 
@@ -1091,18 +1054,18 @@
 .kui-toolbar-control-group[data-content="avatar"]:is(
     [data-single="true"],
     :has(
-      > :is(button, wa-button:not(:where(.kui-icon-button))):nth-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])))
     )
   )
-  > :is(button, wa-button:not(:where(.kui-icon-button))) {
+  > :is(button, wa-button) {
   color: transparent;
 }
 
 .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
     :has(
-      > :is(button, wa-button:not(:where(.kui-icon-button))):nth-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])))
     )
@@ -1110,12 +1073,12 @@
   > button[aria-pressed="true"],
 .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
     :has(
-      > :is(button, wa-button:not(:where(.kui-icon-button))):nth-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:not(:where(.kui-icon-button))[aria-pressed="true"]::part(base) {
+  > wa-button[aria-pressed="true"]::part(base) {
   color: transparent;
   background-image: var(--kui-toolbar-avatar-image);
   background-origin: border-box;