@synergy-design-system/components 3.2.1 → 3.3.0

package/dist/chunks/{chunk.C5WF3K27.js → chunk.EX4CTB5U.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.U6RI62CP.js";
+} from "./chunk.SZVAIHLG.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.C5WF3K27.js.map
+//# sourceMappingURL=chunk.EX4CTB5U.js.map

package/dist/chunks/{chunk.HV57E6MJ.js → chunk.FPQ45A6M.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.VWFRCPN5.js";
+} from "./chunk.OQTCK25R.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynResizeObserver
 };
-//# sourceMappingURL=chunk.HV57E6MJ.js.map
+//# sourceMappingURL=chunk.FPQ45A6M.js.map

package/dist/chunks/{chunk.DLHQKWGN.js → chunk.G5G6TON4.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.NY33MDYP.js";
+} from "./chunk.7HTPCUKK.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.DLHQKWGN.js.map
+//# sourceMappingURL=chunk.G5G6TON4.js.map

package/dist/chunks/{chunk.JKXO42MS.js → chunk.HJBM424N.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.7XSJ52RM.js";
+} from "./chunk.R36PMPNJ.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.JKXO42MS.js.map
+//# sourceMappingURL=chunk.HJBM424N.js.map

package/dist/chunks/{chunk.TAZAKWO5.js → chunk.HP4EAWPZ.js}

@@ -1,9 +1,6 @@
-import {
-  details_custom_styles_default
-} from "./chunk.GFX23JLA.js";
 import {
   details_styles_default
-} from "./chunk.2BJPTG2Q.js";
+} from "./chunk.IP6JSQWX.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -18,7 +15,7 @@ import {
 } from "./chunk.RJUVM6NO.js";
 import {
   SynIcon
-} from "./chunk.7XSJ52RM.js";
+} from "./chunk.R36PMPNJ.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -33,7 +30,7 @@ import {
 } from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.VWFRCPN5.js";
