@synergy-design-system/components 2.2.0 → 2.3.0

package/dist/chunks/chunk.OE3Y3CA4.js

@@ -0,0 +1,239 @@
+import {
+  details_custom_styles_default
+} from "./chunk.PU2BDR2W.js";
+import {
+  details_styles_default
+} from "./chunk.VA26EAEP.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations,
+  waitForEvent
+} from "./chunk.PYLHI2JQ.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.MSUX23ZJ.js";
+import {
+  SynIcon
+} from "./chunk.NKFRPPTB.js";
+import {
+  LocalizeController
+} from "./chunk.E3KW3KQM.js";
+import {
+  watch
+} from "./chunk.QJMO7V5R.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.E6UCXKSB.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/details/details.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var SynDetails = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.disabled = false;
+    this.contained = false;
+    this.size = "medium";
+  }
+  firstUpdated() {
+    this.body.style.height = this.open ? "auto" : "0";
+    if (this.open) {
+      this.details.open = true;
+    }
+    this.detailsObserver = new MutationObserver((changes) => {
+      for (const change of changes) {
+        if (change.type === "attributes" && change.attributeName === "open") {
+          if (this.details.open) {
+            this.show();
+          } else {
+            this.hide();
+          }
+        }
+      }
+    });
+    this.detailsObserver.observe(this.details, { attributes: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.detailsObserver.disconnect();
+  }
+  handleSummaryClick(event) {
+    event.preventDefault();
+    if (!this.disabled) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.details.open = true;
+      const slShow = this.emit("syn-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        this.details.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.show", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.emit("syn-after-show");
+    } else {
+      const slHide = this.emit("syn-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.details.open = true;
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.hide", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.details.open = false;
+      this.emit("syn-after-hide");
+    }
+  }
+  /** Shows the details. */
+  async show() {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "syn-after-show");
+  }
+  /** Hides the details */
+  async hide() {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "syn-after-hide");
+  }
+  render() {
+    return html`
+      <details
+        part="base"
+        class=${classMap({
+      details: true,
+      "details--size-medium": this.size === "medium",
+      "details--size-large": this.size === "large",
+      "details--open": this.open,
+      "details--disabled": this.disabled,
+      "details--contained": this.contained
+    })}
+      >
+        <summary
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <syn-icon library="system" name="chevron-down"></syn-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <syn-icon library="system" name="chevron-down"></syn-icon>
+            </slot>
+          </span>
+        </summary>
+
+        <div class="details__body" role="region" aria-labelledby="header">
+          <slot part="content" id="content" class="details__content"></slot>
+        </div>
+      </details>
+    `;
+  }
+};
+SynDetails.styles = [component_styles_default, details_styles_default, details_custom_styles_default];
+SynDetails.dependencies = {
+  "syn-icon": SynIcon
+};
+__decorateClass([
+  query(".details")
+], SynDetails.prototype, "details", 2);
+__decorateClass([
+  query(".details__header")
+], SynDetails.prototype, "header", 2);
+__decorateClass([
+  query(".details__body")
+], SynDetails.prototype, "body", 2);
+__decorateClass([
+  query(".details__expand-icon-slot")
+], SynDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynDetails.prototype, "open", 2);
+__decorateClass([
+  property()
+], SynDetails.prototype, "summary", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynDetails.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynDetails.prototype, "contained", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynDetails.prototype, "size", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SynDetails.prototype, "handleOpenChange", 1);
+setDefaultAnimation("details.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("details.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  SynDetails
+};
+//# sourceMappingURL=chunk.OE3Y3CA4.js.map

