Collapsible

1import { html, LitElement, nothing, type PropertyValues } from "lit";
2import { customElement, property, state } from "lit/decorators.js";
3import { TW } from "@/registry/lib/tailwindMixin";
4import { cn } from "@/registry/lib/utils";
5 
6const TwLitElement = TW(LitElement);
7 
8/**
9 * Collapsible component properties and events
10 */
11export interface CollapsibleProperties {
12  open?: boolean;
13  defaultOpen?: boolean;
14  disabled?: boolean;
15}
16 
17export interface CollapsibleTriggerProperties {
18  disabled?: boolean;
19}
20 
21export interface CollapsibleContentProperties {
22  forceMount?: boolean;
23}
24 
25export interface CollapsibleOpenChangeEvent extends CustomEvent {
26  detail: { open: boolean };
27}
28 
29/**
30 * Root collapsible container managing state
31 */
32@customElement("ui-collapsible")
33export class Collapsible extends TwLitElement implements CollapsibleProperties {
34  @property({ type: Boolean, reflect: true }) open = false;
35  @property({ type: Boolean, attribute: "default-open" }) defaultOpen = false;
36  @property({ type: Boolean }) disabled = false;
37 
38  override connectedCallback() {
39    super.connectedCallback();
40 
41    // Initialize from defaultOpen
42    if (this.defaultOpen && !this.hasAttribute("open")) {
43      this.open = this.defaultOpen;
44    }
45 
46    this.addEventListener(
47      "collapsible-trigger-click",
48      this.handleTriggerClick as EventListener,
49    );
50  }
51 
52  override disconnectedCallback() {
53    super.disconnectedCallback();
54    this.removeEventListener(
55      "collapsible-trigger-click",
56      this.handleTriggerClick as EventListener,
57    );
58  }
59 
60  override updated(changedProperties: PropertyValues) {
61    super.updated(changedProperties);
62 
63    if (changedProperties.has("open")) {
64      this.updateContent();
65 
66      this.dispatchEvent(
67        new CustomEvent("open-change", {
68          detail: { open: this.open },
69          bubbles: true,
70          composed: true,
71        }),
72      );
73    }
74  }
75 
76  private handleTriggerClick = () => {
77    if (!this.disabled) {
78      this.open = !this.open;
79    }
80  };
81 
82  private updateContent() {
83    const content = this.querySelector(
84      "ui-collapsible-content",
85    ) as CollapsibleContent | null;
86    if (content) {
87      content._open = this.open;
88    }
89  }
90 
91  /**
92   * Public method to toggle open/closed state
93   */
94  public toggle() {
95    if (!this.disabled) {
96      this.open = !this.open;
97    }
98  }
99 
100  /**
101   * Public method to open the collapsible
102   */
103  public show() {
104    if (!this.disabled) {
105      this.open = true;
106    }
107  }
108 
109// … truncated