@kerfjs/ui 5.0.0-beta.51 → 5.0.0-beta.53

package/dist/styles/foundation.css

@@ -80,13 +80,21 @@
   --kui-radius-pill: var(--wa-border-radius-pill, 999px);
   --kui-disclosure-icon-scale: 0.5;
   /* macOS Tahoe light semantics used by Hot Sheet 2, with a compatible dark extension. */
+  /* Every --kui-color-* token (and the focus-ring color) that reads a --wa-*
+     token falls back to the value src/webawesome.css assigns to that token,
+     including its light-dark() pair, so a page without the Web Awesome theme
+     resolves the same palette in both color schemes. A single light color
+     here would render, e.g., dark red danger text on a dark surface, and a
+     fallback that points at a different token (surface-raised at the surface,
+     text-link at the brand fill) silently diverges from the theme.
+     tests/browser/tone-contrast.spec.ts pins the parity for every token. */
   --kui-color-surface: var(
     --wa-color-surface-default,
     light-dark(#fff, #1c1c1e)
   );
   --kui-color-surface-raised: var(
     --wa-color-surface-raised,
-    var(--kui-color-surface)
+    light-dark(#fff, #2c2c2e)
   );
   --kui-color-surface-lowered: var(
     --wa-color-surface-lowered,
@@ -99,7 +107,7 @@
   );
   --kui-color-text-link: var(
     --wa-color-text-link,
-    var(--kui-color-brand-fill-loud)
+    var(--kui-color-brand-on-quiet)
   );
 
   --kui-color-neutral-fill-quiet: var(
@@ -116,7 +124,7 @@
   );
   --kui-color-neutral-border-quiet: var(
     --wa-color-neutral-border-quiet,
-    var(--kui-color-neutral-fill-normal)
+    light-dark(#e5e5ea, #38383a)
   );
   --kui-color-neutral-border-normal: var(
     --wa-color-neutral-border-normal,
@@ -141,7 +149,7 @@
 
   --kui-color-brand-fill-loud: var(
     --wa-color-brand-fill-loud,
-    light-dark(#0088ff, #64d2ff)
+    light-dark(#0075db, #64d2ff)
   );
   --kui-color-brand-fill-quiet: var(
     --wa-color-brand-fill-quiet,
@@ -179,21 +187,30 @@
     --wa-color-brand-border-loud,
     var(--kui-color-brand-fill-loud)
   );
+  /* The light brand/success/warning on-quiet values are Kerf-owned (mirrored
+     in src/webawesome.css): each is the Hot Sheet 2 hue darkened just enough to
+     clear WCAG AA (>=4.5:1) on the lowered page background (#f2f2f7), not only
+     on the white surface. The prior #1e6ef4 / #008932 / #a16a00 reached ~4.1:1
+     there. Brand #0c62f3 is 4.64:1, success #007f2e 4.62:1, warning #966200
+     4.65:1 on the page (5.2:1 on white). */
   --kui-color-brand-on-quiet: var(
     --wa-color-brand-on-quiet,
-    light-dark(#1e6ef4, #8acbff)
+    light-dark(#0c62f3, #8acbff)
   );
   --kui-color-brand-on-normal: var(
     --wa-color-brand-on-normal,
     var(--kui-color-brand-on-quiet)
   );
-  --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
+  --kui-color-brand-on-loud: var(
+    --wa-color-brand-on-loud,
+    light-dark(#fff, #111113)
+  );
   /* Brand accent text placed directly ON a brand fill (quiet or normal), such as
      the info StateBanner and Select's current option. Darker than brand-on-quiet
-     so it clears WCAG AA (>=4.5:1): brand-on-quiet (#1e6ef4) resolves to only
-     3.77:1 over brand-fill-normal (#d6ecff) and 4.15:1 over brand-fill-quiet
-     (#ebf6ff), while #1a5dcf (same hue) clears ~4.9:1 and ~5.2:1 there. The dark
-     value matches brand-on-quiet, which already passes over the dark fills. */
+     so it clears WCAG AA (>=4.5:1): brand-on-quiet (#0c62f3) resolves to only
+     4.26:1 over brand-fill-normal (#d6ecff), while #1a5dcf (same hue) clears
+     ~4.9:1 there and ~5.5:1 over brand-fill-quiet (#ebf6ff). The dark value
+     matches brand-on-quiet, which already passes over the dark fills. */
   --kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
 
   /* Pop is attractive emphasis without status meaning: use it for featured,
@@ -266,12 +283,19 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-success-on-quiet: var(--wa-color-success-on-quiet, #008932);
-  --kui-color-success-on-normal: var(--wa-color-success-on-normal, #006d28);
-  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #fff);
+  --kui-color-success-on-quiet: var(
+    --wa-color-success-on-quiet,
+    light-dark(#007f2e, #63e685)
+  );
+  --kui-color-success-on-normal: var(
+    --wa-color-success-on-normal,
+    light-dark(#006d28, #8cea9f)
+  );
+  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #1d1d1f);
   /* Success text placed ON a success fill (e.g. the success StateBanner). Darker
-     than success-on-quiet so it clears WCAG AA (>=4.5:1) over success-fill-quiet
-     (#e3f7e8), where #008932 reached only 4.05:1. Dark matches success-on-quiet. */
+     than success-on-quiet for margin over success-fill-quiet (#e3f7e8): the
+     original on-quiet #008932 reached only 4.05:1 there and today's #007f2e sits
+     at 4.60:1, while #00792c clears ~5:1. Dark matches success-on-quiet. */
   --kui-color-success-on-fill: light-dark(#00792c, #63e685);
 
   --kui-color-warning-fill-loud: var(--wa-color-warning-fill-loud, #ffcc00);
@@ -315,15 +339,25 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-warning-on-quiet: var(--wa-color-warning-on-quiet, #a16a00);
-  --kui-color-warning-on-normal: var(--wa-color-warning-on-normal, #5f3f00);
+  --kui-color-warning-on-quiet: var(
+    --wa-color-warning-on-quiet,
+    light-dark(#966200, #ffd84a)
+  );
+  --kui-color-warning-on-normal: var(
+    --wa-color-warning-on-normal,
+    light-dark(#5f3f00, #ffe27a)
+  );
   --kui-color-warning-on-loud: var(--wa-color-warning-on-loud, #1d1d1f);
   /* Warning text placed ON a warning fill (e.g. the warning StateBanner). Darker
-     than warning-on-quiet so it clears WCAG AA (>=4.5:1) over warning-fill-quiet
-     (#fffae8), where #a16a00 reached only 4.39:1. Dark matches warning-on-quiet. */
+     than warning-on-quiet for margin over warning-fill-quiet (#fffae8): the
+     original on-quiet #a16a00 reached only 4.39:1 there (today's #966200 is
+     4.97:1), while #8f5e00 clears ~5.3:1. Dark matches warning-on-quiet. */
   --kui-color-warning-on-fill: light-dark(#8f5e00, #ffd84a);
 
-  --kui-color-danger-fill-loud: var(--wa-color-danger-fill-loud, #ff383c);
+  --kui-color-danger-fill-loud: var(
+    --wa-color-danger-fill-loud,
+    light-dark(#eb0005, #ff383c)
+  );
   --kui-color-danger-fill-quiet: var(
     --wa-color-danger-fill-quiet,
     color-mix(
@@ -364,9 +398,26 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-danger-on-quiet: var(--wa-color-danger-on-quiet, #c20b20);
-  --kui-color-danger-on-normal: var(--wa-color-danger-on-normal, #8e0717);
-  --kui-color-danger-on-loud: var(--wa-color-danger-on-loud, #fff);
+  --kui-color-danger-on-quiet: var(
+    --wa-color-danger-on-quiet,
+    light-dark(#c20b20, #ff696c)
+  );
+  --kui-color-danger-on-normal: var(
+    --wa-color-danger-on-normal,
+    light-dark(#8e0717, #ff8a8c)
+  );
+  --kui-color-danger-on-loud: var(
+    --wa-color-danger-on-loud,
+    light-dark(#fff, #111113)
+  );
+  /* Danger text placed ON a danger fill (e.g. the danger StateBanner) and the
+     danger Badge's solid fill. The light value matches danger-on-quiet, which
+     already clears WCAG AA (5.7:1) over danger-fill-quiet. The dark value is
+     lighter than danger-on-quiet (#ff696c), which reached only 5.7:1 over the
+     dark fill-quiet (4.0:1 as dimmed banner detail) and left the solid badge's
+     dark text and placeholder skeleton the weakest of any tone on a mid-red
+     fill; #ffa0a2 matches the other tones' pale dark on-fill values. */
+  --kui-color-danger-on-fill: light-dark(#c20b20, #ffa0a2);
 
   /* Compatibility aliases retained for existing @kerfjs/ui consumers. */
   --kui-color-border: var(
@@ -386,12 +437,17 @@
   --kui-color-danger-text: var(--kui-color-danger-on-quiet);
   --kui-focus-ring: var(
     --wa-focus-ring,
-    3px solid var(--wa-color-focus, var(--kui-color-brand-fill-loud))
+    3px solid var(--wa-color-focus, light-dark(#007aff, #64d2ff))
+  );
+  /* Elevation mirrors webawesome.css's scheme-aware shadows: dark raises the
+     alpha so a raised surface still separates from a near-black page. */
+  --kui-shadow-s: var(
+    --wa-shadow-s,
+    0 1px 3px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5))
   );
-  --kui-shadow-s: var(--wa-shadow-s, 0 1px 3px rgb(0 0 0 / 0.14));
   --kui-shadow-l: var(
     --wa-shadow-l,
-    0 0.75rem 2rem rgb(0 0 0 / 0.09)
+    0 0.75rem 2rem light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.32))
   );
 }
 

package/dist/styles/list-action-row.css

@@ -45,7 +45,9 @@
   border-end-end-radius: 0;
 }
 
-.kui-list-action-row:has(.kui-list-action-row__primary:hover) {
+.kui-list-action-row:not([data-placeholder="true"]):has(
+    .kui-list-action-row__primary:hover
+  ) {
   --kui-list-action-row-border: var(--kui-list-action-row-hover-border);
   --kui-list-action-row-background: var(--kui-list-action-row-hover-background);
 }
@@ -92,12 +94,27 @@
   outline: none;
 }
 
-.kui-list-action-row__primary:disabled,
-.kui-list-action-row__trailing-action:disabled {
-  cursor: not-allowed;
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live row's tone (see the placeholder rule in skeleton.css). The
+   disabled tone follows the author's disabled props (the data-kui-disabled
+   marker), so a disabled button's placeholder is dimmed like the loaded one;
+   only the `not-allowed` cursor is reserved for the live row. */
+.kui-list-action-row
+  :is(
+    .kui-list-action-row__primary,
+    .kui-list-action-row__trailing-action
+  )[data-kui-disabled="true"] {
   opacity: 0.58;
 }
 
+.kui-list-action-row:not([data-placeholder="true"])
+  :is(
+    .kui-list-action-row__primary:disabled,
+    .kui-list-action-row__trailing-action:disabled
+  ) {
+  cursor: not-allowed;
+}
+
 .kui-list-action-row__icon {
   position: absolute;
   inset-block-start: 50%;
@@ -144,6 +161,9 @@
 
 .kui-list-action-row__status {
   display: inline-flex;
+  /* A full line even when it holds only a placeholder skeleton, which is
+     shorter than the text line it stands in for. */
+  min-block-size: 1lh;
   align-items: center;
   gap: 0.25rem;
 }
@@ -180,10 +200,11 @@
   opacity: 0;
 }
 
-.kui-list-action-row[data-trailing-visibility="interaction"]:is(
-    :hover,
-    :focus-within
-  )
+/* A placeholder is inert, so hovering it reveals nothing: the trailing action
+   keeps the live resting state (hidden until interaction). */
+.kui-list-action-row[data-trailing-visibility="interaction"]:not(
+    [data-placeholder="true"]
+  ):is(:hover, :focus-within)
   .kui-list-action-row__trailing-action {
   opacity: 1;
 }

package/dist/styles/list-header.css

@@ -187,8 +187,13 @@
   flex: none;
 }
 
-.kui-list-header__action:hover,
-.kui-list-header__toggle:hover {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live tone and gives no hover feedback (see the placeholder rule
+   in skeleton.css). A disabled control gives none either. */
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__action:hover:not(:disabled),
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__toggle:hover:not(:disabled) {
   border-color: var(--kui-color-neutral-border-normal);
   background: var(--kui-list-header-hover-background);
 }
@@ -199,14 +204,21 @@
   outline-offset: 1px;
 }
 
-.kui-list-header__action:disabled {
-  cursor: not-allowed;
+/* The disabled tone follows the author's `actionDisabled` (the
+   data-kui-disabled marker), so a disabled action or toggle's placeholder is
+   dimmed like the loaded one; only the `not-allowed` cursor is reserved for
+   the live header. The tone is the component's own, never Web Awesome's
+   native `button:disabled`, so it holds without webawesome.css. */
+.kui-list-header__action[data-kui-disabled="true"],
+.kui-list-header__toggle[data-kui-disabled="true"] {
   opacity: 0.48;
 }
 
-.kui-list-header__action:disabled:hover {
-  border-color: transparent;
-  background: transparent;
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__action:disabled,
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__toggle:disabled {
+  cursor: not-allowed;
 }
 
 .kui-list-header__action > svg,

package/dist/styles/list-item.css

@@ -78,17 +78,25 @@
   grid-column: 2;
 }
 
-.kui-list-item:hover {
+.kui-list-item:hover:not([data-placeholder="true"]) {
   border-color: var(--kui-list-item-hover-border);
   background: var(--kui-list-item-hover-background);
 }
 
-.kui-list-item:disabled {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live row's tone (see the placeholder rule in skeleton.css). The
+   disabled tone follows the author's `disabled` prop (the data-kui-disabled
+   marker), so a disabled row's placeholder is dimmed like the loaded row; only
+   the `not-allowed` cursor is reserved for the live row. */
+.kui-list-item[data-kui-disabled="true"] {
   color: var(--kui-color-neutral-on-quiet);
-  cursor: not-allowed;
   opacity: 0.58;
 }
 
+.kui-list-item:disabled:not([data-placeholder="true"]) {
+  cursor: not-allowed;
+}
+
 .kui-list-item[aria-current="page"],
 .kui-list-item[aria-pressed="true"] {
   border-color: var(--kui-list-item-selected-border);

package/dist/styles/resizable-region.css

@@ -152,7 +152,7 @@
   z-index: var(--kui-resizable-region-overlay-z, 41);
   max-width: var(--kui-resizable-region-overlay-max-width, 85vw);
   max-height: var(--kui-resizable-region-overlay-max-height, 85vh);
-  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+  box-shadow: var(--kui-shadow-l);
 }
 .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"] {
   inset-block: 0;

package/dist/styles/segmented-control.css

@@ -148,8 +148,28 @@
   outline-offset: 1px;
 }
 
-.kui-segmented-control__item:disabled {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   its choices keep the live tone. SegmentedControl renders no skeleton (its
+   choices are known; only the selection is unknown), so it does not load
+   skeleton.css and neutralizes disabled chrome itself, including Web Awesome's
+   native button:disabled. A choice the author disabled (the data-kui-disabled
+   marker) keeps the live disabled tone; only the `not-allowed` cursor is
+   reserved for the live control. */
+.kui-segmented-control[data-placeholder="true"] .kui-segmented-control__item {
+  cursor: default;
+}
+
+.kui-segmented-control[data-placeholder="true"]
+  .kui-segmented-control__item:not([data-kui-disabled="true"]) {
+  opacity: 1;
+}
+
+.kui-segmented-control__item[data-kui-disabled="true"] {
   opacity: 0.45;
+}
+
+.kui-segmented-control:not([data-placeholder="true"])
+  .kui-segmented-control__item:disabled {
   cursor: not-allowed;
 }
 

package/dist/styles/select.css

@@ -116,7 +116,7 @@
 .kui-select wa-option {
   --wa-form-control-activated-color: var(--kui-color-brand-fill-normal);
   /* Current option text sits on the activated brand fill; use the darker on-fill
-     accent so it clears WCAG AA (brand-on-quiet was 3.77:1 over that fill). */
+     accent so it clears WCAG AA (brand-on-quiet is 4.26:1 over that fill). */
   --current-text-color: var(--kui-color-brand-on-fill);
 }
 .kui-select wa-option::part(start) {
@@ -189,11 +189,17 @@
   width: 100%;
 }
 .kui-select__placeholder-label {
+  /* The live field's top label (see webawesome.css): a ListHeader-style label,
+     inset by the field's border + inline padding so it lines up with the value. */
   display: block;
-  margin-block-end: 0.25rem;
-  color: var(--kui-color-text);
-  font-size: var(--kui-font-s);
-  line-height: 1.4;
+  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;
 }
 .kui-select__placeholder-box {
   display: flex;
@@ -219,23 +225,28 @@
   max-width: 100%;
 }
 .kui-select__placeholder-hint {
+  /* The live wa-select hint part: small body text at Web Awesome's form-control
+     hint metrics (1.6 line height, 7px below the box), inset like the value. */
   display: block;
-  margin-block-start: 0.25rem;
+  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-xs);
-  line-height: 1.4;
+  font-size: var(--kui-font-s);
+  line-height: 1.6;
 }
 .kui-select__placeholder-chevron {
-  display: inline-flex;
-  width: 1rem;
+  /* The live control's expand-icon box and scale, with the same glyph. */
+  display: grid;
+  width: 1.25rem;
   height: 1rem;
   flex: none;
-  color: var(--kui-color-text-quiet);
-  transform: scale(var(--kui-disclosure-icon-scale, 0.85));
+  place-items: center;
+  color: var(--kui-color-neutral-on-quiet);
+  transform: scale(var(--kui-disclosure-icon-scale, 0.5));
 }
 .kui-select__placeholder-chevron svg {
   display: block;
-  width: 100%;
+  width: auto;
   height: 100%;
+  fill: currentColor;
 }

package/dist/styles/skeleton.css

@@ -5,14 +5,22 @@
   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. */
-  background: color-mix(in srgb, var(--kui-color-text) 12%, transparent);
+     without drawing the eye or implying progress. A host with its own solid
+     fill (a solid Badge) supplies `--_kui-skeleton-fill` derived from its
+     foreground, since a text-color tint vanishes on a saturated fill. */
+  background: var(
+    --_kui-skeleton-fill,
+    color-mix(in srgb, var(--kui-color-text) 12%, transparent)
+  );
   vertical-align: middle;
 }
 
+.kui-skeleton[data-block="true"] {
+  display: block;
+}
+
 .kui-skeleton-lines {
   display: flex;
   width: 100%;
@@ -24,6 +32,32 @@
   height: 0.8em;
 }
 
+/* Placeholder mode. A component's `placeholder` keeps its controls `disabled` so
+   they stay inert and out of the keyboard order, but a placeholder is loading,
+   not unavailable: it must look exactly like the live component except for its
+   skeleton values. Neutralize generic disabled chrome, including Web Awesome's
+   layered native `button:disabled { opacity: 0.5; cursor: not-allowed }`.
+   Opacity carries zero specificity so a component's own opacity rules (a
+   hover-revealed control that is invisible until interaction) still win;
+   components exclude placeholders from their own disabled tone. The cursor is
+   the non-interactive default, never `not-allowed`.
+
+   A control the author disabled carries `data-kui-disabled="true"` (set from
+   the component's own disabled prop, independent of placeholder). It is
+   unavailable once loaded, so its placeholder keeps the live disabled tone:
+   the reset skips it, and components key their disabled tone on the marker. */
+:where(
+  [data-placeholder="true"]:disabled:not([data-kui-disabled="true"]),
+  [data-placeholder="true"] :disabled:not([data-kui-disabled="true"])
+) {
+  opacity: 1;
+}
+
+[data-placeholder="true"]:disabled,
+[data-placeholder="true"] :disabled {
+  cursor: default;
+}
+
 @media (forced-colors: active) {
   .kui-skeleton {
     background: GrayText;

package/dist/styles/state-banner.css

@@ -41,6 +41,15 @@
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
+/* The detail is secondary through its smaller, regular-weight type, not a
+   dimmed color: an opacity cut toned details below WCAG AA over their fills.
+   Only the neutral tone has a quieter text color that still clears AA. */
+.kui-state-banner[data-tone="neutral"] {
+  --_kui-state-banner-detail: var(
+    --kui-state-banner-detail,
+    var(--kui-color-neutral-on-quiet)
+  );
+}
 .kui-state-banner[data-tone="info"] {
   --_kui-state-banner-background: var(
     --kui-state-banner-background,
@@ -123,7 +132,7 @@
   );
   --_kui-state-banner-foreground: var(
     --kui-state-banner-foreground,
-    var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-quiet))
+    var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-fill))
   );
 }
 .kui-state-banner__icon {
@@ -134,21 +143,50 @@
   width: 1rem;
   height: 1rem;
 }
+/* The copy is inline flow, not flex: a wrapping title lays out as text, so the
+   badge follows the title's last word instead of the right edge of a
+   flex-shrunk title box, and the detail stays beside them only while it fits
+   whole. Otherwise it moves to its own line and truncates at the full copy
+   width. Flex shrank the title and detail together, which left a gap before
+   the badge and cut the detail early. Each item's trailing margin is the item
+   gap, so no margin lands at the start of a wrapped line. */
 .kui-state-banner__copy {
-  display: flex;
   min-width: 0;
-  align-items: baseline;
-  gap: var(--kui-layout-item-gap, 0.5rem);
+  /* The title's size, so a wrapped title's lines keep the title's own line
+     height instead of the larger inherited strut. */
+  font-size: var(--kui-font-xs);
 }
 .kui-state-banner__copy strong {
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   font-size: var(--kui-font-xs);
 }
+/* The badge is taller than the title's line. Negative block margins keep it
+   out of the line-height calculation, so a wrapped title's lines stay evenly
+   spaced whichever line the badge lands on. */
+.kui-state-banner__badge {
+  margin-block: -0.5em;
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  vertical-align: baseline;
+}
+/* A placeholder badge holds a skeleton instead of text. With no text, the
+   skeleton's baseline would be synthesized from its bottom edge, sitting the
+   badge higher than the live one by a font-dependent amount. A zero-width
+   character gives it a text baseline in the badge's own font and line
+   height, exactly where the live badge's text baseline falls on every
+   platform. */
+.kui-state-banner[data-placeholder="true"]
+  .kui-state-banner__badge
+  > *::before {
+  content: "\200b";
+}
 .kui-state-banner__detail {
-  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+  overflow: clip;
   color: var(--_kui-state-banner-detail);
   font-size: var(--kui-font-2xs);
-  opacity: 0.78;
   text-overflow: ellipsis;
+  vertical-align: baseline;
   white-space: nowrap;
 }
 .kui-state-banner__action {
@@ -174,12 +212,10 @@
   outline-offset: 2px;
 }
 @media (max-width: 36rem) {
-  .kui-state-banner__copy {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.05rem;
-  }
+  /* The detail drops below the title. The title row keeps the wide layout's
+     relationship: a content-sized badge one item gap after the title, on the
+     title's baseline. */
   .kui-state-banner__detail {
-    grid-column: 1 / -1;
+    display: block;
   }
 }