@kerfjs/ui 5.0.0-beta.95 → 5.0.0-beta.96

package/dist/styles/components/collections/summary-row/summary-row.css

@@ -0,0 +1,161 @@
+/* A selectable summary: a full-width option on the base surface, a container
+   for its own compaction, with a hairline divider below each list row. */
+.kui-summary-row {
+  --_kui-summary-row-rail: transparent;
+  --_kui-summary-row-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+  --_kui-summary-row-title-lines: 2;
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-block-end-color: var(--kui-color-neutral-border-quiet);
+  border-radius: 0;
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  cursor: pointer;
+  outline: none;
+  container-type: inline-size;
+  user-select: none;
+}
+
+.kui-summary-row[data-presentation="card"] {
+  --_kui-summary-row-title-lines: 4;
+  border-color: transparent;
+  border-radius: var(--_kui-summary-row-radius);
+}
+
+.kui-summary-row[data-list-edge="start"] {
+  border-start-start-radius: var(--_kui-summary-row-radius);
+  border-start-end-radius: var(--_kui-summary-row-radius);
+}
+.kui-summary-row[data-list-edge="end"] {
+  border-end-start-radius: var(--_kui-summary-row-radius);
+  border-end-end-radius: var(--_kui-summary-row-radius);
+}
+.kui-summary-row[data-list-edge="only"] {
+  border-radius: var(--_kui-summary-row-radius);
+}
+
+.kui-summary-row[data-defer="true"] {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 4.5rem;
+}
+
+.kui-summary-row:hover {
+  border-color: var(--kui-color-brand-border-normal);
+}
+
+.kui-summary-row:focus-visible {
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 24%, transparent);
+}
+
+.kui-summary-row[data-selected="true"] {
+  border-color: var(--kui-color-brand-border-normal);
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+.kui-summary-row[data-dimmed="true"]:not(:hover, [data-selected="true"]) {
+  opacity: 0.55;
+}
+
+/* The leading state rail. */
+.kui-summary-row__rail {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0.25rem;
+  background: var(--_kui-summary-row-rail);
+}
+.kui-summary-row[data-rail="neutral"] {
+  --_kui-summary-row-rail: var(--kui-color-neutral-on-quiet);
+}
+.kui-summary-row[data-rail="info"] {
+  --_kui-summary-row-rail: var(--kui-color-brand-fill-loud);
+}
+.kui-summary-row[data-rail="pop"] {
+  --_kui-summary-row-rail: var(--kui-color-pop-fill-loud);
+}
+.kui-summary-row[data-rail="success"] {
+  --_kui-summary-row-rail: var(--kui-color-success-fill-loud);
+}
+.kui-summary-row[data-rail="warning"] {
+  --_kui-summary-row-rail: var(--kui-color-warning-fill-loud);
+}
+.kui-summary-row[data-rail="danger"] {
+  --_kui-summary-row-rail: var(--kui-color-danger-fill-loud);
+}
+
+/* Leading glyph, then the content column. */
+.kui-summary-row__body {
+  display: grid;
+  min-width: 0;
+  padding: var(--kui-space-xs) var(--kui-space-s);
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--kui-space-xs);
+}
+
+.kui-summary-row__body:not(:has(> .kui-summary-row__leading)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.kui-summary-row__leading {
+  display: grid;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  color: var(--kui-color-neutral-on-quiet);
+  place-items: center;
+}
+
+.kui-summary-row[data-presentation="card"] .kui-summary-row__leading {
+  min-width: 1.125rem;
+  min-height: 1.25rem;
+}
+
+.kui-summary-row__content {
+  display: grid;
+  min-width: 0;
+  gap: var(--kui-space-2xs);
+}
+
+/* The identity line clips at its line budget; the trailing meta floats to its
+   end so the title wraps around it. */
+.kui-summary-row__title {
+  min-width: 0;
+  max-height: calc(var(--_kui-summary-row-title-lines) * 1.3em);
+  overflow: hidden;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.kui-summary-row__trailing {
+  float: inline-end;
+  margin-inline-start: var(--kui-space-s);
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-2xs);
+  line-height: calc(1.3em * 1.15);
+  white-space: nowrap;
+}
+
+.kui-summary-row__metadata {
+  display: flex;
+  min-width: 0;
+  color: var(--kui-color-neutral-on-quiet);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kui-space-2xs) var(--kui-space-xs);
+  font-size: var(--kui-font-xs);
+}
+
+/* A narrow row tightens its gaps. */
+@container (max-width: 24rem) {
+  .kui-summary-row__body {
+    padding: var(--kui-space-xs);
+  }
+}

