@kerfjs/ui 5.0.0-beta.50 → 5.0.0-beta.52

package/dist/styles/resizable-region.css

@@ -2,15 +2,25 @@
   --kui-resizable-region-separator-color: var(--kui-color-border);
   --kui-resizable-region-handle-color: var(--kui-color-neutral-on-quiet);
   --kui-resizable-region-handle-active-color: var(--kui-color-text-link);
+  /* Extra track a horizontal region adds when it reaches an unsafe screen edge,
+     so its surface paints through the unsafe area while its committed size
+     stays the content width. A composing layout sets it on the region (a
+     SplitView list does); it never inherits into a nested region. */
+  --kui-resizable-region-edge-extent: 0px;
   position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
 }
 .kui-resizable-region[data-axis="horizontal"] {
-  width: var(--kui-resizable-region-size);
+  width: calc(
+    var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
+  );
   height: 100%;
-  flex: 0 0 var(--kui-resizable-region-size);
+  flex: 0 0
+    calc(
+      var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
+    );
 }
 .kui-resizable-region[data-axis="vertical"] {
   width: 100%;
@@ -21,12 +31,25 @@
 .kui-resizable-region[data-collapsed="true"] {
   overflow: visible;
 }
+/* The content spans the whole region, like the separator does. A vertical
+   stack keeps several children at their natural height, while a lone child —
+   typically a Pane or a layout — fills the region, so it owns its scrolling
+   and reaches the region's far edge. */
 .kui-resizable-region__content {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
 }
+.kui-resizable-region[data-axis="vertical"] > .kui-resizable-region__content {
+  flex-grow: 1;
+}
+.kui-resizable-region__content > :only-child {
+  flex: 1 1 auto;
+  min-height: 0;
+}
 .kui-resizable-region[data-content-overflow="auto"]
   > .kui-resizable-region__content {
   overflow: auto;
@@ -62,8 +85,14 @@
     [data-collapse-motion="none"]
   )
   > .kui-resizable-region__content {
-  width: var(--kui-resizable-region-expanded-size);
-  min-width: var(--kui-resizable-region-expanded-size);
+  width: calc(
+    var(--kui-resizable-region-expanded-size) +
+      var(--kui-resizable-region-edge-extent)
+  );
+  min-width: calc(
+    var(--kui-resizable-region-expanded-size) +
+      var(--kui-resizable-region-edge-extent)
+  );
 }
 .kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
     [data-collapse-motion="none"]
@@ -72,6 +101,25 @@
   height: var(--kui-resizable-region-expanded-size);
   min-height: var(--kui-resizable-region-expanded-size);
 }
