@kenlo/sds-design-system 0.9.9

package/components/Avatar/avatar.marko

@@ -0,0 +1,71 @@
+<!-- sds-avatar — ported from kdls-design-system v2.5.1 (0f3edf8) components/Avatar/Avatar.tsx.
+
+No state, which KDLS needed for one thing: an onError handler that swapped a broken image
+for the initials. The initials are rendered underneath the image here and show through
+when it paints nothing — see Avatar.css. That removes a serialised component per avatar,
+and an avatar list is exactly where they repeat.
+
+It is a <button> when it has a click handler and a plain <div> otherwise, rather than a
+div wearing role="button" with a hand-written key handler as KDLS did. -->
+
+import { assertAvatarSize } from "./avatar-variants.js";
+
+$ {
+  const {
+    src,
+    initials,
+    alt,
+    size = "sm",
+    onClick,
+    class: extraClass = "",
+  } = input;
+
+  assertAvatarSize(size);
+
+  const interactive = Boolean(onClick);
+  const label = alt || initials || "Avatar";
+
+  const classes = [
+    "sds-avatar",
+    `sds-avatar--${size}`,
+    interactive ? "sds-avatar--clickable" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<macro|{ }| name="content">
+  <!-- Underneath. Visible only where the image is not. -->
+  <span class="sds-avatar__placeholder" aria-hidden=(src ? "true" : null)>
+    ${initials ?? "?"}
+  </span>
+  <if(src)>
+    <!-- `onerror` as an attribute, not a handler this component hydrates for. KDLS keeps a
+         `useState(imgFailed)` for exactly this, and one serialised component per avatar is
+         the cost an avatar list pays fifty times over. The attribute costs nothing and
+         does the same job: the broken image leaves the box and the initials underneath are
+         what remains. Under a strict CSP that forbids inline handlers it simply does not
+         run, which is the behaviour this had before — it degrades, it does not break.
+
+         The name: with a photo and no `alt`, nothing in here had an accessible name at all
+         — the image was silent, the placeholder hidden, and the root dropped its label. An
+         `alt` the caller wrote wins, including an empty one, which is how you say
+         "decorative". Only the absence of the prop falls back to the initials. -->
+    <img
+      class="sds-avatar__image"
+      src=src
+      alt=(alt === undefined ? (initials ?? "Avatar") : alt)
+      onerror="this.remove()"
+    />
+  </if>
+</macro>
+
+<if(interactive)>
+  <button type="button" class=classes aria-label=label on-click(onClick)>
+    <content/>
+  </button>
+</if>
+<else>
+  <div class=classes role=(src ? null : "img") aria-label=(src ? null : label)>
+    <content/>
+  </div>
+</else>

package/components/Badge/Badge.css

@@ -0,0 +1,381 @@
+/* SDS Badge.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Badge/Badge.css.
+
+   Divergences:
+     - the primary, secondary, tertiary and lya colour blocks are removed with the
+       families they read. Fourteen colours remain.
+     - text and outline painted from the primary slot read --color-primary-N-solid.
+       `background` accepts a gradient; `color` and `box-shadow` do not, and
+       applyCustomGradient can put a gradient in that slot. */
+
+/* ============================================================
+   SDS Badge
+   Sizes:   24px | 20px
+   Types:   neutral | scheme-color |
+            success | alert | error |
+            leaf | sand | wood | clay | flower | dusk | sky | sea | lake
+   Appearance: outline | tone-10..tone-50 (progressive tint, tone-50 = full color)
+   Icons:   left (optional) | right/dismiss (optional)
+   ============================================================ */
+
+.sds-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-xs);
+  /* inset instead of border — the 1px outline never adds to the box size,
+     so tone (transparent) and outline (currentColor) close at the same height */
+  box-shadow: inset 0 0 0 1px transparent;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  width: fit-content;
+}
+
+/* width="fill" — only when explicitly requested.
+   Without iconRight: iconLeft+label are centered in the pill.
+   With iconRight: iconLeft+label go to the left (.sds-badge__content) and the
+   clickable iconRight goes to the right (.sds-badge__icon-right-wrap), one at each
+   end of the pill. */
+.sds-badge--fill {
+  width: 100%;
+  justify-content: center;
+}
+
+.sds-badge--fill.sds-badge--has-icon-right {
+  justify-content: space-between;
+}
+
+.sds-badge__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) var(--spacing-2);
+}
+
+/* When there's an iconRight, the content's padding-right shrinks — the icon's
+   wrap already gives its own breathing room to the pill's edge (see
+   .sds-badge__icon-right-wrap), so it doesn't need both added together */
+.sds-badge__content--has-icon-right {
+  padding-right: var(--spacing-0-5);
+}
+
+/* ── Sizes — spacing tweaks at lg ──────────────────────────────────────────────
+   The label's typography used to be redeclared here, once per badge size. Those three
+   rules were the Text scale written out by hand — label-sm at sm, body-sm at md, body-md
+   at lg — so the label now renders through <sds-text> with the matching variant and the
+   duplication is gone. It passes color="inherit" so the badge keeps deciding the colour,
+   which is where the contrast tokens live. */
+
+.sds-badge--lg .sds-badge__content {
+  gap: var(--spacing-2);
+}
+
+.sds-badge--lg .sds-badge__content--has-icon-right {
+  padding-right: var(--spacing-1);
+}
+
+/* ── Icons ─────────────────────────────────── */
+.sds-badge__icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.sds-badge__icon-right-wrap {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-0-5) 6px var(--spacing-0-5) 0;
+}
+
+.sds-badge--md .sds-badge__icon-right-wrap {
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+}
+
+.sds-badge--lg .sds-badge__icon-right-wrap {
+  padding-top: var(--spacing-1);
+  padding-right: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+}
+
+.sds-badge__icon--right--clickable {
+  cursor: pointer;
+  border-radius: min(4px, var(--radius-xs));
+  transition: background-color 120ms ease;
+  padding: var(--spacing-0-5);
+}
+.sds-badge__icon--right--clickable:hover  { background-color: var(--color-opacity-05); }
+.sds-badge__icon--right--clickable:active { background-color: var(--color-opacity-10); }
+
+.sds-badge--lg .sds-badge__icon--right--clickable {
+  padding: var(--spacing-1);
+}
+
+/* Loading spinner in place of the icon — the Spinner's smallest size (sm) is
+   24px, larger than the badge icon (16px). The internal SVG comes with fixed width/height
+   as an HTML attribute (24px, computed in JS from size="sm"), not
+   just via the CSS variable — so it needs to override the <svg> itself
+   (.sds-spinner__svg), not just the outer <div>, otherwise the graphic keeps
+   rendering at a true 24px inside a smaller box. */
+.sds-badge__icon--right--clickable .sds-spinner {
+  --sds-spinner-size: 16px;
+}
+.sds-badge__icon--right--clickable .sds-spinner__svg {
+  width: 16px;
+  height: 16px;
+}
+
+.sds-badge__icon--right--disabled {
+  cursor: not-allowed;
+}
+.sds-badge__icon--right--disabled:hover,
+.sds-badge__icon--right--disabled:active {
+  background-color: transparent;
+}
+
+.sds-badge__icon--right--loading {
+  cursor: wait;
+}
+
+/* ══════════════════════════════════════════════
+   COLOR × APPEARANCE MATRIX
+   outline  = transparent bg, border tied to the color
+   tone-10  = lightest tint
+   tone-20  = light tint
+   tone-30  = medium tint (default)
+   tone-40  = medium-strong tint
+   tone-50  = full color / full-saturation
+   ══════════════════════════════════════════════ */
+
+/* ── NEUTRAL ──────────────────────────────── */
+.sds-badge--neutral.sds-badge--outline  { background: transparent;             color: var(--color-neutral-60); }
+.sds-badge--neutral.sds-badge--tone-10  { background: var(--color-neutral-10); color: var(--color-neutral-10-on); }
+.sds-badge--neutral.sds-badge--tone-20  { background: var(--color-neutral-20); color: var(--color-neutral-20-on); }
+.sds-badge--neutral.sds-badge--tone-30  { background: var(--color-neutral-30); color: var(--color-neutral-30-on); }
+.sds-badge--neutral.sds-badge--tone-40  { background: var(--color-neutral-40); color: var(--color-neutral-40-on); }
+.sds-badge--neutral.sds-badge--tone-50    { background: var(--color-neutral-50); color: var(--color-neutral-50-on); }
+
+/* ── SCHEME-COLOR — follows data-color-scheme; tone-50 label auto-adjusts for
+   contrast via --color-on-primary, same mechanism as Button/Toggle/Pill ── */
+/* ── scheme-color outline — the gradient-capable ring ─────────────────────────
+   The primary slot may hold a gradient (applyCustomGradient), and box-shadow cannot
+   paint one. KDLS solved this for its Lya variant with a masked ::before, and that
+   technique moves here, to the one variant that can now receive a gradient.
+
+   No real `border`: a fit-content box grows by the border's width regardless of
+   box-sizing, which would make outline the only appearance measuring 2px taller than
+   its siblings. The ring is an absolutely positioned ::before instead, masked down to
+   its own 1px padding, so it paints over the box without taking layout space.
+
+   Divergence from KDLS, deliberate: KDLS put background-clip:text on the whole badge,
+   which sets color:transparent on everything inside — including any icon, which then
+   disappears. Here the clip is scoped to the label, and the badge keeps a solid
+   currentColor from the -solid companion so icons still paint.
+
+   In solid mode all of this renders exactly like a plain outline. */
+.sds-badge--scheme-color.sds-badge--outline {
+  position: relative;
+  background: transparent;
+  color: var(--color-primary-50-solid);
+  box-shadow: none;
+}
+
+.sds-badge--scheme-color.sds-badge--outline .sds-badge__label {
+  background: var(--color-primary-50);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.sds-badge--scheme-color.sds-badge--outline::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--color-primary-50);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+.sds-badge--scheme-color.sds-badge--tone-10  { background: var(--color-primary-10);  color: var(--color-primary-10-on); }
+.sds-badge--scheme-color.sds-badge--tone-20  { background: var(--color-primary-20);  color: var(--color-primary-20-on); }
+.sds-badge--scheme-color.sds-badge--tone-30  { background: var(--color-primary-30);  color: var(--color-primary-30-on); }
+.sds-badge--scheme-color.sds-badge--tone-40  { background: var(--color-primary-40);  color: var(--color-primary-40-on); }
+.sds-badge--scheme-color.sds-badge--tone-50    { background: var(--color-primary-50);  color: var(--color-primary-50-on); }
+
+/* ── Label colour ──────────────────────────────────────────────────────────────
+   Labels are not painted by hand. Each surface reads --color-<family>-<tone>-on,
+   generated by scripts/gen-contrast-tokens.mjs from the palette itself: the step of
+   the family that reads best on that surface, in that theme, falling back to white or
+   black only where the family cannot reach WCAG AA.
+
+   Of the 130 combinations, 113 are satisfied by the family itself and 17 need the
+   fallback. None is left below AA.
+
+   This replaces one hand-written declaration per family per tone per theme, plus a
+   block of dark-theme corrections. KDLS wrote those by eye and several were wrong in
+   ways only visible by squinting — tone-40 in the light theme read the -10 step across
+   every family, at ratios from 1.38 to 3.20 against a 4.5 minimum. */
+
+/* ── SUCCESS ──────────────────────────────── */
+.sds-badge--success.sds-badge--outline  { background: transparent;              color: var(--color-success-50); }
+.sds-badge--success.sds-badge--tone-10  { background: var(--color-success-10);  color: var(--color-success-10-on); }
+.sds-badge--success.sds-badge--tone-20  { background: var(--color-success-20);  color: var(--color-success-20-on); }
+.sds-badge--success.sds-badge--tone-30  { background: var(--color-success-30);  color: var(--color-success-30-on); }
+.sds-badge--success.sds-badge--tone-40  { background: var(--color-success-40);  color: var(--color-success-40-on); }
+.sds-badge--success.sds-badge--tone-50    { background: var(--color-success-50);  color: var(--color-success-50-on); }
+
+/* ── ALERT ────────────────────────────────── */
+.sds-badge--alert.sds-badge--outline    { background: transparent;            color: var(--color-alert-50); }
+.sds-badge--alert.sds-badge--tone-10    { background: var(--color-alert-10);  color: var(--color-alert-10-on); }
+.sds-badge--alert.sds-badge--tone-20    { background: var(--color-alert-20);  color: var(--color-alert-20-on); }
+.sds-badge--alert.sds-badge--tone-30    { background: var(--color-alert-30);  color: var(--color-alert-30-on); }
+.sds-badge--alert.sds-badge--tone-40    { background: var(--color-alert-40);  color: var(--color-alert-40-on); }
+.sds-badge--alert.sds-badge--tone-50      { background: var(--color-alert-50);  color: var(--color-alert-50-on); }
+
+/* ── ERROR ────────────────────────────────── */
+.sds-badge--error.sds-badge--outline    { background: transparent;            color: var(--color-error-50); }
+.sds-badge--error.sds-badge--tone-10    { background: var(--color-error-10);  color: var(--color-error-10-on); }
+.sds-badge--error.sds-badge--tone-20    { background: var(--color-error-20);  color: var(--color-error-20-on); }
+.sds-badge--error.sds-badge--tone-30    { background: var(--color-error-30);  color: var(--color-error-30-on); }
+.sds-badge--error.sds-badge--tone-40    { background: var(--color-error-40);  color: var(--color-error-40-on); }
+.sds-badge--error.sds-badge--tone-50      { background: var(--color-error-50);  color: var(--color-error-50-on); }
+
+/* ── LEAF ── */
+.sds-badge--leaf.sds-badge--outline     { background: transparent;           color: var(--color-leaf-70); }
+.sds-badge--leaf.sds-badge--tone-10     { background: var(--color-leaf-10);  color: var(--color-leaf-10-on); }
+.sds-badge--leaf.sds-badge--tone-20     { background: var(--color-leaf-20);  color: var(--color-leaf-20-on); }
+.sds-badge--leaf.sds-badge--tone-30     { background: var(--color-leaf-30);  color: var(--color-leaf-30-on); }
+.sds-badge--leaf.sds-badge--tone-40     { background: var(--color-leaf-40);  color: var(--color-leaf-40-on); }
+/* tone-50 gets a dark-mode override below (§ Dark-mode text overrides) pinning it to the
+   same leaf-90 look as light — tone-40 needs none, its natural auto-invert already lands
+   on leaf-10 in dark, which is exactly what's wanted there. */
+.sds-badge--leaf.sds-badge--tone-50       { background: var(--color-leaf-50);  color: var(--color-leaf-50-on); }
+
+/* ── SAND ── */
+.sds-badge--sand.sds-badge--outline     { background: transparent;           color: var(--color-sand-70); }
+.sds-badge--sand.sds-badge--tone-10     { background: var(--color-sand-10);  color: var(--color-sand-10-on); }
+.sds-badge--sand.sds-badge--tone-20     { background: var(--color-sand-20);  color: var(--color-sand-20-on); }
+.sds-badge--sand.sds-badge--tone-30     { background: var(--color-sand-30);  color: var(--color-sand-30-on); }
+.sds-badge--sand.sds-badge--tone-40     { background: var(--color-sand-40);  color: var(--color-sand-40-on); }
+/* Same reasoning as Leaf's tone-50 above — dark override lives in § Dark-mode text overrides. */
+.sds-badge--sand.sds-badge--tone-50       { background: var(--color-sand-50);  color: var(--color-sand-50-on); }
+
+/* ── WOOD ── */
+.sds-badge--wood.sds-badge--outline     { background: transparent;          color: var(--color-wood-50); }
+.sds-badge--wood.sds-badge--tone-10     { background: var(--color-wood-10); color: var(--color-wood-10-on); }
+.sds-badge--wood.sds-badge--tone-20     { background: var(--color-wood-20); color: var(--color-wood-20-on); }
+.sds-badge--wood.sds-badge--tone-30     { background: var(--color-wood-30); color: var(--color-wood-30-on); }
+.sds-badge--wood.sds-badge--tone-40     { background: var(--color-wood-40); color: var(--color-wood-40-on); }
+.sds-badge--wood.sds-badge--tone-50       { background: var(--color-wood-50); color: var(--color-wood-50-on); }
+
+/* ── CLAY ── */
+.sds-badge--clay.sds-badge--outline     { background: transparent;             color: var(--color-clay-50); }
+.sds-badge--clay.sds-badge--tone-10     { background: var(--color-clay-10);  color: var(--color-clay-10-on); }
+.sds-badge--clay.sds-badge--tone-20     { background: var(--color-clay-20);  color: var(--color-clay-20-on); }
+.sds-badge--clay.sds-badge--tone-30     { background: var(--color-clay-30);  color: var(--color-clay-30-on); }
+.sds-badge--clay.sds-badge--tone-40     { background: var(--color-clay-40);  color: var(--color-clay-40-on); }
+.sds-badge--clay.sds-badge--tone-50       { background: var(--color-clay-50);  color: var(--color-clay-50-on); }
+
+/* ── FLOWER ── */
+.sds-badge--flower.sds-badge--outline     { background: transparent;           color: var(--color-flower-50); }
+.sds-badge--flower.sds-badge--tone-10     { background: var(--color-flower-10);  color: var(--color-flower-10-on); }
+.sds-badge--flower.sds-badge--tone-20     { background: var(--color-flower-20);  color: var(--color-flower-20-on); }
+.sds-badge--flower.sds-badge--tone-30     { background: var(--color-flower-30);  color: var(--color-flower-30-on); }
+.sds-badge--flower.sds-badge--tone-40     { background: var(--color-flower-40);  color: var(--color-flower-40-on); }
+.sds-badge--flower.sds-badge--tone-50       { background: var(--color-flower-50);  color: var(--color-flower-50-on); }
+
+/* ── DUSK ── */
+.sds-badge--dusk.sds-badge--outline   { background: transparent;             color: var(--color-dusk-50); }
+.sds-badge--dusk.sds-badge--tone-10   { background: var(--color-dusk-10);  color: var(--color-dusk-10-on); }
+.sds-badge--dusk.sds-badge--tone-20   { background: var(--color-dusk-20);  color: var(--color-dusk-20-on); }
+.sds-badge--dusk.sds-badge--tone-30   { background: var(--color-dusk-30);  color: var(--color-dusk-30-on); }
+.sds-badge--dusk.sds-badge--tone-40   { background: var(--color-dusk-40);  color: var(--color-dusk-40-on); }
+.sds-badge--dusk.sds-badge--tone-50     { background: var(--color-dusk-50);  color: var(--color-dusk-50-on); }
+
+/* ── SKY ──────────────────────────────────  */
+.sds-badge--sky.sds-badge--outline    { background: transparent;            color: var(--color-sky-50); }
+.sds-badge--sky.sds-badge--tone-10    { background: var(--color-sky-10);  color: var(--color-sky-10-on); }
+.sds-badge--sky.sds-badge--tone-20    { background: var(--color-sky-20);  color: var(--color-sky-20-on); }
+.sds-badge--sky.sds-badge--tone-30    { background: var(--color-sky-30);  color: var(--color-sky-30-on); }
+.sds-badge--sky.sds-badge--tone-40    { background: var(--color-sky-40);  color: var(--color-sky-40-on); }
+.sds-badge--sky.sds-badge--tone-50      { background: var(--color-sky-50);  color: var(--color-sky-50-on); }
+
+/* ── SEA ── */
+.sds-badge--sea.sds-badge--outline      { background: transparent;          color: var(--color-sea-50); }
+.sds-badge--sea.sds-badge--tone-10      { background: var(--color-sea-10);  color: var(--color-sea-10-on); }
+.sds-badge--sea.sds-badge--tone-20      { background: var(--color-sea-20);  color: var(--color-sea-20-on); }
+.sds-badge--sea.sds-badge--tone-30      { background: var(--color-sea-30);  color: var(--color-sea-30-on); }
+.sds-badge--sea.sds-badge--tone-40      { background: var(--color-sea-40);  color: var(--color-sea-40-on); }
+.sds-badge--sea.sds-badge--tone-50        { background: var(--color-sea-50);  color: var(--color-sea-50-on); }
+
+/* ── LAKE ── */
+.sds-badge--lake.sds-badge--outline     { background: transparent;           color: var(--color-lake-50); }
+.sds-badge--lake.sds-badge--tone-10     { background: var(--color-lake-10);  color: var(--color-lake-10-on); }
+.sds-badge--lake.sds-badge--tone-20     { background: var(--color-lake-20);  color: var(--color-lake-20-on); }
+.sds-badge--lake.sds-badge--tone-30     { background: var(--color-lake-30);  color: var(--color-lake-30-on); }
+.sds-badge--lake.sds-badge--tone-40     { background: var(--color-lake-40);  color: var(--color-lake-40-on); }
+.sds-badge--lake.sds-badge--tone-50       { background: var(--color-lake-50);  color: var(--color-lake-50-on); }
+
+/* ── Border radius variants ────────────── */
+[data-radius="rounded"] .sds-badge { border-radius: var(--radius-full); }
+
+/* ── Dark-mode text overrides — see tokens-reference.md § Mirror-Pin Technique
+   and component-rules.md § Badge text color rules for the full table ── */
+
+/* ══════════════════════════════════════════════
+   BORDER — appearance="outline" always shows a border
+   (text color, via currentColor). tone-10..tone-50
+   keep the base's transparent border (reserves
+   space, avoids layout shift when switching appearance).
+   ══════════════════════════════════════════════ */
+
+.sds-badge--outline { box-shadow: inset 0 0 0 1px currentColor; }
+
+/* The badge decides its own label weight, and needs to win over the Text variant's.
+   sds-text--labelRegular carries --font-weight-regular; a badge label is medium. Two
+   classes beat one, which is the whole trick. */
+.sds-badge .sds-badge__label {
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── The dismiss control ───────────────────────────────────────────────────────
+   It is a real <button> rather than a span with role="button", which buys keyboard
+   handling, focus and disabled from the browser. It is NOT an <sds-icon-button>: that
+   component is a fixed 32x32 at its smallest, and the badge's target is a 16px glyph
+   with 2px of padding inside a pill about 24px tall. Importing it would blow the badge
+   apart — which is why KDLS hand-rolled this too.
+
+   These reset the native chrome so the button carries no appearance of its own. */
+.sds-badge__icon--right--clickable {
+  appearance: none;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: inherit;
+}
+
+
+/* The dismiss control takes focus, so it has to show it.
+   KDLS styles no focus state for it at all: a keyboard user tabbing through a row of
+   dismissible badges has no idea which one they are on, which is the difference between
+   removing the right filter and removing a random one.
+
+   The ring is inset rather than outside, because the button sits inside the badge's own
+   rounded box and an outline would be clipped by it. */
+.sds-badge__icon:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-inset);
+  border-radius: var(--radius-xs);
+}
+
+/* Same reasoning as Text: a clipped background paints nothing once forced colours have
+   discarded backgrounds, and the label would vanish instead of changing colour. */
+@media (forced-colors: active) {
+  .sds-badge--scheme-color.sds-badge--outline .sds-badge__label {
+    background: none;
+    color: CanvasText;
+  }
+}

