@reliability-design/web 1.4.5 → 1.4.6

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>
     `;
   }
 }