+/* While expanded, the sliding content follows the region's actual track, so a
+   region its parent clamps (a max-width, a narrow container) never shows
+   content past its separator. The fixed expanded size above only matters once
+   the track collapses to zero and the content slides out. */
+.kui-resizable-region[data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapsed="true"]
+  )
+  > .kui-resizable-region__content {
+  width: 100%;
+  min-width: 0;
+}
+.kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapsed="true"]
+  )
+  > .kui-resizable-region__content {
+  height: auto;
+  min-height: 0;
+  flex: 1 1 0;
+}
 .kui-resizable-region[data-axis="horizontal"][data-edge="end"][data-collapsed="true"]
   > .kui-resizable-region__content {
   transform: translateX(-100%);
@@ -259,14 +307,54 @@
   .kui-resizable-region__handle {
   top: -10px;
 }
+/* wireResizableRegions sets data-handle-inset when a parent clamps the track
+   and the separator has less room past it than the handle's overhang, which
+   puts it at the parent's edge. The handle then sits wholly inside the region
+   and keeps its separator line on the region's edge, so a clipping ancestor
+   never cuts off half of the hit target or its focus ring. */
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
+  > .kui-resizable-region__handle {
+  right: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
+  > .kui-resizable-region__handle::before {
+  right: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="start"]
+  > .kui-resizable-region__handle {
+  left: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="start"]
+  > .kui-resizable-region__handle::before {
+  left: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="end"]
+  > .kui-resizable-region__handle {
+  bottom: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="end"]
+  > .kui-resizable-region__handle::before {
+  bottom: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="start"]
+  > .kui-resizable-region__handle {
+  top: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="start"]
+  > .kui-resizable-region__handle::before {
+  top: 0;
+}
 .kui-resizable-region__handle:hover,
 .kui-resizable-region__handle:focus-visible {
   color: var(--kui-resizable-region-handle-active-color);
 }
+/* The ring stays wholly inside the handle's box (the focus ring is 3px).
+   The handle runs the region's full length, and those ends usually meet a
+   clipping ancestor's edge, which would otherwise shave the ring there. */
 .kui-resizable-region__handle:focus-visible {
   border-radius: var(--kui-radius-s);
   outline: var(--kui-focus-ring);
-  outline-offset: -2px;
+  outline-offset: -3px;
 }
 .kui-resizable-region__handle-icon {
   position: relative;

package/dist/styles/row.css

@@ -1,5 +1,9 @@
 .kui-row {
   --kui-row-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every Row so a nested Row never
+     inherits its ancestor's; the inline style overrides them per prop. */
+  --_kui-row-gap: var(--kui-row-gap);
+  --_kui-row-flex: 0 1 auto;
   --_kui-row-inset-top: 0;
   --_kui-row-inset-right: 0;
   --_kui-row-inset-bottom: 0;
@@ -99,3 +103,9 @@
   align-items: baseline;
   align-content: baseline;
 }
+
+/* `fill`: the layout root of a definite-height parent (an app root or a
+   fixed-height frame) takes its full height. Inside a flex layout use `flex`. */
+.kui-row[data-fill="true"] {
+  height: 100%;
+}

package/dist/styles/select.css

@@ -39,13 +39,48 @@
   outline: none;
   box-shadow: none;
 }
+/* An icon-only trigger shows the selected icon and the disclosure caret as one
+   pill, the same control family as a toolbar popup-menu dropdown (an icon +
+   caret wa-button): symmetric 8px inline padding, 12px from the icon to the
+   caret's 20px box, the caret glyph size, and the control height, so the icon
+   sits left of center to balance the caret. Inside a ToolbarControlGroup the
+   trigger takes the group's control-slot height, overlap, and radius
+   (`--_kui-toolbar-slot-*`) so it is inset evenly on every side, the group
+   sizes to the trigger (wider than tall), and the group-owned focus ring
+   stays concentric with it. */
 .kui-select[data-selected-presentation="icon-only"] {
-  width: 2rem;
+  --_kui-select-height: 2.75rem;
+  width: max-content;
+}
+.kui-select[data-selected-presentation="icon-only"][data-size="compact"] {
+  --_kui-select-height: 2rem;
 }
 .kui-select[data-selected-presentation="icon-only"]::part(combobox) {
-  width: 2rem;
-  min-width: 2rem;
-  padding-inline: 0.4375rem;
+  min-height: var(--_kui-toolbar-slot-height, var(--_kui-select-height));
+  padding-inline: 0.5rem;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+}
+/* Only a lone trigger takes the group's slot overlap and radius; beside
+   sibling controls it keeps the group's gap, end insets, and item radius, as
+   they do. */
+.kui-select[data-selected-presentation="icon-only"]:only-child {
+  margin-inline: calc(var(--_kui-toolbar-slot-overlap, 0px) * -1);
+}
+.kui-select[data-selected-presentation="icon-only"]:only-child::part(combobox) {
+  border-radius: var(
+    --_kui-toolbar-slot-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+}
+/* The popup-menu wa-button draws the same chevron glyph at 0.875em inside a
+   20px box; match its box, spacing, and glyph size rather than the smaller
+   form-field disclosure scale. */
+.kui-select[data-selected-presentation="icon-only"]::part(expand-icon) {
+  margin-inline-start: 0.75rem;
+  transform: scale(0.875);
 }
 .kui-select[data-selected-presentation="icon-only"]::part(display-input) {
   position: absolute;

package/dist/styles/skeleton.css

@@ -5,7 +5,6 @@
   width: 100%;
   max-width: 100%;
   height: 1em;
-  min-width: 1.5rem;
   border-radius: var(--kui-skeleton-radius);
   /* Deliberately unanimated: a flat, subtle fill that reads as "not yet loaded"
      without drawing the eye or implying progress. */
@@ -13,6 +12,10 @@
   vertical-align: middle;
 }
 
+.kui-skeleton[data-block="true"] {
+  display: block;
+}
+
 .kui-skeleton-lines {
   display: flex;
   width: 100%;

package/dist/styles/split-view.css

@@ -5,6 +5,26 @@
   height: 100%;
   overflow: hidden;
   background: var(--kui-color-surface);
+  /* Safe areas: the list column grows by the inline-start unsafe inset and each
+     pane compensates only for the edges it touches — never the shared interior
+     edge. The compact form hands the context to its NavStack. See pane.css for
+     the `--kui-edge-inset-*` edge context. */
+  --_kui-split-view-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-split-view-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-split-view-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-split-view-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
 }
 
 /* The list pane; when not resizable it takes an intrinsic column and the detail
@@ -13,7 +33,10 @@
   min-width: 0;
   min-height: 0;
   flex: 0 0 auto;
-  width: var(--kui-split-view-list-width, 20rem);
+  width: calc(
+    var(--kui-split-view-list-width, 20rem) +
+      var(--_kui-split-view-safe-inline-start)
+  );
   border-inline-end: 1px solid var(--kui-color-border);
 }
 
@@ -28,6 +51,89 @@
   min-height: 0;
 }
 
+/* A resizable list keeps its committed size as content width; its region's
+   track grows by the unsafe inset it reaches. A collapsed region stays shut. */
+.kui-split-view[data-split-mode="split"]
+  > [data-component="resizable-region"]:not([data-collapsed="true"]) {
+  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
+}
+
+.kui-split-view__list,
+.kui-split-view__detail {
+  --kui-edge-inset-block-start: var(--_kui-split-view-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-split-view-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-split-view-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-split-view-safe-inline-end);
+}
+
+.kui-split-view__list {
+  --kui-edge-inset-inline-end: 0px;
+}
+
+.kui-split-view__detail {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+/* Each pane pads for the edges it touches unless its only child is a Pane or
+   layout, which then owns the insets. */
+.kui-split-view__list:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+),
+.kui-split-view__detail:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+) {
+  padding-block: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
+  padding-inline: var(--kui-edge-inset-inline-start)
+    var(--kui-edge-inset-inline-end);
+}
+
+.kui-split-view__list:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  )
+  > *,
+.kui-split-view__detail:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  )
+  > * {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
 /* Compact mode is a full-bleed NavStack. */
 .kui-split-view--compact {
   display: block;

package/dist/styles/tab-scaffold.css

@@ -6,9 +6,32 @@
   overflow: hidden;
   flex-direction: column;
   background: var(--kui-color-surface);
+  /* Safe areas: the scenes and the bar paint through unsafe areas; the bar
+     compensates for the bottom and inline edges, and the scenes for the top
+     and inline edges (see pane.css for the `--kui-edge-inset-*` context). */
+  --_kui-tab-scaffold-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-tab-scaffold-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-tab-scaffold-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-tab-scaffold-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
 }
 
 .kui-tab-scaffold__scenes {
+  --kui-edge-inset-block-start: var(--_kui-tab-scaffold-safe-block-start);
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: var(--_kui-tab-scaffold-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-tab-scaffold-safe-inline-end);
   position: relative;
   flex: 1;
   min-height: 0;
@@ -23,6 +46,44 @@
   inset: 0;
 }
 
+/* A scene is its region's scroll owner, so its top inset is padding inside
+   the scroller. A scene whose only child is a Pane or layout (usually a
+   NavStack) lets that child own the insets instead. */
+.kui-tab-scaffold__scene:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+) {
+  padding-block-start: var(--kui-edge-inset-block-start);
+  padding-inline: var(--kui-edge-inset-inline-start)
+    var(--kui-edge-inset-inline-end);
+  scroll-padding-block-start: var(--kui-edge-inset-block-start);
+}
+
+.kui-tab-scaffold__scene:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  )
+  > * {
+  --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-tab-scaffold__scene[data-active="false"] {
   visibility: hidden;
 }
@@ -33,8 +94,10 @@
   padding-block-start: var(--kui-space-2xs);
   /* Respect the home-indicator safe area on iOS-class devices. */
   padding-block-end: calc(
-    var(--kui-space-2xs) + env(safe-area-inset-bottom, 0px)
+    var(--kui-space-2xs) + var(--_kui-tab-scaffold-safe-block-end)
   );
+  padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
+    var(--_kui-tab-scaffold-safe-inline-end);
   border-block-start: 1px solid var(--kui-color-border);
   background: var(--kui-color-surface);
 }

