@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.2

package/src/components/radio/radio.ts

@@ -1,142 +1,142 @@
-import {LitElement, html, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-
-@customElement("st-radio")
-export class StRadio extends LitElement {
-  @property({type: String}) value = "";
-  @property({type: Boolean, reflect: true}) checked = false;
-  @property({type: Boolean, reflect: true}) disabled = false;
-
-  @property({attribute: "aria-label"}) ariaLabel = "";
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-block;
-        outline: none;
-        user-select: none;
-      }
-
-      label {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--st-spacing-sm);
-        cursor: pointer;
-        color: var(--st-color-text);
-        font-size: var(--st-font-size-base);
-      }
-
-      /* Hide the native input visually, but keep it accessible for screen readers */
-      input {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-      }
-
-      /* Custom Radio Circle */
-      .control {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.25rem;
-        height: 1.25rem;
-        border: 1px solid var(--st-color-border);
-        border-radius: 50%;
-        background-color: var(--st-color-bg);
-        transition: all 0.2s ease;
-        flex-shrink: 0;
-      }
-
-      /* Inner Dot (Hidden by default) */
-      .control::after {
-        content: "";
-        width: 0.625rem;
-        height: 0.625rem;
-        border-radius: 50%;
-        background-color: var(--st-color-bg); /* Matches the dot color to background initially */
-        transition:
-          transform 0.2s ease,
-          background-color 0.2s ease;
-        transform: scale(0);
-      }
-
-      /* Hover State */
-      label:hover .control {
-        border-color: var(--st-color-primary-hover);
-      }
-
-      /* Focus State (Driven by the hidden input) */
-      input:focus-visible + .control {
-        box-shadow:
-          0 0 0 2px var(--st-color-bg),
-          0 0 0 4px var(--st-color-primary);
-      }
-
-      /* Checked State */
-      :host([checked]) .control {
-        border-color: var(--st-color-primary);
-        background-color: var(--st-color-primary);
-      }
-      :host([checked]) .control::after {
-        background-color: var(--st-white); /* White dot inside the primary circle */
-        transform: scale(1);
-      }
-
-      /* Disabled State */
-      :host([disabled]) {
-        pointer-events: none;
-      }
-      :host([disabled]) label {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    `,
-  ];
-
-  private _handleChange(e: Event) {
-    // Prevent the native change event from leaking out
-    e.stopPropagation();
-
-    if (!this.disabled) {
-      // Dispatch a custom event to tell the parent group this radio was selected
-      this.dispatchEvent(
-        new CustomEvent("st-radio-select", {
-          detail: {value: this.value},
-          bubbles: true,
-          composed: true,
-        }),
-      );
-    }
-  }
-
-  render() {
-    return html`
-      <label>
-        <input
-          type="radio"
-          aria-label=${this.ariaLabel || ""}
-          .value=${this.value}
-          .checked=${this.checked}
-          ?disabled=${this.disabled}
-          @change=${this._handleChange}
-        />
-        <span class="control"></span>
-        <span class="label"><slot></slot></span>
-      </label>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-radio": StRadio;
-  }
-}
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-radio")
+export class StRadio extends LitElement {
+  @property({type: String}) value = "";
+  @property({type: Boolean, reflect: true}) checked = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @property({attribute: "aria-label"}) ariaLabel = "";
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        outline: none;
+        user-select: none;
+      }
+
+      label {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        cursor: pointer;
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-base);
+      }
+
+      /* Hide the native input visually, but keep it accessible for screen readers */
+      input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+
+      /* Custom Radio Circle */
+      .control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        border: 1px solid var(--st-color-border);
+        border-radius: 50%;
+        background-color: var(--st-color-bg);
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+      }
+
+      /* Inner Dot (Hidden by default) */
+      .control::after {
+        content: "";
+        width: 0.625rem;
+        height: 0.625rem;
+        border-radius: 50%;
+        background-color: var(--st-color-bg); /* Matches the dot color to background initially */
+        transition:
+          transform 0.2s ease,
+          background-color 0.2s ease;
+        transform: scale(0);
+      }
+
+      /* Hover State */
+      label:hover .control {
+        border-color: var(--st-color-primary-hover);
+      }
+
+      /* Focus State (Driven by the hidden input) */
+      input:focus-visible + .control {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-primary);
+      }
+
+      /* Checked State */
+      :host([checked]) .control {
+        border-color: var(--st-color-primary);
+        background-color: var(--st-color-primary);
+      }
+      :host([checked]) .control::after {
+        background-color: var(--st-white); /* White dot inside the primary circle */
+        transform: scale(1);
+      }
+
+      /* Disabled State */
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      :host([disabled]) label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    `,
+  ];
+
+  private _handleChange(e: Event) {
+    // Prevent the native change event from leaking out
+    e.stopPropagation();
+
+    if (!this.disabled) {
+      // Dispatch a custom event to tell the parent group this radio was selected
+      this.dispatchEvent(
+        new CustomEvent("st-radio-select", {
+          detail: {value: this.value},
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
+  render() {
+    return html`
+      <label>
+        <input
+          type="radio"
+          aria-label=${this.ariaLabel || ""}
+          .value=${this.value}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+        />
+        <span class="control"></span>
+        <span class="label"><slot></slot></span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-radio": StRadio;
+  }
+}

