@kenlo/sds-design-system 0.9.9

package/components/Popover/Popover.css

@@ -0,0 +1,121 @@
+/* SDS Popover.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Popover/Popover.css.
+
+   One divergence, and it fixes an upstream bug. KDLS builds the arrow's modifier from the
+   placement — camelToKebab('bottomLeft') gives `bottom-left` — but its stylesheet defines
+   `--bottom-start` and `--bottom-end`. The eight cornered placements therefore match no
+   rule at all: the arrow keeps the base rule only, so it sits unpositioned at the panel's
+   top-left corner with all four borders on. Only the four centred placements work.
+
+   SDS writes no modifier on the arrow. The rules key off the panel's data-placement, which
+   sds-floating already sets to the placement it actually settled on after the flip. There
+   is no second spelling to drift from the first. */
+
+/* ── Panel ── */
+.sds-popover__panel {
+  position: relative;
+  min-width: 120px;
+  max-width: 320px;
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-drop-md);
+  /* Stays visible so the arrow, which hangs outside the box, is not clipped off. */
+  overflow: visible;
+}
+
+.sds-popover__panel--fill-width {
+  max-width: none;
+  width: 100%;
+}
+
+/* ── Title ── */
+.sds-popover__title {
+  padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-neutral-90);
+}
+
+/* ── Content ── */
+.sds-popover__content {
+  padding: var(--spacing-4);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-neutral-80);
+  line-height: var(--lh-body-md);
+}
+
+/* ── Arrow ──
+   A square rotated 45°, with the two borders that fall against the panel face removed so
+   only the point is outlined. Which two depends on the side the panel ended up on, which
+   is what data-placement carries.
+
+   `^=` matches the side and every alignment of it in one rule: the rotation and the edge
+   depend on the side alone. The alignment only moves the arrow along that edge, which is
+   the second block. */
+.sds-popover__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+
+/* Panel below the trigger → the arrow points up, from the panel's top edge. */
+[data-placement^="bottom"] .sds-popover__arrow {
+  top: -5px;
+  border-right: none;
+  border-bottom: none;
+}
+
+/* Panel above → points down. */
+[data-placement^="top"] .sds-popover__arrow {
+  bottom: -5px;
+  border-left: none;
+  border-top: none;
+}
+
+/* Panel to the right → points left. */
+[data-placement^="right"] .sds-popover__arrow {
+  left: -5px;
+  border-right: none;
+  border-top: none;
+}
+
+/* Panel to the left → points right. */
+[data-placement^="left"] .sds-popover__arrow {
+  right: -5px;
+  border-left: none;
+  border-bottom: none;
+}
+
+/* Where along that edge the arrow sits. Exact matches, so `bottom` does not also catch
+   `bottomLeft` — the centred case is the one with no corner word. */
+[data-placement="bottom"] .sds-popover__arrow,
+[data-placement="top"] .sds-popover__arrow { left: 50%; margin-left: -4px; }
+
+[data-placement="bottomLeft"] .sds-popover__arrow,
+[data-placement="topLeft"] .sds-popover__arrow { left: var(--spacing-3); }
+
+[data-placement="bottomRight"] .sds-popover__arrow,
+[data-placement="topRight"] .sds-popover__arrow { right: var(--spacing-3); }
+
+[data-placement="right"] .sds-popover__arrow,
+[data-placement="left"] .sds-popover__arrow { top: 50%; margin-top: -4px; }
+
+[data-placement="rightTop"] .sds-popover__arrow,
+[data-placement="leftTop"] .sds-popover__arrow { top: var(--spacing-3); }
+
+[data-placement="rightBottom"] .sds-popover__arrow,
+[data-placement="leftBottom"] .sds-popover__arrow { bottom: var(--spacing-3); }
+
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-popover__panel,
+[data-theme="dark"] .sds-popover__arrow {
+  border-color: var(--border-interactive-color);
+}

package/components/Popover/popover.marko