package/components/Badge/badge-dismissible.marko

@@ -0,0 +1,143 @@
+<!-- sds-badge-dismissible — the interactive half of the Badge.
+
+     <sds-badge> is markup and costs nothing. This one hydrates: it listens for a click
+     and a keypress on the right icon, and it tracks its own loading state. Marko 5
+     serialises the entire input of a stateful component into the HTML, once per
+     instance, with no way to opt out — so this tag is the deliberate, visible choice to
+     pay that, and the name is what makes the choice visible at the call site.
+
+     Use it for a filter chip a person removes. Do not use it inside a repeated card:
+     twenty instances write twenty copies of their input into the page.
+
+     The dismiss control is a real <button>, not a span with role="button": keyboard handling,
+focus and disabled come from the browser, so there is no key handler here to get wrong.
+It is deliberately NOT an <sds-icon-button> — that component is a fixed 32x32 at its
+smallest, and this target is a 16px glyph inside a pill about 24px tall.
+
+Because it is already paying for hydration, the full KDLS behaviour comes back —
+     including the automatic spinner when onClickIconRight returns a Promise, which
+     <sds-badge> cannot offer and which the controlled `iconRightLoading` attribute only
+     approximates.
+
+     Ported from kdls-design-system v2.5.1 (0f3edf8) components/Badge/Badge.tsx. -->
+
+import { assertVariant, assertAppearance, assertSize, assertWidth } from "./badge-variants.js";
+
+class {
+  onCreate() {
+    this.state = { loading: false };
+  }
+
+  async handleClick(event) {
+    event.stopPropagation();
+    const { onClickIconRight, iconRightDisabled, iconRightLoading } = this.input;
+    // The guard has to read the same thing the render does. It read only the internal
+    // flag, so a caller driving `iconRightLoading` from outside showed a spinner and still
+    // took the click — the one moment the control exists to refuse. KDLS mirrors these two
+    // the same way.
+    if (iconRightDisabled || this.state.loading || iconRightLoading) return;
+
+    const result = onClickIconRight?.(event);
+    if (result instanceof Promise) {
+      this.state.loading = true;
+      try {
+        await result;
+      } finally {
+        this.state.loading = false;
+      }
+    }
+  }
+
+}
+
+$ {
+  const {
+    label,
+    variant = "neutral",
+    appearance = "tone-30",
+    size = "sm",
+    width = "hug",
+    iconLeft,
+    iconRight,
+    iconRightLoading = false,
+    iconRightDisabled = false,
+    iconRightLabel = "Remover",
+    class: extraClass = "",
+  } = input;
+
+  assertVariant(variant);
+  assertAppearance(appearance);
+  assertSize(size);
+  assertWidth(width);
+
+
+  // An icon may arrive two ways: as an attribute tag (<@icon-left>…</@icon-left>, which
+  // is the Marko idiom and what a page writes) or as a template value (which is what a
+  // test or a loop passes). Normalising here means callers never have to care.
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  const showSpinner = (state.loading || iconRightLoading) && !iconRightDisabled;
+
+  // The label's typography is the Text scale: label-sm at sm, body-sm at md, body-md at
+  // lg. It renders through <sds-text> so that scale lives in one place, and passes
+  // color="inherit" because the badge decides the colour — that is where the contrast
+  // tokens are applied.
+  const labelVariant = { sm: "labelRegular", md: "bodySm", lg: "bodyMd" }[size];
+
+  const badgeClass = [
+    "sds-badge",
+    `sds-badge--${variant}`,
+    `sds-badge--${appearance}`,
+    `sds-badge--${size}`,
+    width === "fill" ? "sds-badge--fill" : "",
+    "sds-badge--has-icon-right",
+    extraClass,
+  ].filter(Boolean).join(" ");
+
+  const iconRightClass = [
+    "sds-badge__icon",
+    "sds-badge__icon--right",
+    "sds-badge__icon--right--clickable",
+    iconRightDisabled ? "sds-badge__icon--right--disabled" : "",
+    showSpinner ? "sds-badge__icon--right--loading" : "",
+  ].filter(Boolean).join(" ");
+}
+
+<span class=badgeClass>
+  <span class="sds-badge__content sds-badge__content--has-icon-right">
+    <if(iconLeft)>
+      <span class="sds-badge__icon sds-badge__icon--left" aria-hidden="true">
+        <sds-icon size="sm">
+          <${renderable(iconLeft)}/>
+        </sds-icon>
+      </span>
+    </if>
+    <sds-text as="span" variant=labelVariant color="inherit" class="sds-badge__label">
+      ${label}
+    </sds-text>
+  </span>
+
+  <span class="sds-badge__icon-right-wrap">
+    <button
+      type="button"
+      class=iconRightClass
+      disabled=(iconRightDisabled || null)
+      aria-label=iconRightLabel
+      aria-busy=(showSpinner ? "true" : null)
+      aria-disabled=(iconRightDisabled ? "true" : null)
+      on-click("handleClick")
+    >
+      <if(showSpinner)>
+        // No label. It was passed `iconRightLabel`, so the live region announced "Remover"
+        // — the button's own name repeated, never saying that anything was happening. The
+        // spinner's own default says "Carregando", which is the news.
+        <sds-spinner size="sm"/>
+      </if>
+      <else>
+        <sds-icon size="sm">
+          <${renderable(iconRight)}/>
+        </sds-icon>
+      </else>
+    </button>
+  </span>
+</span>

