@kerfjs/ui 5.0.0-beta.106 → 5.0.0-beta.108

package/dist/styles/nav-stack.css

@@ -224,6 +224,19 @@
   background: var(--kui-chrome-material);
 }
 
+/* The material's surface context at rest (see pane.css); clear chrome keeps
+   the inherited context. */
+.kui-nav-stack[data-chrome-presentation="overlay"]:not(
+    [data-chrome-material="clear"]
+  )
+  > .kui-nav-stack__chrome,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]:not(
+    [data-bottom-toolbar-material="clear"]
+  )
+  > .kui-nav-stack__bottom {
+  --kui-color-surface-current-tint: var(--kui-chrome-material);
+}
+
 .kui-nav-stack[data-chrome-presentation="overlay"][data-chrome-overlay="measured"]
   > .kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
   position: absolute;
@@ -291,6 +304,63 @@
   }
 }
 
+/* An overlay bar cross-fades its contents, never its material. Fading the
+   bar itself would fade its backdrop filter with it (WebKit drops the blur
+   outright), so mid push or pop the sliding views would show through the
+   chrome. Instead the live bar keeps its material at full opacity while its
+   contents fade in, and the copy cross-fading out above it carries no
+   material of its own (nor a clear bar's scroll edge), only the old
+   contents and divider. */
+.kui-nav-stack[data-chrome-presentation="overlay"] > .kui-nav-stack__chrome,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom {
+  opacity: 1;
+  transition: none;
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy)
+  > *,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom:not(.kui-nav-stack__chrome-copy)
+  > * {
+  transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome--entering:not(.kui-nav-stack__chrome-copy)
+  > *,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__chrome--entering:not(.kui-nav-stack__chrome-copy)
+  > * {
+  transition: none;
+  opacity: 0;
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome.kui-nav-stack__chrome-copy,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom.kui-nav-stack__chrome-copy {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+  transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome.kui-nav-stack__chrome-copy--exiting,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom.kui-nav-stack__chrome-copy--exiting {
+  opacity: 0;
+}
+
+.kui-nav-stack[data-chrome-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__chrome.kui-nav-stack__chrome-copy::before,
+.kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__bottom.kui-nav-stack__chrome-copy::before {
+  content: none;
+}
+
 /* `clear` chrome and bottom toolbar: overlay bars (the same measuring,
    placement, and edge insets as above) that are fully transparent, for
    chrome over imagery. With `scrollEdge="material"` a pseudo-element
@@ -521,7 +591,13 @@
   .kui-nav-stack__view,
   .kui-nav-stack__chrome,
   .kui-nav-stack__bottom,
-  .kui-nav-stack__chrome-copy {
+  .kui-nav-stack__chrome-copy,
+  .kui-nav-stack[data-chrome-presentation="overlay"]
+    > .kui-nav-stack__chrome
+    > *,
+  .kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+    > .kui-nav-stack__bottom
+    > * {
     transition: none;
   }
 }

package/dist/styles/pane.css

@@ -45,10 +45,12 @@
    root scroll in its short mode, while its content remains transparent. */
 .kui-pane[data-appearance="sunken"] > .kui-pane__content {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"] {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
@@ -56,8 +58,15 @@
   background: transparent;
 }
 
+/* The surface context follows the paint: the auto chrome is opaque again. */
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
   > :is(.kui-pane__header, .kui-pane__footer) {
+  --kui-color-surface-current: var(
+    --kui-pane-chrome-background,
+    var(--kui-color-surface)
+  );
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-pane-chrome-background, var(--kui-color-surface));
 }
 
@@ -67,11 +76,16 @@
    surface instead. */
 .kui-pane[data-background] {
   background: var(--_kui-pane-background);
+  --kui-color-surface-current-region: var(--_kui-pane-background);
 }
 
+/* The transparent slots keep the root's surface context. */
 .kui-pane[data-background][data-appearance="sunken"] > .kui-pane__content,
 .kui-pane[data-background][data-appearance="sunken"][data-chrome-placement="auto"]
   > :is(.kui-pane__header, .kui-pane__footer) {
+  --kui-color-surface-current: inherit;
+  --kui-color-surface-current-region: inherit;
+  --kui-color-surface-current-tint: inherit;
   background: transparent;
 }
 
@@ -257,6 +271,16 @@
   background: var(--kui-chrome-material);
 }
 
+/* The material has no single color over scrolling content; the surface
+   context takes it at rest, as a tint over the region it covers. A clear
+   header paints nothing and keeps the inherited context. */
+.kui-pane[data-header-presentation="overlay"]:not(
+    [data-header-material="clear"]
+  )
+  > .kui-pane__header {
+  --kui-color-surface-current-tint: var(--kui-chrome-material);
+}
+
 .kui-pane[data-header-presentation="overlay"][data-header-overlay="measured"]:not(
     [data-chrome-placement="auto"]
   )

package/dist/styles/radio-group.css

@@ -1,6 +1,9 @@
-/* RadioGroup: the group label, the choices on the text column (each a drawn
-   circle beside its label, the native radio invisibly over the circle), and
-   hint and error text below. */
+/* RadioGroup: the group label, the choices (each a drawn circle beside its
+   label, the native radio invisibly over the circle), and hint and error text
+   below. Each circle sits on the group's inline-start edge, where a
+   Checkbox draws its box, so stacked checkboxes and radios share one control
+   column, and stacked choices sit 8px apart: the same 28px pitch as Checkboxes
+   in a List gap="xs". */
 .kui-radio-group {
   --_kui-radio-group-size: 1.25rem;
   --_kui-radio-group-gap: 0.5rem;
@@ -36,8 +39,7 @@
 .kui-radio-group__choices {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  gap: var(--kui-space-xs);
 }
 .kui-radio-group[data-orientation="horizontal"] .kui-radio-group__choices {
   flex-direction: row;

package/dist/styles/select.css

@@ -67,8 +67,12 @@
   outline-color: transparent;
 }
 /* Focus shows on the control (pointer or keyboard), but not while its
-   listbox is open: the listbox shows where focus is then. */
-.kui-select:not([open]):focus-within > .kui-select__trigger {
+   listbox is open: the listbox shows where focus is then. A Select whose
+   enclosing group owns the ring (`focusRingOwner="group"`) never paints its
+   own here: the exclusion lives in this selector, not in a later override,
+   because the focus state outranks any plain owner rule. */
+.kui-select:not([data-focus-ring-owner="group"]):not([open]):focus-within
+  > .kui-select__trigger {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }

package/dist/styles/split-button.css

@@ -1,20 +1,32 @@
 /* One loud semantic fill split into a primary half and a narrow options
    trigger, with a hairline divider in the foreground color. Both halves are
-   native buttons on the shared fill; each brightens on its own hover. */
+   native buttons on the shared fill; each brightens on its own hover. The
+   outer corners take the shared control radius, or full round ends as a
+   pill; the divider seam between the halves stays square. */
 .kui-split-button {
   --_kui-split-button-fill: var(--kui-color-brand-fill-loud);
   --_kui-split-button-on: var(--kui-color-brand-on-loud);
+  --_kui-split-button-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
   display: inline-grid;
   min-width: 0;
   min-height: 2.75rem;
-  overflow: hidden;
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  border-radius: var(--_kui-split-button-radius);
   color: var(--_kui-split-button-on);
   background: var(--_kui-split-button-fill);
   grid-template-columns: minmax(0, auto) 2.5rem;
   font-weight: var(--kui-font-weight-semibold);
 }
 
+.kui-split-button[data-shape="pill"] {
+  --_kui-split-button-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+}
+
 .kui-split-button[data-tone="neutral"] {
   --_kui-split-button-fill: var(--kui-color-neutral-fill-loud);
   --_kui-split-button-on: var(--kui-color-neutral-on-loud);
@@ -50,6 +62,7 @@
   padding-inline: var(--kui-space-s);
   border: 0;
   border-radius: 0;
+  appearance: none;
   color: inherit;
   background: transparent;
   cursor: pointer;
@@ -69,11 +82,44 @@
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
-/* The group clips outer outlines at its rounded corners, so the ring sits
-   inside each half. */
+/* Each half rounds its outer corners with the group, so its hover fill and
+   focus ring follow the rounded or pill end. The group does not clip, so
+   these radii are what keep a half's fill inside the group's corners. */
+.kui-split-button > .kui-split-button__primary {
+  border-start-start-radius: var(--_kui-split-button-radius);
+  border-end-start-radius: var(--_kui-split-button-radius);
+}
+
+.kui-split-button > .kui-split-button__options {
+  border-start-end-radius: var(--_kui-split-button-radius);
+  border-end-end-radius: var(--_kui-split-button-radius);
+}
+
+/* The ring sits outside the focused half, offset like Button's, so it is
+   drawn against the surrounding surface rather than the loud fill, whose
+   brand color can match the ring's own (an inset ring vanished there). The
+   segment along the divider overlaps the neighboring half, painted above it. */
+.kui-split-button > button:focus {
+  outline: none;
+}
+
 .kui-split-button > button:focus-visible {
   outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+/* focusRingInset: inside an ancestor that clips overflow, each half's ring
+   moves inside its box. The loud fill can share the ring's hue (brand), so a
+   surface-colored line runs inside the ring: the ring then meets the surface
+   on both edges, as the outside ring does, on every tone. The line runs 3px
+   past the ring, wide enough to stay solid at a fractional position. It
+   paints the surface context, as Button's does (foundation.css). */
+.kui-split-button[data-focus-ring-inset="true"] > button:focus-visible {
   outline-offset: -3px;
+  box-shadow:
+    inset 0 0 0 6px var(--kui-color-surface-current-tint, transparent),
+    inset 0 0 0 6px var(--kui-color-surface-current-region, transparent),
+    inset 0 0 0 6px var(--kui-color-surface-current, var(--kui-color-surface));
 }
 
 .kui-split-button > button:disabled {

package/dist/styles/styles.css

@@ -44,6 +44,7 @@
 @import "./file-picker.css";
 @import "./text-field.css";
 @import "./checkbox.css";
+@import "./checkbox-group.css";
 @import "./slider.css";
 @import "./radio-group.css";
 @import "./switch.css";

package/dist/styles/sunken-panel.css

@@ -13,6 +13,9 @@
   );
   color: var(--kui-sunken-panel-foreground, var(--kui-color-text));
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  /* The surface-context tint: an inset focus ring's line matches the lowered
+     color its controls sit on (foundation.css). */
+  --kui-color-surface-current-tint: var(--kui-color-surface-lowered);
   flex-direction: column;
   gap: var(--kui-sunken-panel-gap, 0.5rem);
 }

package/dist/styles/surface-scaffold.css

@@ -29,6 +29,9 @@
   color: var(--kui-color-text, inherit);
   border: none;
   border-radius: var(--_kui-dialog-surface-radius);
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background-color: var(--kui-color-surface-raised);
   box-shadow: var(--kui-shadow-l);
   /* Sizes apply at once: a theme's transition on bare dialog elements would
@@ -334,6 +337,8 @@ h2.kui-dialog-surface__title {
   -webkit-backdrop-filter: var(--kui-chrome-material-filter);
   backdrop-filter: var(--kui-chrome-material-filter);
   background: var(--kui-chrome-material-raised);
+  /* The material's surface context at rest, over the raised panel. */
+  --kui-color-surface-current-tint: var(--kui-chrome-material-raised);
   /* The divider is scroll state: the register publishes it only while
      content is scrolled beneath the header. An inset shadow, so showing it
      never moves the header or the content. */
@@ -637,6 +642,9 @@ h2.kui-dialog-surface__title {
     var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
       var(--kui-wa-surface-inset, 0.5rem)
   );
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface-raised);
   box-shadow: var(--kui-shadow-l);
 }

package/dist/styles/switch.css

@@ -1,5 +1,6 @@
-/* Switch: a track and thumb beside its label, with a hint on the label's
-   column. The native input sits invisibly over the track. */
+/* Switch: a track and thumb beside its label, with a hint directly under
+   the label on its column, as a Checkbox hint sits. The native input sits
+   invisibly over the track. */
 .kui-switch {
   --_kui-switch-height: 1.25rem;
   --_kui-switch-gap: 0.5rem;
@@ -99,7 +100,6 @@
 }
 .kui-switch__hint {
   display: block;
-  margin-block-start: 0.4375rem;
   padding-inline-start: calc(
     var(--_kui-switch-height) * 1.75 + var(--_kui-switch-gap)
   );

package/dist/styles/tab-bar.css

@@ -38,6 +38,12 @@
     --kui-tab-bar-strip-background,
     var(--kui-tab-bar-background)
   );
+  /* The surface context (foundation.css): the strip's fill is a tint over
+     whatever the bar sits on. */
+  --kui-color-surface-current-tint: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-tab-bar-background)
+  );
   scrollbar-width: none;
   align-items: center;
   flex: var(--kui-tab-bar-strip-flex, 1 1 auto);

package/dist/styles/tab-navigator.css

@@ -53,6 +53,7 @@
 
 .kui-tab-scaffold__scene[data-appearance="sunken"] {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 /* `background`: the navigator's color paints the root and a docked bar (the
@@ -69,6 +70,13 @@
 
 .kui-tab-scaffold__scene[data-background] {
   background: var(--_kui-tab-scaffold-scene-background);
+  --kui-color-surface-current-region: var(--_kui-tab-scaffold-scene-background);
+}
+
+/* The navigator's color paints its root and a docked bar over whatever holds
+   the navigator: a region in the surface context. */
+.kui-tab-scaffold[data-background] {
+  --kui-color-surface-current-region: var(--_kui-tab-scaffold-background);
 }
 
 @media (forced-colors: active) {
@@ -212,6 +220,15 @@
   background: var(--kui-chrome-material);
 }
 
+/* The material's surface context at rest (see pane.css); a clear bar keeps
+   the inherited context. */
+.kui-tab-scaffold[data-bar-presentation="overlay"]:not(
+    [data-bar-material="clear"]
+  )
+  > .kui-tab-scaffold__bar {
+  --kui-color-surface-current-tint: var(--kui-chrome-material);
+}
+
 .kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"] {
   position: relative;
 }

package/dist/styles/text.css

@@ -175,6 +175,16 @@ span.kui-text {
   white-space: nowrap;
 }
 
+/* A wrapping header keeps the whole label: it breaks onto further lines
+   instead of ellipsizing, and `anywhere` lets a single long word break too, so
+   the label's minimum width never pushes the header past its column. */
+.kui-list-header[data-wrap="true"] .kui-list-header__title > .kui-text {
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+}
+
 .kui-list-header[data-size="xs"] .kui-list-header__title > .kui-text {
   font-size: var(--kui-font-2xs);
   text-transform: capitalize;

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

@@ -132,6 +132,31 @@
   }
 }
 
