@reliability-design/web 1.1.1 → 1.2.0

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

@@ -1,172 +1,228 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export interface RadioOption {
-  value: string;
-  label: string;
-  supportingText?: string;
-  disabled?: boolean;
-  error?: boolean;
-}
-
-@customElement("rel-radio")
-export class RelRadio extends LitElement {
-  @property({ type: Array }) options: RadioOption[] = [];
-
-  @property({ type: String }) name = "radio-group";
-
-  @property({ type: String, reflect: true })
-  selectedValue: string | null = null;
-
-  @property({ type: Boolean })
-  disabled = false;
-
-  @property({ type: String }) value = "";
-
-  checked = false;
-
-  private _onChange: (value: string) => void = () => {};
-  private _onTouched: () => void = () => {};
-
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--rel-fontFamilies-primary);
-    }
-
-    .rel-radio-group {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-space-xs);
-    }
-
-    .rel-radio-option {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-space-3xs);
-      cursor: pointer;
-    }
-
-    .rel-radio-option.disabled {
-      opacity: 0.6;
-      cursor: not-allowed !important;
-    }
-
-    .radio-main {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-2xs);
-    }
-
-    input {
-      position: absolute;
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .radio-custom {
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--rel-text-heading, #2b2b2b);
-      border-radius: 50%;
-      position: relative;
-      flex-shrink: 0;
-    }
-
-    input:focus-visible + .radio-custom {
-      outline: 2px solid var(--rel-border-info, #0091ea);
-      outline-offset: 2px;
-    }
-
-    input:checked + .radio-custom::after {
-      content: "";
-      position: absolute;
-      inset: 4px;
-      background: var(--rel-text-heading, #2b2b2b);
-      border-radius: 50%;
-    }
-
-    .radio-label {
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-text-primary, #333);
-    }
-
-    .radio-supporting {
-      font-size: var(--rel-fontSizes-xs, 10px);
-      margin-left: 28px;
-      color: var(--rel-text-placeholder, #a9a9a9);
-    }
-
-    .error .radio-custom {
-      border-color: var(--rel-colors-red-secondary);
-    }
-
-    .error input:checked + .radio-custom::after {
-      background: var(--rel-colors-red-secondary);
-    }
-  `;
-
-  private onChange(value: string) {
-    if (this.disabled) return;
-
-    this.selectedValue = value;
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: {
-          checked: this.selectedValue === value,
-          value,
-        },
-        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 renderOption(option: RadioOption) {
-    const isChecked = this.selectedValue === option.value;
-    const isDisabled = this.disabled || option.disabled;
-
-    const classes = [
-      "rel-radio-option",
-      isDisabled ? "disabled" : "",
-      option.error ? "error" : "",
-    ]
-      .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 class="radio-label">${option.label}</span>
-        </div>
-
-        ${option.supportingText
-          ? html`<div class="radio-supporting">${option.supportingText}</div>`
-          : ""}
-      </label>
-    `;
-  }
-
-  render() {
-    return html`
-      <div class="rel-radio-group">
-        ${this.options.map((o) => this.renderOption(o))}
-      </div>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+
+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";
+
+  @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 {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .rel-radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-xs);
+    }
+
+    .rel-radio-option {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-3xs);
+      cursor: pointer;
+      padding: 4px 6px;
+      margin: -4px -6px;
+    }
+
+    .rel-radio-option.disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
+    }
+
+    .rel-radio-option:not(.disabled):hover {
+      background: var(--rel-color-bg-hover, #f5f5f5);
+    }
+
+    .rel-radio-option:not(.disabled):hover .radio-custom {
+      border-color: #525252;
+    }
+
+    .rel-radio-option:not(.disabled):hover .radio-label {
+      color: #525252;
+    }
+
+    .rel-radio-option:not(.disabled):hover .radio-supporting {
+      color: #7D7D7D;
+    }
+
+    .rel-radio-option:focus-within:has(input:focus-visible) {
+      outline: 1px solid #000000;
+      outline-offset: 0;
+    }
+
+    .radio-main {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .radio-custom {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--rel-color-text-heading);
+      border-radius: 50%;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    input:checked + .radio-custom::after {
+      content: "";
+      position: absolute;
+      inset: 4px;
+      background: var(--rel-color-text-heading);
+      border-radius: 50%;
+    }
+
+    .radio-label {
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-color-text-primary);
+    }
+
+    .radio-supporting {
+      font-size: var(--rel-fontSizes-xs);
+      margin-left: 28px;
+      color: var(--rel-color-text-placeholder);
+    }
+
+    /* Error state — unchecked only */
+    .rel-radio-option.error-unchecked .radio-custom {
+      border-color: #CE3131;
+    }
+
+    .rel-radio-option.error-unchecked .radio-label {
+      color: #CE3131;
+    }
+
+    .rel-radio-option.error-unchecked .radio-supporting {
+      color: #CE3131;
+    }
+
+    /* Error message below group */
+    .error-message {
+      font-size: var(--rel-fontSizes-xs, 10px);
+      color: #CE3131;
+      margin-top: var(--rel-spacing-space-2xs, 4px);
+    }
+
+    /* Dark mode hover overrides */
+    :host-context([data-theme="dark"]) .rel-radio-option:not(.disabled):hover .radio-custom,
+    :host-context(.dark) .rel-radio-option:not(.disabled):hover .radio-custom {
+      border-color: var(--rel-color-text-secondary, #D4D4D4);
+    }
+
+    :host-context([data-theme="dark"]) .rel-radio-option:not(.disabled):hover .radio-label,
+    :host-context(.dark) .rel-radio-option:not(.disabled):hover .radio-label {
+      color: var(--rel-color-text-secondary, #D4D4D4);
+    }
+
+    :host-context([data-theme="dark"]) .rel-radio-option:not(.disabled):hover .radio-supporting,
+    :host-context(.dark) .rel-radio-option:not(.disabled):hover .radio-supporting {
+      color: var(--rel-color-text-placeholder, #A3A3A3);
+    }
+
+    :host-context([data-theme="dark"]) .rel-radio-option:focus-within:has(input:focus-visible),
+    :host-context(.dark) .rel-radio-option:focus-within:has(input:focus-visible) {
+      outline-color: var(--rel-color-text-primary, #F5F5F5);
+    }
+  `;
+
+  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 renderOption(option: RadioOption) {
+    const isChecked = this.selectedValue === option.value;
+    const isDisabled = this.disabled || option.disabled;
+    const isErrorActive = this.error && !isChecked;
+
+    const classes = [
+      "rel-radio-option",
+      isDisabled ? "disabled" : "",
+      isErrorActive ? "error-unchecked" : "",
+    ]
+      .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 class="radio-label">${option.label}</span>
+        </div>
+
+        ${option.supportingText
+          ? html`<div class="radio-supporting">${option.supportingText}</div>`
+          : ""}
+      </label>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="rel-radio-group">
+        ${this.options.map((o) => this.renderOption(o))}
+      </div>
+      ${this.error && this.errorMessage
+        ? html`<div class="error-message">${this.errorMessage}</div>`
+        : ""}
+    `;
+  }
+}