package/components/Badge/badge-variants.js

@@ -0,0 +1,35 @@
+/**
+ * The Badge's vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Badge/Badge.tsx.
+ * Divergence: `primary`, `secondary`, `tertiary` and `lya` are removed — the first
+ * three read Kenlo brand families SDS does not carry, and `lya` was the gradient
+ * special case, which now reaches every component through applyCustomGradient.
+ *
+ * `scheme-color` is the one to reach for when a badge should follow the site's own
+ * colour: it reads the primary slot, so it picks up applyCustomColor and
+ * applyCustomGradient alike.
+ */
+export const BADGE_VARIANTS = [
+  'neutral', 'scheme-color',
+  'success', 'alert', 'error',
+  'leaf', 'sand', 'wood', 'clay', 'flower', 'dusk', 'sky', 'sea', 'lake',
+];
+
+export const BADGE_APPEARANCES = ['outline', 'tone-10', 'tone-20', 'tone-30', 'tone-40', 'tone-50'];
+
+export const BADGE_SIZES = ['sm', 'md', 'lg'];
+
+export const BADGE_WIDTHS = ['hug', 'fill'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown badge ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertVariant = (v) => assertOneOf('variant', v, BADGE_VARIANTS);
+export const assertAppearance = (v) => assertOneOf('appearance', v, BADGE_APPEARANCES);
+export const assertSize = (v) => assertOneOf('size', v, BADGE_SIZES);
+export const assertWidth = (v) => assertOneOf('width', v, BADGE_WIDTHS);