@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

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

@@ -0,0 +1,312 @@
+.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)
+  );
+  /* A wrapping flex row, not a three-track grid: a trailing action stays
+     beside the copy only while the copy keeps its minimum readable width,
+     then wraps onto its own trailing row. The decision follows the banner's
+     own width and content, so it holds on a phone, in a narrow rail on a wide
+     screen, and in an intrinsically sized host such as CornerStatus, where a
+     container query's size containment would collapse the banner. A grid
+     gave the action an `auto` track at its full width and squeezed the copy
+     until its words ran under the action. */
+  display: flex;
+  flex-wrap: wrap;
+  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);
+  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))
+  );
+}
+/* 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);
+}
+/* As the only content of a kerfjs/overlay toast (styled by
+   @kerfjs/ui/overlay-toast.css) the banner is the toast: no inline margin, and
+   its tone fill composites over the opaque surface; the toast keeps the
+   elevation. */
+.kerf-toast > .kui-state-banner:only-child {
+  margin-inline: 0;
+  background:
+    linear-gradient(
+      var(--_kui-state-banner-background),
+      var(--_kui-state-banner-background)
+    ),
+    var(--kui-color-surface-raised);
+}
+.kui-state-banner__icon {
+  display: grid;
+  flex: none;
+  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 copy's minimum readable width before a trailing action wraps below
+     it; the copy grows to fill whatever its line leaves. */
+  flex: 1 1 12rem;
+  /* 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;
+}
+/* `below` always gives the action its own end-aligned trailing row. */
+.kui-state-banner[data-action-placement="below"] > .kui-state-banner__action {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: flex-end;
+}
+.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;
+}
+/* Content-sized and end-aligned on whichever line it lands; on its own line
+   it may shrink to the line so a wrapping action group (a `Row wrap`) wraps
+   its controls instead of overflowing the banner. */
+.kui-state-banner__action {
+  max-width: 100%;
+  margin-inline-start: auto;
+  flex: 0 1 auto;
+}
+/* A plain action button takes the banner's own pill; a Button keeps its own
+   look. */
+.kui-state-banner__action button:not(.kui-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:not(.kui-button):hover {
+  background: var(--_kui-state-banner-action-hover-background);
+}
+.kui-state-banner__action button:not(.kui-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;
+  }
+}

package/dist/styles/components/forms/checkbox/checkbox.css