+/* 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. The shared highlight contract derives every inner hover or
    selected surface from this outer radius and the group's full inset. */
@@ -206,7 +231,10 @@
     border-color 0.2s ease;
 }
 
-.kui-toolbar-control-group[data-content="search"]:has(
+/* 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%;

package/dist/styles/toolbar.css

@@ -16,6 +16,15 @@
   font-family: var(--kui-font-sans);
 }
 
+/* In a List, a vertical stack, the toolbar is chrome and keeps its whole
+   natural height. Its explicit one-band min-height (below) replaces the flex
+   item's automatic content minimum, so a column shrinking toward a long
+   flex scroller beside it would otherwise squeeze a wrapped or stacked
+   toolbar onto its first row and clip the rest. */
+.kui-list > .kui-toolbar {
+  flex-shrink: 0;
+}
+
 /* Safe areas: a toolbar compensates only for the inline edges its owner hands
    it through `--kui-edge-inset-inline-*` (a Pane header or footer does), so its
    box and dividers keep reaching the edge while its zones clear the unsafe

package/dist/styles/webawesome.css

@@ -54,14 +54,19 @@
        theme stylesheets build their shadows from this token, so an app that
        layers one of them keeps kerf's scheme-aware shadow color. */
     --wa-color-shadow: light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5));