package/dist/chunks/chunk.OE3Y3CA4.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/details/details.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './details.styles.js';\nimport customStyles from './details.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Details show a brief summary and expand to show additional content.\n * @documentation https://synergy.style/components/details\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the details opens.\n * @event syn-after-show - Emitted after the details opens and all animations are complete.\n * @event syn-hide - Emitted when the details closes.\n * @event syn-after-hide - Emitted after the details closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The details content.\n *\n * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.\n * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.\n */\nexport default class SynDetails extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  static dependencies = {\n    'syn-icon': SynIcon\n  };\n\n  private readonly localize = new LocalizeController(this);\n\n  @query('.details') details: HTMLDetailsElement;\n  @query('.details__header') header: HTMLElement;\n  @query('.details__body') body: HTMLElement;\n  @query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n  detailsObserver: MutationObserver;\n\n  /**\n   * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\n   * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */\n  @property() summary: string;\n\n  /** Disables the details so it can't be toggled. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the details as contained element. */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  /** The details's size. */\n  @property({ reflect: true }) size: 'medium' | 'large' = 'medium';\n\n  firstUpdated() {\n    this.body.style.height = this.open ? 'auto' : '0';\n    if (this.open) {\n      this.details.open = true;\n    }\n\n    this.detailsObserver = new MutationObserver(changes => {\n      for (const change of changes) {\n        if (change.type === 'attributes' && change.attributeName === 'open') {\n          if (this.details.open) {\n            this.show();\n          } else {\n            this.hide();\n          }\n        }\n      }\n    });\n    this.detailsObserver.observe(this.details, { attributes: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.detailsObserver.disconnect();\n  }\n\n  private handleSummaryClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (!this.disabled) {\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n      this.header.focus();\n    }\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      this.details.open = true;\n      // Show\n      const slShow = this.emit('syn-show', { cancelable: true });\n      if (slShow.defaultPrevented) {\n        this.open = false;\n        this.details.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, 'details.show', { dir: this.localize.dir() });\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = 'auto';\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      const slHide = this.emit('syn-hide', { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.details.open = true;\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, 'details.hide', { dir: this.localize.dir() });\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = 'auto';\n\n      this.details.open = false;\n      this.emit('syn-after-hide');\n    }\n  }\n\n  /** Shows the details. */\n  async show() {\n    if (this.open || this.disabled) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the details */\n  async hide() {\n    if (!this.open || this.disabled) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  render() {\n    return html`\n      <details\n        part=\"base\"\n        class=${classMap({\n          details: true,\n          'details--size-medium': this.size === 'medium',\n          'details--size-large': this.size === 'large',\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          'details--contained': this.contained,\n        })}\n      >\n        <summary\n          part=\"header\"\n          id=\"header\"\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-controls=\"content\"\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"summary\" part=\"summary\" class=\"details__summary\">${this.summary}</slot>\n\n          <span part=\"summary-icon\" class=\"details__summary-icon\">\n            <slot name=\"expand-icon\">\n              <syn-icon library=\"system\" name=\"chevron-down\"></syn-icon>\n            </slot>\n            <slot name=\"collapse-icon\">\n              <syn-icon library=\"system\" name=\"chevron-down\"></syn-icon>\n            </slot>\n          </span>\n        </summary>\n\n        <div class=\"details__body\" role=\"region\" aria-labelledby=\"header\">\n          <slot part=\"content\" id=\"content\" class=\"details__content\"></slot>\n        </div>\n      </details>\n    `;\n  }\n}\n\nsetDefaultAnimation('details.show', {\n  keyframes: [\n    { height: '0', opacity: '0' },\n    { height: 'auto', opacity: '1' }\n  ],\n  options: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('details.hide', {\n  keyframes: [\n    { height: 'auto', opacity: '1' },\n    { height: '0', opacity: '0' }\n  ],\n  options: { duration: 250, easing: 'linear' }\n});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AAErB,SAAS,UAAU,aAAa;AAqChC,IAAqB,aAArB,cAAwC,eAAe;AAAA,EAAvD;AAAA;AAOE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAaX,gBAAO;AAMP,oBAAW;AAGX,qBAAY;AAG3B,gBAA2B;AAAA;AAAA,EAExD,eAAe;AACb,SAAK,KAAK,MAAM,SAAS,KAAK,OAAO,SAAS;AAC9C,QAAI,KAAK,MAAM;AACb,WAAK,QAAQ,OAAO;AAAA,IACtB;AAEA,SAAK,kBAAkB,IAAI,iBAAiB,aAAW;AACrD,iBAAW,UAAU,SAAS;AAC5B,YAAI,OAAO,SAAS,gBAAgB,OAAO,kBAAkB,QAAQ;AACnE,cAAI,KAAK,QAAQ,MAAM;AACrB,iBAAK,KAAK;AAAA,UACZ,OAAO;AACL,iBAAK,KAAK;AAAA,UACZ;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AACD,SAAK,gBAAgB,QAAQ,KAAK,SAAS,EAAE,YAAY,KAAK,CAAC;AAAA,EACjE;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,gBAAgB,WAAW;AAAA,EAClC;AAAA,EAEQ,mBAAmB,OAAmB;AAC5C,UAAM,eAAe;AAErB,QAAI,CAAC,KAAK,UAAU;AAClB,UAAI,KAAK,MAAM;AACb,aAAK,KAAK;AAAA,MACZ,OAAO;AACL,aAAK,KAAK;AAAA,MACZ;AACA,WAAK,OAAO,MAAM;AAAA,IACpB;AAAA,EACF;AAAA,EAEQ,qBAAqB,OAAsB;AACjD,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAe;AAErB,UAAI,KAAK,MAAM;AACb,aAAK,KAAK;AAAA,MACZ,OAAO;AACL,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AAEA,QAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;AACxD,YAAM,eAAe;AACrB,WAAK,KAAK;AAAA,IACZ;AAEA,QAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,cAAc;AAC3D,YAAM,eAAe;AACrB,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA,EAGA,MAAM,mBAAmB;AACvB,QAAI,KAAK,MAAM;AACb,WAAK,QAAQ,OAAO;AAEpB,YAAM,SAAS,KAAK,KAAK,YAAY,EAAE,YAAY,KAAK,CAAC;AACzD,UAAI,OAAO,kBAAkB;AAC3B,aAAK,OAAO;AACZ,aAAK,QAAQ,OAAO;AACpB;AAAA,MACF;AAEA,YAAM,eAAe,KAAK,IAAI;AAE9B,YAAM,EAAE,WAAW,QAAQ,IAAI,aAAa,MAAM,gBAAgB,EAAE,KAAK,KAAK,SAAS,IAAI,EAAE,CAAC;AAC9F,YAAM,UAAU,KAAK,MAAM,wBAAwB,WAAW,KAAK,KAAK,YAAY,GAAG,OAAO;AAC9F,WAAK,KAAK,MAAM,SAAS;AAEzB,WAAK,KAAK,gBAAgB;AAAA,IAC5B,OAAO;AAEL,YAAM,SAAS,KAAK,KAAK,YAAY,EAAE,YAAY,KAAK,CAAC;AACzD,UAAI,OAAO,kBAAkB;AAC3B,aAAK,QAAQ,OAAO;AACpB,aAAK,OAAO;AACZ;AAAA,MACF;AAEA,YAAM,eAAe,KAAK,IAAI;AAE9B,YAAM,EAAE,WAAW,QAAQ,IAAI,aAAa,MAAM,gBAAgB,EAAE,KAAK,KAAK,SAAS,IAAI,EAAE,CAAC;AAC9F,YAAM,UAAU,KAAK,MAAM,wBAAwB,WAAW,KAAK,KAAK,YAAY,GAAG,OAAO;AAC9F,WAAK,KAAK,MAAM,SAAS;AAEzB,WAAK,QAAQ,OAAO;AACpB,WAAK,KAAK,gBAAgB;AAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAGA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ,KAAK,UAAU;AAC9B,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA;AAAA,EAGA,MAAM,OAAO;AACX,QAAI,CAAC,KAAK,QAAQ,KAAK,UAAU;AAC/B,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,wBAAwB,KAAK,SAAS;AAAA,MACtC,uBAAuB,KAAK,SAAS;AAAA,MACrC,iBAAiB,KAAK;AAAA,MACtB,qBAAqB,KAAK;AAAA,MAC1B,sBAAsB,KAAK;AAAA,IAC7B,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAOgB,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,0BAE5B,KAAK,WAAW,SAAS,OAAO;AAAA,qBACrC,KAAK,WAAW,OAAO,GAAG;AAAA,mBAC5B,KAAK,kBAAkB;AAAA,qBACrB,KAAK,oBAAoB;AAAA;AAAA,yEAE2B,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBnF;AACF;AApMqB,WACZ,SAAyB,CAAC,0BAAiB,wBAAQ,6BAAY;AADnD,WAGZ,eAAe;AAAA,EACpB,YAAY;AACd;AAImB;AAAA,EAAlB,MAAM,UAAU;AAAA,GATE,WASA;AACQ;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GAVN,WAUQ;AACF;AAAA,EAAxB,MAAM,gBAAgB;AAAA,GAXJ,WAWM;AACY;AAAA,EAApC,MAAM,4BAA4B;AAAA,GAZhB,WAYkB;AAQO;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApBvB,WAoByB;AAGhC;AAAA,EAAX,SAAS;AAAA,GAvBS,WAuBP;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA1BvB,WA0ByB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BvB,WA6ByB;AAGf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAhCR,WAgCU;AA+DvB;AAAA,EADL,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA9F1B,WA+Fb;AAuGR,oBAAoB,gBAAgB;AAAA,EAClC,WAAW;AAAA,IACT,EAAE,QAAQ,KAAK,SAAS,IAAI;AAAA,IAC5B,EAAE,QAAQ,QAAQ,SAAS,IAAI;AAAA,EACjC;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,SAAS;AAC7C,CAAC;AAED,oBAAoB,gBAAgB;AAAA,EAClC,WAAW;AAAA,IACT,EAAE,QAAQ,QAAQ,SAAS,IAAI;AAAA,IAC/B,EAAE,QAAQ,KAAK,SAAS,IAAI;AAAA,EAC9B;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,SAAS;AAC7C,CAAC;",
+  "names": []
+}

package/dist/chunks/{chunk.DDBKCYG2.js → chunk.OPHNLOT2.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.55V5DPSY.js";
+} from "./chunk.VRAOUUOJ.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.DDBKCYG2.js.map
+//# sourceMappingURL=chunk.OPHNLOT2.js.map

package/dist/chunks/chunk.PU2BDR2W.js

@@ -0,0 +1,144 @@
+// src/components/details/details.custom.styles.ts
+import { css } from "lit";
+var details_custom_styles_default = css`
+  .details {
+    background-color: unset;
+    border-color: var(--syn-panel-border-color);
+    border-radius: var(--syn-border-radius-none);
+    border-width: 0 0 var(--syn-border-width-small);
+  }
+
+  .details--disabled {
+    opacity: var(--syn-opacity-50);
+  }
+
+  .details__summary-icon {
+    align-self: flex-start;
+    color: var(--syn-color-neutral-950);
+    font-size: var(--syn-spacing-large);
+
+    /**
+     * As we are using an alignment of "start"  instead of "center" make sure
+     * the arrow starts on the same visual line as the first line of headline text
+     */
+    position: relative;
+    top: 2px;
+  }
+
+  .details .details__summary {
+    color: var(--syn-typography-color-text);
+  }
+
+  .details__header {
+    gap: var(--syn-spacing-medium);
+  }
+
+  /**
+   * As we are using top/down arrows for the details element,
+   * we have to adjust the rotation of the icon when the details is open.
+   */
+  .details--open .details__summary-icon {
+    rotate: -180deg;
+  }
+
+  /**
+   * Adjustments for medium variant
+   */
+  .details--size-medium .details__header {
+    padding: var(--syn-spacing-medium-large) 0;
+  }
+
+  .details--size-medium .details__content {
+    font-size: var(--syn-font-size-small);
+    line-height: var(--syn-line-height-normal);
+    padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);
+  }
+
+  .details--size-medium .details__summary {
+    font: var(--syn-body-medium-regular);
+  }
+
+  .details--size-medium .details__summary::slotted(syn-icon) {
+    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
+    flex-shrink: 0;
+    font-size: var(--syn-spacing-large);
+    margin-right: var(--syn-spacing-small);
+  }
+
+  /**
+   * Adjustment for large variant
+   */
+  .details--size-large .details__header {
+    padding: var(--syn-spacing-large) 0;
+  }
+
+  .details--size-large .details__content {
+    font-size: var(--syn-font-size-medium);
+    line-height: var(--syn-line-height-normal);
+    padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);
+  }
+
+  .details--size-large .details__summary {
+    font: var(--syn-body-large-regular);
+  }
+
+  .details--size-large .details__summary-icon {
+    font-size: var(--syn-spacing-x-large);
+  }
+
+  .details--size-large .details__summary::slotted(syn-icon) {
+    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
+    flex-shrink: 0;
+    font-size: var(--syn-spacing-x-large);
+    margin-right: var(--syn-spacing-small);
+  }
+
+  /**
+   * Mark the details as open by adjusting its label
+   */
+  .details--open .details__summary {
+    font-weight: var(--syn-font-weight-bold);
+  }
+
+  /**
+   * Add a visually visible hover effect to the summary element
+   */
+  .details:not(.details--disabled) .details__header:hover .details__summary,
+  .details:not(.details--disabled) .details__header:hover .details__summary-icon {
+    color: var(--syn-color-primary-700);
+  }
+
+  /**
+   *  Contained style
+   */
+  .details--contained {
+    background-color: var(--syn-panel-background-color);
+    border-radius: var(--syn-border-radius-medium);
+    border-width: var(--syn-panel-border-width);
+  }
+
+  .details--contained .details__header:focus-visible {
+    border-radius: var(--syn-border-radius-medium);
+  }
+
+  .details--size-medium.details--contained .details__header {
+    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large);
+  }
+
+  .details--size-medium.details--contained .details__content {
+    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
+  }
+
+  .details--size-large.details--contained .details__header {
+    padding: var(--syn-spacing-large);
+  }
+
+  .details--size-large.details--contained .details__content {
+    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);
+  }
+`;
+
+export {
+  details_custom_styles_default
+};
+//# sourceMappingURL=chunk.PU2BDR2W.js.map

package/dist/chunks/chunk.PU2BDR2W.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/details/details.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .details {\n    background-color: unset;\n    border-color: var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    border-width: 0 0 var(--syn-border-width-small);\n  }\n\n  .details--disabled {\n    opacity: var(--syn-opacity-50);\n  }\n\n  .details__summary-icon {\n    align-self: flex-start;\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n\n    /**\n     * As we are using an alignment of \"start\"  instead of \"center\" make sure\n     * the arrow starts on the same visual line as the first line of headline text\n     */\n    position: relative;\n    top: 2px;\n  }\n\n  .details .details__summary {\n    color: var(--syn-typography-color-text);\n  }\n\n  .details__header {\n    gap: var(--syn-spacing-medium);\n  }\n\n  /**\n   * As we are using top/down arrows for the details element,\n   * we have to adjust the rotation of the icon when the details is open.\n   */\n  .details--open .details__summary-icon {\n    rotate: -180deg;\n  }\n\n  /**\n   * Adjustments for medium variant\n   */\n  .details--size-medium .details__header {\n    padding: var(--syn-spacing-medium-large) 0;\n  }\n\n  .details--size-medium .details__content {\n    font-size: var(--syn-font-size-small);\n    line-height: var(--syn-line-height-normal);\n    padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);\n  }\n\n  .details--size-medium .details__summary {\n    font: var(--syn-body-medium-regular);\n  }\n\n  .details--size-medium .details__summary::slotted(syn-icon) {\n    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */\n    flex-shrink: 0;\n    font-size: var(--syn-spacing-large);\n    margin-right: var(--syn-spacing-small);\n  }\n\n  /**\n   * Adjustment for large variant\n   */\n  .details--size-large .details__header {\n    padding: var(--syn-spacing-large) 0;\n  }\n\n  .details--size-large .details__content {\n    font-size: var(--syn-font-size-medium);\n    line-height: var(--syn-line-height-normal);\n    padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);\n  }\n\n  .details--size-large .details__summary {\n    font: var(--syn-body-large-regular);\n  }\n\n  .details--size-large .details__summary-icon {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .details--size-large .details__summary::slotted(syn-icon) {\n    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */\n    flex-shrink: 0;\n    font-size: var(--syn-spacing-x-large);\n    margin-right: var(--syn-spacing-small);\n  }\n\n  /**\n   * Mark the details as open by adjusting its label\n   */\n  .details--open .details__summary {\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  /**\n   * Add a visually visible hover effect to the summary element\n   */\n  .details:not(.details--disabled) .details__header:hover .details__summary,\n  .details:not(.details--disabled) .details__header:hover .details__summary-icon {\n    color: var(--syn-color-primary-700);\n  }\n\n  /**\n   *  Contained style\n   */\n  .details--contained {\n    background-color: var(--syn-panel-background-color);\n    border-radius: var(--syn-border-radius-medium);\n    border-width: var(--syn-panel-border-width);\n  }\n\n  .details--contained .details__header:focus-visible {\n    border-radius: var(--syn-border-radius-medium);\n  }\n\n  .details--size-medium.details--contained .details__header {\n    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large);\n  }\n\n  .details--size-medium.details--contained .details__content {\n    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n\n  .details--size-large.details--contained .details__header {\n    padding: var(--syn-spacing-large);\n  }\n\n  .details--size-large.details--contained .details__content {\n    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,gCAAQ;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;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;",
+  "names": []
+}

package/dist/chunks/{chunk.4OLTKAXX.js → chunk.PYLHI2JQ.js}

@@ -40,6 +40,11 @@ function stopAnimations(el) {
     })
   );
 }
