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

package/dist/styles/components/actions/toolbar/toolbar.css

@@ -121,7 +121,7 @@
   ) {
   grid-template-columns:
     minmax(0, 1fr)
-    minmax(0, var(--kui-token-search-expanded-width, 30rem));
+    minmax(0, var(--kui-search-field-expanded-width, 30rem));
 }
 
 .kui-toolbar {
@@ -166,7 +166,7 @@
 
 /* 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
+   ToolbarControlGroup, a standalone Button, and a raw 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 {
@@ -177,6 +177,13 @@
   );
 }
 
+/* A MessageComposer's action row: the composer frame already insets it and
+   spaces it from the field, so the toolbar keeps only its control band. */
+.kui-message-composer > .kui-toolbar {
+  min-height: var(--_kui-toolbar-band);
+  padding: 0;
+}
+
 /* 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. */
@@ -265,7 +272,7 @@
   flex-wrap: wrap;
 }
 
-.kui-toolbar__trailing > wa-button:not(:where(.kui-icon-button)) {
+.kui-toolbar__trailing > wa-button {
   margin-block-start: max(
     0px,
     calc((var(--_kui-toolbar-band) - var(--wa-form-control-height)) / 2)
@@ -355,6 +362,21 @@
   margin-inline-start: auto;
 }
 
+/* A lone zone spans every column track, so an absent (empty, hidden) zone's
+   track and the column gap before it never narrow it: leading-only content
+   set to fill the row reaches the toolbar's inline-end inset, and
+   trailing-only content its inline-start inset. */
+.kui-toolbar[data-has-center="false"]:has(> .kui-toolbar__trailing:empty)
+  > .kui-toolbar__leading,
+.kui-toolbar:has(> .kui-toolbar__leading:empty):has(
+    > .kui-toolbar__trailing:empty
+  )
+  > .kui-toolbar__center,
+.kui-toolbar[data-has-center="false"]:has(> .kui-toolbar__leading:empty)
+  > .kui-toolbar__trailing {
+  grid-column: 1 / -1;
+}
+
 .kui-toolbar[data-has-center="false"] .kui-toolbar__center,
 .kui-toolbar__leading:empty,
 .kui-toolbar__trailing:empty {

package/dist/styles/components/actions/toolbar-control-group/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;

package/dist/styles/components/actions/toolbar-text/toolbar-text.css

@@ -149,21 +149,15 @@ button.kui-toolbar-text:focus-visible {
    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
+   DialogSurface floating header (`headerPresentation="floating"`), as its
+   heading or in 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-dialog-surface__header
   .kui-toolbar-text:not([data-tone]),
 .kui-nav-stack[data-chrome-presentation="overlay"]
   > .kui-nav-stack__chrome
@@ -179,14 +173,7 @@ button.kui-toolbar-text:focus-visible {
   .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-dialog-surface__header
   .kui-toolbar-text:not([data-tone])
   .kui-toolbar-text__description,
 .kui-nav-stack[data-chrome-presentation="overlay"]

package/dist/styles/components/collections/list/list.css

@@ -122,12 +122,43 @@
   border-radius: var(--kui-radius-m);
 }
 
+/* `contentWidth`: a readable page column. The measure is the content's, so
+   the cap adds the list's own insets; `center` (default) centers the column. */
+.kui-list[data-content-width] {
+  width: 100%;
+  max-width: calc(
+    var(--_kui-list-content-width) + var(--_kui-list-inset-left, 0px) +
+      var(--_kui-list-inset-right, 0px)
+  );
+}
+
+.kui-list[data-content-width="compact"] {
+  --_kui-list-content-width: 27.5rem;
+}
+
+.kui-list[data-content-width="medium"] {
+  --_kui-list-content-width: 40rem;
+}
+
+.kui-list[data-content-width="wide"] {
+  --_kui-list-content-width: 54rem;
+}
+
+.kui-list[data-content-align="center"] {
+  margin-inline: auto;
+}
+
 .kui-list[data-h-align="left"] {
   align-items: flex-start;
   align-content: flex-start;
 }
 
 .kui-list[data-h-align="center"] {
+  align-items: center;
+  align-content: center;
+}
+
+.kui-list[data-h-align="around"] {
   align-items: center;
   align-content: space-around;
 }
@@ -137,7 +168,13 @@
   align-content: flex-end;
 }
 
+/* `middle` gathers the children in the middle, keeping their gap;
+   `space-around` (`around`) spreads them. */
 .kui-list[data-v-align="middle"] {
+  justify-content: center;
+}
+
+.kui-list[data-v-align="around"] {
   justify-content: space-around;
 }
 

package/dist/styles/components/feedback/badge/badge.css

@@ -125,12 +125,9 @@
   background: var(--_kui-badge-fill-solid);
 }
 
-/* A multiple icon-only Select's count badge, in the trigger's end slot after
-   its fixed icon, sits 4px from the icon (the caret keeps its 12px after it).
-   The summary that ends the Select's label (and accessible name) stays inline
-   text, so a visible label reads "Labels: Bug, Docs" in place of the hidden
-   value. */
-.kui-select > .kui-badge[slot="end"] {
+/* A multiple icon-only Select's count badge, in the trigger after its fixed
+   icon, sits 4px from the icon (the caret keeps its 12px after it). */
+.kui-select__trigger > .kui-badge {
   margin-inline-start: 0.25rem;
 }
 
@@ -143,3 +140,18 @@
   margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   vertical-align: baseline;
 }
+
+/* `corner`: over the top-trailing corner of the control it sits in, which
+   positions itself for it (button.css, toolbar-control-group.css). A count
+   straddles the corner, growing inward; the dot sits just inside it. */
+.kui-badge[data-placement="corner"] {
+  position: absolute;
+  inset-block-start: -0.25rem;
+  inset-inline-end: -0.25rem;
+  pointer-events: none;
+}
+
+.kui-badge[data-placement="corner"][data-size="dot"] {
+  inset-block-start: 0.125rem;
+  inset-inline-end: 0.125rem;
+}