package/dist/styles/components/data-display/value-table/value-table.css

@@ -105,3 +105,79 @@
   font-weight: var(--kui-font-weight-semibold);
   text-align: end;
 }
+
+/* `labelWidth`: a minimum label column; the value takes the rest of the row
+   (never wider than the row, so a narrow table still fits). */
+.kui-value-table[data-label-width] .kui-value-table__row {
+  grid-template-columns: var(
+    --kui-value-table-row-columns,
+    minmax(min(var(--_kui-value-table-label-min), 100%), auto) minmax(0, 1fr)
+  );
+}
+
+/* Only a table that stacks below a width becomes a size container. Size
+   containment drops its content-based width, so it fills its container's
+   width (inside its own inline margins) instead; a table without
+   `stackBelow` keeps sizing to content in shrink-to-fit contexts. */
+.kui-value-table[data-stack-below] {
+  box-sizing: border-box;
+  width: calc(100% - 2 * var(--kui-layout-inline-margin, 0.5rem));
+  container: kui-value-table / inline-size;
+}
+
+/* Stacked rows: each value sits under its label and starts at the label's
+   text edge (after a leading icon). */
+.kui-value-table[data-presentation="stacked"] .kui-value-table__row {
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: var(--kui-space-2xs);
+}
+.kui-value-table[data-presentation="stacked"] .kui-value-table__row dd {
+  justify-content: flex-start;
+  text-align: start;
+}
+.kui-value-table[data-presentation="stacked"]
+  .kui-value-table__row[data-has-icon="true"]
+  dd {
+  padding-inline-start: calc(
+    var(--_kui-value-table-separator-start) -
+      var(--_kui-value-table-inline-padding)
+  );
+}
+
+@container kui-value-table (max-width: 36rem) {
+  .kui-value-table[data-stack-below="narrow"] .kui-value-table__row {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--kui-space-2xs);
+  }
+  .kui-value-table[data-stack-below="narrow"] .kui-value-table__row dd {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .kui-value-table[data-stack-below="narrow"]
+    .kui-value-table__row[data-has-icon="true"]
+    dd {
+    padding-inline-start: calc(
+      var(--_kui-value-table-separator-start) -
+        var(--_kui-value-table-inline-padding)
+    );
+  }
+}
+
+@container kui-value-table (max-width: 32rem) {
+  .kui-value-table[data-stack-below="compact"] .kui-value-table__row {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--kui-space-2xs);
+  }
+  .kui-value-table[data-stack-below="compact"] .kui-value-table__row dd {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .kui-value-table[data-stack-below="compact"]
+    .kui-value-table__row[data-has-icon="true"]
+    dd {
+    padding-inline-start: calc(
+      var(--_kui-value-table-separator-start) -
+        var(--_kui-value-table-inline-padding)
+    );
+  }
+}

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

@@ -23,6 +23,33 @@
   white-space: nowrap;
 }
 
+/* A leading icon sits 4px before the text and inherits the badge's color. */
+.kui-badge[data-has-icon="true"] {
+  gap: 0.25rem;
+}
+
+/* maxWidth caps the badge; the label truncates with an ellipsis and the
+   badge may shrink below the cap in a tight flex row. */
+.kui-badge[data-truncate="true"] {
+  max-width: var(--_kui-badge-max-width);
+  flex: 0 1 auto;
+}
+
+.kui-badge__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-badge__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
 .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);