+function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
+  return keyframes.map((keyframe) => __spreadProps(__spreadValues({}, keyframe), {
+    height: keyframe.height === "auto" ? `${calculatedHeight}px` : keyframe.height
+  }));
+}
 
 // src/internal/event.ts
 function waitForEvent(el, eventName) {
@@ -58,6 +63,7 @@ export {
   animateTo,
   parseDuration,
   stopAnimations,
+  shimKeyframesHeightAuto,
   waitForEvent
 };
-//# sourceMappingURL=chunk.4OLTKAXX.js.map
+//# sourceMappingURL=chunk.PYLHI2JQ.js.map

package/dist/chunks/{chunk.4OLTKAXX.js.map → chunk.PYLHI2JQ.js.map}

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/internal/animate.ts", "../../src/internal/event.ts"],
   "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\n/**\n * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.\n */\nexport function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) {\n  return new Promise(resolve => {\n    if (options?.duration === Infinity) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    const animation = el.animate(keyframes, {\n      ...options,\n      duration: prefersReducedMotion() ? 0 : options!.duration\n    });\n\n    animation.addEventListener('cancel', resolve, { once: true });\n    animation.addEventListener('finish', resolve, { once: true });\n  });\n}\n\n/** Parses a CSS duration and returns the number of milliseconds. */\nexport function parseDuration(delay: number | string) {\n  delay = delay.toString().toLowerCase();\n\n  if (delay.indexOf('ms') > -1) {\n    return parseFloat(delay);\n  }\n\n  if (delay.indexOf('s') > -1) {\n    return parseFloat(delay) * 1000;\n  }\n\n  return parseFloat(delay);\n}\n\n/** Tells if the user has enabled the \"reduced motion\" setting in their browser or OS. */\nexport function prefersReducedMotion() {\n  const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n  return query.matches;\n}\n\n/**\n * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.\n */\nexport function stopAnimations(el: HTMLElement) {\n  return Promise.all(\n    el.getAnimations().map(animation => {\n      return new Promise(resolve => {\n        animation.cancel();\n        requestAnimationFrame(resolve);\n      });\n    })\n  );\n}\n\n/**\n * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the\n * element's scrollHeight before the animation.\n */\nexport function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number) {\n  return keyframes.map(keyframe => ({\n    ...keyframe,\n    height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height\n  }));\n}\n", "/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\n/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */\nexport function waitForEvent(el: HTMLElement, eventName: string) {\n  return new Promise<void>(resolve => {\n    function done(event: Event) {\n      if (event.target === el) {\n        el.removeEventListener(eventName, done);\n        resolve();\n      }\n    }\n\n    el.addEventListener(eventName, done);\n  });\n}\n"],