package/dist/styles/text.css

@@ -24,3 +24,9 @@
 .kui-text[data-border="none"] {
   border: 0;
 }
+
+span.kui-text {
+  margin: 0;
+  border: 0;
+  padding: 0;
+}

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

@@ -21,6 +21,15 @@
     )
   );
   --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
+  /* Internal group-to-child contract: the control slot a composed child (an
+     icon-only Select) 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. */
+  --_kui-toolbar-slot-height: 2.5rem;
+  --_kui-toolbar-slot-overlap: 0px;
+  --_kui-toolbar-slot-radius: var(--kui-toolbar-item-radius);
   display: inline-flex;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
@@ -71,6 +80,13 @@
 }
 .kui-toolbar-control-group[data-size="compact"] {
   --kui-toolbar-group-size: 2.125rem;
+  --_kui-toolbar-slot-height: 2rem;
+  --_kui-toolbar-slot-overlap: 1px;
+  --_kui-toolbar-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;
@@ -105,6 +121,18 @@
   display: flex;
   gap: var(--kui-space-xs);
 }
+.kui-toolbar-control-group[data-content="mixed"] wa-button {
+  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::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,
@@ -234,6 +262,15 @@
   height: 1rem;
 }
 
+/* Nested Web Awesome buttons take the group's control height, not the theme's
+   44px standalone control height. */
+.kui-toolbar-control-group wa-button {
+  --wa-form-control-height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"] wa-button {
+  --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,
@@ -260,6 +297,13 @@
   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;
+}
+
 .kui-toolbar-control-group[data-menu-inset="standard"] wa-dropdown::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
