Switch

1import { html, LitElement, nothing, type PropertyValues } from "lit";
2import { customElement, property, state } from "lit/decorators.js";
3import { TW } from "@/registry/lib/tailwindMixin";
4 
5export interface SwitchChangeEvent extends CustomEvent {
6  detail: { checked: boolean };
7}
8 
9export interface SwitchProperties {
10  disabled?: boolean;
11  required?: boolean;
12  name?: string;
13  value?: string;
14  checked?: boolean;
15  defaultChecked?: boolean;
16}
17 
18@customElement("ui-switch")
19export class Switch extends TW(LitElement) implements SwitchProperties {
20  static formAssociated = true;
21  private internals: ElementInternals;
22 
23  @property({ type: Boolean }) disabled = false;
24  @property({ type: Boolean }) required = false;
25  @property({ type: String }) name = "";
26  @property({ type: String }) value = "on";
27 
28  @property({ type: Boolean }) checked: boolean | undefined = undefined;
29  @property({ type: Boolean, attribute: "default-checked" })
30  defaultChecked = false;
31 
32  @property({ type: String, attribute: "aria-label" }) accessor ariaLabel:
33    | string
34    | null = null;
35  @property({ type: String, attribute: "aria-labelledby" })
36  accessor ariaLabelledby: string | null = null;
37  @property({ type: String, attribute: "aria-describedby" })
38  accessor ariaDescribedby: string | null = null;
39 
40  @state() private _checked = false;
41 
42  private _labelClickHandler = (e: Event) => {
43    const label = e.currentTarget as HTMLLabelElement;
44    if (label.htmlFor === this.id && !this.disabled) {
45      e.preventDefault();
46      this.handleClick();
47    }
48  };
49 
50  constructor() {
51    super();
52    this.internals = this.attachInternals();
53  }
54 
55  override connectedCallback() {
56    super.connectedCallback();
57    if (this.checked === undefined) {
58      this._checked = this.defaultChecked;
59    }
60    this._setupLabelDelegation();
61  }
62 
63  override disconnectedCallback() {
64    super.disconnectedCallback();
65    this._cleanupLabelDelegation();
66  }
67 
68  private _setupLabelDelegation() {
69    if (!this.id) return;
70    const root = this.getRootNode() as Document | ShadowRoot;
71    const labels = root.querySelectorAll(
72      `label[for="${this.id}"]`,
73    ) as NodeListOf<HTMLLabelElement>;
74    labels.forEach((label) => {
75      label.addEventListener("click", this._labelClickHandler);
76    });
77  }
78 
79  private _cleanupLabelDelegation() {
80    if (!this.id) return;
81    const root = this.getRootNode() as Document | ShadowRoot;
82    const labels = root.querySelectorAll(
83      `label[for="${this.id}"]`,
84// … truncated