+} from "./chunk.OQTCK25R.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -154,6 +151,7 @@ var SynDetails = class extends SynergyElement {
         part="base"
         class=${classMap({
       details: true,
+      "details--size-small": this.size === "small",
       "details--size-medium": this.size === "medium",
       "details--size-large": this.size === "large",
       "details--open": this.open,
@@ -192,7 +190,7 @@ var SynDetails = class extends SynergyElement {
     `;
   }
 };
-SynDetails.styles = [component_styles_default, details_styles_default, details_custom_styles_default];
+SynDetails.styles = [component_styles_default, details_styles_default];
 SynDetails.dependencies = {
   "syn-icon": SynIcon
 };
@@ -247,4 +245,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.TAZAKWO5.js.map
+//# sourceMappingURL=chunk.HP4EAWPZ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/details/details.component.ts"],
+  "sourcesContent": ["/* 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 type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Details show a brief summary and expand to show additional content.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs\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 * @csspart body - The container that wraps 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 *\n * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.\n */\n@enableDefaultSettings('SynDetails')\nexport default class SynDetails extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\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: 'small' | '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-small': this.size === 'small',\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=\"details-open\"></syn-icon>\n            </slot>\n            <slot name=\"collapse-icon\">\n              <syn-icon library=\"system\" name=\"details-close\"></syn-icon>\n            </slot>\n          </span>\n        </summary>\n\n        <div class=\"details__body\" part=\"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": "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",
+  "names": []
+}

package/dist/chunks/{chunk.WT3TWFBE.js → chunk.I25CJLWF.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumb
-} from "./chunk.JTE7XOWE.js";
+} from "./chunk.ZBAJQQ6X.js";
 
 // src/components/breadcrumb/breadcrumb.ts
 var breadcrumb_default = SynBreadcrumb;
@@ -9,4 +9,4 @@ SynBreadcrumb.define("syn-breadcrumb");
 export {
   breadcrumb_default
 };
-//# sourceMappingURL=chunk.WT3TWFBE.js.map
+//# sourceMappingURL=chunk.I25CJLWF.js.map

package/dist/chunks/chunk.IP6JSQWX.js

@@ -0,0 +1,185 @@
+// src/components/details/details.styles.ts
+import { css } from "lit";
+var details_styles_default = css`
+  :host {
+    /* Size-dependent custom properties (default to medium values) */
+    --details-header-padding: var(--syn-spacing-medium-large) 0;
+    --details-content-padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);
+    --details-summary-font: var(--syn-body-medium-bold);
+    --details-content-font-size: var(--syn-font-size-small);
+    --details-icon-size: var(--syn-spacing-large);
+    --details-slotted-icon-size: var(--syn-spacing-large);
+    
+    /* Contained variant custom properties */
+    --details-header-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large);
+    --details-content-padding-contained: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
+
+    display: block;
+  }
+
+  .details {
+    background-color: transparent;
+    border: 1px solid var(--syn-panel-border-color);
+    border-radius: var(--syn-border-radius-none);
+    border-width: 0 0 var(--syn-border-width-small);
+    overflow-anchor: none;
+  }
+
+  /** #429: Use token for opacity */
+  .details--disabled {
+    opacity: var(--syn-opacity-50);
+  }
+
+  .details__header {
+    align-items: center;
+    border-radius: inherit;
+    cursor: pointer;
+    display: flex;
+    gap: var(--syn-spacing-medium);
+    padding: var(--details-header-padding);
+    user-select: none;
+  }
+
+  .details__header::-webkit-details-marker {
+    display: none;
+  }
+
+  .details__header:focus {
+    outline: none;
+  }
+
+  .details__header:focus-visible {
+    outline: var(--syn-focus-ring);
+    outline-offset: calc(1px + var(--syn-focus-ring-offset));
+  }
+
+  .details--disabled .details__header {
+    cursor: not-allowed;
+  }
+
+  .details--disabled .details__header:focus-visible {
+    box-shadow: none;
+    outline: none;
+  }
+
+  .details__summary {
+    align-items: center;
+    color: var(--syn-typography-color-text);
+    display: flex;
+    flex: 1 1 auto;
+    font: var(--details-summary-font);
+  }
+
+  .details__summary-icon {
+    align-items: center;
+    align-self: flex-start;
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    flex: 0 0 auto;
+    font-size: var(--details-icon-size);
+    position: relative;
+
+    /**
+     * 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
+     */
+    top: 2px;
+    transition: var(--syn-transition-medium) rotate ease;
+  }
+
+  /**
+   * 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: var(--syn-details-open-rotation);
+  }
+
+  .details--open slot[name='expand-icon'],
+  .details:not(.details--open) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .details__body {
+    overflow: hidden;
+  }
+
+  .details__content {
+    display: block;
+    font-size: var(--details-content-font-size);
+    line-height: var(--syn-line-height-normal);
+    padding: var(--details-content-padding);
+  }
+
+  /**
+   * Size variants
+   */
+  .details--size-small {
+    --details-header-padding: var(--syn-spacing-small) 0;
+    --details-content-padding: var(--syn-spacing-small) 0 var(--syn-spacing-medium-large);
+    --details-summary-font: var(--syn-body-small-bold);
+    --details-content-font-size: var(--syn-font-size-x-small);
+    --details-icon-size: var(--syn-spacing-medium-large);
+    --details-slotted-icon-size: var(--syn-spacing-medium-large);
+    --details-header-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large);
+    --details-content-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-medium-large);
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .details--size-small .details__header {
+    min-height: var(--syn-spacing-large);
+  }
+
+  .details--size-large {
+    --details-header-padding: var(--syn-spacing-large) 0;
+    --details-content-padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);
+    --details-summary-font: var(--syn-body-large-bold);
+    --details-content-font-size: var(--syn-font-size-medium);
+    --details-icon-size: var(--syn-spacing-x-large);
+    --details-slotted-icon-size: var(--syn-spacing-x-large);
+    --details-header-padding-contained: var(--syn-spacing-large);
+    --details-content-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-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(--details-slotted-icon-size);
+    margin-right: var(--syn-spacing-small);
+  }
+
+  /**
+   * 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-interactive-quiet-color-hover);
+  }
+
+  /**
+   *  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);
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .details--contained .details__header {
+    padding: var(--details-header-padding-contained);
+  }
+
+  .details--contained .details__content {
+    padding: var(--details-content-padding-contained);
+  }
+
+  .details--contained .details__header:focus-visible {
+    border-radius: var(--syn-border-radius-medium);
+  }
+`;
+
+export {
+  details_styles_default
+};
+//# sourceMappingURL=chunk.IP6JSQWX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/details/details.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n  :host {\n    /* Size-dependent custom properties (default to medium values) */\n    --details-header-padding: var(--syn-spacing-medium-large) 0;\n    --details-content-padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);\n    --details-summary-font: var(--syn-body-medium-bold);\n    --details-content-font-size: var(--syn-font-size-small);\n    --details-icon-size: var(--syn-spacing-large);\n    --details-slotted-icon-size: var(--syn-spacing-large);\n    \n    /* Contained variant custom properties */\n    --details-header-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large);\n    --details-content-padding-contained: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);\n\n    display: block;\n  }\n\n  .details {\n    background-color: transparent;\n    border: 1px solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    border-width: 0 0 var(--syn-border-width-small);\n    overflow-anchor: none;\n  }\n\n  /** #429: Use token for opacity */\n  .details--disabled {\n    opacity: var(--syn-opacity-50);\n  }\n\n  .details__header {\n    align-items: center;\n    border-radius: inherit;\n    cursor: pointer;\n    display: flex;\n    gap: var(--syn-spacing-medium);\n    padding: var(--details-header-padding);\n    user-select: none;\n  }\n\n  .details__header::-webkit-details-marker {\n    display: none;\n  }\n\n  .details__header:focus {\n    outline: none;\n  }\n\n  .details__header:focus-visible {\n    outline: var(--syn-focus-ring);\n    outline-offset: calc(1px + var(--syn-focus-ring-offset));\n  }\n\n  .details--disabled .details__header {\n    cursor: not-allowed;\n  }\n\n  .details--disabled .details__header:focus-visible {\n    box-shadow: none;\n    outline: none;\n  }\n\n  .details__summary {\n    align-items: center;\n    color: var(--syn-typography-color-text);\n    display: flex;\n    flex: 1 1 auto;\n    font: var(--details-summary-font);\n  }\n\n  .details__summary-icon {\n    align-items: center;\n    align-self: flex-start;\n    color: var(--syn-color-neutral-950);\n    display: flex;\n    flex: 0 0 auto;\n    font-size: var(--details-icon-size);\n    position: relative;\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    top: 2px;\n    transition: var(--syn-transition-medium) rotate ease;\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: var(--syn-details-open-rotation);\n  }\n\n  .details--open slot[name='expand-icon'],\n  .details:not(.details--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .details__body {\n    overflow: hidden;\n  }\n\n  .details__content {\n    display: block;\n    font-size: var(--details-content-font-size);\n    line-height: var(--syn-line-height-normal);\n    padding: var(--details-content-padding);\n  }\n\n  /**\n   * Size variants\n   */\n  .details--size-small {\n    --details-header-padding: var(--syn-spacing-small) 0;\n    --details-content-padding: var(--syn-spacing-small) 0 var(--syn-spacing-medium-large);\n    --details-summary-font: var(--syn-body-small-bold);\n    --details-content-font-size: var(--syn-font-size-x-small);\n    --details-icon-size: var(--syn-spacing-medium-large);\n    --details-slotted-icon-size: var(--syn-spacing-medium-large);\n    --details-header-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large);\n    --details-content-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-medium-large);\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  .details--size-small .details__header {\n    min-height: var(--syn-spacing-large);\n  }\n\n  .details--size-large {\n    --details-header-padding: var(--syn-spacing-large) 0;\n    --details-content-padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);\n    --details-summary-font: var(--syn-body-large-bold);\n    --details-content-font-size: var(--syn-font-size-medium);\n    --details-icon-size: var(--syn-spacing-x-large);\n    --details-slotted-icon-size: var(--syn-spacing-x-large);\n    --details-header-padding-contained: var(--syn-spacing-large);\n    --details-content-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n\n  .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(--details-slotted-icon-size);\n    margin-right: var(--syn-spacing-small);\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-interactive-quiet-color-hover);\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  /* stylelint-disable-next-line no-descending-specificity */\n  .details--contained .details__header {\n    padding: var(--details-header-padding-contained);\n  }\n\n  .details--contained .details__content {\n    padding: var(--details-content-padding-contained);\n  }\n\n  .details--contained .details__header:focus-visible {\n    border-radius: var(--syn-border-radius-medium);\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,yBAAQ;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;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.S46B7VZA.js → chunk.IREIGQS7.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.VWFRCPN5.js";
+} from "./chunk.OQTCK25R.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -44,4 +44,4 @@ export {
   getEventNameForElement,
   alertSizeForInput
 };
