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

package/src/components/switch/switch.ts

@@ -1,181 +1,181 @@
-import {LitElement, html, css, PropertyValues} from "lit";
-import {customElement, property, query} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-
-@customElement("st-switch")
-export class StSwitch extends LitElement {
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  @query("input") private _inputEl!: HTMLInputElement;
-
-  @property({type: String, reflect: true}) name = "";
-  @property({type: String}) value = "on";
-
-  @property({type: Boolean, reflect: true}) checked = false;
-  @property({type: Boolean, reflect: true}) disabled = false;
-  @property({type: Boolean, reflect: true}) required = false;
-
-  @property({attribute: "aria-label"}) ariaLabel = "";
-
-  constructor() {
-    super();
-    this._internals = this.attachInternals();
-  }
-
-  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);
-      }
-
-      /* Visually hide the native input */
-      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;
-      }
-
-      /* The Switch Track (Pill) */
-      .track {
-        display: flex;
-        align-items: center;
-        width: 2.25rem; /* 36px */
-        height: 1.25rem; /* 20px */
-        background-color: var(--st-color-border);
-        border-radius: 999px;
-        padding: 2px;
-        transition:
-          background-color 0.2s ease,
-          box-shadow 0.2s ease;
-        flex-shrink: 0;
-      }
-
-      /* The Switch Thumb (Circle) */
-      .thumb {
-        width: 1rem; /* 16px */
-        height: 1rem; /* 16px */
-        background-color: var(--st-white);
-        border-radius: 50%;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-        transform: translateX(0);
-        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      }
-
-      /* Focus State */
-      input:focus-visible + .track {
-        box-shadow:
-          0 0 0 2px var(--st-color-bg),
-          0 0 0 4px var(--st-color-primary);
-      }
-
-      /* Checked State */
-      :host([checked]) .track {
-        background-color: var(--st-color-primary);
-      }
-
-      :host([checked]) .thumb {
-        /* Move thumb to the right: Track width (36px) - Padding (4px) - Thumb width (16px) = 16px */
-        transform: translateX(16px);
-      }
-
-      /* Hover State (Subtle darkening of the track if unchecked) */
-      label:hover input:not(:checked) + .track {
-        background-color: var(--st-color-text-muted);
-      }
-
-      /* Disabled State */
-      :host([disabled]) {
-        pointer-events: none;
-      }
-
-      :host([disabled]) label {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    `,
-  ];
-
-  override updated(changedProperties: PropertyValues<this>) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("checked") || changedProperties.has("value")) {
-      this._internals.setFormValue(this.checked ? this.value : null);
-      this._syncValidity();
-    }
-
-    if (changedProperties.has("required")) {
-      this._syncValidity();
-    }
-  }
-
-  private _syncValidity() {
-    if (!this._inputEl) return;
-    this._internals.setValidity(
-      this._inputEl.validity,
-      this._inputEl.validationMessage,
-      this._inputEl,
-    );
-  }
-
-  formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue(null);
-    this.updateComplete.then(() => this._syncValidity());
-  }
-
-  private _handleChange(e: Event) {
-    e.stopPropagation();
-
-    if (this.disabled) return;
-
-    this.checked = this._inputEl.checked;
-    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
-  }
-
-  render() {
-    return html`
-      <label>
-        <input
-          type="checkbox"
-          role="switch"
-          aria-label=${this.ariaLabel || ""}
-          .name=${this.name}
-          .value=${this.value}
-          .checked=${this.checked}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          @change=${this._handleChange}
-        />
-        <div class="track">
-          <div class="thumb"></div>
-        </div>
-        <span class="label"><slot></slot></span>
-      </label>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-switch": StSwitch;
-  }
-}
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-switch")
+export class StSwitch extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @query("input") private _inputEl!: HTMLInputElement;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "on";
+
+  @property({type: Boolean, reflect: true}) checked = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+
+  @property({attribute: "aria-label"}) ariaLabel = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  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);
+      }
+
+      /* Visually hide the native input */
+      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;
+      }
+
+      /* The Switch Track (Pill) */
+      .track {
+        display: flex;
+        align-items: center;
+        width: 2.25rem; /* 36px */
+        height: 1.25rem; /* 20px */
+        background-color: var(--st-color-border);
+        border-radius: 999px;
+        padding: 2px;
+        transition:
+          background-color 0.2s ease,
+          box-shadow 0.2s ease;
+        flex-shrink: 0;
+      }
+
+      /* The Switch Thumb (Circle) */
+      .thumb {
+        width: 1rem; /* 16px */
+        height: 1rem; /* 16px */
+        background-color: var(--st-white);
+        border-radius: 50%;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        transform: translateX(0);
+        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      }
+
+      /* Focus State */
+      input:focus-visible + .track {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-primary);
+      }
+
+      /* Checked State */
+      :host([checked]) .track {
+        background-color: var(--st-color-primary);
+      }
+
+      :host([checked]) .thumb {
+        /* Move thumb to the right: Track width (36px) - Padding (4px) - Thumb width (16px) = 16px */
+        transform: translateX(16px);
+      }
+
+      /* Hover State (Subtle darkening of the track if unchecked) */
+      label:hover input:not(:checked) + .track {
+        background-color: var(--st-color-text-muted);
+      }
+
+      /* Disabled State */
+      :host([disabled]) {
+        pointer-events: none;
+      }
+
+      :host([disabled]) label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("checked") || changedProperties.has("value")) {
+      this._internals.setFormValue(this.checked ? this.value : null);
+      this._syncValidity();
+    }
+
+    if (changedProperties.has("required")) {
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    if (!this._inputEl) return;
+    this._internals.setValidity(
+      this._inputEl.validity,
+      this._inputEl.validationMessage,
+      this._inputEl,
+    );
+  }
+
+  formResetCallback() {
+    this.checked = false;
+    this._internals.setFormValue(null);
+    this.updateComplete.then(() => this._syncValidity());
+  }
+
+  private _handleChange(e: Event) {
+    e.stopPropagation();
+
+    if (this.disabled) return;
+
+    this.checked = this._inputEl.checked;
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  render() {
+    return html`
+      <label>
+        <input
+          type="checkbox"
+          role="switch"
+          aria-label=${this.ariaLabel || ""}
+          .name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @change=${this._handleChange}
+        />
+        <div class="track">
+          <div class="thumb"></div>
+        </div>
+        <span class="label"><slot></slot></span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-switch": StSwitch;
+  }
+}