@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90

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

@@ -0,0 +1,118 @@
+.kui-badge {
+  --_kui-badge-fill-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-neutral-on-normal);
+  --_kui-badge-border: var(--kui-color-neutral-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--_kui-badge-on-quiet);
+  background: var(--_kui-badge-fill-quiet);
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.kui-badge[data-tone="info"] {
+  --_kui-badge-fill-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-brand-on-fill);
+  --_kui-badge-border: var(--kui-color-brand-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-brand-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="pop"] {
+  --_kui-badge-fill-quiet: var(--kui-color-pop-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-pop-on-fill);
+  --_kui-badge-border: var(--kui-color-pop-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-pop-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="success"] {
+  --_kui-badge-fill-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-success-on-fill);
+  --_kui-badge-border: var(--kui-color-success-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="warning"] {
+  --_kui-badge-fill-quiet: var(--kui-color-warning-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-warning-on-fill);
+  --_kui-badge-border: var(--kui-color-warning-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-warning-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="danger"] {
+  --_kui-badge-fill-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-danger-on-fill);
+  --_kui-badge-border: var(--kui-color-danger-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-danger-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-appearance="solid"] {
+  color: var(--_kui-badge-on-solid);
+  background: var(--_kui-badge-fill-solid);
+}
+
+.kui-badge[data-appearance="outline"] {
+  border-color: var(--_kui-badge-border);
+  color: var(--_kui-badge-on-quiet);
+  background: transparent;
+}
+
+.kui-badge[data-shape="rounded"] {
+  border-radius: var(--kui-radius-s);
+}
+
+.kui-badge[data-size="compact"] {
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0.35rem;
+  font-size: var(--kui-font-2xs);
+}
+
+/* The text-free status dot (the iOS "new content" dot): a small solid circle
+   in the tone's solid fill, without the text box's padding or minimum size. */
+.kui-badge[data-size="dot"] {
+  width: 0.5rem;
+  min-width: 0.5rem;
+  height: 0.5rem;
+  min-height: 0.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  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"] {
+  margin-inline-start: 0.25rem;
+}
+
+/* A StateBanner's badge follows its title inline and 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__copy > .kui-badge {
+  margin-block: -0.5em;
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  vertical-align: baseline;
+}

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

@@ -0,0 +1,138 @@
+.kui-chip {
+  --_kui-chip-fill-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-neutral-on-normal);
+  --_kui-chip-border: var(--kui-color-neutral-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-chip-on-solid: var(--kui-color-surface);
+
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.75rem;
+  padding-inline: 0.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--_kui-chip-on-quiet);
+  background: var(--_kui-chip-fill-quiet);
+  align-items: center;
+  gap: 0.25rem;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* A normal status chip stays readable beside a shrinkable toolbar title.
+   Only the explicit truncate variant gives up its label width. */
+.kui-chip:not([data-truncate]) {
+  flex-shrink: 0;
+}
+
+.kui-chip[data-tone="info"] {
+  --_kui-chip-fill-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-brand-on-fill);
+  --_kui-chip-border: var(--kui-color-brand-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-brand-on-fill);
+}
+
+.kui-chip[data-tone="pop"] {
+  --_kui-chip-fill-quiet: var(--kui-color-pop-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-pop-on-fill);
+  --_kui-chip-border: var(--kui-color-pop-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-pop-on-fill);
+}
+
+.kui-chip[data-tone="success"] {
+  --_kui-chip-fill-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-success-on-fill);
+  --_kui-chip-border: var(--kui-color-success-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-success-on-fill);
+}
+
+.kui-chip[data-tone="warning"] {
+  --_kui-chip-fill-quiet: var(--kui-color-warning-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-warning-on-fill);
+  --_kui-chip-border: var(--kui-color-warning-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-warning-on-fill);
+}
+
+.kui-chip[data-tone="danger"] {
+  --_kui-chip-fill-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-danger-on-fill);
+  --_kui-chip-border: var(--kui-color-danger-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-danger-on-fill);
+}
+
+.kui-chip[data-appearance="solid"] {
+  color: var(--_kui-chip-on-solid);
+  background: var(--_kui-chip-fill-solid);
+}
+
+.kui-chip[data-appearance="outline"] {
+  border-color: var(--_kui-chip-border);
+  background: transparent;
+}
+
+.kui-chip[data-shape="rounded"] {
+  border-radius: var(--kui-radius-s);
+}
+
+.kui-chip[data-size="compact"] {
+  min-height: 1.25rem;
+  padding-inline: 0.3125rem;
+  font-size: var(--kui-font-2xs);
+}
+
+.kui-chip[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.kui-chip[data-truncate] {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.kui-chip__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
+.kui-chip__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-chip__remove {
+  display: inline-grid;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: inherit;
+  background: transparent;
+  align-items: center;
+  justify-items: center;
+  cursor: pointer;
+  flex: none;
+}
+
+.kui-chip[data-size="compact"] .kui-chip__remove {
+  width: 1rem;
+  height: 1rem;
+}
+
+.kui-chip__remove:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.kui-chip__remove:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}

package/dist/styles/components/feedback/empty-state/empty-state.css

@@ -0,0 +1,47 @@
+.kui-empty-state {
+  --kui-empty-state-foreground: var(--kui-color-neutral-on-quiet);
+  --kui-empty-state-title: var(--kui-color-text);
+  display: grid;
+  width: min(
+    calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem))),
+    28rem
+  );
+  min-height: 12rem;
+  margin: auto;
+  padding: var(--kui-space-xl);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-empty-state-border, transparent);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-empty-state-foreground);
+  background: var(--kui-empty-state-background, transparent);
+  place-items: center;
+  place-content: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  text-align: center;
+}
+.kui-empty-state__icon {
+  display: grid;
+  min-width: 2rem;
+  min-height: 2rem;
+  margin-block-end: var(--kui-space-xs);
+  color: inherit;
+  place-items: center;
+}
+.kui-empty-state__icon svg {
+  width: 2rem;
+  height: 2rem;
+  stroke-width: 1.5;
+}
+.kui-empty-state strong {
+  color: var(--kui-empty-state-title);
+  font-size: var(--kui-font-l);
+  font-weight: 650;
+}
+.kui-empty-state > span {
+  max-width: 24rem;
+  font-size: var(--kui-font-s);
+  line-height: 1.45;
+}
+.kui-empty-state__action {
+  margin-block-start: var(--kui-space-xs);
+}

