@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,481 +0,0 @@
-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 {
-  value: string;
-  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[] = [];
-
-  @property({ type: String }) name = "radio-group";
-
-  /** Layout axis of the option list. `"vertical"` (default) stacks options in
-   *  a column; `"horizontal"` lays them out in a wrapping row. */
-  @property({ type: String, reflect: true }) orientation: Orientation = "vertical";
-
-  /** 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;
-
-  @property({ type: Boolean })
-  disabled = false;
-
-  @property({ type: Boolean }) error = false;
-
-  @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;
-
-  private _onChange: (value: string) => void = () => {};
-  private _onTouched: () => void = () => {};
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    .rel-radio-group {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--rel-spacing-xs);
-    }
-
-    /* Horizontal orientation — options flow in a wrapping row. Wider column
-       gap than the vertical rhythm so adjacent option labels read as separate
-       choices; row gap keeps the vertical value for wrapped lines. */
-    :host([orientation="horizontal"]) .rel-radio-group {
-      flex-direction: row;
-      flex-wrap: wrap;
-      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;
-      gap: var(--rel-spacing-3xs);
-      cursor: pointer;
-    }
-
-    .rel-radio-option.disabled {
-      /* Figma State=Disabled: whole option at 40% opacity, colors unchanged. */
-      opacity: 0.4;
-      cursor: not-allowed !important;
-    }
-
-    .rel-radio-option:focus-within:has(input:focus-visible) {
-      outline: 1.5px solid var(--rel-border-focus);
-      outline-offset: 1px;
-    }
-
-    .radio-main {
-      /* Containing block for the hidden input below — without this the
-         absolutely-positioned input resolves against the document (or any
-         positioned ancestor in the consumer page), where it neither moves
-         with intermediate scroll containers nor stays aligned with the
-         visible radio. Tabbing to it then makes the browser scroll the
-         WRONG scroller, shoving the whole page up (same bug as
-         rel-checkbox — keep the two fixes in sync). */
-      position: relative;
-      display: flex;
-      align-items: center;
-      /* 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 {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      opacity: 0;
-      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;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      flex-shrink: 0;
-    }
-
-    .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;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--rel-text-default);
-      display: none;
-    }
-
-    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);
-    }
-
-    .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 {
-      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;
-    }
-
-    /* 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);
-    }
-
-    .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 {
-      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="small"]) .radio-supporting {
-      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);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-    }
-
-    /* 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 .radio-custom::after {
-      background: var(--rel-text-danger);
-    }
-
-    .rel-radio-option.error-unchecked .radio-supporting,
-    .rel-radio-option.error-checked .radio-supporting {
-      color: var(--rel-text-danger);
-    }
-
-    /* Error message below group */
-    .error-message {
-      color: var(--rel-text-danger);
-      margin-top: var(--rel-spacing-2xs, 4px);
-
-      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);
-
-    }
-
-    .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;
-
-    this.selectedValue = value;
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value, checked: true },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this._onChange(this.value);
-  }
-
-  registerOnChange(fn: (value: string) => void): void { this._onChange = fn; }
-  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
-  writeValue(value: string): void { this.checked = value === this.value; }
-
-  private get hasSelection(): boolean {
-    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" : "",
-    ]
-      .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">
-          <input
-            type="radio"
-            name="${this.name}"
-            .checked="${isChecked}"
-            ?disabled="${isDisabled}"
-            @change="${() => this.onChange(option.value)}"
-            @blur="${() => this._onTouched()}"
-          />
-          <span class="radio-custom"></span>
-          ${comfortable
-            ? html`<span class="stack">${labelLine}${supporting}</span>`
-            : labelLine}
-        </div>
-
-        ${comfortable ? null : supporting}
-      </label>
-    `;
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        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>
-      <div class="${this.error && this.errorMessage ? "error-message" : "error-message empty"}" id="radio-error" aria-live="polite">${this.error && this.errorMessage ? this.errorMessage : ""}</div>
-    `;
-  }
-}