@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11

package/src/components/switch/switch.ts

@@ -0,0 +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;
+  }
+}