@reliability-design/web 1.4.4 → 1.4.6

package/dist/components/rel-popover/rel-popover.ts

@@ -1,9 +1,16 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { getDeepActiveElement, getFocusableElements } from "../../utils/focus.js";
 
 type SideType = "top" | "right" | "bottom" | "left";
 type AlignType = "start" | "center" | "end";
 
+/** Every currently-open popover on the page (module-level, shared by all
+ *  instances). Used so opening one popover light-dismisses any other open
+ *  popover it is not nested inside — regardless of whether it was opened by
+ *  pointer, keyboard, or programmatically. */
+const openPopovers = new Set<RelPopover>();
+
 @customElement("rel-popover")
 export class RelPopover extends LitElement {
   /* =======================
@@ -86,13 +93,15 @@ export class RelPopover extends LitElement {
     super.connectedCallback();
     this.internalOpen = this.isControlled() ? !!this.open : this.defaultOpen;
 
-    // ONE interaction entry point — capture phase
+    // ONE interaction entry point per input method — capture phase
     this.addEventListener("pointerdown", this.onHostPointerDown, true);
+    this.addEventListener("keydown", this.onHostKeyDown, true);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("pointerdown", this.onHostPointerDown, true);
+    this.removeEventListener("keydown", this.onHostKeyDown, true);
     this.removeGlobalListeners();
     this.hideNativePopover();
   }
@@ -159,13 +168,28 @@ export class RelPopover extends LitElement {
     this.setOpen(!this.activeOpen);
   };
 
+  private onHostKeyDown = (e: KeyboardEvent) => {
+    if (this.disabled) return;
+    if (e.key !== "Enter" && e.key !== " ") return;
+    if (!this.triggerEl || !e.composedPath().includes(this.triggerEl)) return;
+
+    // Keyboard twin of onHostPointerDown. preventDefault also suppresses the
+    // native synthetic click of a <button> trigger, which would toggle twice.
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.setOpen(!this.activeOpen);
+  };
+
   /* =======================
    * OPEN / CLOSE
    * ======================= */
 
   private onOpen() {
-    this.returnFocusEl =
-      (document.activeElement as HTMLElement) ?? this.triggerEl;
+    this.returnFocusEl = getDeepActiveElement() ?? this.triggerEl;
+
+    this.closeOtherPopovers();
+    openPopovers.add(this);
 
     this.addGlobalListeners();
     this.showNativePopover();
@@ -177,11 +201,29 @@ export class RelPopover extends LitElement {
   }
 
   private onClose() {
+    openPopovers.delete(this);
     this.removeGlobalListeners();
     this.hideNativePopover();
     this.restoreFocus();
   }
 
+  /**
+   * Light-dismiss every other open popover that isn't an ancestor of this
+   * one (nested popovers keep their parent open). This is what the outside-
+   * pointerdown listener would do for a click on our trigger — except the
+   * trigger handler stops that pointerdown in the capture phase, and a
+   * keyboard (Enter/Space) or programmatic open never produces one at all.
+   * Honors each popover's own `closeOnOutsideClick` setting.
+   */
+  private closeOtherPopovers() {
+    for (const other of openPopovers) {
+      if (other === this) continue;
+      if (!other.closeOnOutsideClick) continue;
+      if (other.contains(this)) continue;
+      other.setOpen(false);
+    }
+  }
+
   /* =======================
    * TOP LAYER (native Popover API)
    *
@@ -219,7 +261,11 @@ export class RelPopover extends LitElement {
 
   private addGlobalListeners() {
     if (this.closeOnOutsideClick) {
-      document.addEventListener("pointerdown", this.onOutsidePointerDown);
+      // Capture phase: another popover's trigger handler (onHostPointerDown)
+      // calls stopPropagation() in its own capture listener, which would
+      // otherwise swallow the event before a bubble-phase document listener
+      // ever saw it — leaving this popover open alongside the new one.
+      document.addEventListener("pointerdown", this.onOutsidePointerDown, true);
     }
 
     if (this.closeOnEscape || this.trapFocus) {
@@ -231,7 +277,7 @@ export class RelPopover extends LitElement {
   }
 
   private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown, true);
     document.removeEventListener("keydown", this.onKeyDown);
     window.removeEventListener("resize", this.updatePosition);
     window.removeEventListener("scroll", this.updatePosition, true);
@@ -386,6 +432,19 @@ export class RelPopover extends LitElement {
     this.triggerEl.setAttribute("aria-haspopup", "dialog");
     this.triggerEl.setAttribute("aria-expanded", String(this.activeOpen));
     this.triggerEl.setAttribute("aria-controls", this.uniqueId);
+
+    // A bare <div>/<span> trigger must be Tab-reachable. Skip anything that
+    // is (or contains) natively focusable so buttons don't get a second stop.
+    if (
+      this.triggerEl.tabIndex < 0 &&
+      !this.triggerEl.hasAttribute("tabindex") &&
+      getFocusableElements(this.triggerEl).length === 0
+    ) {
+      this.triggerEl.setAttribute("tabindex", "0");
+      if (!this.triggerEl.hasAttribute("role")) {
+        this.triggerEl.setAttribute("role", "button");
+      }
+    }
   }
 
   /* =======================

package/dist/components/rel-progress/rel-progress.ts

@@ -15,6 +15,9 @@ export class RelProgress extends LitElement {
   @property({ type: Number })
   value = 0;
 
+  @property({ type: String })
+  label = "";
+
   private radius = 15.9155;
   private circumference = 2 * Math.PI * this.radius;
 
@@ -155,9 +158,14 @@ export class RelProgress extends LitElement {
     return Math.min(100, Math.max(0, this.value));
   }
 
+  private get accessibleName() {
+    if (this.label) return this.label;
+    return this.mode.endsWith("indeterminate") ? "Loading" : "Progress";
+  }
+
   private renderLinearDeterminate() {
     return html`
-      <div part="track" class="linear-track" role="progressbar"
+      <div part="track" class="linear-track" role="progressbar" aria-label="${this.accessibleName}"
         aria-valuenow="${this.safeValue}" aria-valuemin="0" aria-valuemax="100">
         <div part="indicator" class="linear-bar determinate" style="width: ${this.safeValue}%"></div>
       </div>
@@ -166,7 +174,7 @@ export class RelProgress extends LitElement {
 
   private renderLinearIndeterminate() {
     return html`
-      <div part="track" class="linear-track" role="progressbar">
+      <div part="track" class="linear-track" role="progressbar" aria-label="${this.accessibleName}">
         <div part="indicator" class="linear-bar indeterminate"></div>
       </div>
     `;
@@ -177,7 +185,8 @@ export class RelProgress extends LitElement {
       this.circumference - (this.safeValue / 100) * this.circumference;
 
     return html`
-      <div class="circular">
+      <div class="circular" role="progressbar" aria-label="${this.accessibleName}"
+        aria-valuenow="${this.safeValue}" aria-valuemin="0" aria-valuemax="100">
         <svg viewBox="0 0 36 36" class="circular-svg">
           <circle class="circular-bg" cx="18" cy="18" r="${this.radius}" />
           <circle
@@ -195,7 +204,7 @@ export class RelProgress extends LitElement {
 
   private renderCircularIndeterminate() {
     return html`
-      <div class="circular">
+      <div class="circular" role="progressbar" aria-label="${this.accessibleName}">
         <svg viewBox="0 0 50 50" class="spinner">
           <circle
             class="spinner-path"

package/dist/components/rel-radio/README.md

@@ -61,9 +61,11 @@ A radio button group component that allows users to select a single option from
 | `options` | `RadioOption[]` | `[]` | Array of radio options (see RadioOption interface below) |
 | `name` | `string` | `"radio-group"` | Name attribute for the radio group (for form grouping) |
 | `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout axis: `"vertical"` stacks options in a column; `"horizontal"` lays them out in a wrapping row (reflected attribute) |
-| `size` | `"small" \| "medium"` | `"medium"` | Control scale: `"medium"` = 20px circle with body-lg labels; `"small"` = 16px circle with body-md labels (reflected attribute) |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Control scale (Figma Size L/M/S): `"medium"` = 20px control with body-lg labels; `"large"` = 24px control with body-xl labels; `"small"` = 20px control with body-md labels — S and M share the control size, only typography steps down (reflected attribute) |
+| `density` | `"compact" \| "comfortable"` | `"compact"` | Supporting-text layout (Figma Density): `"compact"` puts the supporting text on its own line under the row, indented past the control; `"comfortable"` stacks label + supporting text beside the control (reflected attribute) |
+| `alignment` | `"leading" \| "trailing"` | `"leading"` | Control position (Figma Layout): `"trailing"` pushes the control to the far edge of the row and always renders comfortable density — the spec has no compact trailing layout (reflected attribute) |
 | `selectedValue` | `string \| null` | `null` | Currently selected option value (reflected attribute) |
-| `disabled` | `boolean` | `false` | Disables the entire radio group |
+| `disabled` | `boolean` | `false` | Disables the entire radio group (renders at 40% opacity) |
 
 ### RadioOption Interface
 ```typescript
@@ -72,7 +74,8 @@ interface RadioOption {
   label: string;           // Display label
   supportingText?: string; // Optional helper text below the label
   disabled?: boolean;      // Disable individual option
-  error?: boolean;         // Show error state for individual option
+  icon?: string;           // rel-icon name rendered before the label
+  avatar?: string;         // 1–2 initials rendered as a circular chip before the label (ignored when icon is set)
 }
 ```
 

package/dist/components/rel-radio/rel-radio.ts

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing, type PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
 import type { Orientation } from "../rel-stepper/rel-stepper.js";
 
 export interface RadioOption {
@@ -7,8 +8,17 @@ export interface RadioOption {
   label: string;
   supportingText?: string;
   disabled?: boolean;
+  /** rel-icon name rendered before the label (Figma Has Icon/Avatar, Type=Icon). */
+  icon?: string;
+  /** 1–2 initials rendered as a circular chip before the label (Type=Avatar).
+   *  Ignored when `icon` is also set. */
+  avatar?: string;
 }
 
+type RadioSize = "small" | "medium" | "large";
+type RadioDensity = "compact" | "comfortable";
+type RadioAlignment = "leading" | "trailing";
+
 @customElement("rel-radio")
 export class RelRadio extends LitElement {
   @property({ type: Array }) options: RadioOption[] = [];
@@ -19,9 +29,23 @@ export class RelRadio extends LitElement {
    *  a column; `"horizontal"` lays them out in a wrapping row. */
   @property({ type: String, reflect: true }) orientation: Orientation = "vertical";
 
-  /** Control scale. `"medium"` (default) = 20px circle with body-lg labels;
-   *  `"small"` = 16px circle with body-md labels. */
-  @property({ type: String, reflect: true }) size: "small" | "medium" = "medium";
+  /** Control scale (Figma Size). `"medium"` (default, Figma M) = 20px control
+   *  with body-lg labels; `"large"` (Figma L) = 24px control with body-xl
+   *  labels; `"small"` (Figma S) = 20px control with body-md labels — S and M
+   *  share the control size in the spec, only typography steps down. */
+  @property({ type: String, reflect: true }) size: RadioSize = "medium";
+
+  /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
+   *  supporting text on its own line under the row, indented past the control;
+   *  `"comfortable"` stacks label + supporting text beside the control. */
+  @property({ type: String, reflect: true }) density: RadioDensity = "compact";
+
+  /** Control position (Figma Layout). `"leading"` (default) renders the
+   *  control before the label; `"trailing"` pushes it to the far edge of the
+   *  row. Trailing has no compact layout in the spec, so it always renders
+   *  with comfortable density. Meant for vertical orientation — trailing
+   *  options stretch to the group's full width. */
+  @property({ type: String, reflect: true }) alignment: RadioAlignment = "leading";
 
   @property({ type: String, reflect: true })
   selectedValue: string | null = null;
@@ -33,6 +57,9 @@ export class RelRadio extends LitElement {
 
   @property({ type: String }) errorMessage = "";
 
+  /** Accessible name for the radiogroup (it renders no visible group label). */
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+
   @property({ type: String }) value = "";
 
   checked = false;
@@ -63,6 +90,12 @@ export class RelRadio extends LitElement {
       gap: var(--rel-spacing-xs) var(--rel-spacing-xl);
     }
 
+    /* Trailing alignment — options stretch so the control can sit on the far
+       edge of the group's width. */
+    :host([alignment="trailing"]) .rel-radio-group {
+      align-items: stretch;
+    }
+
     .rel-radio-option {
       display: inline-flex;
       flex-direction: column;
@@ -71,23 +104,11 @@ export class RelRadio extends LitElement {
     }
 
     .rel-radio-option.disabled {
-      opacity: 0.6;
-      color: var(--rel-text-disabled);
+      /* Figma State=Disabled: whole option at 40% opacity, colors unchanged. */
+      opacity: 0.4;
       cursor: not-allowed !important;
     }
 
-    .rel-radio-option:not(.disabled):hover .radio-custom {
-      border-color: var(--rel-text-body);
-    }
-
-    .rel-radio-option:not(.disabled):hover .radio-label {
-      color: var(--rel-text-body);
-    }
-
-    .rel-radio-option:not(.disabled):hover .radio-supporting {
-      color: var(--rel-text-caption);
-    }
-
     .rel-radio-option:focus-within:has(input:focus-visible) {
       outline: 1.5px solid var(--rel-border-focus);
       outline-offset: 1px;
@@ -104,7 +125,17 @@ export class RelRadio extends LitElement {
       position: relative;
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-2xs);
+      /* Compact row rhythm (control ↔ label). Comfortable widens to 12px. */
+      gap: var(--rel-spacing-xs);
+    }
+
+    .rel-radio-option.comfortable .radio-main {
+      gap: var(--rel-spacing-sm);
+    }
+
+    :host([alignment="trailing"]) .radio-main {
+      flex-direction: row-reverse;
+      justify-content: space-between;
     }
 
     input {
@@ -117,63 +148,163 @@ export class RelRadio extends LitElement {
       pointer-events: none;
     }
 
+    /* Control box (Figma .Radio Control) — the drawn ring is inset inside a
+       larger hit/spacing box: 16px ring in a 20px box (M/S), 20px ring in a
+       24px box (L). Indent math below uses the BOX size. */
     .radio-custom {
       width: 20px;
       height: 20px;
-      border: 2px solid var(--rel-text-label);
-      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       position: relative;
       flex-shrink: 0;
     }
 
-    input:checked + .radio-custom::after {
+    .radio-custom::before {
+      content: "";
+      box-sizing: border-box;
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--rel-text-default);
+      border-radius: 50%;
+    }
+
+    .radio-custom::after {
       content: "";
       position: absolute;
-      inset: 4px;
-      background: var(--rel-text-label);
+      width: 8px;
+      height: 8px;
       border-radius: 50%;
+      background: var(--rel-text-default);
+      display: none;
     }
 
-    .radio-label {
+    input:checked + .radio-custom::after {
+      display: block;
+    }
+
+    /* Comfortable density — label and supporting text stack beside the control. */
+    .stack {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .label-line {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs);
+      min-width: 0;
+    }
+
+    /* Optional label prefix — icon tracks the label's color in every state
+       (rel-icon inherits currentColor). */
+    .radio-prefix {
+      flex-shrink: 0;
       color: var(--rel-text-default);
+    }
 
-      font-family: var(--rel-body-lg-regular-font-family);
+    .radio-avatar {
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--rel-bg-neutral-inverse-2);
+      color: var(--rel-text-inverse);
+      font-family: var(--rel-body-xs-semibold-font-family);
+      font-weight: var(--rel-body-xs-semibold-font-weight);
+      font-size: var(--rel-body-xs-semibold-font-size);
+      line-height: 1;
+      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
+    }
 
+    .radio-label {
+      color: var(--rel-text-default);
+      font-family: var(--rel-body-lg-regular-font-family);
       font-weight: var(--rel-body-lg-regular-font-weight);
-
       font-size: var(--rel-body-lg-regular-font-size);
-
       line-height: var(--rel-body-lg-regular-line-height);
-
       letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-
     }
 
     .radio-supporting {
-      margin-left: 28px;
       color: var(--rel-text-caption);
-
       font-family: var(--rel-body-sm-regular-font-family);
-
       font-weight: var(--rel-body-sm-regular-font-weight);
-
       font-size: var(--rel-body-sm-regular-font-size);
-
       line-height: var(--rel-body-sm-regular-line-height);
-
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+    }
 
+    /* Compact density — supporting text sits under the whole row, indented
+       past the control box (box width + row gap). */
+    .radio-supporting.indent {
+      padding-left: 28px;
     }
 
-    /* Size variant (medium is the base scale above). Supporting-text indent =
-       circle width + the radio-main gap, so it stays aligned under the label. */
-    :host([size="small"]) .radio-custom {
-      width: 16px;
-      height: 16px;
+    /* Hover (Figma State=Hover) — ring, dot, label, and prefix icon shift
+       text-default → text-body; supporting text stays caption. Scoped away
+       from disabled and error so those keep their own colors. */
+    .rel-radio-option:not(.disabled):not(.error-unchecked):not(.error-checked):hover .radio-custom::before {
+      border-color: var(--rel-text-body);
     }
 
-    :host([size="small"]) input:checked + .radio-custom::after {
-      inset: 3px;
+    .rel-radio-option:not(.disabled):not(.error-unchecked):not(.error-checked):hover .radio-custom::after {
+      background: var(--rel-text-body);
+    }
+
+    .rel-radio-option:not(.disabled):not(.error-unchecked):not(.error-checked):hover .radio-label,
+    .rel-radio-option:not(.disabled):not(.error-unchecked):not(.error-checked):hover .radio-prefix {
+      color: var(--rel-text-body);
+    }
+
+    /* Size variants (medium is the base scale above). */
+    :host([size="large"]) .radio-custom {
+      width: 24px;
+      height: 24px;
+    }
+
+    :host([size="large"]) .radio-custom::before {
+      width: 20px;
+      height: 20px;
+    }
+
+    :host([size="large"]) .radio-custom::after {
+      width: 10px;
+      height: 10px;
+    }
+
+    :host([size="large"]) .radio-label {
+      font-family: var(--rel-body-xl-regular-font-family);
+      font-weight: var(--rel-body-xl-regular-font-weight);
+      font-size: var(--rel-body-xl-regular-font-size);
+      line-height: var(--rel-body-xl-regular-line-height);
+      letter-spacing: var(--rel-body-xl-regular-letter-spacing);
+    }
+
+    :host([size="large"]) .radio-supporting {
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+    }
+
+    :host([size="large"]) .radio-supporting.indent {
+      padding-left: 32px;
+    }
+
+    :host([size="large"]) .radio-avatar {
+      width: 24px;
+      height: 24px;
+      font-family: var(--rel-body-sm-semibold-font-family);
+      font-weight: var(--rel-body-sm-semibold-font-weight);
+      font-size: var(--rel-body-sm-semibold-font-size);
+      letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
     }
 
     :host([size="small"]) .radio-label {
@@ -185,7 +316,6 @@ export class RelRadio extends LitElement {
     }
 
     :host([size="small"]) .radio-supporting {
-      margin-left: 24px;
       font-family: var(--rel-body-xs-regular-font-family);
       font-weight: var(--rel-body-xs-regular-font-weight);
       font-size: var(--rel-body-xs-regular-font-size);
@@ -193,21 +323,17 @@ export class RelRadio extends LitElement {
       letter-spacing: var(--rel-body-xs-regular-letter-spacing);
     }
 
-    /* Error state (Figma State=Error, both Is Checked values) */
-    .rel-radio-option.error-unchecked .radio-custom,
-    .rel-radio-option.error-checked .radio-custom {
+    /* Error state (Figma State=Error) — ring, dot, and supporting text go
+       danger; the label (and prefix) keep their default color. */
+    .rel-radio-option.error-unchecked .radio-custom::before,
+    .rel-radio-option.error-checked .radio-custom::before {
       border-color: var(--rel-border-danger);
     }
 
-    .rel-radio-option.error-checked input:checked + .radio-custom::after {
+    .rel-radio-option.error-checked .radio-custom::after {
       background: var(--rel-text-danger);
     }
 
-    .rel-radio-option.error-unchecked .radio-label,
-    .rel-radio-option.error-checked .radio-label {
-      color: var(--rel-text-danger);
-    }
-
     .rel-radio-option.error-unchecked .radio-supporting,
     .rel-radio-option.error-checked .radio-supporting {
       color: var(--rel-text-danger);
@@ -229,8 +355,29 @@ export class RelRadio extends LitElement {
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
 
     }
+
+    .error-message.empty {
+      margin-top: 0;
+    }
   `;
 
+  protected willUpdate(changed: PropertyValues<this>) {
+    if (
+      (changed.has("alignment") || changed.has("density")) &&
+      this.alignment === "trailing" &&
+      this.density === "compact"
+    ) {
+      console.warn(
+        '[rel-radio] density="compact" has no trailing layout; rendering comfortable density.'
+      );
+    }
+  }
+
+  /** Trailing has no compact layout in the spec — trailing wins. */
+  private get effectiveDensity(): RadioDensity {
+    return this.alignment === "trailing" ? "comfortable" : this.density;
+  }
+
   private onChange(value: string) {
     if (this.disabled) return;
 
@@ -253,11 +400,27 @@ export class RelRadio extends LitElement {
     return this.selectedValue !== null && this.selectedValue !== "";
   }
 
+  private renderPrefix(option: RadioOption) {
+    if (option.icon) {
+      return html`<rel-icon
+        name="${option.icon}"
+        size="${this.size === "large" ? "lg" : "md"}"
+        class="radio-prefix"
+      ></rel-icon>`;
+    }
+    if (option.avatar) {
+      return html`<span class="radio-avatar" aria-hidden="true">${option.avatar}</span>`;
+    }
+    return null;
+  }
+
   private renderOption(option: RadioOption) {
     const isChecked = this.selectedValue === option.value;
     const isDisabled = this.disabled || option.disabled;
+    const comfortable = this.effectiveDensity === "comfortable";
     const classes = [
       "rel-radio-option",
+      comfortable ? "comfortable" : "compact",
       isDisabled ? "disabled" : "",
       this.error && !this.hasSelection ? "error-unchecked" : "",
       this.error && isChecked ? "error-checked" : "",
@@ -265,6 +428,19 @@ export class RelRadio extends LitElement {
       .filter(Boolean)
       .join(" ");
 
+    const labelLine = html`
+      <span class="label-line">
+        ${this.renderPrefix(option)}
+        <span part="label" class="radio-label">${option.label}</span>
+      </span>
+    `;
+
+    const supporting = option.supportingText
+      ? html`<div class="radio-supporting ${comfortable ? "" : "indent"}">
+          ${option.supportingText}
+        </div>`
+      : null;
+
     return html`
       <label class="${classes}">
         <div class="radio-main">
@@ -277,12 +453,12 @@ export class RelRadio extends LitElement {
             @blur="${() => this._onTouched()}"
           />
           <span class="radio-custom"></span>
-          <span part="label" class="radio-label">${option.label}</span>
+          ${comfortable
+            ? html`<span class="stack">${labelLine}${supporting}</span>`
+            : labelLine}
         </div>
 
-        ${option.supportingText
-          ? html`<div class="radio-supporting">${option.supportingText}</div>`
-          : ""}
+        ${comfortable ? null : supporting}
       </label>
     `;
   }
@@ -294,12 +470,12 @@ export class RelRadio extends LitElement {
         class="rel-radio-group"
         role="radiogroup"
         aria-orientation="${this.orientation}"
+        aria-label="${this.fieldAriaLabel ?? nothing}"
+        aria-describedby="radio-error"
       >
         ${this.options.map((o) => this.renderOption(o))}
       </div>
-      ${this.error && this.errorMessage
-        ? html`<div class="error-message">${this.errorMessage}</div>`
-        : ""}
+      <div class="${this.error && this.errorMessage ? "error-message" : "error-message empty"}" id="radio-error" aria-live="polite">${this.error && this.errorMessage ? this.errorMessage : ""}</div>
     `;
   }
 }