-  "mappings": ";;;;;;AAWO,SAAS,UAAU,IAAiB,WAAuB,SAAoC;AACpG,SAAO,IAAI,QAAQ,aAAW;AAC5B,SAAI,mCAAS,cAAa,UAAU;AAClC,YAAM,IAAI,MAAM,0CAA0C;AAAA,IAC5D;AAEA,UAAM,YAAY,GAAG,QAAQ,WAAW,iCACnC,UADmC;AAAA,MAEtC,UAAU,qBAAqB,IAAI,IAAI,QAAS;AAAA,IAClD,EAAC;AAED,cAAU,iBAAiB,UAAU,SAAS,EAAE,MAAM,KAAK,CAAC;AAC5D,cAAU,iBAAiB,UAAU,SAAS,EAAE,MAAM,KAAK,CAAC;AAAA,EAC9D,CAAC;AACH;AAGO,SAAS,cAAc,OAAwB;AACpD,UAAQ,MAAM,SAAS,EAAE,YAAY;AAErC,MAAI,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC5B,WAAO,WAAW,KAAK;AAAA,EACzB;AAEA,MAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,WAAO,WAAW,KAAK,IAAI;AAAA,EAC7B;AAEA,SAAO,WAAW,KAAK;AACzB;AAGO,SAAS,uBAAuB;AACrC,QAAM,QAAQ,OAAO,WAAW,kCAAkC;AAClE,SAAO,MAAM;AACf;AAKO,SAAS,eAAe,IAAiB;AAC9C,SAAO,QAAQ;AAAA,IACb,GAAG,cAAc,EAAE,IAAI,eAAa;AAClC,aAAO,IAAI,QAAQ,aAAW;AAC5B,kBAAU,OAAO;AACjB,8BAAsB,OAAO;AAAA,MAC/B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;;;ACnDO,SAAS,aAAa,IAAiB,WAAmB;AAC/D,SAAO,IAAI,QAAc,aAAW;AAClC,aAAS,KAAK,OAAc;AAC1B,UAAI,MAAM,WAAW,IAAI;AACvB,WAAG,oBAAoB,WAAW,IAAI;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAEA,OAAG,iBAAiB,WAAW,IAAI;AAAA,EACrC,CAAC;AACH;",
+  "mappings": ";;;;;;AAWO,SAAS,UAAU,IAAiB,WAAuB,SAAoC;AACpG,SAAO,IAAI,QAAQ,aAAW;AAC5B,SAAI,mCAAS,cAAa,UAAU;AAClC,YAAM,IAAI,MAAM,0CAA0C;AAAA,IAC5D;AAEA,UAAM,YAAY,GAAG,QAAQ,WAAW,iCACnC,UADmC;AAAA,MAEtC,UAAU,qBAAqB,IAAI,IAAI,QAAS;AAAA,IAClD,EAAC;AAED,cAAU,iBAAiB,UAAU,SAAS,EAAE,MAAM,KAAK,CAAC;AAC5D,cAAU,iBAAiB,UAAU,SAAS,EAAE,MAAM,KAAK,CAAC;AAAA,EAC9D,CAAC;AACH;AAGO,SAAS,cAAc,OAAwB;AACpD,UAAQ,MAAM,SAAS,EAAE,YAAY;AAErC,MAAI,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC5B,WAAO,WAAW,KAAK;AAAA,EACzB;AAEA,MAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,WAAO,WAAW,KAAK,IAAI;AAAA,EAC7B;AAEA,SAAO,WAAW,KAAK;AACzB;AAGO,SAAS,uBAAuB;AACrC,QAAM,QAAQ,OAAO,WAAW,kCAAkC;AAClE,SAAO,MAAM;AACf;AAKO,SAAS,eAAe,IAAiB;AAC9C,SAAO,QAAQ;AAAA,IACb,GAAG,cAAc,EAAE,IAAI,eAAa;AAClC,aAAO,IAAI,QAAQ,aAAW;AAC5B,kBAAU,OAAO;AACjB,8BAAsB,OAAO;AAAA,MAC/B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAMO,SAAS,wBAAwB,WAAuB,kBAA0B;AACvF,SAAO,UAAU,IAAI,cAAa,iCAC7B,WAD6B;AAAA,IAEhC,QAAQ,SAAS,WAAW,SAAS,GAAG,gBAAgB,OAAO,SAAS;AAAA,EAC1E,EAAE;AACJ;;;AC9DO,SAAS,aAAa,IAAiB,WAAmB;AAC/D,SAAO,IAAI,QAAc,aAAW;AAClC,aAAS,KAAK,OAAc;AAC1B,UAAI,MAAM,WAAW,IAAI;AACvB,WAAG,oBAAoB,WAAW,IAAI;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAEA,OAAG,iBAAiB,WAAW,IAAI;AAAA,EACrC,CAAC;AACH;",
   "names": []
 }