package/src/components/radio-group/radio-group.ts

@@ -1,157 +1,157 @@
-import {LitElement, html, css, PropertyValues} from "lit";
-import {customElement, property, queryAssignedElements} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-import type {StRadio} from "../radio/radio.js";
-
-@customElement("st-radio-group")
-export class StRadioGroup extends LitElement {
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  @property({type: String, reflect: true}) name = "";
-  @property({type: String}) value = "";
-  @property({type: String}) label = "";
-  @property({attribute: "help-text"}) helpText = "";
-  @property({type: Boolean, reflect: true}) disabled = false;
-  @property({type: Boolean, reflect: true}) invalid = false;
-
-  // Grabs all slotted st-radio components automatically
-  @queryAssignedElements({selector: "st-radio"})
-  private _radios!: StRadio[];
-
-  constructor() {
-    super();
-    this._internals = this.attachInternals();
-
-    // 1. Trigger error state if the user clicks away and the field is invalid
-    this.addEventListener("change", () => {
-      this.invalid = !this._internals.validity.valid;
-    });
-
-    // 2. Trigger error state if the st-form tries to submit and fails
-    this.addEventListener("invalid", () => {
-      this.invalid = true;
-    });
-  }
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-      }
-
-      fieldset {
-        border: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        flex-direction: column;
-        gap: var(--st-spacing-xs);
-      }
-
-      legend {
-        font-size: var(--st-font-size-sm);
-        font-weight: var(--st-font-weight-medium);
-        color: var(--st-color-text);
-        padding: 0;
-        margin-bottom: var(--st-spacing-xs);
-      }
-
-      .options {
-        display: flex;
-        flex-direction: column;
-        gap: var(--st-spacing-sm);
-      }
-
-      /* Horizontal layout modifier */
-      :host([layout="horizontal"]) .options {
-        flex-direction: row;
-        gap: var(--st-spacing-md);
-      }
-
-      .help-text {
-        font-size: var(--st-font-size-xs);
-        color: var(--st-color-text-muted);
-        margin: 0;
-      }
-
-      :host([invalid]) .help-text {
-        color: var(--st-color-error);
-      }
-      :host([invalid]) legend {
-        color: var(--st-color-error);
-      }
-    `,
-  ];
-
-  connectedCallback() {
-    super.connectedCallback();
-    // Listen for selections from child radios
-    this.addEventListener("st-radio-select", this._handleRadioSelect as EventListener);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("st-radio-select", this._handleRadioSelect as EventListener);
-  }
-
-  private _handleRadioSelect(e: CustomEvent<{value: string}>) {
-    if (this.disabled) return;
-    this.value = e.detail.value;
-    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
-  }
-
-  override updated(changedProperties: PropertyValues<this>) {
-    super.updated(changedProperties);
-
-    // When the group's value changes, sync the form and update all child radios
-    if (changedProperties.has("value")) {
-      this._internals.setFormValue(this.value);
-      this._syncRadios();
-    }
-
-    if (changedProperties.has("disabled")) {
-      this._syncRadios();
-    }
-  }
-
-  // Loops through children and unchecks/checks them based on the group's current value
-  private _syncRadios() {
-    if (!this._radios) return;
-
-    this._radios.forEach((radio) => {
-      radio.checked = radio.value === this.value;
-      if (this.disabled) {
-        radio.disabled = true;
-      }
-    });
-  }
-
-  // Fired natively by the browser if the parent <form> is reset
-  formResetCallback() {
-    this.value = "";
-    this._internals.setFormValue("");
-    this._syncRadios();
-  }
-
-  render() {
-    return html`
-      <fieldset ?disabled=${this.disabled}>
-        ${this.label ? html`<legend>${this.label}</legend>` : ""}
-
-        <div class="options">
-          <slot @slotchange=${this._syncRadios}></slot>
-        </div>
-
-        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
-      </fieldset>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-radio-group": StRadioGroup;
-  }
-}
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, queryAssignedElements} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import type {StRadio} from "../radio/radio.js";
+
+@customElement("st-radio-group")
+export class StRadioGroup extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "";
+  @property({type: String}) label = "";
+  @property({attribute: "help-text"}) helpText = "";
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+
+  // Grabs all slotted st-radio components automatically
+  @queryAssignedElements({selector: "st-radio"})
+  private _radios!: StRadio[];
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+
+    // 1. Trigger error state if the user clicks away and the field is invalid
+    this.addEventListener("change", () => {
+      this.invalid = !this._internals.validity.valid;
+    });
+
+    // 2. Trigger error state if the st-form tries to submit and fails
+    this.addEventListener("invalid", () => {
+      this.invalid = true;
+    });
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      fieldset {
+        border: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+      }
+
+      legend {
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        color: var(--st-color-text);
+        padding: 0;
+        margin-bottom: var(--st-spacing-xs);
+      }
+
+      .options {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-sm);
+      }
+
+      /* Horizontal layout modifier */
+      :host([layout="horizontal"]) .options {
+        flex-direction: row;
+        gap: var(--st-spacing-md);
+      }
+
+      .help-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin: 0;
+      }
+
+      :host([invalid]) .help-text {
+        color: var(--st-color-error);
+      }
+      :host([invalid]) legend {
+        color: var(--st-color-error);
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Listen for selections from child radios
+    this.addEventListener("st-radio-select", this._handleRadioSelect as EventListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("st-radio-select", this._handleRadioSelect as EventListener);
+  }
+
+  private _handleRadioSelect(e: CustomEvent<{value: string}>) {
+    if (this.disabled) return;
+    this.value = e.detail.value;
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    // When the group's value changes, sync the form and update all child radios
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(this.value);
+      this._syncRadios();
+    }
+
+    if (changedProperties.has("disabled")) {
+      this._syncRadios();
+    }
+  }
+
+  // Loops through children and unchecks/checks them based on the group's current value
+  private _syncRadios() {
+    if (!this._radios) return;
+
+    this._radios.forEach((radio) => {
+      radio.checked = radio.value === this.value;
+      if (this.disabled) {
+        radio.disabled = true;
+      }
+    });
+  }
+
+  // Fired natively by the browser if the parent <form> is reset
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue("");
+    this._syncRadios();
+  }
+
+  render() {
+    return html`
+      <fieldset ?disabled=${this.disabled}>
+        ${this.label ? html`<legend>${this.label}</legend>` : ""}
+
+        <div class="options">
+          <slot @slotchange=${this._syncRadios}></slot>
+        </div>
+
+        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
+      </fieldset>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-radio-group": StRadioGroup;
+  }
+}