Accordion

1import { html, LitElement, nothing, type PropertyValues } from "lit";
2import { customElement, property, state } from "lit/decorators.js";
3import { unsafeSVG } from "lit/directives/unsafe-svg.js";
4import { ChevronDown } from "lucide-static";
5import { TW } from "@/registry/lib/tailwindMixin";
6import { cn } from "@/registry/lib/utils";
7 
8const TwLitElement = TW(LitElement);
9 
10/**
11 * Accordion component properties and events
12 */
13export interface AccordionProperties {
14  type?: "single" | "multiple";
15  value?: string;
16  defaultValue?: string;
17  collapsible?: boolean;
18  disabled?: boolean;
19}
20 
21export interface AccordionItemProperties {
22  value: string;
23  disabled?: boolean;
24}
25 
26export interface AccordionTriggerProperties {
27  disabled?: boolean;
28}
29 
30export interface AccordionContentProperties {
31  forceMount?: boolean;
32}
33 
34export interface AccordionValueChangeEvent extends CustomEvent {
35  detail: { value: string | string[] };
36}
37 
38/**
39 * Root accordion container managing state
40 */
41@customElement("ui-accordion")
42export class Accordion extends TwLitElement implements AccordionProperties {
43  @property({ type: String }) type: "single" | "multiple" = "single";
44  @property({ type: String }) value = "";
45  @property({ type: String, attribute: "default-value" }) defaultValue = "";
46  @property({ type: Boolean }) collapsible = false;
47  @property({ type: Boolean }) disabled = false;
48 
49  @state() _openValues: Set<string> = new Set();
50 
51  override connectedCallback() {
52    super.connectedCallback();
53 
54    // Initialize from defaultValue
55    if (!this.value && this.defaultValue) {
56      this.value = this.defaultValue;
57    }
58 
59    this.addEventListener(
60      "accordion-trigger-click",
61      this.handleTriggerClick as EventListener,
62    );
63  }
64 
65  override disconnectedCallback() {
66    super.disconnectedCallback();
67    this.removeEventListener(
68      "accordion-trigger-click",
69      this.handleTriggerClick as EventListener,
70    );
71  }
72 
73  override updated(changedProperties: PropertyValues) {
74    super.updated(changedProperties);
75 
76    if (
77      changedProperties.has("value") ||
78      changedProperties.has("_openValues")
79    ) {
80      this.updateItems();
81      this.dispatchValueChangeEvent();
82    }
83  }
84 
85  private handleTriggerClick = (e: CustomEvent) => {
86    if (this.disabled) return;
87 
88    const clickedValue = e.detail.value;
89 
90    if (this.type === "single") {
91      // Single mode: toggle or switch active item
92      if (this.collapsible && this.value === clickedValue) {
93        this.value = "";
94// … truncated