@@ -0,0 +1,96 @@
+<!-- sds-popover — ported from kdls-design-system v2.5.1 (0f3edf8) components/Popover/Popover.tsx.
+
+     sds-floating with a panel drawn on it: a card, an optional title, and an arrow pointing
+     back at what opened it. All the positioning, flipping and trigger behaviour is the
+     floating component's; this is the skin.
+
+     It carries no class block. Every piece of state belongs to sds-floating, so a popover
+     serialises nothing of its own — the cost is the one floating pays, once.
+
+     Divergence: the arrow has no modifier class. KDLS builds one from the placement and
+     its stylesheet spells the same thing differently, so the eight cornered placements
+     match no rule and the arrow lands unpositioned in the panel's corner. Here the rules
+     key off the panel's data-placement, which is written by the component that decided it.
+     See Popover.css.
+
+     KDLS's panelClassName, titleClassName and contentClassName are one `panelClass` here.
+     Marko has no className, the title and the content are one slot each, and a caller who
+     needs to reach either one can target .sds-popover__title and .sds-popover__content
+     under their own panelClass — which is what those three attributes were for.
+     destroyOnClose is not here for the reason given in sds-floating: it is always true.
+
+     The gap opens from 4px to 10px when there is an arrow, because the arrow needs
+     somewhere to be — carried from KDLS, which had the same two constants.
+
+     Written as a consumer writes it: the body is the trigger, <@content> is the panel.
+     That is sds-floating's shape, unchanged, because a wrapper that renames its slots
+     makes the reader learn two vocabularies for one idea.
+
+     KDLS also wrapped the whole thing in a .kdls-popover element that only repeats what
+     .kdls-floating already declares. SDS does not: sds-floating is the wrapper, and a
+     class with no rule behind it is the failure this project keeps catching. -->
+
+import { assertPlacement, assertTrigger } from "../Floating/floating-position.js";
+
+$ {
+  const {
+    title,
+    placement = "top",
+    trigger,
+    arrow = true,
+    matchTriggerWidth = false,
+    defaultOpen,
+    open,
+    onOpenChange,
+    zIndex,
+    class: extraClass = "",
+    panelClass = "",
+  } = input;
+
+  assertPlacement(placement);
+  if (trigger !== undefined) assertTrigger(trigger);
+
+  const GAP = 4;
+  const ARROW_GAP = 10;
+
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  const panelClasses = [
+    "sds-popover__panel",
+    matchTriggerWidth ? "sds-popover__panel--fill-width" : "",
+    panelClass,
+  ].filter(Boolean).join(" ");
+}
+
+<sds-floating
+  placement=placement
+  gap=(arrow ? ARROW_GAP : GAP)
+  trigger=trigger
+  matchTriggerWidth=matchTriggerWidth
+  defaultOpen=defaultOpen
+  open=open
+  onOpenChange=onOpenChange
+  zIndex=zIndex
+  class=extraClass
+>
+  <@content>
+    <div class=panelClasses>
+      <if(arrow)>
+        <div class="sds-popover__arrow"/>
+      </if>
+      <if(title)>
+        <div class="sds-popover__title">
+          <!-- A title arrives as text or as markup. `<${value}/>` with a string renders an
+               *element named by that string*, so the two cases cannot share a branch. -->
+          <if(typeof title === "string")>${title}</if>
+          <else><${renderable(title)}/></else>
+        </div>
+      </if>
+      <div class="sds-popover__content">
+        <${input.content}/>
+      </div>
+    </div>
+  </@content>
+
+  <${input.renderBody}/>
+</sds-floating>

package/components/Radio/Radio.css