package/dist/chunks/{chunk.7DMCPIEI.js → chunk.QQUUXS2I.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.7BKUPXMT.js";
+} from "./chunk.RXHKSN5J.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.7DMCPIEI.js.map
+//# sourceMappingURL=chunk.QQUUXS2I.js.map

package/dist/chunks/chunk.QQUUXS2I.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/header/header.ts"],
+  "sourcesContent": ["import SynHeader from './header.component.js';\n\nexport * from './header.component.js';\nexport default SynHeader;\n\nSynHeader.define('syn-header');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-header': SynHeader;\n  }\n}\n"],
+  "mappings": ";;;;;AAGA,IAAO,iBAAQ;AAEf,UAAU,OAAO,YAAY;",
+  "names": []
+}

package/dist/chunks/{chunk.AROEEADW.js → chunk.QTL37DVE.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.TR376A4H.js";
+} from "./chunk.E6UCXKSB.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -128,4 +128,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.AROEEADW.js.map
+//# sourceMappingURL=chunk.QTL37DVE.js.map

package/dist/chunks/{chunk.QL2X22YC.js → chunk.RHSBVJQ2.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.TR376A4H.js";
+} from "./chunk.E6UCXKSB.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -53,4 +53,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.QL2X22YC.js.map
+//# sourceMappingURL=chunk.RHSBVJQ2.js.map