package/dist/styles/components/feedback/loading-spinner/loading-spinner.css

@@ -0,0 +1,25 @@
+.kui-loading-spinner {
+  display: block;
+  width: 1em;
+  height: 1em;
+  overflow: visible;
+  fill: currentColor;
+}
+.kui-loading-spinner[data-size] {
+  width: var(--_kui-loading-spinner-size);
+  height: var(--_kui-loading-spinner-size);
+}
+.kui-loading-spinner path {
+  transform-origin: 12px 12px;
+  animation: kui-loading-spinner-rotate 0.85s linear infinite;
+}
+@keyframes kui-loading-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kui-loading-spinner path {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,92 @@
+.kui-skeleton {
+  --kui-skeleton-radius: var(--kui-radius-s);
+
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  height: 1em;
+  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. On a host with its own
+     solid fill (a solid Badge) the skeleton derives `--_kui-skeleton-fill`
+     from the host's 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;
+}
+
+/* A placeholder's skeleton inside a solid badge: the generic text-color tint is
+   nearly invisible on the saturated fill, so derive it from the on-solid
+   foreground the badge provides, which contrasts with the fill in every tone
+   and color scheme. Quiet and outline badges sit on a pale fill and keep the
+   generic tint. */
+.kui-badge[data-appearance="solid"] .kui-skeleton {
+  --_kui-skeleton-fill: color-mix(
+    in srgb,
+    var(--_kui-badge-on-solid) 45%,
+    transparent
+  );
+}
+
+.kui-skeleton[data-block="true"] {
+  display: block;
+}
+
+.kui-skeleton-lines {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-skeleton-lines .kui-skeleton {
+  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;
+  }
+}
+
+/* A placeholder StateBanner's badge holds this 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__copy
+  > .kui-badge
+  > .kui-skeleton::before {
+  content: "\200b";
+}

package/dist/styles/components/feedback/state-banner/state-banner.css

@@ -0,0 +1,248 @@
+.kui-state-banner {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(
+      --kui-state-banner-neutral-background,
+      var(--kui-color-neutral-fill-quiet)
+    )
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(
+      --kui-state-banner-neutral-border,
+      var(--kui-color-neutral-border-normal)
+    )
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(
+      --kui-state-banner-neutral-foreground,
+      var(--kui-color-neutral-on-normal)
+    )
+  );
+  --_kui-state-banner-detail: var(--kui-state-banner-detail, currentColor);
+  --_kui-state-banner-action-background: var(
+    --kui-state-banner-action-background,
+    color-mix(in srgb, var(--kui-color-surface) 52%, transparent)
+  );
+  --_kui-state-banner-action-hover-background: var(
+    --kui-state-banner-action-hover-background,
+    var(--kui-color-surface)
+  );
+  display: grid;
+  min-height: 2.75rem;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--_kui-state-banner-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--_kui-state-banner-foreground);
+  background: var(--_kui-state-banner-background);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  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,
+    var(--kui-state-banner-info-background, var(--kui-color-brand-fill-quiet))
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(--kui-state-banner-info-border, var(--kui-color-brand-border-quiet))
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-fill))
+  );
+}
+.kui-state-banner[data-tone="pop"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(--kui-state-banner-pop-background, var(--kui-color-pop-fill-quiet))
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(--kui-state-banner-pop-border, var(--kui-color-pop-border-normal))
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-pop-foreground, var(--kui-color-pop-on-fill))
+  );
+}
+.kui-state-banner[data-tone="success"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(
+      --kui-state-banner-success-background,
+      var(--kui-color-success-fill-quiet)
+    )
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(
+      --kui-state-banner-success-border,
+      var(--kui-color-success-border-normal)
+    )
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-success-foreground, var(--kui-color-success-on-fill))
+  );
+}
+.kui-state-banner[data-tone="warning"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(
+      --kui-state-banner-warning-background,
+      var(--kui-color-warning-fill-quiet)
+    )
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(
+      --kui-state-banner-warning-border,
+      var(--kui-color-warning-border-normal)
+    )
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-warning-foreground, var(--kui-color-warning-on-fill))
+  );
+}
+.kui-state-banner[data-tone="danger"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(
+      --kui-state-banner-danger-background,
+      var(--kui-color-danger-fill-quiet)
+    )
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(--kui-state-banner-danger-border, var(--kui-color-danger-border-quiet))
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-fill))
+  );
+}
+.kui-state-banner__icon {
+  display: grid;
+  place-items: center;
+}
+.kui-state-banner__icon svg {
+  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 {
+  min-width: 0;
+  /* 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[data-copy-layout="stacked"] > .kui-state-banner__copy {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--kui-state-banner-copy-gap, var(--kui-space-xs));
+  row-gap: var(--kui-state-banner-copy-row-gap, var(--kui-space-2xs));
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > strong {
+  margin-inline-end: 0;
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > .kui-state-banner__detail {
+  flex-basis: 100%;
+  white-space: normal;
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > .kui-state-banner__detail
+  > span {
+  overflow: visible;
+  text-overflow: clip;
+}
+.kui-state-banner[data-action-placement="below"] {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+.kui-state-banner[data-action-placement="below"]:not(
+    :has(> .kui-state-banner__icon)
+  )
+  > .kui-state-banner__copy {
+  grid-column: 1 / -1;
+}
+.kui-state-banner[data-action-placement="below"] > .kui-state-banner__action {
+  grid-column: 1 / -1;
+}
+.kui-state-banner__copy strong {
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  font-size: var(--kui-font-xs);
+}
+/* The clip lives on an inner span, not on the detail itself. WebKit still
+   applies the CSS 2.1 rule that an inline-block whose overflow is not
+   `visible` takes its baseline from its bottom margin edge, so a clipped
+   inline-block detail rose off the title's baseline there and pushed the
+   title and badge down. An inline flex container's baseline is its first
+   item's text baseline in every engine, whatever that item's overflow. */
+.kui-state-banner__detail {
+  display: inline-flex;
+  max-width: 100%;
+  color: var(--_kui-state-banner-detail);
+  font-size: var(--kui-font-2xs);
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+.kui-state-banner__detail > span {
+  min-width: 0;
+  overflow: clip;
+  text-overflow: ellipsis;
+}
+.kui-state-banner__action {
+  justify-self: end;
+}
+.kui-state-banner__action button {
+  min-height: 1.8rem;
+  padding: 0 0.7rem;
+  border: 1px solid currentColor;
+  border-radius: var(--kui-radius-pill);
+  color: inherit;
+  background: var(--_kui-state-banner-action-background);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--kui-font-2xs);
+  font-weight: 650;
+}
+.kui-state-banner__action button:hover {
+  background: var(--_kui-state-banner-action-hover-background);
+}
+.kui-state-banner__action button:focus-visible {
+  outline: 2px solid var(--kui-color-text-link);
+  outline-offset: 2px;
+}
+@media (max-width: 36rem) {
+  /* 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 {
+    display: flex;
+  }
+}