package/dist/styles/components/feedback/corner-status/corner-status.css

@@ -0,0 +1,60 @@
+/* The host only places the stack: the composed banners own their fill,
+   border, and padding. A native popover's UA box (inset 0, auto margin,
+   border, padding, Canvas background, scrolling) is reset so the stack sizes
+   to its banners in the chosen corner. Stacked banners share the widest
+   banner's width, so a stack reads as one aligned column. */
+.kui-corner-status {
+  --_kui-corner-status-gutter: var(
+    --kui-corner-status-gutter,
+    var(--kui-space-m)
+  );
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--kui-space-xs);
+  width: max-content;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  color: inherit;
+  background: transparent;
+}
+.kui-corner-status[data-presentation="overlay"] {
+  position: fixed;
+  z-index: var(--kui-corner-status-z-index, 1000);
+  inset: auto;
+  max-width: calc(
+    100vw - 2 * var(--_kui-corner-status-gutter) -
+      var(--kui-safe-area-inline-start) - var(--kui-safe-area-inline-end)
+  );
+}
+/* A browser with the Popover API hides the host until wireCornerStatus opens
+   it; without the API the fixed host simply shows. */
+.kui-corner-status[data-presentation="overlay"][popover]:not(:popover-open) {
+  display: none;
+}
+.kui-corner-status[data-placement^="top"] {
+  inset-block-start: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-block-start)
+  );
+}
+.kui-corner-status[data-placement^="bottom"] {
+  inset-block-end: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-block-end)
+  );
+}
+.kui-corner-status[data-placement$="-start"] {
+  inset-inline-start: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-inline-start)
+  );
+}
+.kui-corner-status[data-placement$="-end"] {
+  inset-inline-end: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-inline-end)
+  );
+}
+.kui-corner-status[data-presentation="embedded"] {
+  position: static;
+}

package/dist/styles/components/feedback/edge-activity-indicator/edge-activity-indicator.css