package/dist/chunks/chunk.RLIJRLLJ.js

@@ -0,0 +1,106 @@
+import {
+  accordion_styles_default
+} from "./chunk.WNUZ6LH4.js";
+import {
+  watch
+} from "./chunk.QJMO7V5R.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.E6UCXKSB.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/accordion/accordion.component.ts
+import { html } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var SynAccordion = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.closeOthers = false;
+    this.contained = false;
+    this.size = "medium";
+    this.handleAccordionShow = (event) => {
+      if (this.closeOthers) {
+        this.detailsInDefaultSlot.forEach((detailsElement) => {
+          if (detailsElement === event.target) {
+            return;
+          }
+          if (detailsElement.parentNode !== event.target.parentNode) {
+            return;
+          }
+          detailsElement.removeAttribute("open");
+        });
+      }
+    };
+  }
+  adjustDetailsSize() {
+    this.detailsInDefaultSlot.forEach((detail) => {
+      detail.setAttribute("size", this.size);
+    });
+  }
+  adjustDetailsContained() {
+    this.detailsInDefaultSlot.forEach((detail) => {
+      detail.contained = this.contained;
+    });
+  }
+  handleSizeChange() {
+    this.adjustDetailsSize();
+  }
+  handleContainedChange() {
+    this.adjustDetailsContained();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("syn-show", this.handleAccordionShow);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("syn-show", this.handleAccordionShow);
+  }
+  handleSlotChange() {
+    this.adjustDetailsSize();
+    this.adjustDetailsContained();
+  }
+  render() {
+    return html`
+      <div 
+        part="base"
+        class=${classMap({
+      accordion: true,
+      "accordion--contained": this.contained
+    })}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+SynAccordion.styles = [
+  component_styles_default,
+  accordion_styles_default
+];
+__decorateClass([
+  queryAssignedElements({ selector: "syn-details" })
+], SynAccordion.prototype, "detailsInDefaultSlot", 2);
+__decorateClass([
+  property({ attribute: "close-others", type: Boolean })
+], SynAccordion.prototype, "closeOthers", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynAccordion.prototype, "contained", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynAccordion.prototype, "size", 2);
+__decorateClass([
+  watch("size", { waitUntilFirstUpdate: true })
+], SynAccordion.prototype, "handleSizeChange", 1);
+__decorateClass([
+  watch("contained", { waitUntilFirstUpdate: true })
+], SynAccordion.prototype, "handleContainedChange", 1);
+
+export {
+  SynAccordion
+};
+//# sourceMappingURL=chunk.RLIJRLLJ.js.map

package/dist/chunks/chunk.RLIJRLLJ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/accordion/accordion.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './accordion.styles.js';\nimport type SynDetails from '../details/details.component.js';\n\n/**\n * @summary Accordions provide the ability to group a list of `<syn-details>`.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs\n * @status stable\n * @since 1.23.0\n *\n * @slot - The accordion's main content. Must be `<syn-details />` elements.\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynAccordion extends SynergyElement {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    styles,\n  ];\n\n  @queryAssignedElements({ selector: 'syn-details' }) detailsInDefaultSlot!: SynDetails[];\n\n  /**\n   * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.\n   */\n  @property({ attribute: 'close-others', type: Boolean }) closeOthers = false;\n\n  /** Draws the accordion and the slotted `<syn-details>` as contained elements. */\n  @property({ reflect: true, type: Boolean }) contained = false;\n\n  /** The size that should be applied to all slotted `<syn-details>` elements */\n  @property({ reflect: true }) size: 'medium' | 'large' = 'medium';\n\n  private adjustDetailsSize() {\n    this.detailsInDefaultSlot.forEach(detail => {\n      detail.setAttribute('size', this.size);\n    });\n  }\n\n  private adjustDetailsContained() {\n    this.detailsInDefaultSlot.forEach(detail => {\n      // eslint-disable-next-line no-param-reassign\n      detail.contained = this.contained;\n    });\n  }\n\n  @watch('size', { waitUntilFirstUpdate: true })\n  handleSizeChange() {\n    this.adjustDetailsSize();\n  }\n\n  @watch('contained', { waitUntilFirstUpdate: true })\n  handleContainedChange() {\n    this.adjustDetailsContained();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('syn-show', this.handleAccordionShow);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('syn-show', this.handleAccordionShow);\n  }\n\n  handleSlotChange() {\n    this.adjustDetailsSize();\n    this.adjustDetailsContained();\n  }\n\n  private handleAccordionShow = (event: Event) => {\n    if (this.closeOthers) {\n      this.detailsInDefaultSlot.forEach(detailsElement => {\n        // Break if detailsElement sent the event\n        if (detailsElement === event.target) {\n          return;\n        }\n        // Break if detailsElement is outside this group\n        if (detailsElement.parentNode !== (event.target as HTMLUnknownElement).parentNode) {\n          return;\n        }\n        detailsElement.removeAttribute('open');\n      });\n    }\n  };\n\n  render() {\n    /* eslint-disable @typescript-eslint/unbound-method */\n    return html`\n      <div \n        part=\"base\"\n        class=${classMap({\n          accordion: true,\n          'accordion--contained': this.contained,\n        })}>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,UAAU,6BAA6B;AAEhD,SAAS,gBAAgB;AAkBzB,IAAqB,eAArB,cAA0C,eAAe;AAAA,EAAzD;AAAA;AAW0D,uBAAc;AAG1B,qBAAY;AAG3B,gBAA2B;AAwCxD,SAAQ,sBAAsB,CAAC,UAAiB;AAC9C,UAAI,KAAK,aAAa;AACpB,aAAK,qBAAqB,QAAQ,oBAAkB;AAElD,cAAI,mBAAmB,MAAM,QAAQ;AACnC;AAAA,UACF;AAEA,cAAI,eAAe,eAAgB,MAAM,OAA8B,YAAY;AACjF;AAAA,UACF;AACA,yBAAe,gBAAgB,MAAM;AAAA,QACvC,CAAC;AAAA,MACH;AAAA,IACF;AAAA;AAAA,EApDQ,oBAAoB;AAC1B,SAAK,qBAAqB,QAAQ,YAAU;AAC1C,aAAO,aAAa,QAAQ,KAAK,IAAI;AAAA,IACvC,CAAC;AAAA,EACH;AAAA,EAEQ,yBAAyB;AAC/B,SAAK,qBAAqB,QAAQ,YAAU;AAE1C,aAAO,YAAY,KAAK;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAGA,mBAAmB;AACjB,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAGA,wBAAwB;AACtB,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,YAAY,KAAK,mBAAmB;AAAA,EAC5D;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,oBAAoB,YAAY,KAAK,mBAAmB;AAAA,EAC/D;AAAA,EAEA,mBAAmB;AACjB,SAAK,kBAAkB;AACvB,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAkBA,SAAS;AAEP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,WAAW;AAAA,MACX,wBAAwB,KAAK;AAAA,IAC/B,CAAC,CAAC;AAAA,4BACkB,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAI/C;AACF;AAvFqB,aACZ,SAAyB;AAAA,EAC9B;AAAA,EACA;AACF;AAEoD;AAAA,EAAnD,sBAAsB,EAAE,UAAU,cAAc,CAAC;AAAA,GAN/B,aAMiC;AAKI;AAAA,EAAvD,SAAS,EAAE,WAAW,gBAAgB,MAAM,QAAQ,CAAC;AAAA,GAXnC,aAWqC;AAGZ;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GAdvB,aAcyB;AAGf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAjBR,aAiBU;AAgB7B;AAAA,EADC,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAhC1B,aAiCnB;AAKA;AAAA,EADC,MAAM,aAAa,EAAE,sBAAsB,KAAK,CAAC;AAAA,GArC/B,aAsCnB;",
+  "names": []
+}