@duskmoon-dev/el-accordion 0.4.0

package/dist/cjs/index.js

@@ -0,0 +1,310 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  register: () => register,
+  ElDmAccordionItem: () => ElDmAccordionItem,
+  ElDmAccordion: () => ElDmAccordion
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/el-dm-accordion.ts
+var import_el_core = require("@duskmoon-dev/el-core");
+var styles = import_el_core.css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--color-outline, #e0e0e0);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  ::slotted(el-dm-accordion-item:not(:last-child)) {
+    border-bottom: 1px solid var(--color-outline, #e0e0e0);
+  }
+`;
+
+class ElDmAccordion extends import_el_core.BaseElement {
+  static properties = {
+    multiple: { type: Boolean, reflect: true },
+    value: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("accordion-item-toggle", this._handleItemToggle);
+    this._syncItemsWithValue();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.removeEventListener("accordion-item-toggle", this._handleItemToggle);
+  }
+  getOpenItems() {
+    return this.value ? this.value.split(",").filter(Boolean) : [];
+  }
+  setOpenItems(ids) {
+    this.value = ids.join(",");
+    this._syncItemsWithValue();
+    this.emit("change", { value: this.value, openItems: ids });
+  }
+  open(itemId) {
+    const openItems = this.getOpenItems();
+    if (!openItems.includes(itemId)) {
+      if (this.multiple) {
+        this.setOpenItems([...openItems, itemId]);
+      } else {
+        this.setOpenItems([itemId]);
+      }
+    }
+  }
+  close(itemId) {
+    const openItems = this.getOpenItems();
+    this.setOpenItems(openItems.filter((id) => id !== itemId));
+  }
+  toggle(itemId) {
+    const openItems = this.getOpenItems();
+    if (openItems.includes(itemId)) {
+      this.close(itemId);
+    } else {
+      this.open(itemId);
+    }
+  }
+  _handleItemToggle = (event) => {
+    const { itemId, open } = event.detail;
+    if (open) {
+      this.open(itemId);
+    } else {
+      this.close(itemId);
+    }
+  };
+  _syncItemsWithValue() {
+    const openItems = this.getOpenItems();
+    const items = this.querySelectorAll("el-dm-accordion-item");
+    items.forEach((item) => {
+      const accordionItem = item;
+      const itemValue = accordionItem.value;
+      if (itemValue) {
+        accordionItem.open = openItems.includes(itemValue);
+      }
+    });
+  }
+  render() {
+    return `
+      <div class="accordion" part="container" role="presentation">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+var itemStyles = import_el_core.css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .accordion-item {
+    background-color: var(--color-surface, #ffffff);
+  }
+
+  .accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 1rem 1.25rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--color-on-surface, #1a1a1a);
+    text-align: left;
+    transition: background-color 150ms ease;
+  }
+
+  .accordion-header:hover:not(:disabled) {
+    background-color: var(--color-surface-variant, #f5f5f5);
+  }
+
+  .accordion-header:focus-visible {
+    outline: 2px solid var(--color-primary, #6366f1);
+    outline-offset: -2px;
+  }
+
+  .accordion-header:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .header-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .chevron {
+    width: 1.25rem;
+    height: 1.25rem;
+    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    flex-shrink: 0;
+    margin-left: 0.75rem;
+  }
+
+  :host([open]) .chevron {
+    transform: rotate(180deg);
+  }
+
+  .content-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :host([open]) .content-wrapper {
+    grid-template-rows: 1fr;
+  }
+
+  .content-inner {
+    overflow: hidden;
+  }
+
+  .accordion-content {
+    padding: 0 1.25rem 1rem;
+    color: var(--color-on-surface-variant, #4a4a4a);
+  }
+`;
+
+class ElDmAccordionItem extends import_el_core.BaseElement {
+  static properties = {
+    value: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    open: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.attachStyles(itemStyles);
+  }
+  _handleClick() {
+    if (this.disabled)
+      return;
+    this.dispatchEvent(new CustomEvent("accordion-item-toggle", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        itemId: this.value,
+        open: !this.open
+      }
+    }));
+  }
+  _handleKeyDown(event) {
+    if (this.disabled)
+      return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this._handleClick();
+    }
+  }
+  toggle() {
+    if (!this.disabled) {
+      this._handleClick();
+    }
+  }
+  render() {
+    const chevronSvg = `
+      <svg class="chevron" part="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    `;
+    return `
+      <div class="accordion-item">
+        <button
+          class="accordion-header"
+          part="header"
+          type="button"
+          aria-expanded="${this.open ? "true" : "false"}"
+          aria-controls="content-${this.value || "item"}"
+          ${this.disabled ? "disabled" : ""}
+        >
+          <span class="header-content">
+            <slot name="header"></slot>
+          </span>
+          ${chevronSvg}
+        </button>
+        <div class="content-wrapper">
+          <div class="content-inner">
+            <div
+              class="accordion-content"
+              part="content"
+              id="content-${this.value || "item"}"
+              role="region"
+              aria-hidden="${this.open ? "false" : "true"}"
+            >
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  update() {
+    super.update();
+    const header = this.shadowRoot?.querySelector(".accordion-header");
+    header?.addEventListener("click", this._handleClick.bind(this));
+    header?.addEventListener("keydown", this._handleKeyDown.bind(this));
+  }
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-accordion")) {
+    customElements.define("el-dm-accordion", ElDmAccordion);
+  }
+  if (!customElements.get("el-dm-accordion-item")) {
+    customElements.define("el-dm-accordion-item", ElDmAccordionItem);
+  }
+}
+
+//# debugId=0BE2AEAE9A8FF7C564756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": ["../../src/el-dm-accordion.ts", "../../src/index.ts"],
+  "sourcesContent": [
+    "/**\n * DuskMoon Accordion Element\n *\n * An expandable/collapsible panels component for organizing content.\n *\n * @element el-dm-accordion\n *\n * @attr {boolean} multiple - Allow multiple panels to be open simultaneously\n * @attr {string} value - Comma-separated list of open item IDs\n *\n * @slot - Default slot for accordion items (el-dm-accordion-item)\n *\n * @csspart container - The accordion container\n *\n * @fires change - Fired when expansion state changes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nconst styles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  .accordion {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--color-outline, #e0e0e0);\n    border-radius: 0.5rem;\n    overflow: hidden;\n  }\n\n  ::slotted(el-dm-accordion-item:not(:last-child)) {\n    border-bottom: 1px solid var(--color-outline, #e0e0e0);\n  }\n`;\n\nexport class ElDmAccordion extends BaseElement {\n  static properties = {\n    multiple: { type: Boolean, reflect: true },\n    value: { type: String, reflect: true },\n  };\n\n  /** Allow multiple panels to be open */\n  declare multiple: boolean;\n\n  /** Comma-separated list of open item IDs */\n  declare value: string;\n\n  constructor() {\n    super();\n    this.attachStyles(styles);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('accordion-item-toggle', this._handleItemToggle as EventListener);\n    // Initialize items based on value\n    this._syncItemsWithValue();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.removeEventListener('accordion-item-toggle', this._handleItemToggle as EventListener);\n  }\n\n  /**\n   * Get array of open item IDs\n   */\n  getOpenItems(): string[] {\n    return this.value ? this.value.split(',').filter(Boolean) : [];\n  }\n\n  /**\n   * Set open items by ID\n   */\n  setOpenItems(ids: string[]): void {\n    this.value = ids.join(',');\n    this._syncItemsWithValue();\n    this.emit('change', { value: this.value, openItems: ids });\n  }\n\n  /**\n   * Open a specific item by ID\n   */\n  open(itemId: string): void {\n    const openItems = this.getOpenItems();\n    if (!openItems.includes(itemId)) {\n      if (this.multiple) {\n        this.setOpenItems([...openItems, itemId]);\n      } else {\n        this.setOpenItems([itemId]);\n      }\n    }\n  }\n\n  /**\n   * Close a specific item by ID\n   */\n  close(itemId: string): void {\n    const openItems = this.getOpenItems();\n    this.setOpenItems(openItems.filter((id) => id !== itemId));\n  }\n\n  /**\n   * Toggle a specific item by ID\n   */\n  toggle(itemId: string): void {\n    const openItems = this.getOpenItems();\n    if (openItems.includes(itemId)) {\n      this.close(itemId);\n    } else {\n      this.open(itemId);\n    }\n  }\n\n  /**\n   * Handle item toggle events from accordion items\n   */\n  private _handleItemToggle = (event: CustomEvent): void => {\n    const { itemId, open } = event.detail;\n    if (open) {\n      this.open(itemId);\n    } else {\n      this.close(itemId);\n    }\n  };\n\n  /**\n   * Sync accordion item states with current value\n   */\n  private _syncItemsWithValue(): void {\n    const openItems = this.getOpenItems();\n    const items = this.querySelectorAll('el-dm-accordion-item');\n    items.forEach((item) => {\n      const accordionItem = item as ElDmAccordionItem;\n      const itemValue = accordionItem.value;\n      if (itemValue) {\n        accordionItem.open = openItems.includes(itemValue);\n      }\n    });\n  }\n\n  render(): string {\n    return `\n      <div class=\"accordion\" part=\"container\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * DuskMoon Accordion Item Element\n *\n * An individual expandable panel within an accordion.\n *\n * @element el-dm-accordion-item\n *\n * @attr {string} value - Unique identifier for this item\n * @attr {boolean} disabled - Whether the item is disabled\n * @attr {boolean} open - Whether the item is expanded\n *\n * @slot header - Content for the header/trigger area\n * @slot - Default slot for the expandable content\n *\n * @csspart header - The header button\n * @csspart icon - The chevron icon\n * @csspart content - The content container\n */\n\nconst itemStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  .accordion-item {\n    background-color: var(--color-surface, #ffffff);\n  }\n\n  .accordion-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding: 1rem 1.25rem;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: 1rem;\n    font-weight: 500;\n    color: var(--color-on-surface, #1a1a1a);\n    text-align: left;\n    transition: background-color 150ms ease;\n  }\n\n  .accordion-header:hover:not(:disabled) {\n    background-color: var(--color-surface-variant, #f5f5f5);\n  }\n\n  .accordion-header:focus-visible {\n    outline: 2px solid var(--color-primary, #6366f1);\n    outline-offset: -2px;\n  }\n\n  .accordion-header:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .header-content {\n    flex: 1;\n    display: flex;\n    align-items: center;\n  }\n\n  .chevron {\n    width: 1.25rem;\n    height: 1.25rem;\n    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n    flex-shrink: 0;\n    margin-left: 0.75rem;\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  :host([open]) .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    overflow: hidden;\n  }\n\n  .accordion-content {\n    padding: 0 1.25rem 1rem;\n    color: var(--color-on-surface-variant, #4a4a4a);\n  }\n`;\n\nexport class ElDmAccordionItem extends BaseElement {\n  static properties = {\n    value: { type: String, reflect: true },\n    disabled: { type: Boolean, reflect: true },\n    open: { type: Boolean, reflect: true },\n  };\n\n  /** Unique identifier for this item */\n  declare value: string;\n\n  /** Whether the item is disabled */\n  declare disabled: boolean;\n\n  /** Whether the item is expanded */\n  declare open: boolean;\n\n  constructor() {\n    super();\n    this.attachStyles(itemStyles);\n  }\n\n  /**\n   * Handle header click\n   */\n  private _handleClick(): void {\n    if (this.disabled) return;\n\n    // Dispatch toggle event to parent accordion\n    this.dispatchEvent(\n      new CustomEvent('accordion-item-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          itemId: this.value,\n          open: !this.open,\n        },\n      }),\n    );\n  }\n\n  /**\n   * Handle keyboard events\n   */\n  private _handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this._handleClick();\n    }\n  }\n\n  /**\n   * Toggle the item open/closed\n   */\n  toggle(): void {\n    if (!this.disabled) {\n      this._handleClick();\n    }\n  }\n\n  render(): string {\n    const chevronSvg = `\n      <svg class=\"chevron\" part=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    `;\n\n    return `\n      <div class=\"accordion-item\">\n        <button\n          class=\"accordion-header\"\n          part=\"header\"\n          type=\"button\"\n          aria-expanded=\"${this.open ? 'true' : 'false'}\"\n          aria-controls=\"content-${this.value || 'item'}\"\n          ${this.disabled ? 'disabled' : ''}\n        >\n          <span class=\"header-content\">\n            <slot name=\"header\"></slot>\n          </span>\n          ${chevronSvg}\n        </button>\n        <div class=\"content-wrapper\">\n          <div class=\"content-inner\">\n            <div\n              class=\"accordion-content\"\n              part=\"content\"\n              id=\"content-${this.value || 'item'}\"\n              role=\"region\"\n              aria-hidden=\"${this.open ? 'false' : 'true'}\"\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  update(): void {\n    super.update();\n    const header = this.shadowRoot?.querySelector('.accordion-header');\n    header?.addEventListener('click', this._handleClick.bind(this));\n    header?.addEventListener('keydown', this._handleKeyDown.bind(this) as EventListener);\n  }\n}\n",
+    "/**\n * @duskmoon-dev/el-accordion\n *\n * DuskMoon Accordion custom element for expandable/collapsible panels\n */\n\nimport { ElDmAccordion, ElDmAccordionItem } from './el-dm-accordion.js';\n\nexport { ElDmAccordion, ElDmAccordionItem };\n\n/**\n * Register the el-dm-accordion and el-dm-accordion-item custom elements\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-accordion';\n * register();\n * ```\n */\nexport function register(): void {\n  if (!customElements.get('el-dm-accordion')) {\n    customElements.define('el-dm-accordion', ElDmAccordion);\n  }\n  if (!customElements.get('el-dm-accordion-item')) {\n    customElements.define('el-dm-accordion-item', ElDmAccordionItem);\n  }\n}\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBiC,IAAjC;AAEA,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBR,MAAM,sBAAsB,2BAAY;AAAA,SACtC,aAAa;AAAA,IAClB,UAAU,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IACzC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,EACvC;AAAA,EAQA,WAAW,GAAG;AAAA,IACZ,MAAM;AAAA,IACN,KAAK,aAAa,MAAM;AAAA;AAAA,EAG1B,iBAAiB,GAAS;AAAA,IACxB,MAAM,kBAAkB;AAAA,IACxB,KAAK,iBAAiB,yBAAyB,KAAK,iBAAkC;AAAA,IAEtF,KAAK,oBAAoB;AAAA;AAAA,EAG3B,oBAAoB,GAAS;AAAA,IAC3B,MAAM,uBAAuB;AAAA,IAC7B,KAAK,oBAAoB,yBAAyB,KAAK,iBAAkC;AAAA;AAAA,EAM3F,YAAY,GAAa;AAAA,IACvB,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,GAAG,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA;AAAA,EAM/D,YAAY,CAAC,KAAqB;AAAA,IAChC,KAAK,QAAQ,IAAI,KAAK,GAAG;AAAA,IACzB,KAAK,oBAAoB;AAAA,IACzB,KAAK,KAAK,UAAU,EAAE,OAAO,KAAK,OAAO,WAAW,IAAI,CAAC;AAAA;AAAA,EAM3D,IAAI,CAAC,QAAsB;AAAA,IACzB,MAAM,YAAY,KAAK,aAAa;AAAA,IACpC,IAAI,CAAC,UAAU,SAAS,MAAM,GAAG;AAAA,MAC/B,IAAI,KAAK,UAAU;AAAA,QACjB,KAAK,aAAa,CAAC,GAAG,WAAW,MAAM,CAAC;AAAA,MAC1C,EAAO;AAAA,QACL,KAAK,aAAa,CAAC,MAAM,CAAC;AAAA;AAAA,IAE9B;AAAA;AAAA,EAMF,KAAK,CAAC,QAAsB;AAAA,IAC1B,MAAM,YAAY,KAAK,aAAa;AAAA,IACpC,KAAK,aAAa,UAAU,OAAO,CAAC,OAAO,OAAO,MAAM,CAAC;AAAA;AAAA,EAM3D,MAAM,CAAC,QAAsB;AAAA,IAC3B,MAAM,YAAY,KAAK,aAAa;AAAA,IACpC,IAAI,UAAU,SAAS,MAAM,GAAG;AAAA,MAC9B,KAAK,MAAM,MAAM;AAAA,IACnB,EAAO;AAAA,MACL,KAAK,KAAK,MAAM;AAAA;AAAA;AAAA,EAOZ,oBAAoB,CAAC,UAA6B;AAAA,IACxD,QAAQ,QAAQ,SAAS,MAAM;AAAA,IAC/B,IAAI,MAAM;AAAA,MACR,KAAK,KAAK,MAAM;AAAA,IAClB,EAAO;AAAA,MACL,KAAK,MAAM,MAAM;AAAA;AAAA;AAAA,EAOb,mBAAmB,GAAS;AAAA,IAClC,MAAM,YAAY,KAAK,aAAa;AAAA,IACpC,MAAM,QAAQ,KAAK,iBAAiB,sBAAsB;AAAA,IAC1D,MAAM,QAAQ,CAAC,SAAS;AAAA,MACtB,MAAM,gBAAgB;AAAA,MACtB,MAAM,YAAY,cAAc;AAAA,MAChC,IAAI,WAAW;AAAA,QACb,cAAc,OAAO,UAAU,SAAS,SAAS;AAAA,MACnD;AAAA,KACD;AAAA;AAAA,EAGH,MAAM,GAAW;AAAA,IACf,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMX;AAqBA,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkFZ,MAAM,0BAA0B,2BAAY;AAAA,SAC1C,aAAa;AAAA,IAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,IACrC,UAAU,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IACzC,MAAM,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,EACvC;AAAA,EAWA,WAAW,GAAG;AAAA,IACZ,MAAM;AAAA,IACN,KAAK,aAAa,UAAU;AAAA;AAAA,EAMtB,YAAY,GAAS;AAAA,IAC3B,IAAI,KAAK;AAAA,MAAU;AAAA,IAGnB,KAAK,cACH,IAAI,YAAY,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,QAAQ,KAAK;AAAA,QACb,MAAM,CAAC,KAAK;AAAA,MACd;AAAA,IACF,CAAC,CACH;AAAA;AAAA,EAMM,cAAc,CAAC,OAA4B;AAAA,IACjD,IAAI,KAAK;AAAA,MAAU;AAAA,IAEnB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAAA,MAC9C,MAAM,eAAe;AAAA,MACrB,KAAK,aAAa;AAAA,IACpB;AAAA;AAAA,EAMF,MAAM,GAAS;AAAA,IACb,IAAI,CAAC,KAAK,UAAU;AAAA,MAClB,KAAK,aAAa;AAAA,IACpB;AAAA;AAAA,EAGF,MAAM,GAAW;AAAA,IACf,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAMgB,KAAK,OAAO,SAAS;AAAA,mCACb,KAAK,SAAS;AAAA,YACrC,KAAK,WAAW,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,YAK7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOgB,KAAK,SAAS;AAAA;AAAA,6BAEb,KAAK,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUjD,MAAM,GAAS;AAAA,IACb,MAAM,OAAO;AAAA,IACb,MAAM,SAAS,KAAK,YAAY,cAAc,mBAAmB;AAAA,IACjE,QAAQ,iBAAiB,SAAS,KAAK,aAAa,KAAK,IAAI,CAAC;AAAA,IAC9D,QAAQ,iBAAiB,WAAW,KAAK,eAAe,KAAK,IAAI,CAAkB;AAAA;AAEvF;;;ACxVO,SAAS,QAAQ,GAAS;AAAA,EAC/B,IAAI,CAAC,eAAe,IAAI,iBAAiB,GAAG;AAAA,IAC1C,eAAe,OAAO,mBAAmB,aAAa;AAAA,EACxD;AAAA,EACA,IAAI,CAAC,eAAe,IAAI,sBAAsB,GAAG;AAAA,IAC/C,eAAe,OAAO,wBAAwB,iBAAiB;AAAA,EACjE;AAAA;",
+  "debugId": "0BE2AEAE9A8FF7C564756E2164756E21",
+  "names": []
+}

package/dist/cjs/register.js

@@ -0,0 +1,313 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  register: () => register,
+  ElDmAccordionItem: () => ElDmAccordionItem,
+  ElDmAccordion: () => ElDmAccordion
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/el-dm-accordion.ts
+var import_el_core = require("@duskmoon-dev/el-core");
+var styles = import_el_core.css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--color-outline, #e0e0e0);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  ::slotted(el-dm-accordion-item:not(:last-child)) {
+    border-bottom: 1px solid var(--color-outline, #e0e0e0);
+  }
+`;
+
+class ElDmAccordion extends import_el_core.BaseElement {
+  static properties = {
+    multiple: { type: Boolean, reflect: true },
+    value: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("accordion-item-toggle", this._handleItemToggle);
+    this._syncItemsWithValue();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.removeEventListener("accordion-item-toggle", this._handleItemToggle);
+  }
+  getOpenItems() {
+    return this.value ? this.value.split(",").filter(Boolean) : [];
+  }
+  setOpenItems(ids) {
+    this.value = ids.join(",");
+    this._syncItemsWithValue();
+    this.emit("change", { value: this.value, openItems: ids });
+  }
+  open(itemId) {
+    const openItems = this.getOpenItems();
+    if (!openItems.includes(itemId)) {
+      if (this.multiple) {
+        this.setOpenItems([...openItems, itemId]);
+      } else {
+        this.setOpenItems([itemId]);
+      }
+    }
+  }
+  close(itemId) {
+    const openItems = this.getOpenItems();
+    this.setOpenItems(openItems.filter((id) => id !== itemId));
+  }
+  toggle(itemId) {
+    const openItems = this.getOpenItems();
+    if (openItems.includes(itemId)) {
+      this.close(itemId);
+    } else {
+      this.open(itemId);
+    }
+  }
+  _handleItemToggle = (event) => {
+    const { itemId, open } = event.detail;
+    if (open) {
+      this.open(itemId);
+    } else {
+      this.close(itemId);
+    }
+  };
+  _syncItemsWithValue() {
+    const openItems = this.getOpenItems();
+    const items = this.querySelectorAll("el-dm-accordion-item");
+    items.forEach((item) => {
+      const accordionItem = item;
+      const itemValue = accordionItem.value;
+      if (itemValue) {
+        accordionItem.open = openItems.includes(itemValue);
+      }
+    });
+  }
+  render() {
+    return `
+      <div class="accordion" part="container" role="presentation">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+var itemStyles = import_el_core.css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .accordion-item {
+    background-color: var(--color-surface, #ffffff);
+  }
+
+  .accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 1rem 1.25rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--color-on-surface, #1a1a1a);
+    text-align: left;
+    transition: background-color 150ms ease;
+  }
+
+  .accordion-header:hover:not(:disabled) {
+    background-color: var(--color-surface-variant, #f5f5f5);
+  }
+
+  .accordion-header:focus-visible {
+    outline: 2px solid var(--color-primary, #6366f1);
+    outline-offset: -2px;
+  }
+
+  .accordion-header:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .header-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .chevron {
+    width: 1.25rem;
+    height: 1.25rem;
+    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    flex-shrink: 0;
+    margin-left: 0.75rem;
+  }
+
+  :host([open]) .chevron {
+    transform: rotate(180deg);
+  }
+
+  .content-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :host([open]) .content-wrapper {
+    grid-template-rows: 1fr;
+  }
+
+  .content-inner {
+    overflow: hidden;
+  }
+
+  .accordion-content {
+    padding: 0 1.25rem 1rem;
+    color: var(--color-on-surface-variant, #4a4a4a);
+  }
+`;
+
+class ElDmAccordionItem extends import_el_core.BaseElement {
+  static properties = {
+    value: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    open: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.attachStyles(itemStyles);
+  }
+  _handleClick() {
+    if (this.disabled)
+      return;
+    this.dispatchEvent(new CustomEvent("accordion-item-toggle", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        itemId: this.value,
+        open: !this.open
+      }
+    }));
+  }
+  _handleKeyDown(event) {
+    if (this.disabled)
+      return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this._handleClick();
+    }
+  }
+  toggle() {
+    if (!this.disabled) {
+      this._handleClick();
+    }
+  }
+  render() {
+    const chevronSvg = `
+      <svg class="chevron" part="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    `;
+    return `
+      <div class="accordion-item">
+        <button
+          class="accordion-header"
+          part="header"
+          type="button"
+          aria-expanded="${this.open ? "true" : "false"}"
+          aria-controls="content-${this.value || "item"}"
+          ${this.disabled ? "disabled" : ""}
+        >
+          <span class="header-content">
+            <slot name="header"></slot>
+          </span>
+          ${chevronSvg}
+        </button>
+        <div class="content-wrapper">
+          <div class="content-inner">
+            <div
+              class="accordion-content"
+              part="content"
+              id="content-${this.value || "item"}"
+              role="region"
+              aria-hidden="${this.open ? "false" : "true"}"
+            >
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  update() {
+    super.update();
+    const header = this.shadowRoot?.querySelector(".accordion-header");
+    header?.addEventListener("click", this._handleClick.bind(this));
+    header?.addEventListener("keydown", this._handleKeyDown.bind(this));
+  }
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-accordion")) {
+    customElements.define("el-dm-accordion", ElDmAccordion);
+  }
+  if (!customElements.get("el-dm-accordion-item")) {
+    customElements.define("el-dm-accordion-item", ElDmAccordionItem);
+  }
+}
+
+// src/register.ts
+register();
+
+//# debugId=20C6F98495A8D02964756E2164756E21
+//# sourceMappingURL=register.js.map