@@ -287,6 +331,13 @@
   border-radius: var(--kui-toolbar-group-radius);
 }
 
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown,
+.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
@@ -301,20 +352,14 @@
 }
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
   > wa-dropdown
-  > wa-button {
-  /* WebKit does not contribute a custom element's shadow-part caret to the
-     host's intrinsic inline size. Give the standard short text trigger an
-     engine-stable floor; max-content still wins for longer light-DOM labels,
-     and consumers can raise the public variable for localized copy. */
-  width: var(--kui-toolbar-dropdown-trigger-width, 4.125rem);
+  > 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-button::part(base) {
-  width: 3rem;
+  width: max-content;
 }
 
 .kui-toolbar-control-group wa-button {
@@ -345,7 +390,7 @@
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
-    > :is(button, wa-button, wa-dropdown, .kui-toolbar-action-link)
+    > :is(button, wa-button, wa-dropdown, wa-select, .kui-toolbar-action-link)
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -362,7 +407,7 @@
    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, .kui-toolbar-action-link):only-child
+    > :is(button, wa-button, wa-select, .kui-toolbar-action-link):only-child
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -379,6 +424,15 @@
   background: transparent;
 }
 
+/* A toolbar Select beside other controls highlights its own pill on hover,
+   like its button and dropdown siblings; a lone Select instead lifts the whole
+   group (above). */
+.kui-toolbar-control-group:not([data-single="true"])
+  > wa-select:not(:only-child):hover::part(combobox) {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
 /* 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);
@@ -409,6 +463,15 @@
   outline-offset: 1px;
 }
 
+/* With per-control rings, a composed Select paints its own ring even when it
+   was told the group owns it: nothing else would show focus. It matches the
+   sibling controls' ring and offset. */
+.kui-toolbar-control-group[data-focus-ring="control"]
+  > wa-select:focus-within::part(combobox) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
 .kui-toolbar-control-group[data-focus-ring="outline"]:focus-within {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
@@ -420,6 +483,22 @@
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
 }
 
+/* Chromium and WebKit do not propagate :focus-within from a focused
+   light-DOM child (an open wa-select's active wa-option) through the host's
+   popup shadow tree, so the group ring vanished while its Select listbox was
+   open. A focused light-DOM descendant still 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) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus) {
+  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"]
   ) {

package/dist/styles/toolbar-text.css

@@ -46,8 +46,11 @@
   font-size: var(--kui-font-s);
 }
 
+/* Every size keeps the inherited UI sans stack: compact identity text is a
+   label, not code. (A monospace role here resolved through Web Awesome's
+   `ui-monospace, monospace` code stack; Chromium does not
+   recognize `ui-monospace`, so small labels fell back to generic monospace.) */
 .kui-toolbar-text[data-size="small"] {
-  font-family: var(--kui-font-mono);
   font-size: var(--kui-font-xs);
 }