@@ -0,0 +1,230 @@
+/* SDS Radio.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Radio/Radio.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-radio--selected .sds-radio__circle
+     [data-color-scheme="lya"] .sds-radio--selected .sds-radio__circle::after
+     [data-color-scheme="lya"] .sds-radio--md.sds-radio--selected .sds-radio__circle::after
+     [data-color-scheme="lya"] .sds-radio--selected:active:not(.sds-radio--disabled) .sds-radio__circle
+     [data-color-scheme="lya"] .sds-radio--selected:focus-visible .sds-radio__circle
+     [data-color-scheme="lya"] .sds-radio:active:not(.sds-radio--disabled):not(.sds-radio--selected) .sds-radio__circle
+ */.sds-radio {
+  display: inline-flex;
+  /* A column: the hint is a sibling of the clickable row, not part of it. As a row with
+     `align-items: center` the hint sat BESIDE the label and read as a second label. */
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--font-family-base);
+  outline: none;
+}
+.sds-radio--disabled {
+  cursor: not-allowed;
+}
+/* Circle */
+.sds-radio__circle {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid var(--border-interactive-color);
+  background: var(--component-bg-color);
+  transition: border-color 200ms ease, box-shadow 200ms ease;
+}
+/* Size: sm — 24px row height */
+.sds-radio--sm {
+  min-height: 24px;
+  --radio-circle-size: 24px;
+}
+.sds-radio--sm .sds-radio__circle {
+  width: 24px;
+  height: 24px;
+}
+/* Size: md — 32px row height */
+.sds-radio--md {
+  min-height: 32px;
+  --radio-circle-size: 32px;
+}
+.sds-radio--md .sds-radio__circle {
+  width: 32px;
+  height: 32px;
+}
+/* ── Selected: the input says so, not a class ─────────────────────────────────
+   `--selected` came from the `checked` prop, which is fixed at render. The component
+   holds no state and does not hydrate, so clicking a radio marked the native input — the
+   browser does that — and nothing on screen changed. The `:checked` pseudo-class is the
+   browser's own answer to the same question, and it is right without any JavaScript.
+
+   The class is kept alongside it: a caller that controls `checked` still gets the visual
+   on the first render, before the input is touched.
+
+   The dot is painted rather than drawn with an inset box-shadow. A shadow takes a <color>
+   and nothing else, so the mark could never carry a custom gradient — and an inset ring
+   also left the middle of the circle showing the page through it. */
+.sds-radio:hover:not(.sds-radio--disabled):not(.sds-radio--selected):not(:has(:checked)) .sds-radio__circle,
+.sds-radio:active:not(.sds-radio--disabled):not(.sds-radio--selected):not(:has(:checked)) .sds-radio__circle {
+  border-color: var(--color-primary-50-solid);
+}
+
+.sds-radio--selected .sds-radio__circle,
+.sds-radio__input:checked ~ .sds-radio__circle {
+  border-color: var(--color-primary-50-solid);
+}
+
+.sds-radio--selected:hover:not(.sds-radio--disabled) .sds-radio__circle,
+.sds-radio--selected:active:not(.sds-radio--disabled) .sds-radio__circle,
+.sds-radio:hover:not(.sds-radio--disabled) .sds-radio__input:checked ~ .sds-radio__circle,
+.sds-radio:active:not(.sds-radio--disabled) .sds-radio__input:checked ~ .sds-radio__circle {
+  border-color: var(--color-primary-60-solid);
+}
+
+/* The dot. Zero-sized and transparent until chosen, so it animates into place. */
+.sds-radio__dot {
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: var(--color-primary-50);
+  transition: width 150ms ease, height 150ms ease;
+}
+
+.sds-radio--selected .sds-radio__dot,
+.sds-radio__input:checked ~ .sds-radio__circle .sds-radio__dot {
+  width: 10px;
+  height: 10px;
+}
+
+.sds-radio--md.sds-radio--selected .sds-radio__dot,
+.sds-radio--md .sds-radio__input:checked ~ .sds-radio__circle .sds-radio__dot {
+  width: 14px;
+  height: 14px;
+}
+
+.sds-radio:hover:not(.sds-radio--disabled) .sds-radio__input:checked ~ .sds-radio__circle .sds-radio__dot,
+.sds-radio--selected:hover:not(.sds-radio--disabled) .sds-radio__dot {
+  background: var(--color-primary-60);
+}
+
+/* ── Feedback (validation) — circle border when not selected ── */
+.sds-radio--feedback-error:not(.sds-radio--selected) .sds-radio__circle   { border-color: var(--color-error-50); }
+.sds-radio--feedback-alert:not(.sds-radio--selected) .sds-radio__circle   { border-color: var(--color-alert-50); }
+.sds-radio--feedback-success:not(.sds-radio--selected) .sds-radio__circle { border-color: var(--color-success-50); }
+/* ── Disabled ── */
+.sds-radio--disabled .sds-radio__circle {
+  background: var(--color-neutral-20);
+  border-color: var(--border-interactive-color);
+}
+.sds-radio--selected.sds-radio--disabled .sds-radio__circle {
+  border-color: var(--color-neutral-40);
+}
+.sds-radio--disabled .sds-radio__dot {
+  background: var(--color-neutral-40);
+}
+.sds-radio--disabled .sds-radio__label {
+  color: var(--color-neutral-40);
+}
+/* Focus ring */
+.sds-radio:focus-visible .sds-radio__circle {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+/* The focus ring is the same whether or not the radio is chosen: the dot draws the
+   choice, so the shadow is free to be only the ring. */
+.sds-radio__input:focus-visible ~ .sds-radio__circle {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+/* Container */
+.sds-radio-container {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 0 var(--spacing-4);
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  background: var(--component-bg-color);
+}
+.sds-radio-container--disabled {
+  border-color: var(--border-static-color);
+}
+[data-theme="dark"] .sds-radio-container {
+  border-color: var(--color-neutral-60);
+}
+/* Wrapper — vertical stack with tight gap */
+.sds-radio-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+}
+/* Width modifier */
+.sds-radio-wrapper--fill  { width: 100%; }
+.sds-radio-wrapper--fill > .sds-radio-container { width: 100%; }
+/* Content column (label + hint stacked, no-container case) */
+/* Divergence: the clickable row is `__control`, and `__content` is gone.
+
+   KDLS puts the box and the label straight inside the root and uses `__content` for a
+   different job — it appears only when there is a hint, and stacks the label above it.
+   This port moved the hint out of the label (a hint is not part of the thing you click),
+   so the element that needed a name was the row, and it inherited the KDLS name along
+   with the KDLS rule: `flex-direction: column`. The box sat on top of its own label in
+   every checkbox and radio in the product. Rafael found it on the portal. */
+.sds-radio__control {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+/* Secondary to the label, and lined up with it rather than with the circle. The template
+   passed `color="inherit"`, so the hint took the page's ink and competed with the label
+   it exists to explain. */
+.sds-radio__hint {
+  padding-left: calc(var(--radio-circle-size, 24px) + var(--spacing-2));
+  color: var(--color-neutral-60);
+}
+.sds-radio__hint.sds-radio__hint--success { color: var(--color-success-50); }
+.sds-radio__hint.sds-radio__hint--alert   { color: var(--color-alert-50); }
+.sds-radio__hint.sds-radio__hint--error   { color: var(--color-error-50); }
+.sds-radio--disabled .sds-radio__hint,
+.sds-radio__hint.sds-radio__hint--disabled { color: var(--color-neutral-40); }
+.sds-radio-container + .sds-radio__hint {
+  padding-left: var(--spacing-4);
+}
+[data-theme="dark"] .sds-radio-container--disabled {
+  border-color: var(--border-interactive-color);
+}
+
+/* ── The native input ──────────────────────────────────────────────────────────
+   SDS renders a real <input type="radio">. KDLS drew a <div> with <span>s and no input at
+   all, which means a KDLS radio group has no keyboard navigation between options, no form
+   participation, and nothing a screen reader can hear as a group.
+
+   Hidden with opacity rather than display:none, for the same reason as the Checkbox: a
+   hidden input cannot be focused, and an unfocusable radio cannot be reached at all. */
+.sds-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sds-radio__input:checked ~ .sds-radio__circle {
+  border-color: var(--color-primary-50-solid);
+}
+
+.sds-radio__input:checked ~ .sds-radio__circle .sds-radio__dot {
+  transform: scale(1);
+}
+
+.sds-radio__input:focus-visible ~ .sds-radio__circle {
+  box-shadow: var(--focus-ring);
+}
+
+.sds-radio__dot {
+  transform: scale(0);
+  transition: transform 120ms ease;
+}

package/components/Radio/radio-variants.js

@@ -0,0 +1,16 @@
+/**
+ * The Radio vocabulary.
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Radio/Radio.tsx.
+ */
+export const RADIO_SIZES = ['sm', 'md'];
+export const RADIO_FEEDBACKS = ['none', 'success', 'alert', 'error'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown radio ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertRadioSize = (v) => assertOneOf('size', v, RADIO_SIZES);
+export const assertRadioFeedback = (v) => assertOneOf('feedback', v, RADIO_FEEDBACKS);

package/components/Radio/radio.marko

@@ -0,0 +1,93 @@
+<!-- sds-radio — ported from kdls-design-system v2.5.1 (0f3edf8) components/Radio/Radio.tsx.
+
+A real <input type="radio">, which KDLS's was not: it drew a <div> with <span>s and no
+input at all, so a radio group had no keyboard navigation, no form participation and no
+grouping a screen reader could hear.
+
+The native element brings all of that, and `name` is what makes a set of them one group —
+arrow keys move between them, only one can be chosen, and the browser enforces it. With
+appearance:none the circle on screen is still entirely ours.
+
+No state, no onChange listener: the native change event bubbles, so a form or a
+RadioGroup listens once on its container. -->
+
+import { assertRadioSize, assertRadioFeedback } from "./radio-variants.js";
+
+$ {
+  const {
+    value,
+    label,
+    hint,
+    name,
+    size = "sm",
+    checked = false,
+    disabled = false,
+    required = false,
+    feedback = "none",
+    // `component.id`, not a random string. Marko gives every component an id that is the
+    // same on the server and in the browser; a random one drawn inside the render block is
+    // a different value on each side, so every `for` and `aria-*` pointing at it resolved
+    // to nothing after hydration — and changed again on every re-render.
+    id = `sds-radio-${component.id}`,
+    class: extraClass = "",
+  } = input;
+
+  if (value === undefined) throw new Error("sds-radio needs a `value`.");
+  if (!label) throw new Error("sds-radio needs a `label`.");
+  assertRadioSize(size);
+  assertRadioFeedback(feedback);
+
+  const hintId = hint ? `${id}-hint` : null;
+
+  const classes = [
+    "sds-radio",
+    `sds-radio--${size}`,
+    checked ? "sds-radio--selected" : "",
+    disabled ? "sds-radio--disabled" : "",
+    feedback !== "none" ? `sds-radio--feedback-${feedback}` : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div class=classes>
+  <label class="sds-radio__control" for=id>
+    <input
+      class="sds-radio__input"
+      type="radio"
+      id=id
+      name=name
+      value=value
+      checked=(checked || null)
+      disabled=(disabled || null)
+      required=(required || null)
+      aria-describedby=hintId
+      // Announced, not only painted.
+      aria-invalid=(feedback === "error" ? "true" : null)
+    />
+
+    <span class="sds-radio__circle" aria-hidden="true">
+      <span class="sds-radio__dot"/>
+    </span>
+
+    <sds-text as="span" variant="bodyMd" color="inherit" class="sds-radio__label">
+      ${label}
+    </sds-text>
+  </label>
+
+  <if(hint)>
+    // The feedback modifier, which was never written — the hint took the page's ink and an
+    // error message read like an ordinary note. Same fault as the Checkbox and the Input.
+    <sds-text
+      as="span"
+      id=hintId
+      variant="labelRegular"
+      // No `color="inherit"`: that writes `sds-text--inherit`, which reads `color: inherit`
+      // and beats the hint's own rule on equal specificity by coming later in the sheet.
+      // The hint's colour is the hint's to decide — secondary by default, and the feedback
+      // colour when there is one.
+      class=`sds-radio__hint sds-radio__hint--${disabled ? "disabled" : feedback}`
+    >
+      ${hint}
+    </sds-text>
+  </if>
+</div>

package/components/RadioGroup/RadioGroup.css

@@ -0,0 +1,32 @@
+/* SDS RadioGroup.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/RadioGroup/RadioGroup.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   SDS RadioGroup
+   ============================================================ */
+
+/* ── Field (label + options + hint stacked) ── */
+.sds-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);   /* 16px from the label to the radios */
+}
+/* KDLS styled a __label element and an __options column. Neither exists here: the group
+   is a <fieldset>, its <legend> names it, and the fieldset itself is the column. */
+/* ── Hint (help / error) ── */
+.sds-radio-group__hint.sds-radio-group__hint--success { color: var(--color-success-50); }
+.sds-radio-group__hint.sds-radio-group__hint--alert   { color: var(--color-alert-50); }
+.sds-radio-group__hint.sds-radio-group__hint--error   { color: var(--color-error-50); }
+.sds-radio-group__hint.sds-radio-group__hint--disabled { color: var(--color-neutral-40); }
+
+/* A fieldset needs its browser chrome reset before it can be laid out. */
+.sds-radio-group {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  min-inline-size: 0;
+}
+
+/* The legend is hidden with .sds-visually-hidden, from the foundations — hidden, not
+   removed: it is what a screen reader announces when focus enters the group, and without
+   it the options are loose radios with no shared name. */

package/components/RadioGroup/radio-group.marko

@@ -0,0 +1,93 @@
+<!-- sds-radio-group — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/RadioGroup/RadioGroup.tsx.
+
+A <fieldset> of native radios. KDLS held the selected value in useState and passed it to
+each child through context; none of that is needed once the radios are real — the browser
+owns which one is chosen, `name` makes them one group, and the change event bubbles to
+whoever wants it.
+
+So this hydrates only if a caller passes onChange, and even then it holds no state: it
+reports the chosen value and lets the browser keep it. -->
+
+import { assertRadioSize, assertRadioFeedback } from "../Radio/radio-variants.js";
+
+class {
+  handleChange(event) {
+    if (event.target.type !== "radio") return;
+    this.input.onChange?.(event.target.value);
+  }
+}
+
+$ {
+  const {
+    label,
+    hint,
+    options = [],
+    // `component.id`, not a random string. Marko gives every component an id that is the
+    // same on the server and in the browser; a random one drawn inside the render block is
+    // a different value on each side, so every `for` and `aria-*` pointing at it resolved
+    // to nothing after hydration — and changed again on every re-render.
+    name = `sds-radio-group-${component.id}`,
+    value,
+    defaultValue,
+    size = "sm",
+    feedback = "none",
+    required = false,
+    disabled = false,
+    class: extraClass = "",
+  } = input;
+
+  if (!label) throw new Error("sds-radio-group needs a `label` naming what is being chosen.");
+  if (!options.length) throw new Error("sds-radio-group needs `options`.");
+  assertRadioSize(size);
+  assertRadioFeedback(feedback);
+
+  const selected = value ?? defaultValue;
+  const hintId = hint ? `${name}-hint` : null;
+
+  const classes = ["sds-radio-group", extraClass].filter(Boolean).join(" ");
+
+  // The hint is where the group's own state shows: the legend is hidden and each radio
+  // draws its own feedback. Disabled wins over feedback — a greyed-out group that still
+  // shows a red hint is telling the visitor to fix something it will not let them touch.
+  const hintClass = [
+    "sds-radio-group__hint",
+    disabled ? "sds-radio-group__hint--disabled" : "",
+    !disabled && feedback !== "none" ? `sds-radio-group__hint--${feedback}` : "",
+  ].filter(Boolean).join(" ");
+}
+
+<fieldset
+  class=classes
+  aria-describedby=hintId
+  aria-required=(required ? "true" : null)
+  // The group is the thing in error, not any one option: a screen reader on the fieldset
+  // was told the value was required and never that it was wrong.
+  aria-invalid=(feedback === "error" ? "true" : null)
+  on-change("handleChange")
+>
+  <!-- The asterisk is inside the legend, which is the group's accessible name, so a screen
+       reader reads "Tipo de imóvel, obrigatório" rather than announcing a symbol on its
+       own. KDLS hangs it off a visible label with a ::after; there is no visible label
+       here, so it is said in words. -->
+  <legend class="sds-visually-hidden">${label}<if(required)> (obrigatório)</if></legend>
+
+  <for|option| of=options>
+    <sds-radio
+      name=name
+      value=option.value
+      label=option.label
+      hint=option.hint
+      size=size
+      feedback=feedback
+      checked=(option.value === selected)
+      disabled=(disabled || option.disabled)
+    />
+  </for>
+
+  <if(hint)>
+    <sds-text as="span" id=hintId variant="labelRegular" color="inherit" class=hintClass>
+      ${hint}
+    </sds-text>
+  </if>
+</fieldset>