@redvars/peacock 3.8.1 → 3.8.2

package/dist/accordion-item.js

@@ -0,0 +1,338 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b, c as __classPrivateFieldGet } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './query-CHb9Ft_d.js';
+import { e as e$1 } from './class-map-DG7CA1et.js';
+import './base-Cl6v8-BZ.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.expansion-panel {
+  border: var(--_accordion-item-border, 1px solid var(--color-outline-variant));
+  border-radius: var(--shape-corner-medium);
+  background-color: var(--_accordion-item-background, var(--color-surface-container-low));
+  overflow: hidden;
+  transition: background-color var(--duration-medium1) var(--easing-standard), border-color var(--duration-medium1) var(--easing-standard);
+}
+.expansion-panel .header-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 3rem;
+  padding: 0 var(--spacing-300);
+  gap: var(--spacing-200);
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: start;
+  color: var(--color-on-surface);
+  overflow: hidden;
+}
+.expansion-panel .header-button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-on-surface);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-short4) var(--easing-standard);
+}
+.expansion-panel .header-button:not(:disabled):hover::before {
+  opacity: 0.08;
+}
+.expansion-panel .header-button:focus-visible {
+  outline: none;
+  outline: 2px solid var(--color-black);
+}
+.expansion-panel .header-button:focus-visible::before {
+  opacity: 0.12;
+}
+.expansion-panel .header-label {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  padding: var(--spacing-150) 0;
+  min-width: 0;
+}
+.expansion-panel .panel-title {
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--color-on-surface);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.expansion-panel .panel-description {
+  font-family: var(--typography-body-small-font-family) !important;
+  font-size: var(--typography-body-small-font-size) !important;
+  font-weight: var(--typography-body-small-font-weight) !important;
+  line-height: var(--typography-body-small-line-height) !important;
+  letter-spacing: var(--typography-body-small-letter-spacing) !important;
+  color: var(--color-on-surface-variant);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.expansion-panel .panel-description[hidden] {
+  display: none;
+}
+.expansion-panel ::slotted([slot=header-actions]) {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--spacing-100);
+}
+.expansion-panel .toggle-icon {
+  --icon-size: 1.5rem;
+  --icon-color: var(--color-on-surface-variant);
+  flex-shrink: 0;
+  transition: transform var(--duration-medium1) var(--easing-standard);
+}
+.expansion-panel .panel-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-medium1) var(--easing-standard);
+}
+.expansion-panel .content-inner {
+  overflow: hidden;
+  min-height: 0;
+  font-family: var(--typography-body-medium-font-family) !important;
+  font-size: var(--typography-body-medium-font-size) !important;
+  font-weight: var(--typography-body-medium-font-weight) !important;
+  line-height: var(--typography-body-medium-line-height) !important;
+  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+  color: var(--color-on-surface-variant);
+}
+.expansion-panel.disabled {
+  background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
+  border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
+}
+.expansion-panel.disabled .header-button {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.38;
+}
+.expansion-panel.open {
+  background-color: var(--color-surface-container);
+  border-color: transparent;
+}
+.expansion-panel.open .panel-content {
+  grid-template-rows: 1fr;
+  border-block-start: 1px solid var(--color-outline-variant);
+}
+.expansion-panel.open .content-inner {
+  padding: var(--spacing-200) var(--spacing-300);
+}
+.expansion-panel.open .toggle-icon {
+  transform: rotate(180deg);
+}
+.expansion-panel.disabled {
+  background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
+  border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
+}
+
+:host([toggle-position=before]) .header-button {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+:host([toggle-position=before]) .header-label {
+  flex: 1;
+}`;
+
+var _AccordionItem_id;
+var AccordionItem_1;
+/**
+ * @label Accordion Item
+ * @tag wc-accordion-item
+ * @rawTag accordion-item
+ * @summary An expansion panel with a header that reveals or hides associated content.
+ *
+ * @slot - The body content revealed when the panel is expanded.
+ * @slot heading - The panel title. Renders as `body-large` text.
+ * @slot description - Optional subtitle rendered below the title. Renders as `body-small` text.
+ * @slot header-actions - Actions (e.g. icon buttons) placed at the trailing end of the header, before the toggle icon.
+ *
+ * @part header - The header `<button>` element.
+ * @part title - The title text container.
+ * @part description - The description text container.
+ * @part content - The expandable content region wrapper.
+ *
+ * @fires {CustomEvent<{ open: boolean }>} accordion-item:toggle - Fired when the panel is expanded or collapsed.
+ *
+ * @example
+ * ```html
+ * <wc-accordion-item>
+ *   <span slot="heading">Personal information</span>
+ *   <span slot="description">Fill in your details</span>
+ *   <p>Content goes here.</p>
+ * </wc-accordion-item>
+ * ```
+ * @tags display
+ */
+let AccordionItem = AccordionItem_1 = class AccordionItem extends i$1 {
+    constructor() {
+        super(...arguments);
+        _AccordionItem_id.set(this, crypto.randomUUID());
+        /**
+         * Whether the user cannot interact with the panel.
+         */
+        this.disabled = false;
+        /**
+         * Whether the panel is expanded.
+         */
+        this.open = false;
+        /**
+         * Whether to hide the expand/collapse toggle indicator icon.
+         */
+        this.hideToggle = false;
+        /**
+         * Position of the toggle icon relative to the panel title.
+         * `'after'` places it at the trailing end (default, matches M3).
+         * `'before'` places it at the leading start.
+         */
+        this.togglePosition = 'after';
+        /** True when the `description` slot contains at least one non-empty node. */
+        this._hasDescriptionSlot = false;
+        /** True when the `heading` slot contains at least one non-empty node. */
+        this._hasHeadingSlot = false;
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    _handleToggle() {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+        this.dispatchEvent(new CustomEvent('accordion-item:toggle', {
+            bubbles: true,
+            composed: true,
+            detail: { open: this.open },
+        }));
+    }
+    static _onSlotChange(e, setter) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes({ flatten: true });
+        setter(nodes.some(n => n.nodeType === Node.TEXT_NODE
+            ? (n.textContent?.trim() ?? '') !== ''
+            : true));
+    }
+    _renderToggleIcon() {
+        if (this.hideToggle)
+            return A;
+        return b `<wc-icon
+      class="toggle-icon"
+      name="keyboard_arrow_down"
+      aria-hidden="true"
+    ></wc-icon>`;
+    }
+    render() {
+        return b `
+      <div
+        class=${e$1({
+            'expansion-panel': true,
+            open: this.open,
+            disabled: this.disabled,
+        })}
+      >
+        <button
+          id=${`panel-header-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
+          part="header"
+          class="header-button"
+          tabindex=${this.disabled ? '-1' : '0'}
+          aria-controls=${`panel-content-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
+          aria-disabled=${this.disabled}
+          aria-expanded=${this.open}
+          ?disabled=${this.disabled}
+          @click=${this._handleToggle}
+        >
+          ${this.togglePosition === 'before' ? this._renderToggleIcon() : A}
+          <span class="header-label">
+            <span part="title" class="panel-title">
+              <slot
+                name="heading"
+                @slotchange=${(e) => AccordionItem_1._onSlotChange(e, v => { this._hasHeadingSlot = v; })}
+              ></slot>
+            </span>
+            <span
+              part="description"
+              class="panel-description"
+              ?hidden=${!this._hasDescriptionSlot}
+            >
+              <slot
+                name="description"
+                @slotchange=${(e) => AccordionItem_1._onSlotChange(e, v => { this._hasDescriptionSlot = v; })}
+              ></slot>
+            </span>
+          </span>
+          <slot name="header-actions" class="header-actions"></slot>
+          ${this.togglePosition === 'after' ? this._renderToggleIcon() : A}
+        </button>
+        <div
+          id=${`panel-content-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
+          part="content"
+          class="panel-content"
+          role="region"
+          aria-labelledby=${`panel-header-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
+        >
+          <div class="content-inner">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+_AccordionItem_id = new WeakMap();
+AccordionItem.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], AccordionItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], AccordionItem.prototype, "open", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'hide-toggle' })
+], AccordionItem.prototype, "hideToggle", void 0);
+__decorate([
+    n({ type: String, reflect: true, attribute: 'toggle-position' })
+], AccordionItem.prototype, "togglePosition", void 0);
+__decorate([
+    r()
+], AccordionItem.prototype, "_hasDescriptionSlot", void 0);
+__decorate([
+    r()
+], AccordionItem.prototype, "_hasHeadingSlot", void 0);
+__decorate([
+    e('.header-button')
+], AccordionItem.prototype, "buttonElement", void 0);
+AccordionItem = AccordionItem_1 = __decorate([
+    IndividualComponent
+], AccordionItem);
+
+export { AccordionItem };
+//# sourceMappingURL=accordion-item.js.map