-//# sourceMappingURL=chunk.S46B7VZA.js.map
+//# sourceMappingURL=chunk.IREIGQS7.js.map

package/dist/chunks/{chunk.NKWPAQM3.js → chunk.JKTQX462.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.EQ3KJJ3H.js";
+} from "./chunk.CVQYFMX6.js";
 
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.NKWPAQM3.js.map
+//# sourceMappingURL=chunk.JKTQX462.js.map

package/dist/chunks/{chunk.U6HWY6PL.js → chunk.JOIPUVY2.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.XRSLCQH3.js";
 import {
   SynPopup
-} from "./chunk.T3OH2LR6.js";
+} from "./chunk.AIKUH4N6.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.VWFRCPN5.js";
+} from "./chunk.OQTCK25R.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -380,4 +380,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.U6HWY6PL.js.map
+//# sourceMappingURL=chunk.JOIPUVY2.js.map

package/dist/chunks/{chunk.3NALMFRW.js → chunk.JPIP5C4C.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.2PW7XZZF.js";
+} from "./chunk.RHJBEL5G.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.3NALMFRW.js.map
+//# sourceMappingURL=chunk.JPIP5C4C.js.map

package/dist/chunks/{chunk.EONM7YMW.js → chunk.K5OEH644.js}

@@ -1,9 +1,9 @@
-import {
-  textarea_styles_default
-} from "./chunk.KPHDBL43.js";
 import {
   textarea_custom_styles_default
 } from "./chunk.SHIPVO7H.js";