@@ -0,0 +1,122 @@
+/* Checkbox: a drawn box beside its label, with hint and error text directly
+   under the label on its column, as a grouped choice hint sits. The native
+   input sits invisibly over the box, so pointer, keyboard, touch
+   exploration, and forms all reach the real control. */
+.kui-checkbox {
+  --_kui-checkbox-box: 1.25rem;
+  --_kui-checkbox-gap: 0.5rem;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+  line-height: 1.2;
+}
+.kui-checkbox[data-size="compact"] {
+  --_kui-checkbox-box: 1.125rem;
+  --_kui-checkbox-gap: 0.4375rem;
+  font-size: var(--kui-font-s, 0.875rem);
+}
+.kui-checkbox__row {
+  display: inline-flex;
+  width: fit-content;
+  align-items: flex-start;
+  gap: var(--_kui-checkbox-gap);
+  color: var(--kui-color-text);
+  cursor: pointer;
+}
+.kui-checkbox__control {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+/* A real input with every native and global form-control style reset. */
+.kui-checkbox__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  cursor: inherit;
+  appearance: none;
+}
+.kui-checkbox__box {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: var(--_kui-checkbox-box);
+  height: var(--_kui-checkbox-box);
+  align-items: center;
+  justify-content: center;
+  color: var(--kui-color-brand-on-loud);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: 0.1875rem;
+  background-color: var(--kui-color-surface);
+}
+.kui-checkbox__box > [data-lucide] {
+  display: none;
+  width: calc(var(--_kui-checkbox-box) - 0.375rem);
+  height: calc(var(--_kui-checkbox-box) - 0.375rem);
+  stroke-width: 3;
+}
+.kui-checkbox__input:is(:checked, :indeterminate) + .kui-checkbox__box {
+  border-color: var(--kui-color-brand-fill-loud);
+  background-color: var(--kui-color-brand-fill-loud);
+}
+.kui-checkbox__input:checked:not(:indeterminate)
+  + .kui-checkbox__box
+  > [data-lucide="check"],
+.kui-checkbox__input:indeterminate
+  + .kui-checkbox__box
+  > [data-lucide="minus"] {
+  display: block;
+}
+.kui-checkbox__input:focus-visible + .kui-checkbox__box {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+.kui-checkbox[data-invalid] .kui-checkbox__box {
+  border-color: var(--kui-color-danger-border-loud);
+}
+.kui-checkbox__label {
+  min-width: 0;
+  padding-block-start: calc((var(--_kui-checkbox-box) - 1lh) / 2);
+  overflow-wrap: anywhere;
+}
+.kui-checkbox:has(.kui-checkbox__input:disabled) .kui-checkbox__row {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.kui-checkbox__hint,
+.kui-checkbox__error {
+  display: block;
+  padding-inline-start: calc(
+    var(--_kui-checkbox-box) + var(--_kui-checkbox-gap)
+  );
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-checkbox[data-size="compact"]
+  :is(.kui-checkbox__hint, .kui-checkbox__error) {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+.kui-checkbox__error {
+  color: var(--kui-color-danger-on-quiet);
+}
+/* Inside a CheckboxGroup an invalid group marks every box. */
+.kui-checkbox-group[data-invalid] .kui-checkbox__box {
+  border-color: var(--kui-color-danger-border-loud);
+}
+@media (forced-colors: active) {
+  .kui-checkbox__box {
+    border-color: CanvasText;
+  }
+  .kui-checkbox__input:is(:checked, :indeterminate) + .kui-checkbox__box {
+    color: HighlightText;
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+}

package/dist/styles/components/forms/checkbox-group/checkbox-group.css

@@ -0,0 +1,63 @@
+/* CheckboxGroup: the group label, the choices (each a Kerf Checkbox, which
+   draws its own box, label, and hint), and hint and error text below. It is
+   laid out exactly like a RadioGroup: each box sits on the group's
+   inline-start edge and stacked choices sit 8px apart, the 28px pitch
+   checkboxes and radios share. */
+.kui-checkbox-group {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+  line-height: 1.2;
+}
+.kui-checkbox-group[data-size="compact"] {
+  font-size: var(--kui-font-s, 0.875rem);
+}
+/* The label matches every Kerf form control's label (RadioGroup's too). */
+.kui-checkbox-group__label {
+  display: block;
+  float: none;
+  margin-block-end: 0.375rem;
+  padding: 0;
+  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-checkbox-group__choices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-space-xs);
+}
+.kui-checkbox-group[data-orientation="horizontal"]
+  .kui-checkbox-group__choices {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: 1.5rem;
+}
+.kui-checkbox-group__hint,
+.kui-checkbox-group__error {
+  display: block;
+  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-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-checkbox-group[data-size="compact"]
+  :is(.kui-checkbox-group__hint, .kui-checkbox-group__error) {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+.kui-checkbox-group__error {
+  color: var(--kui-color-danger-on-quiet);
+}
+.kui-checkbox-group__hint + .kui-checkbox-group__error {
+  margin-block-start: 0;
+}

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

@@ -0,0 +1,205 @@
+/* ChoiceChips: separated pills that wrap with the control gap. In the radio
+   and toggle modes each pill is a <label> around a native input, which owns
+   focus, keys, and the form value; the pill paints its state through :has().
+   In the multiple mode each pill is itself a listbox option (aria-selected),
+   and hidden inputs carry the form value. */
+.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),
+    [aria-selected="true"]
+  ) {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-choice-chips__chip:is(
+  :has(> .kui-choice-chips__input:checked),
+  [aria-selected="true"]
+) {
+  --_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:is(
+  :has(> .kui-choice-chips__input:focus-visible),
+  [role="option"]:focus-visible
+) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-choice-chips__chip[role="option"]:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.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:is(
+    :has(> .kui-choice-chips__input:checked),
+    [aria-selected="true"]
+  ) {
+    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;
+  }
+}
+
+/* `icons`: square icon-only choices (an icon picker). The label stays as the
+   accessible name, visually hidden; the chip's title shows it on hover. */
+.kui-choice-chips[data-presentation="icons"] .kui-choice-chips__chip {
+  width: 2.25rem;
+  height: 2.25rem;
+  min-height: 0;
+  padding: 0;
+  justify-content: center;
+  border-radius: var(--kui-radius-m);
+}
+
+/* An unsized LucideIcon fills 1em, so the slot's font size sets it. */
+.kui-choice-chips[data-presentation="icons"] .kui-choice-chips__icon {
+  font-size: 1.25rem;
+}
+
+.kui-choice-chips[data-presentation="icons"] .kui-choice-chips__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* `maxHeight`: past it the group scrolls, with room for a chip's focus ring
+   (3px ring, 2px offset) inside the clip. */
+.kui-choice-chips[data-scrollable] {
+  max-height: var(--_kui-choice-chips-max-height);
+  padding: 0.3125rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  align-content: flex-start;
+}