package/dist/accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './accordion-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Accordion Item\n * @tag wc-accordion-item\n * @rawTag accordion-item\n * @summary An expansion panel with a header that reveals or hides associated content.\n *\n * @slot - The body content revealed when the panel is expanded.\n * @slot heading - The panel title. Renders as `body-large` text.\n * @slot description - Optional subtitle rendered below the title. Renders as `body-small` text.\n * @slot header-actions - Actions (e.g. icon buttons) placed at the trailing end of the header, before the toggle icon.\n *\n * @part header - The header `<button>` element.\n * @part title - The title text container.\n * @part description - The description text container.\n * @part content - The expandable content region wrapper.\n *\n * @fires {CustomEvent<{ open: boolean }>} accordion-item:toggle - Fired when the panel is expanded or collapsed.\n *\n * @example\n * ```html\n * <wc-accordion-item>\n *   <span slot=\"heading\">Personal information</span>\n *   <span slot=\"description\">Fill in your details</span>\n *   <p>Content goes here.</p>\n * </wc-accordion-item>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class AccordionItem extends LitElement {\n  static styles = [styles];\n\n  #id = crypto.randomUUID();\n\n  /**\n   * Whether the user cannot interact with the panel.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether the panel is expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * Whether to hide the expand/collapse toggle indicator icon.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-toggle' })\n  hideToggle: boolean = false;\n\n  /**\n   * Position of the toggle icon relative to the panel title.\n   * `'after'` places it at the trailing end (default, matches M3).\n   * `'before'` places it at the leading start.\n   */\n  @property({ type: String, reflect: true, attribute: 'toggle-position' })\n  togglePosition: 'before' | 'after' = 'after';\n\n  /** True when the `description` slot contains at least one non-empty node. */\n  @state()\n  private _hasDescriptionSlot = false;\n\n  /** True when the `heading` slot contains at least one non-empty node. */\n  @state()\n  private _hasHeadingSlot = false;\n\n  @query('.header-button')\n  private readonly buttonElement!: HTMLElement | null;\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  private _handleToggle() {\n    if (this.disabled) return;\n    this.open = !this.open;\n    this.dispatchEvent(\n      new CustomEvent('accordion-item:toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      }),\n    );\n  }\n\n  private static _onSlotChange(e: Event, setter: (v: boolean) => void) {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    setter(\n      nodes.some(n =>\n        n.nodeType === Node.TEXT_NODE\n          ? (n.textContent?.trim() ?? '') !== ''\n          : true,\n      ),\n    );\n  }\n\n  private _renderToggleIcon() {\n    if (this.hideToggle) return nothing;\n    return html`<wc-icon\n      class=\"toggle-icon\"\n      name=\"keyboard_arrow_down\"\n      aria-hidden=\"true\"\n    ></wc-icon>`;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'expansion-panel': true,\n          open: this.open,\n          disabled: this.disabled,\n        })}\n      >\n        <button\n          id=${`panel-header-${this.#id}`}\n          part=\"header\"\n          class=\"header-button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-controls=${`panel-content-${this.#id}`}\n          aria-disabled=${this.disabled}\n          aria-expanded=${this.open}\n          ?disabled=${this.disabled}\n          @click=${this._handleToggle}\n        >\n          ${this.togglePosition === 'before' ? this._renderToggleIcon() : nothing}\n          <span class=\"header-label\">\n            <span part=\"title\" class=\"panel-title\">\n              <slot\n                name=\"heading\"\n                @slotchange=${(e: Event) => AccordionItem._onSlotChange(e, v => { this._hasHeadingSlot = v; })}\n              ></slot>\n            </span>\n            <span\n              part=\"description\"\n              class=\"panel-description\"\n              ?hidden=${!this._hasDescriptionSlot}\n            >\n              <slot\n                name=\"description\"\n                @slotchange=${(e: Event) => AccordionItem._onSlotChange(e, v => { this._hasDescriptionSlot = v; })}\n              ></slot>\n            </span>\n          </span>\n          <slot name=\"header-actions\" class=\"header-actions\"></slot>\n          ${this.togglePosition === 'after' ? this._renderToggleIcon() : nothing}\n        </button>\n        <div\n          id=${`panel-content-${this.#id}`}\n          part=\"content\"\n          class=\"panel-content\"\n          role=\"region\"\n          aria-labelledby=${`panel-header-${this.#id}`}\n        >\n          <div class=\"content-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/accordion.js

@@ -0,0 +1,159 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { o } from './query-assigned-elements-BJaGSqM0.js';
+import { AccordionItem } from './accordion-item.js';
+import './base-Cl6v8-BZ.js';
+import './state-DkTK9EGF.js';
+import './query-CHb9Ft_d.js';
+import './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+}
+
+:host([display-mode=flat]) .accordion {
+  gap: 0;
+}
+:host([display-mode=flat]) slot::slotted(wc-accordion-item) {
+  --_accordion-item-border: none;
+  --_accordion-item-background: transparent;
+}`;
+
+/**
+ * @label Accordion
+ * @tag wc-accordion
+ * @rawTag accordion
+ * @summary A vertically stacked set of expansion panels.
+ *
+ * @example
+ * ```html
+ * <wc-accordion>
+ *   <wc-accordion-item>
+ *     <span slot="heading">Panel 1</span>
+ *     <span slot="description">Summary text</span>
+ *     Content
+ *   </wc-accordion-item>
+ *   <wc-accordion-item>
+ *     <span slot="heading">Panel 2</span>
+ *     Content
+ *   </wc-accordion-item>
+ * </wc-accordion>
+ * ```
+ * @tags display
+ */
+let Accordion = class Accordion extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether multiple panels can be expanded simultaneously.
+         * When `false` (default), expanding one panel collapses all others.
+         */
+        this.multi = false;
+        /**
+         * Display mode for the accordion.
+         * `'default'` renders panels with a subtle background on expand and dividers between items.
+         * `'flat'` renders panels without borders or background changes — suitable for use inside cards.
+         */
+        this.displayMode = 'default';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // @ts-ignore
+        // eslint-disable-next-line wc/require-listener-teardown
+        this.addEventListener('accordion-item:toggle', this._onItemToggle);
+        this.addEventListener('keydown', this._onKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // @ts-ignore
+        this.removeEventListener('accordion-item:toggle', this._onItemToggle);
+        this.removeEventListener('keydown', this._onKeyDown);
+    }
+    _onItemToggle(e) {
+        const targetItem = e.target;
+        // Ignore events from nested accordions — only handle direct children
+        if (targetItem.parentElement !== this)
+            return;
+        if (!this.multi && targetItem.open) {
+            this.items.forEach(item => {
+                if (item !== targetItem && item.open) {
+                    // eslint-disable-next-line no-param-reassign
+                    item.open = false;
+                }
+            });
+        }
+    }
+    _onKeyDown(e) {
+        const focusedItemIndex = this.items.findIndex(item => {
+            const root = item.shadowRoot;
+            return root?.activeElement?.classList.contains('header-button');
+        });
+        if (focusedItemIndex === -1)
+            return;
+        let nextIndex = -1;
+        // eslint-disable-next-line default-case
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                nextIndex = (focusedItemIndex + 1) % this.items.length;
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                nextIndex =
+                    (focusedItemIndex - 1 + this.items.length) % this.items.length;
+                break;
+            case 'Home':
+                e.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                e.preventDefault();
+                nextIndex = this.items.length - 1;
+                break;
+        }
+        if (nextIndex !== -1) {
+            const itemToFocus = this.items[nextIndex];
+            const button = itemToFocus.shadowRoot?.querySelector('.header-button');
+            button?.focus();
+        }
+    }
+    render() {
+        return b `<div class="accordion"><slot></slot></div>`;
+    }
+};
+Accordion.styles = [css_248z];
+Accordion.Item = AccordionItem;
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Accordion.prototype, "multi", void 0);
+__decorate([
+    n({ type: String, reflect: true, attribute: 'display-mode' })
+], Accordion.prototype, "displayMode", void 0);
+__decorate([
+    o({ selector: 'wc-accordion-item' })
+], Accordion.prototype, "items", void 0);
+Accordion = __decorate([
+    IndividualComponent
+], Accordion);
+
+export { Accordion };
+//# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../src/accordion/accordion.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './accordion.scss';\nimport { AccordionItem } from './accordion-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Accordion\n * @tag wc-accordion\n * @rawTag accordion\n * @summary A vertically stacked set of expansion panels.\n *\n * @example\n * ```html\n * <wc-accordion>\n *   <wc-accordion-item>\n *     <span slot=\"heading\">Panel 1</span>\n *     <span slot=\"description\">Summary text</span>\n *     Content\n *   </wc-accordion-item>\n *   <wc-accordion-item>\n *     <span slot=\"heading\">Panel 2</span>\n *     Content\n *   </wc-accordion-item>\n * </wc-accordion>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Accordion extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Whether multiple panels can be expanded simultaneously.\n   * When `false` (default), expanding one panel collapses all others.\n   */\n  @property({ type: Boolean, reflect: true })\n  multi = false;\n\n  /**\n   * Display mode for the accordion.\n   * `'default'` renders panels with a subtle background on expand and dividers between items.\n   * `'flat'` renders panels without borders or background changes — suitable for use inside cards.\n   */\n  @property({ type: String, reflect: true, attribute: 'display-mode' })\n  displayMode: 'default' | 'flat' = 'default';\n\n  @queryAssignedElements({ selector: 'wc-accordion-item' })\n  items!: Array<AccordionItem>;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // @ts-ignore\n    // eslint-disable-next-line wc/require-listener-teardown\n    this.addEventListener('accordion-item:toggle', this._onItemToggle);\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // @ts-ignore\n    this.removeEventListener('accordion-item:toggle', this._onItemToggle);\n    this.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  private _onItemToggle(e: CustomEvent) {\n    const targetItem = e.target as AccordionItem;\n\n    // Ignore events from nested accordions — only handle direct children\n    if (targetItem.parentElement !== this) return;\n\n    if (!this.multi && targetItem.open) {\n      this.items.forEach(item => {\n        if (item !== targetItem && item.open) {\n          // eslint-disable-next-line no-param-reassign\n          item.open = false;\n        }\n      });\n    }\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    const focusedItemIndex = this.items.findIndex(item => {\n      const root = item.shadowRoot;\n      return root?.activeElement?.classList.contains('header-button');\n    });\n\n    if (focusedItemIndex === -1) return;\n\n    let nextIndex = -1;\n\n    // eslint-disable-next-line default-case\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextIndex = (focusedItemIndex + 1) % this.items.length;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextIndex =\n          (focusedItemIndex - 1 + this.items.length) % this.items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextIndex = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextIndex = this.items.length - 1;\n        break;\n    }\n\n    if (nextIndex !== -1) {\n      const itemToFocus = this.items[nextIndex];\n      const button = itemToFocus.shadowRoot?.querySelector(\n        '.header-button',\n      ) as HTMLElement;\n      button?.focus();\n    }\n  }\n\n  render() {\n    return html`<div class=\"accordion\"><slot></slot></div>`;\n  }\n\n  static Item = AccordionItem;\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":"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"}