@@ -0,0 +1,127 @@
+/* A fixed, layout-free host at the top edge: it allocates no space and never
+   takes the pointer. Its strip and pill scale in from the edge while busy. */
+.kui-edge-activity-indicator {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-brand-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-brand-on-loud);
+  position: fixed;
+  z-index: var(--kui-edge-activity-indicator-z-index, 2147483000);
+  inset: var(--kui-safe-area-block-start, 0px) 0 auto 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.kui-edge-activity-indicator[data-inset="none"] {
+  inset-block-start: 0;
+}
+
+.kui-edge-activity-indicator[data-tone="neutral"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-neutral-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-neutral-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="pop"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-pop-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-pop-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="success"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-success-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-success-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="warning"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-warning-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-warning-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="danger"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-danger-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-danger-on-loud);
+}
+
+/* 3px bars on a 5px pitch, drawn by one gradient. A repeating wave mask (1px
+   to 4px tall, hanging from the edge) slides across them, so each bar grows
+   and shrinks slightly out of phase with its neighbor. */
+.kui-edge-activity-indicator__strip,
+.kui-edge-activity-indicator__message {
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: top center;
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+}
+
+.kui-edge-activity-indicator__strip {
+  height: 0.25rem;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--_kui-edge-activity-indicator-fill) 0 0.1875rem,
+    transparent 0.1875rem 0.3125rem
+  );
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='4' viewBox='0 0 100 4'%3E%3Cpath d='M0 0H100L100 1.00 L98 1.01 L96 1.05 L94 1.11 L92 1.19 L90 1.29 L88 1.41 L86 1.54 L84 1.70 L82 1.86 L80 2.04 L78 2.22 L76 2.41 L74 2.59 L72 2.78 L70 2.96 L68 3.14 L66 3.30 L64 3.46 L62 3.59 L60 3.71 L58 3.81 L56 3.89 L54 3.95 L52 3.99 L50 4.00 L48 3.99 L46 3.95 L44 3.89 L42 3.81 L40 3.71 L38 3.59 L36 3.46 L34 3.30 L32 3.14 L30 2.96 L28 2.78 L26 2.59 L24 2.41 L22 2.22 L20 2.04 L18 1.86 L16 1.70 L14 1.54 L12 1.41 L10 1.29 L8 1.19 L6 1.11 L4 1.05 L2 1.01 L0 1.00Z'/%3E%3C/svg%3E")
+    0 0 / 6.25rem 100% repeat-x;
+  animation: kui-edge-activity-indicator-wave 1s linear infinite paused;
+}
+
+.kui-edge-activity-indicator[data-busy="true"]
+  > .kui-edge-activity-indicator__strip {
+  opacity: 1;
+  transform: scaleY(1);
+  animation-play-state: running;
+}
+
+@keyframes kui-edge-activity-indicator-wave {
+  to {
+    mask-position: 6.25rem 0;
+  }
+}
+
+/* The status pill hangs centered from the edge, over the strip. */
+.kui-edge-activity-indicator__message {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  max-width: calc(100vw - 2 * var(--kui-space-m));
+  padding: 0.125rem var(--kui-space-s);
+  overflow: hidden;
+  border-radius: 0 0 0.5rem 0.5rem;
+  color: var(--_kui-edge-activity-indicator-on);
+  background: var(--_kui-edge-activity-indicator-fill);
+  font-size: var(--kui-font-2xs);
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateX(-50%) scaleY(0);
+}
+
+.kui-edge-activity-indicator__message[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(-50%) scaleY(1);
+}
+
+:dir(rtl) .kui-edge-activity-indicator__message {
+  transform: translateX(50%) scaleY(0);
+}
+:dir(rtl) .kui-edge-activity-indicator__message[data-visible="true"] {
+  transform: translateX(50%) scaleY(1);
+}
+
+/* Reduced motion: no wave and no scale; the strip and pill only fade. */
+@media (prefers-reduced-motion: reduce) {
+  .kui-edge-activity-indicator__strip,
+  .kui-edge-activity-indicator__message {
+    transition: opacity 200ms ease;
+  }
+  .kui-edge-activity-indicator__strip,
+  .kui-edge-activity-indicator[data-busy="true"]
+    > .kui-edge-activity-indicator__strip {
+    mask: none;
+    transform: none;
+    animation: none;
+  }
+  .kui-edge-activity-indicator__message,
+  .kui-edge-activity-indicator__message[data-visible="true"] {
+    transform: translateX(-50%);
+  }
+  :dir(rtl) .kui-edge-activity-indicator__message,
+  :dir(rtl) .kui-edge-activity-indicator__message[data-visible="true"] {
+    transform: translateX(50%);
+  }
+}

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

@@ -135,6 +135,44 @@
     var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-fill))
   );
 }
