@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,305 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import type { Orientation } from "../rel-stepper/rel-stepper.js";
-
-export interface RadioOption {
-  value: string;
-  label: string;
-  supportingText?: string;
-  disabled?: boolean;
-}
-
-@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. `"medium"` (default) = 20px circle with body-lg labels;
-   *  `"small"` = 16px circle with body-md labels. */
-  @property({ type: String, reflect: true }) size: "small" | "medium" = "medium";
-
-  @property({ type: String, reflect: true })
-  selectedValue: string | null = null;
-
-  @property({ type: Boolean })
-  disabled = false;
-
-  @property({ type: Boolean }) error = false;
-
-  @property({ type: String }) errorMessage = "";
-
-  @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);
-    }
-
-    .rel-radio-option {
-      display: inline-flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-3xs);
-      cursor: pointer;
-    }
-
-    .rel-radio-option.disabled {
-      opacity: 0.6;
-      color: var(--rel-text-disabled);
-      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;
-    }
-
-    .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;
-      gap: var(--rel-spacing-2xs);
-    }
-
-    input {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .radio-custom {
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--rel-text-label);
-      border-radius: 50%;
-      position: relative;
-      flex-shrink: 0;
-    }
-
-    input:checked + .radio-custom::after {
-      content: "";
-      position: absolute;
-      inset: 4px;
-      background: var(--rel-text-label);
-      border-radius: 50%;
-    }
-
-    .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);
-
-    }
-
-    /* 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;
-    }
-
-    :host([size="small"]) input:checked + .radio-custom::after {
-      inset: 3px;
-    }
-
-    :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 {
-      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);
-      line-height: var(--rel-body-xs-regular-line-height);
-      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 {
-      border-color: var(--rel-border-danger);
-    }
-
-    .rel-radio-option.error-checked input: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);
-    }
-
-    /* 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);
-
-    }
-  `;
-
-  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 renderOption(option: RadioOption) {
-    const isChecked = this.selectedValue === option.value;
-    const isDisabled = this.disabled || option.disabled;
-    const classes = [
-      "rel-radio-option",
-      isDisabled ? "disabled" : "",
-      this.error && !this.hasSelection ? "error-unchecked" : "",
-      this.error && isChecked ? "error-checked" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    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>
-          <span part="label" class="radio-label">${option.label}</span>
-        </div>
-
-        ${option.supportingText
-          ? html`<div class="radio-supporting">${option.supportingText}</div>`
-          : ""}
-      </label>
-    `;
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class="rel-radio-group"
-        role="radiogroup"
-        aria-orientation="${this.orientation}"
-      >
-        ${this.options.map((o) => this.renderOption(o))}
-      </div>
-      ${this.error && this.errorMessage
-        ? html`<div class="error-message">${this.errorMessage}</div>`
-        : ""}
-    `;
-  }
-}