+import {
+  textarea_styles_default
+} from "./chunk.KPHDBL43.js";
 import {
   defaultValue
 } from "./chunk.3JDUKQRN.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.VWFRCPN5.js";
+} from "./chunk.OQTCK25R.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -383,4 +383,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.EONM7YMW.js.map
+//# sourceMappingURL=chunk.K5OEH644.js.map

package/dist/chunks/{chunk.SQKP3P2V.js → chunk.KEGWZQDD.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.Q5EKPQBR.js";
 import {
   SynResizeObserver
-} from "./chunk.HV57E6MJ.js";
+} from "./chunk.FPQ45A6M.js";
 import {
   scrollIntoView
 } from "./chunk.2DT3C6WE.js";
 import {
   SynIconButton
-} from "./chunk.OFF4U2HZ.js";
+} from "./chunk.4NMKUGVS.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.VWFRCPN5.js";
+} from "./chunk.OQTCK25R.js";
 import {
   __decorateClass,
   __spreadValues
@@ -516,4 +516,4 @@ __decorateClass([
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.SQKP3P2V.js.map
+//# sourceMappingURL=chunk.KEGWZQDD.js.map

package/dist/chunks/{chunk.HGR3332E.js → chunk.LRGMNNQZ.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.BAB5SWUZ.js";
+} from "./chunk.NGSAMIEF.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.HGR3332E.js.map
+//# sourceMappingURL=chunk.LRGMNNQZ.js.map

package/dist/chunks/{chunk.QHX346G7.js → chunk.LYP2QFCG.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.XMOH46TX.js";
+} from "./chunk.SXS352PZ.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.QHX346G7.js.map
+//# sourceMappingURL=chunk.LYP2QFCG.js.map

package/dist/chunks/{chunk.QPZJTDAZ.js → chunk.MH2BHV6Y.js}

@@ -1,6 +1,6 @@
 import {
   SynValidate
-} from "./chunk.65442A47.js";
+} from "./chunk.3PGXBAX3.js";
 
 // src/components/validate/validate.ts
 var validate_default = SynValidate;
@@ -9,4 +9,4 @@ SynValidate.define("syn-validate");
 export {
   validate_default
 };
-//# sourceMappingURL=chunk.QPZJTDAZ.js.map
+//# sourceMappingURL=chunk.MH2BHV6Y.js.map

package/dist/chunks/{chunk.TMCA3VCF.js → chunk.MM2QEKTI.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.BBWQBAFA.js";
+} from "./chunk.5QU2VQV6.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.TMCA3VCF.js.map
+//# sourceMappingURL=chunk.MM2QEKTI.js.map

package/dist/chunks/{chunk.KO63FB6R.js → chunk.N4QI4ASF.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.VJQZ76BR.js";
+} from "./chunk.Q4QD4WIO.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.KO63FB6R.js.map
+//# sourceMappingURL=chunk.N4QI4ASF.js.map

package/dist/chunks/{chunk.FQPIRAA6.js → chunk.N5K6F4BA.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.VWFRCPN5.js";
+} from "./chunk.OQTCK25R.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -68,4 +68,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.FQPIRAA6.js.map
+//# sourceMappingURL=chunk.N5K6F4BA.js.map

package/dist/chunks/{chunk.BAB5SWUZ.js → chunk.NGSAMIEF.js}

@@ -1,19 +1,19 @@
-import {
-  select_styles_default
-} from "./chunk.GPP4D4HH.js";
 import {
   select_custom_styles_default
 } from "./chunk.F7LCJU4M.js";
+import {
+  select_styles_default
+} from "./chunk.GPP4D4HH.js";
 import {
   SynTag
-} from "./chunk.SRY32QYH.js";
+} from "./chunk.VCWVJIZJ.js";
 import {
   compareValues,
   isAllowedValue
 } from "./chunk.VECCQZP5.js";
 import {
   SynPopup
-} from "./chunk.T3OH2LR6.js";
+} from "./chunk.AIKUH4N6.js";
 import {
   scrollIntoView
 } from "./chunk.2DT3C6WE.js";
@@ -40,7 +40,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.7XSJ52RM.js";
+} from "./chunk.R36PMPNJ.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -55,7 +55,7 @@ import {
 } from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.VWFRCPN5.js";
+} from "./chunk.OQTCK25R.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -874,4 +874,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.BAB5SWUZ.js.map
+//# sourceMappingURL=chunk.NGSAMIEF.js.map

package/dist/chunks/{chunk.7G5PBA5Q.js → chunk.NSRIBSSB.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.H5ZIVYK5.js";
+} from "./chunk.65EIYVNS.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.7G5PBA5Q.js.map
+//# sourceMappingURL=chunk.NSRIBSSB.js.map

package/dist/chunks/{chunk.H7JZRD2G.js → chunk.O23FBAJX.js}

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.N6DEOPEC.js";
+} from "./chunk.OPTJMEC6.js";
 
 // src/components/file/file.ts
 var file_default = SynFile;
@@ -9,4 +9,4 @@ SynFile.define("syn-file");
 export {
   file_default
 };
-//# sourceMappingURL=chunk.H7JZRD2G.js.map
+//# sourceMappingURL=chunk.O23FBAJX.js.map