-    --wa-color-focus: light-dark(#007aff, #64d2ff);
+    /* The brand tokens follow kerf's opt-in --kui-color-brand when the app
+       sets it (foundation.css derives the ramp); unset, the literals stand. */
+    --wa-color-focus: var(--_kui-brand-focus, light-dark(#007aff, #64d2ff));
     /* Kerf-owned loud fills and on-loud text: every on-loud/fill-loud pair
        clears WCAG AA (4.5:1) in both schemes. Light brand and danger keep
        white text on a slightly deeper fill of the same hue (#0088ff ->
        #0075db, #ff383c -> #eb0005); success keeps its bright green with dark
        text, as warning already does; dark brand and danger keep their fills
        with dark text. src/foundation.css mirrors these as fallbacks. */
-    --wa-color-brand-fill-loud: light-dark(#0075db, #64d2ff);
+    --wa-color-brand-fill-loud: var(
+      --_kui-brand-fill-loud,
+      light-dark(#0075db, #64d2ff)
+    );
     --wa-color-brand-fill-quiet: color-mix(
       in srgb,
       var(--wa-color-brand-fill-loud) 8%,
@@ -86,7 +91,10 @@
     /* Kerf-owned light on-quiet values: darkened from Hot Sheet 2's hues so
        they clear AA on the lowered page background (#f2f2f7) as well as on
        the surface; src/foundation.css mirrors them as fallbacks. */
-    --wa-color-brand-on-quiet: light-dark(#0c62f3, #8acbff);
+    --wa-color-brand-on-quiet: var(
+      --_kui-brand-on-quiet,
+      light-dark(#0c62f3, #8acbff)
+    );
     --wa-color-brand-on-normal: var(--wa-color-brand-on-quiet);
     --wa-color-brand-on-loud: light-dark(#fff, #111113);
 
@@ -583,6 +591,7 @@
     wa-number-input,
     wa-radio-group,
     wa-select,
+    wa-tag-input,
     wa-textarea,
     wa-time-input
   ):not([size="small"]) {
@@ -600,6 +609,7 @@
     wa-number-input,
     wa-radio-group,
     wa-select,
+    wa-tag-input,
     wa-textarea,
     wa-time-input
   )::part(form-control-label),
@@ -617,27 +627,46 @@
     text-transform: uppercase;
   }
 
-  /* Checkbox/radio groups and the color picker have no bordered field shell,
-     so their control regions need the content-item's 8px inline outer inset. */
-  :is(wa-checkbox-group, wa-color-picker, wa-radio-group)::part(
-    form-control-input
-  ) {
+  /* Checkbox and radio groups and the color picker keep their control region
+     flush: each box, circle, or swatch trigger sits on the host's
+     inline-start edge, where a Kerf Checkbox, RadioGroup, or ColorField draws
+     it, while the label and hint stay on the 9px text column. The slider
+     alone insets its complete interactive region by the shared 8px. */
+  wa-slider::part(slider) {
     margin-inline: var(--kui-layout-inline-margin, 0.5rem);
   }
 
-  wa-slider::part(slider) {
-    margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  /* Stacked radios sit 8px apart (0.25em on each side at the 16px default)
+     instead of Web Awesome's 12px, the 28px pitch Kerf's RadioGroup and a
+     Checkbox List share. The first and last radio keep their flush outer
+     edges, and horizontal and button radios keep their own spacing. */
+  wa-radio[appearance="default"]:not(
+      [data-wa-radio-horizontal],
+      [data-wa-radio-first]
+    ) {
+    margin-block-start: 0.25em;
+  }
+
+  wa-radio[appearance="default"]:not(
+      [data-wa-radio-horizontal],
+      [data-wa-radio-last]
+    ) {
+    margin-block-end: 0.25em;
   }
 
   /* Secondary captions and hints align with the value inside bordered fields:
-     1px border + 8px field padding = a 9px logical inset. */
+     1px border + 8px field padding = a 9px logical inset. Checkbox and radio
+     group hints share that text column with their group label. */
   wa-known-date::part(field-label),
   :is(
+    wa-checkbox-group,
     wa-input,
     wa-known-date,
     wa-number-input,
     wa-otp-input,
+    wa-radio-group,
     wa-select,
+    wa-tag-input,
     wa-textarea,
     wa-time-input
   )::part(hint) {
@@ -646,6 +675,21 @@
         var(--wa-form-control-padding-inline)
     );
   }
+
+  /* An OTP input reserves its segments' focus-ring bleed with padding and an
+     equal negative margin, then caps the padded box at 100% of the host. In a
+     shrink-to-fit host (a start-aligned grid or flex item, an inline layout)
+     the host is only the segments' width minus that bleed, so the cap clips
+     the last cell's inline-end edge inside the scroll container. Cap the box
+     at the host's width plus the bleed instead, which is the space its
+     negative margins actually give it: the segments still scroll inside a
+     host narrower than the code, and never clip one that fits. The contained
+     appearance has no bleed and keeps upstream's cap. */
+  wa-otp-input:not([appearance="contained"])::part(segments) {
+    max-width: calc(
+      100% + 2 * (var(--wa-focus-ring-offset) + var(--wa-focus-ring-width))
+    );
+  }
 }
 
 /* Small Web Awesome fields have 14px hosts by default. Raise only the editable
@@ -653,7 +697,7 @@
    their compact chrome and desktop typography keep their normal sizes. */
 @media (hover: none) and (pointer: coarse) {
   @layer wa-theme-overrides {
-    :is(wa-input, wa-number-input, wa-time-input):is(
+    :is(wa-input, wa-number-input, wa-tag-input, wa-time-input):is(
         [size="xs"],
         [size="s"],
         [size="small"]

package/dist/styles/workbench.css

@@ -136,6 +136,7 @@
 .kui-workbench__main[data-appearance="sunken"],
 :is(.kui-workbench__rail, .kui-workbench__drawer)[data-appearance="sunken"] {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 :is(
@@ -143,6 +144,8 @@
     .kui-workbench__drawer
   )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"] {
   background: transparent;
+  /* Only the content paints; the root keeps the inherited context. */
+  --kui-color-surface-current-region: inherit;
 }
 
 :is(
@@ -151,6 +154,7 @@
   )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"]
   > .kui-workbench__panel-content {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-workbench__main[data-drawer-inline-expanded="true"] {