+/* A strip is a full-width band at a layout edge rather than a card beside the
+   work: flush, square, and divided from its neighbor only on the edges it
+   names, in the tone's own border color. Its inline padding lands the copy on
+   the content-text column a card banner's copy uses (8px margin + 1px border
+   + 8px padding), so a strip above a pane lines up with the pane's text. */
+.kui-state-banner[data-presentation="strip"] {
+  margin-inline: 0;
+  padding-block: var(--kui-space-xs);
+  padding-inline: calc(1px + 1rem);
+  border-width: 0;
+  border-radius: 0;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="t"] {
+  border-top-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="r"] {
+  border-right-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="b"] {
+  border-bottom-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="l"] {
+  border-left-width: 1px;
+}
+/* Inside a CornerStatus the banner floats over the page at a viewport corner:
+   the corner's gutter replaces the inline margin, elevation separates it from
+   whatever content it covers, and the translucent tone fill composites over
+   the opaque surface so that content never shows through the copy. */
+.kui-corner-status > .kui-state-banner {
+  margin-inline: 0;
+  background:
+    linear-gradient(
+      var(--_kui-state-banner-background),
+      var(--_kui-state-banner-background)
+    ),
+    var(--kui-color-surface);
+  box-shadow: var(--kui-shadow-l);
+}
 .kui-state-banner__icon {
   display: grid;
   place-items: center;

package/dist/styles/components/forms/choice-chips/choice-chips.css

@@ -0,0 +1,154 @@
+/* ChoiceChips: separated pills that wrap with the control gap. Each pill is a
+   <label> around a native radio, so the radio owns focus, arrow keys, and the
+   form value; the pill paints the radio's state through :has(). */
+.kui-choice-chips {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+}
+
+.kui-choice-chips__chip {
+  --_kui-choice-chips-border: var(--kui-color-neutral-border-normal);
+
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2rem;
+  padding-inline: 0.75rem;
+  box-sizing: border-box;
+  border: 1px solid var(--_kui-choice-chips-border);
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--kui-font-s);
+  font-weight: var(--kui-font-weight-semibold, 600);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition-property: background, border-color, box-shadow;
+  transition-duration: 120ms;
+}
+
+.kui-choice-chips[data-size="compact"] .kui-choice-chips__chip {
+  min-height: 1.5rem;
+  padding-inline: 0.5rem;
+  gap: 0.25rem;
+  font-size: var(--kui-font-xs);
+}
+
+/* The native radio covers the pill so a pointer press lands on it directly,
+   but paints nothing: the pill draws its checked and focus state. */
+.kui-choice-chips__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: inherit;
+  opacity: 0;
+  cursor: inherit;
+  appearance: none;
+}
+
+.kui-choice-chips__chip:hover:not([data-disabled]):not(
+    :has(> .kui-choice-chips__input:checked)
+  ) {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-choice-chips__chip:has(> .kui-choice-chips__input:checked) {
+  --_kui-choice-chips-border: var(--kui-color-brand-border-loud);
+
+  color: var(--kui-color-brand-on-fill);
+  background: var(--kui-color-brand-fill-normal);
+  /* A second pixel of border marks the selection without relying on hue. */
+  box-shadow: inset 0 0 0 1px var(--_kui-choice-chips-border);
+}
+
+.kui-choice-chips__chip:has(> .kui-choice-chips__input:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-choice-chips__chip[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.kui-choice-chips__swatch {
+  width: 0.75rem;
+  height: 0.75rem;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: var(--_kui-choice-chips-swatch, transparent);
+  /* An inner edge keeps a pale swatch visible against the pill. */
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--kui-color-text) 20%, transparent);
+  flex: none;
+}
+
+.kui-choice-chips[data-size="compact"] .kui-choice-chips__swatch {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+/* The no-color swatch: an outlined dot struck through from corner to corner. */
+.kui-choice-chips__swatch[data-swatch="transparent"] {
+  position: relative;
+  box-shadow: inset 0 0 0 1px var(--kui-color-neutral-border-loud);
+}
+
+.kui-choice-chips__swatch[data-swatch="transparent"]::after {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 0.75px);
+  width: 1.5px;
+  height: 100%;
+  border-radius: 1px;
+  background: var(--kui-color-danger-on-quiet);
+  content: "";
+  transform: rotate(45deg);
+}
+
+.kui-choice-chips__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
+.kui-choice-chips__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (forced-colors: active) {
+  .kui-choice-chips__chip {
+    border-color: ButtonBorder;
+  }
+
+  .kui-choice-chips__chip:has(> .kui-choice-chips__input:checked) {
+    border-color: Highlight;
+    color: HighlightText;
+    background: Highlight;
+  }
+
+  .kui-choice-chips__swatch {
+    forced-color-adjust: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-choice-chips__chip {
+    transition: none;
+  }
+}