@synergy-design-system/components 3.1.0 → 3.2.1

package/README.md

@@ -229,64 +229,3 @@ This package ships with a [custom-elements-manifest](https://github.com/webcompo
 Please have a look at the official [breaking changes list](https://synergy-design-system.github.io/?path=/docs/packages-components-breaking-changes--docs) for information how to update to new major versions of Synergy.
 
 ---
-
-## Local setup
-
-### Using the vendor cli
-
-The vendor cli is taking care about updating our code base according to a new version of shoelace.
-
-To change the shoelace version, that should be downloaded, change the version in the config of `./scripts/vendorism.js`.
-To download it use the command `pnpm vendor.get`.
-If code in our components library should be updated to this new shoelace version use `pnpm vendor.set`.
-
-All shoelace files are per default readonly and are disabled from being changed. To change this files can be ejected. This can be done via:
-`pnpm vendor.eject "src/declaration.d.ts"`.
-
-### Adding events to the output
-
-To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.
-
-### Adding metadata to components
-
-Components can be enriched with metadata that automatically generates JSDoc annotations during the build process. The `add-metadata-to-components.js` script processes `*.component.ts` files and looks for corresponding `metadata.json` files to inject JSDoc tags.
-
-#### Supported metadata types
-
-- `@animation` - Component animations
-- `@event` - Custom events
-- `@slot` - Content slots
-- `@dependency` - Dependencies
-- `@csspart` - CSS parts for styling
-- `@cssproperty` - CSS custom properties
-
-#### Usage
-
-Create a `metadata.json` file in your component directory:
-
-```json
-{
-  "@event": [
-    { "name": "syn-change", "description": "Emitted when value changes" }
-  ],
-  "@slot": [{ "name": "default", "description": "Main content" }],
-  "@csspart": [{ "name": "base", "description": "Base wrapper" }]
-}
-```
-
-This will generate the following JSDoc annotations in your component:
-
-```typescript
-/**
- * @summary Your component description
- *
- * @event syn-change - Emitted when value changes
- * @slot default - Main content
- * @csspart base - Base wrapper
- */
-export default class YourComponent extends SynergyElement {
-  // Component implementation...
-}
-```
-
-Each metadata object requires a `name` property and optionally accepts a `description`. Run `pnpm vendor.set` to process the metadata and automatically add JSDoc annotations to your component's class comment.

package/dist/chunks/{chunk.4PUQDU4T.js → chunk.26MIXER6.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.O655X4YP.js";
 import {
   card_styles_default
-} from "./chunk.C4JTZKPZ.js";
+} from "./chunk.R3SMKUIL.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.4PUQDU4T.js.map
+//# sourceMappingURL=chunk.26MIXER6.js.map

package/dist/chunks/chunk.26MIXER6.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/card/card.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './card.styles.js';\nimport customStyles from './card.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Cards can be used to group related subjects in a container.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --padding - The padding to use for the card's sections.\n */\nexport default class SynCard extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');\n\n  /** Draws the card with a shadow. Can be used when the card has to stand out visually, for example in dashboards. */\n  @property({ type: Boolean, reflect: true }) shadow = false;\n\n  /** Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy. */\n  @property({ type: Boolean, reflect: true }) sharp = false;\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          card: true,\n          'card--shadow': this.shadow,\n          'card--sharp': this.sharp,\n          'card--has-footer': this.hasSlotController.test('footer'),\n          'card--has-image': this.hasSlotController.test('image'),\n          'card--has-header': this.hasSlotController.test('header')\n        })}\n      >\n        <slot name=\"image\" part=\"image\" class=\"card__image\"></slot>\n        <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n        <slot part=\"body\" class=\"card__body\"></slot>\n        <slot name=\"footer\" part=\"footer\" class=\"card__footer\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AA6BrB,IAAqB,UAArB,cAAqC,eAAe;AAAA,EAApD;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,UAAU,UAAU,OAAO;AAGhD,kBAAS;AAGT,iBAAQ;AAAA;AAAA,EAEpD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,gBAAgB,KAAK;AAAA,MACrB,eAAe,KAAK;AAAA,MACpB,oBAAoB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACxD,mBAAmB,KAAK,kBAAkB,KAAK,OAAO;AAAA,MACtD,oBAAoB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IAC1D,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQR;AACF;AA/BqB,QACZ,SAAyB,CAAC,0BAAiB,qBAAQ,0BAAY;AAK1B;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,QAMyB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GATvB,QASyB;",
+  "names": []
+}

package/dist/chunks/{chunk.VA26EAEP.js → chunk.2BJPTG2Q.js}

@@ -84,4 +84,4 @@ var details_styles_default = css`
 export {
   details_styles_default
 };
-//# sourceMappingURL=chunk.VA26EAEP.js.map
+//# sourceMappingURL=chunk.2BJPTG2Q.js.map

package/dist/chunks/chunk.2BJPTG2Q.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\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  .details {\n    border: solid 1px var(--syn-color-neutral-200);\n    border-radius: var(--syn-border-radius-medium);\n    background-color: var(--syn-color-neutral-0);\n    overflow-anchor: none;\n  }\n\n  .details--disabled {\n    opacity: 0.5;\n  }\n\n  .details__header {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    padding: var(--syn-spacing-medium);\n    user-select: none;\n    -webkit-user-select: none;\n    cursor: pointer;\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    outline: none;\n    box-shadow: none;\n  }\n\n  .details__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .details__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: var(--syn-transition-medium) rotate ease;\n  }\n\n  .details--open .details__summary-icon {\n    rotate: 90deg;\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    padding: var(--syn-spacing-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;",
+  "names": []
+}

package/dist/chunks/{chunk.5732DMBC.js → chunk.2DT3C6WE.js}

@@ -71,4 +71,4 @@ export {
   unlockBodyScrolling,
   scrollIntoView
 };
-//# sourceMappingURL=chunk.5732DMBC.js.map
+//# sourceMappingURL=chunk.2DT3C6WE.js.map

package/dist/chunks/chunk.2DT3C6WE.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/offset.ts", "../../src/internal/scroll.ts"],
+  "sourcesContent": ["/* eslint-disable */\n/**\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems\n * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)\n  };\n}\n", "/* eslint-disable */\nimport { getOffset } from './offset.js';\n\nconst locks = new Set();\n\n/** Returns the width of the document's scrollbar */\nfunction getScrollbarWidth() {\n  const documentWidth = document.documentElement.clientWidth;\n  return Math.abs(window.innerWidth - documentWidth);\n}\n\n/**\n * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `<body>` element.\n */\nfunction getExistingBodyPadding() {\n  const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ''));\n\n  if (isNaN(padding) || !padding) {\n    return 0;\n  }\n\n  return padding;\n}\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n\n  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from\n  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.\n  if (!document.documentElement.classList.contains('syn-scroll-lock')) {\n    /** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */\n    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `syn-scroll-lock` class is applied\n\n    let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;\n\n    // default is auto, unsupported browsers is \"undefined\"\n    if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {\n      scrollbarGutterProperty = 'stable';\n    }\n\n    /** Sometimes the scrollbar width is 1px, even then, we assume nothing is overflowing. */\n    if (scrollbarWidth < 2) {\n      // if there's no scrollbar, just set it to an empty string so whatever the user has set gets used. This is useful if the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.\n      scrollbarGutterProperty = '';\n    }\n    document.documentElement.style.setProperty('--syn-scroll-lock-gutter', scrollbarGutterProperty);\n    document.documentElement.classList.add('syn-scroll-lock');\n    document.documentElement.style.setProperty('--syn-scroll-lock-size', `${scrollbarWidth}px`);\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.documentElement.classList.remove('syn-scroll-lock');\n    document.documentElement.style.removeProperty('--syn-scroll-lock-size');\n  }\n}\n\n/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"],
+  "mappings": ";AAQO,SAAS,UAAU,SAAsB,QAAqB;AACnE,SAAO;AAAA,IACL,KAAK,KAAK,MAAM,QAAQ,sBAAsB,EAAE,MAAM,OAAO,sBAAsB,EAAE,GAAG;AAAA,IACxF,MAAM,KAAK,MAAM,QAAQ,sBAAsB,EAAE,OAAO,OAAO,sBAAsB,EAAE,IAAI;AAAA,EAC7F;AACF;;;ACVA,IAAM,QAAQ,oBAAI,IAAI;AAGtB,SAAS,oBAAoB;AAC3B,QAAM,gBAAgB,SAAS,gBAAgB;AAC/C,SAAO,KAAK,IAAI,OAAO,aAAa,aAAa;AACnD;AAKA,SAAS,yBAAyB;AAChC,QAAM,UAAU,OAAO,iBAAiB,SAAS,IAAI,EAAE,aAAa,QAAQ,MAAM,EAAE,CAAC;AAErF,MAAI,MAAM,OAAO,KAAK,CAAC,SAAS;AAC9B,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAMO,SAAS,kBAAkB,WAAwB;AACxD,QAAM,IAAI,SAAS;AAInB,MAAI,CAAC,SAAS,gBAAgB,UAAU,SAAS,iBAAiB,GAAG;AAEnE,UAAM,iBAAiB,kBAAkB,IAAI,uBAAuB;AAEpE,QAAI,0BAA0B,iBAAiB,SAAS,eAAe,EAAE;AAGzE,QAAI,CAAC,2BAA2B,4BAA4B,QAAQ;AAClE,gCAA0B;AAAA,IAC5B;AAGA,QAAI,iBAAiB,GAAG;AAEtB,gCAA0B;AAAA,IAC5B;AACA,aAAS,gBAAgB,MAAM,YAAY,4BAA4B,uBAAuB;AAC9F,aAAS,gBAAgB,UAAU,IAAI,iBAAiB;AACxD,aAAS,gBAAgB,MAAM,YAAY,0BAA0B,GAAG,cAAc,IAAI;AAAA,EAC5F;AACF;AAKO,SAAS,oBAAoB,WAAwB;AAC1D,QAAM,OAAO,SAAS;AAEtB,MAAI,MAAM,SAAS,GAAG;AACpB,aAAS,gBAAgB,UAAU,OAAO,iBAAiB;AAC3D,aAAS,gBAAgB,MAAM,eAAe,wBAAwB;AAAA,EACxE;AACF;AAGO,SAAS,eACd,SACA,WACA,YAAgD,YAChD,WAA8B,UAC9B;AACA,QAAM,SAAS,UAAU,SAAS,SAAS;AAC3C,QAAM,YAAY,OAAO,MAAM,UAAU;AACzC,QAAM,aAAa,OAAO,OAAO,UAAU;AAC3C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,aAAa,UAAU;AAC9C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,YAAY,UAAU;AAE7C,MAAI,cAAc,gBAAgB,cAAc,QAAQ;AACtD,QAAI,aAAa,MAAM;AACrB,gBAAU,SAAS,EAAE,MAAM,YAAY,SAAS,CAAC;AAAA,IACnD,WAAW,aAAa,QAAQ,cAAc,MAAM;AAClD,gBAAU,SAAS,EAAE,MAAM,aAAa,UAAU,cAAc,QAAQ,aAAa,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AAEA,MAAI,cAAc,cAAc,cAAc,QAAQ;AACpD,QAAI,YAAY,MAAM;AACpB,gBAAU,SAAS,EAAE,KAAK,WAAW,SAAS,CAAC;AAAA,IACjD,WAAW,YAAY,QAAQ,eAAe,MAAM;AAClD,gBAAU,SAAS,EAAE,KAAK,YAAY,UAAU,eAAe,QAAQ,cAAc,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/chunks/chunk.2IL4PA6Q.js

@@ -0,0 +1,130 @@
+import {
+  option_size_styles_default
+} from "./chunk.AMDQJFFP.js";
+
+// src/components/combobox/combobox.custom.styles.ts
+import { css } from "lit";
+var combobox_custom_styles_default = css`
+
+  .combobox__display-input {
+    flex: 1;
+    min-width: var(--syn-spacing-2x-large);
+    width: unset;
+  }
+
+  .combobox:not(.combobox--disabled) .combobox__display-input {
+    cursor: text;
+  }
+
+  .listbox__options ::slotted(syn-option[hidden]), 
+  .listbox__options ::slotted(syn-optgroup[hidden]) {
+    display: none;
+  }
+
+  .listbox__no-results {
+    align-items: center;
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    font: var(--syn-body-medium-regular);
+    padding: var(--syn-spacing-small) var(--syn-spacing-medium) var(--syn-spacing-small) 52px;
+  }
+
+  .combobox--small .listbox__no-results {
+    font-size: var(--syn-input-font-size-small);
+    min-height: var(--syn-input-height-small);
+    padding: 0 var(--syn-spacing-small) 0 40px;
+  }
+
+  .combobox--large .listbox__no-results {
+    font-size: var(--syn-input-font-size-large);
+    min-height: var(--syn-input-height-large);
+    padding: 0 var(--syn-spacing-large) 0 68px;
+  }
+
+  /* Multi Select */
+  .combobox__tags {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    margin-inline-start: var(--syn-spacing-2x-small);
+  }
+
+  .combobox__tags::slotted(syn-tag) {
+    cursor: pointer !important;
+  }
+
+  .combobox--disabled .combobox__tags,
+  .combobox--disabled .combobox__tags::slotted(syn-tag) {
+    cursor: not-allowed !important;
+  }
+
+  .combobox--small .combobox__tags {
+    gap: var(--syn-spacing-2x-small);
+  }
+
+  .combobox--medium .combobox__tags {
+    gap: var(--syn-spacing-x-small);
+  }
+
+  .combobox--large .combobox__tags {
+    gap: var(--syn-spacing-small);
+  }
+
+  .combobox--tags-visible.combobox--small .combobox__tags {
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .combobox--tags-visible.combobox--medium .combobox__tags {
+    margin-inline-end: var(--syn-input-spacing-small);
+  }
+
+  .combobox--tags-visible.combobox--large .combobox__tags {
+    margin-inline-end: var(--syn-input-spacing-medium);
+  }
+
+  /**
+   * #850: Allow to measure the size of the combobox.
+   * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
+   * Scoped to multiple to not break the single select per accident.
+   * Scoped to when placeholder is not visible to not break the placeholder visualization
+   */
+  :host([multiple]) :not(.combobox--placeholder-visible).combobox--tags-visible > .combobox__inputs > .combobox__tags {
+    min-width: 85px;
+    overflow: hidden;
+  }
+
+  :host([multiple]) .combobox__tags > div {
+    display: contents;
+  }
+
+  :host([multiple]) .combobox__tags > div > syn-tag {
+    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
+
+    max-width: var(--syn-select-tag-max-width);
+  }
+
+  :host([multiple]) .combobox__tags > div > syn-tag::part(content) {
+    display: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 
+  This class is needed to be able to hide the options as long as the popup close animation is running.
+  As otherwise the listbox would flicker because the options are shown again when the value is reset to empty string.
+  */
+  .options__hide {
+    /* We need to set the slot to something different than display: contents to be able to hide it. Also it should not take any space so we remove the height */
+    display: block;
+    height: 0;
+    opacity: 0;
+  }
+
+  ${option_size_styles_default}
+`;
+
+export {
+  combobox_custom_styles_default
+};
+//# sourceMappingURL=chunk.2IL4PA6Q.js.map

package/dist/chunks/chunk.2IL4PA6Q.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/combobox/combobox.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport sharedOptionSize from '../option/option-size.styles.js';\n\nexport default css`\n\n  .combobox__display-input {\n    flex: 1;\n    min-width: var(--syn-spacing-2x-large);\n    width: unset;\n  }\n\n  .combobox:not(.combobox--disabled) .combobox__display-input {\n    cursor: text;\n  }\n\n  .listbox__options ::slotted(syn-option[hidden]), \n  .listbox__options ::slotted(syn-optgroup[hidden]) {\n    display: none;\n  }\n\n  .listbox__no-results {\n    align-items: center;\n    color: var(--syn-color-neutral-950);\n    display: flex;\n    font: var(--syn-body-medium-regular);\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium) var(--syn-spacing-small) 52px;\n  }\n\n  .combobox--small .listbox__no-results {\n    font-size: var(--syn-input-font-size-small);\n    min-height: var(--syn-input-height-small);\n    padding: 0 var(--syn-spacing-small) 0 40px;\n  }\n\n  .combobox--large .listbox__no-results {\n    font-size: var(--syn-input-font-size-large);\n    min-height: var(--syn-input-height-large);\n    padding: 0 var(--syn-spacing-large) 0 68px;\n  }\n\n  /* Multi Select */\n  .combobox__tags {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .combobox__tags::slotted(syn-tag) {\n    cursor: pointer !important;\n  }\n\n  .combobox--disabled .combobox__tags,\n  .combobox--disabled .combobox__tags::slotted(syn-tag) {\n    cursor: not-allowed !important;\n  }\n\n  .combobox--small .combobox__tags {\n    gap: var(--syn-spacing-2x-small);\n  }\n\n  .combobox--medium .combobox__tags {\n    gap: var(--syn-spacing-x-small);\n  }\n\n  .combobox--large .combobox__tags {\n    gap: var(--syn-spacing-small);\n  }\n\n  .combobox--tags-visible.combobox--small .combobox__tags {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .combobox--tags-visible.combobox--medium .combobox__tags {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--tags-visible.combobox--large .combobox__tags {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  /**\n   * #850: Allow to measure the size of the combobox.\n   * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.\n   * Scoped to multiple to not break the single select per accident.\n   * Scoped to when placeholder is not visible to not break the placeholder visualization\n   */\n  :host([multiple]) :not(.combobox--placeholder-visible).combobox--tags-visible > .combobox__inputs > .combobox__tags {\n    min-width: 85px;\n    overflow: hidden;\n  }\n\n  :host([multiple]) .combobox__tags > div {\n    display: contents;\n  }\n\n  :host([multiple]) .combobox__tags > div > syn-tag {\n    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);\n\n    max-width: var(--syn-select-tag-max-width);\n  }\n\n  :host([multiple]) .combobox__tags > div > syn-tag::part(content) {\n    display: initial;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* \n  This class is needed to be able to hide the options as long as the popup close animation is running.\n  As otherwise the listbox would flicker because the options are shown again when the value is reset to empty string.\n  */\n  .options__hide {\n    /* We need to set the slot to something different than display: contents to be able to hide it. Also it should not take any space so we remove the height */\n    display: block;\n    height: 0;\n    opacity: 0;\n  }\n\n  ${sharedOptionSize}\n`;\n"],
+  "mappings": ";;;;;AAAA,SAAS,WAAW;AAGpB,IAAO,iCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqHX,0BAAgB;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.4M4LRUZD.js → chunk.2PW7XZZF.js}

@@ -6,22 +6,25 @@ import {
 } from "./chunk.BL5JW7YS.js";
 import {
   option_styles_default
-} from "./chunk.IVM3BGRH.js";
+} from "./chunk.5FVNGR5M.js";
 import {
   SynIcon
-} from "./chunk.Q6XDV7O7.js";
+} from "./chunk.7XSJ52RM.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
+import {
+  enableDefaultSettings
+} from "./chunk.YACUYJZN.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -182,8 +185,11 @@ __decorateClass([
 __decorateClass([
   watch("value")
 ], SynOption.prototype, "handleValueChange", 1);
+SynOption = __decorateClass([
+  enableDefaultSettings("SynOption")
+], SynOption);
 
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.4M4LRUZD.js.map
+//# sourceMappingURL=chunk.2PW7XZZF.js.map

package/dist/chunks/chunk.2PW7XZZF.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.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 './option.styles.js';\nimport customStyles from './option.custom.styles.js';\nimport { delimiterToWhiteSpace } from './utility.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n@enableDefaultSettings('SynOption')\nexport default class SynOption extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  // @ts-expect-error - Controller is currently unused\n  private readonly localize = new LocalizeController(this);\n\n  // #1036: Needed to store the original value before any delimiter processing\n  private originalValue: string | number = '';\n  private isInitialized = false;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  // the delimiter used to separate multiple values in a select\n  // This is provided by the wrapping syn-select\n  @state() delimiter = ' ';\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value: string | number = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n  }\n\n  private handleDefaultSlotChange() {\n    if (this.isInitialized) {\n      // When the label changes, tell the controller to update\n      this.triggerParentDefaultSlotChange();\n    } else {\n      this.isInitialized = true;\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('delimiter')\n  handleDelimiterChange() {\n    this.sanitizeValueForDelimiter();\n  }\n\n  @watch('value')\n  handleValueChange() {\n    this.originalValue = this.value;\n    this.sanitizeValueForDelimiter();\n  }\n\n  /**\n   * Replaces any occurrences of the delimiter in the option's original value with underscores.\n   */\n  sanitizeValueForDelimiter() {\n    let value = this.originalValue;\n    if (typeof value === 'number') {\n      return;\n    }\n\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof value !== 'string') {\n      value = String(value);\n    }\n\n    const { delimiter } = this;\n\n    if (value.includes(delimiter)) {\n      console.error(`Option values cannot include \"${delimiter}\". All occurrences of \"${delimiter}\" have been replaced with \"_\".`, this);\n      value = delimiterToWhiteSpace(value, this.delimiter);\n    }\n    this.value = value;\n    // #1056 We need to trigger the parent component's default slot change, so it can update its value selection\n    this.triggerParentDefaultSlotChange();\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    const nodes = this.childNodes;\n    let label = '';\n\n    [...nodes].forEach(node => {\n      if (node.nodeType === Node.ELEMENT_NODE) {\n        if (!(node as HTMLElement).hasAttribute('slot')) {\n          label += (node as HTMLElement).textContent;\n        }\n      }\n\n      if (node.nodeType === Node.TEXT_NODE) {\n        label += node.textContent;\n      }\n    });\n\n    return label.trim();\n  }\n\n  private triggerParentDefaultSlotChange() {\n    customElements.whenDefined('syn-combobox').then(() => {\n      const controller = this.closest('syn-combobox');\n      if (controller) {\n        controller.handleDefaultSlotChange();\n      }\n    });\n    customElements.whenDefined('syn-select').then(() => {\n      const controller = this.closest('syn-select');\n      if (controller) {\n        controller.handleDefaultSlotChange();\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          option: true,\n          'option--current': this.current,\n          'option--disabled': this.disabled,\n          'option--selected': this.selected,\n          'option--hover': this.hasHover\n        })}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <syn-icon part=\"checked-icon\" class=\"option__check\" name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n        <slot part=\"label\" class=\"option__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n        <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AA8BvC,IAAqB,YAArB,cAAuC,eAAe;AAAA,EAAtD;AAAA;AAKE;AAAA,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAGvD;AAAA,SAAQ,gBAAiC;AACzC,SAAQ,gBAAgB;AAMf,qBAAY;AAEZ,mBAAU;AACV,oBAAW;AACX,oBAAW;AAOS,iBAAyB;AAGV,oBAAW;AAAA;AAAA,EAEvD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,QAAQ;AAClC,SAAK,aAAa,iBAAiB,OAAO;AAAA,EAC5C;AAAA,EAEQ,0BAA0B;AAChC,QAAI,KAAK,eAAe;AAEtB,WAAK,+BAA+B;AAAA,IACtC,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAAA,EACF;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW;AAAA,EAClB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,wBAAwB;AACtB,SAAK,0BAA0B;AAAA,EACjC;AAAA,EAGA,oBAAoB;AAClB,SAAK,gBAAgB,KAAK;AAC1B,SAAK,0BAA0B;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,4BAA4B;AAC1B,QAAI,QAAQ,KAAK;AACjB,QAAI,OAAO,UAAU,UAAU;AAC7B;AAAA,IACF;AAIA,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,OAAO,KAAK;AAAA,IACtB;AAEA,UAAM,EAAE,UAAU,IAAI;AAEtB,QAAI,MAAM,SAAS,SAAS,GAAG;AAC7B,cAAQ,MAAM,iCAAiC,SAAS,0BAA0B,SAAS,kCAAkC,IAAI;AACjI,cAAQ,sBAAsB,OAAO,KAAK,SAAS;AAAA,IACrD;AACA,SAAK,QAAQ;AAEb,SAAK,+BAA+B;AAAA,EACtC;AAAA;AAAA,EAGA,eAAe;AACb,UAAM,QAAQ,KAAK;AACnB,QAAI,QAAQ;AAEZ,KAAC,GAAG,KAAK,EAAE,QAAQ,UAAQ;AACzB,UAAI,KAAK,aAAa,KAAK,cAAc;AACvC,YAAI,CAAE,KAAqB,aAAa,MAAM,GAAG;AAC/C,mBAAU,KAAqB;AAAA,QACjC;AAAA,MACF;AAEA,UAAI,KAAK,aAAa,KAAK,WAAW;AACpC,iBAAS,KAAK;AAAA,MAChB;AAAA,IACF,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAEQ,iCAAiC;AACvC,mBAAe,YAAY,cAAc,EAAE,KAAK,MAAM;AACpD,YAAM,aAAa,KAAK,QAAQ,cAAc;AAC9C,UAAI,YAAY;AACd,mBAAW,wBAAwB;AAAA,MACrC;AAAA,IACF,CAAC;AACD,mBAAe,YAAY,YAAY,EAAE,KAAK,MAAM;AAClD,YAAM,aAAa,KAAK,QAAQ,YAAY;AAC5C,UAAI,YAAY;AACd,mBAAW,wBAAwB;AAAA,MACrC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,oBAAoB,KAAK;AAAA,MACzB,iBAAiB,KAAK;AAAA,IACxB,CAAC,CAAC;AAAA,sBACY,KAAK,gBAAgB;AAAA,sBACrB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,+DAIoB,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIzF;AACF;AA7JqB,UACZ,SAAyB,CAAC,0BAAiB,uBAAQ,4BAAY;AADnD,UAEZ,eAAe,EAAE,YAAY,QAAQ;AASnB;AAAA,EAAxB,MAAM,gBAAgB;AAAA,GAXJ,UAWM;AAIhB;AAAA,EAAR,MAAM;AAAA,GAfY,UAeV;AAEA;AAAA,EAAR,MAAM;AAAA,GAjBY,UAiBV;AACA;AAAA,EAAR,MAAM;AAAA,GAlBY,UAkBV;AACA;AAAA,EAAR,MAAM;AAAA,GAnBY,UAmBV;AAOoB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA1BR,UA0BU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BvB,UA6ByB;AA0B5C;AAAA,EADC,MAAM,UAAU;AAAA,GAtDE,UAuDnB;AAKA;AAAA,EADC,MAAM,UAAU;AAAA,GA3DE,UA4DnB;AAKA;AAAA,EADC,MAAM,WAAW;AAAA,GAhEC,UAiEnB;AAKA;AAAA,EADC,MAAM,OAAO;AAAA,GArEK,UAsEnB;AAtEmB,YAArB;AAAA,EADC,sBAAsB,WAAW;AAAA,GACb;",
+  "names": []
+}

package/dist/chunks/{chunk.KCLOTN4Z.js → chunk.2RS24S7K.js}

@@ -1,18 +1,18 @@
 import {
   spinner_styles_default
-} from "./chunk.JLXCLATV.js";
+} from "./chunk.7V7XEBE2.js";
 import {
   spinner_custom_styles_default
 } from "./chunk.WQMTAEYE.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.KCLOTN4Z.js.map
+//# sourceMappingURL=chunk.2RS24S7K.js.map

package/dist/chunks/chunk.2RS24S7K.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner/spinner.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './spinner.styles.js';\nimport customStyles from './spinner.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */\nexport default class SynSpinner extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly localize = new LocalizeController(this);\n\n  render() {\n    return html`\n      <svg part=\"base\" class=\"spinner\" role=\"progressbar\" aria-label=${this.localize.term('loading')}>\n        <circle class=\"spinner__track\"></circle>\n        <circle class=\"spinner__indicator\"></circle>\n      </svg>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AACA,SAAS,YAAY;AAoBrB,IAAqB,aAArB,cAAwC,eAAe;AAAA,EAAvD;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAAA;AAAA,EAEvD,SAAS;AACP,WAAO;AAAA,uEAC4D,KAAK,SAAS,KAAK,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlG;AACF;AAbqB,WACZ,SAAyB,CAAC,0BAAiB,wBAAQ,6BAAY;",
+  "names": []
+}

package/dist/chunks/{chunk.VXC77KXR.js → chunk.32C66EYB.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk.BVV2XKW3.js";
 import {
   breadcrumb_item_styles_default
-} from "./chunk.O6ZH6AOI.js";
+} from "./chunk.OFKOVRHG.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.VXC77KXR.js.map
+//# sourceMappingURL=chunk.32C66EYB.js.map

package/dist/chunks/chunk.32C66EYB.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb-item/breadcrumb-item.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './breadcrumb-item.styles.js';\nimport customStyles from './breadcrumb-item.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */\nexport default class SynBreadcrumbItem extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @state() private renderType: 'button' | 'link' | 'dropdown' = 'button';\n\n  /**\n   * Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\n   * internally. When unset, a button will be rendered instead.\n   */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The `rel` attribute to use on the link. Only used when `href` is set. */\n  @property() rel = 'noreferrer noopener';\n\n  private setRenderType() {\n    const hasDropdown =\n      this.defaultSlot.assignedElements({ flatten: true }).filter(i => i.tagName.toLowerCase() === 'syn-dropdown')\n        .length > 0;\n\n    if (this.href) {\n      this.renderType = 'link';\n      return;\n    }\n\n    if (hasDropdown) {\n      this.renderType = 'dropdown';\n      return;\n    }\n\n    this.renderType = 'button';\n  }\n\n  @watch('href', { waitUntilFirstUpdate: true })\n  hrefChanged() {\n    this.setRenderType();\n  }\n\n  handleSlotChange() {\n    this.setRenderType();\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'breadcrumb-item': true,\n          'breadcrumb-item--has-prefix': this.hasSlotController.test('prefix'),\n          'breadcrumb-item--has-suffix': this.hasSlotController.test('suffix')\n        })}\n      >\n        <span part=\"prefix\" class=\"breadcrumb-item__prefix\">\n          <slot name=\"prefix\"></slot>\n        </span>\n\n        ${this.renderType === 'link'\n          ? html`\n              <a\n                part=\"label\"\n                class=\"breadcrumb-item__label breadcrumb-item__label--link\"\n                href=\"${this.href!}\"\n                target=\"${ifDefined(this.target ? this.target : undefined)}\"\n                rel=${ifDefined(this.target ? this.rel : undefined)}\n              >\n                <slot @slotchange=${this.handleSlotChange}></slot>\n              </a>\n            `\n          : ''}\n        ${this.renderType === 'button'\n          ? html`\n              <button part=\"label\" type=\"button\" class=\"breadcrumb-item__label breadcrumb-item__label--button\">\n                <slot @slotchange=${this.handleSlotChange}></slot>\n              </button>\n            `\n          : ''}\n        ${this.renderType === 'dropdown'\n          ? html`\n              <div part=\"label\" class=\"breadcrumb-item__label breadcrumb-item__label--drop-down\">\n                <slot @slotchange=${this.handleSlotChange}></slot>\n              </div>\n            `\n          : ''}\n\n        <span part=\"suffix\" class=\"breadcrumb-item__suffix\">\n          <slot name=\"suffix\"></slot>\n        </span>\n\n        <span part=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\">\n          <slot name=\"separator\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,OAAO,aAAa;AA0BvC,IAAqB,oBAArB,cAA+C,eAAe;AAAA,EAA9D;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,UAAU,QAAQ;AAI1E,SAAQ,aAA6C;AAYlD,eAAM;AAAA;AAAA,EAEV,gBAAgB;AACtB,UAAM,cACJ,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,OAAO,OAAK,EAAE,QAAQ,YAAY,MAAM,cAAc,EACxG,SAAS;AAEd,QAAI,KAAK,MAAM;AACb,WAAK,aAAa;AAClB;AAAA,IACF;AAEA,QAAI,aAAa;AACf,WAAK,aAAa;AAClB;AAAA,IACF;AAEA,SAAK,aAAa;AAAA,EACpB;AAAA,EAGA,cAAc;AACZ,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,mBAAmB;AACjB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,mBAAmB;AAAA,MACnB,+BAA+B,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACnE,+BAA+B,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IACrE,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,KAAK,eAAe,SAClB;AAAA;AAAA;AAAA;AAAA,wBAIY,KAAK,IAAK;AAAA,0BACR,UAAU,KAAK,SAAS,KAAK,SAAS,MAAS,CAAC;AAAA,sBACpD,UAAU,KAAK,SAAS,KAAK,MAAM,MAAS,CAAC;AAAA;AAAA,oCAE/B,KAAK,gBAAgB;AAAA;AAAA,gBAG7C,EAAE;AAAA,UACJ,KAAK,eAAe,WAClB;AAAA;AAAA,oCAEwB,KAAK,gBAAgB;AAAA;AAAA,gBAG7C,EAAE;AAAA,UACJ,KAAK,eAAe,aAClB;AAAA;AAAA,oCAEwB,KAAK,gBAAgB;AAAA;AAAA,gBAG7C,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWZ;AACF;AApGqB,kBACZ,SAAyB,CAAC,0BAAiB,gCAAQ,qCAAY;AAI3C;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GALN,kBAKQ;AAEV;AAAA,EAAhB,MAAM;AAAA,GAPY,kBAOF;AAML;AAAA,EAAX,SAAS;AAAA,GAbS,kBAaP;AAGA;AAAA,EAAX,SAAS;AAAA,GAhBS,kBAgBP;AAGA;AAAA,EAAX,SAAS;AAAA,GAnBS,kBAmBP;AAqBZ;AAAA,EADC,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAvC1B,kBAwCnB;",
+  "names": []
+}

package/dist/chunks/{chunk.FSZIE7IO.js → chunk.34A453XJ.js}

@@ -25,4 +25,4 @@ var divider_styles_default = css`
 export {
   divider_styles_default
 };
-//# sourceMappingURL=chunk.FSZIE7IO.js.map
+//# sourceMappingURL=chunk.34A453XJ.js.map

package/dist/chunks/chunk.34A453XJ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/divider/divider.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --color: var(--syn-panel-border-color);\n    --width: var(--syn-panel-border-width);\n    --spacing: var(--syn-spacing-medium);\n  }\n\n  :host(:not([vertical])) {\n    display: block;\n    border-top: solid var(--width) var(--color);\n    margin: var(--spacing) 0;\n  }\n\n  :host([vertical]) {\n    display: inline-block;\n    height: 100%;\n    border-left: solid var(--width) var(--color);\n    margin: 0 var(--spacing);\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;",
+  "names": []
+}

package/dist/chunks/{chunk.QUKSQV3V.js → chunk.36HGXE6I.js}

@@ -1,38 +1,38 @@
 import {
   SynSpinner
-} from "./chunk.KCLOTN4Z.js";
+} from "./chunk.2RS24S7K.js";
 import {
   FormControlController,
   validValidityState
-} from "./chunk.U5757NSE.js";
+} from "./chunk.J3GDDM6Q.js";
 import {
   button_custom_styles_default
 } from "./chunk.4YHI2ATV.js";
 import {
   button_styles_default
-} from "./chunk.5SQ7NVBX.js";
+} from "./chunk.UB4EPKCP.js";
 import {
   HasSlotController,
   getTextContent
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.Q6XDV7O7.js";
+} from "./chunk.7XSJ52RM.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
-} from "./chunk.MLILJGXQ.js";
+} from "./chunk.YACUYJZN.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -295,4 +295,4 @@ SynButton = __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.QUKSQV3V.js.map
+//# sourceMappingURL=chunk.36HGXE6I.js.map

package/dist/chunks/chunk.36HGXE6I.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button/button.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { FormControlController, validValidityState } from '../../internal/form.js';\nimport { HasSlotController, getTextContent } from '../../internal/slot.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.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 SynSpinner from '../spinner/spinner.component.js';\nimport styles from './button.styles.js';\nimport customStyles from './button.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Buttons represent actions that are available to the user.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-spinner\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `<syn-icon>` element.\n * @csspart spinner - The spinner that shows when the button is in the loading state.\n */\n@enableDefaultSettings('SynButton')\nexport default class SynButton extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = {\n    'syn-icon': SynIcon,\n    'syn-spinner': SynSpinner\n  };\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['click']\n  });\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  @query('.button') button: HTMLButtonElement | HTMLLinkElement;\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @state() private iconOnly = false;\n\n  @state() private hasFocus = false;\n  @state() invalid = false;\n  @property({ reflect: true }) title = ''; // make reactive to pass through\n\n  /** The button's theme variant. */\n  @property({ reflect: true }) variant: 'filled' | 'outline' | 'text' = 'outline';\n\n  /** The button's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */\n  @property({ type: Boolean, reflect: true }) caret = false;\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the button in a loading state. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /**\n   * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n   * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.\n   */\n  @property() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\n   * This attribute is ignored when `href` is present.\n   */\n  @property() name = '';\n\n  /**\n   * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\n   * button is the submitter. This attribute is ignored when `href` is present.\n   */\n  @property() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href = '';\n\n  /** Tells the browser where to open the link. Only used when `href` is present. */\n  @property() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\n   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\n   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by\n   * setting the attribute to an empty string or a value of your choice, respectively.\n   */\n  @property() rel = 'noreferrer noopener';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */\n  @property() download?: string;\n\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property() form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ attribute: 'formaction' }) formAction: string;\n\n  /** Used to override the form owner's `enctype` attribute.  */\n  @property({ attribute: 'formenctype' })\n  formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;\n\n  /** Gets the validity state object */\n  get validity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validity;\n    }\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validationMessage;\n    }\n\n    return '';\n  }\n\n  firstUpdated() {\n    if (this.isButton()) {\n      this.formControlController.updateValidity();\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleClick() {\n    if (this.type === 'submit') {\n      this.formControlController.submit(this);\n    }\n\n    if (this.type === 'reset') {\n      this.formControlController.reset(this);\n    }\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private isButton() {\n    return this.href ? false : true;\n  }\n\n  private isLink() {\n    return this.href ? true : false;\n  }\n\n  private handleSlotChange() {\n    const textContent = getTextContent(this.defaultSlot).trim();\n    const assignedElements = this.defaultSlot.assignedElements({flatten: true})\n    const iconOnlyElement = assignedElements.length === 1 && assignedElements[0].tagName.toLowerCase() === 'syn-icon';\n\n    this.iconOnly = iconOnlyElement && textContent === '';\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.isButton()) {\n      // Disabled form controls are always valid\n      this.formControlController.setValidity(this.disabled);\n    }\n  }\n\n  /** Simulates a click on the button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  blur() {\n    this.button.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).checkValidity();\n    }\n\n    return true;\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).reportValidity();\n    }\n\n    return true;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    if (this.isButton()) {\n      (this.button as HTMLButtonElement).setCustomValidity(message);\n      this.formControlController.updateValidity();\n    }\n  }\n\n  render() {\n    const isLink = this.isLink();\n    const tag = isLink ? literal`a` : literal`button`;\n\n    /* eslint-disable lit/no-invalid-html */\n    /* eslint-disable lit/binding-positions */\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${classMap({\n          button: true,\n          'button--primary': true,\n          'button--text': this.variant === 'text',\n          'button--small': this.size === 'small',\n          'button--medium': this.size === 'medium',\n          'button--large': this.size === 'large',\n          'button--caret': this.caret,\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--loading': this.loading,\n          'button--filled': this.variant === 'filled',\n          'button--outline': this.variant === 'outline',\n          'button--rtl': this.localize.dir() === 'rtl',\n          'button--has-label': this.hasSlotController.test('[default]'),\n          'button--has-prefix': this.hasSlotController.test('prefix'),\n          'button--has-suffix': this.hasSlotController.test('suffix')\n        })}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink && !this.disabled ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink ? this.rel : undefined)}\n        role=${ifDefined(isLink ? undefined : 'button')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @invalid=${this.isButton() ? this.handleInvalid : null}\n        @click=${this.handleClick}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n        <slot part=\"label\" class=${classMap({ 'button__label': true, 'button__icon-only': this.iconOnly })} @slotchange=${this.handleSlotChange}></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        ${\n          this.caret ? html` <syn-icon part=\"caret\" class=\"button__caret\" library=\"system\" name=\"chevron-down\"></syn-icon> ` : ''\n        }\n        ${this.loading ? html`<syn-spinner part=\"spinner\"></syn-spinner>` : ''}\n      </${tag}>\n    `;\n    /* eslint-enable lit/no-invalid-html */\n    /* eslint-enable lit/binding-positions */\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.3NXKLKWH.js → chunk.3JDUKQRN.js}

@@ -22,4 +22,4 @@ var defaultValue = (propertyName = "value") => (proto, key) => {
 export {
   defaultValue
 };
-//# sourceMappingURL=chunk.3NXKLKWH.js.map
+//# sourceMappingURL=chunk.3JDUKQRN.js.map

package/dist/chunks/chunk.3JDUKQRN.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/default-value.ts"],
+  "sourcesContent": ["/* eslint-disable */\n// @defaultValue decorator\n//\n// Runs when the corresponding attribute of the observed property changes, e.g. after calling Element.setAttribute or after updating\n// the observed property.\n//\n// The decorator checks whether the value of the attribute is different from the value of the property and in that case\n// it saves the new value.\n//\n//\n// Usage:\n//\n//  @property({ type: Boolean, reflect: true }) checked = false;\n//\n//  @defaultValue('checked') defaultChecked = false;\n//\n\nimport { defaultConverter } from 'lit';\nimport type { ReactiveElement } from 'lit';\n\nexport const defaultValue =\n  (propertyName = 'value') =>\n  (proto: ReactiveElement, key: string) => {\n    const ctor = proto.constructor as typeof ReactiveElement;\n\n    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;\n    ctor.prototype.attributeChangedCallback = function (\n      this: ReactiveElement & { [name: string]: unknown },\n      name,\n      old,\n      value\n    ) {\n      const options = ctor.getPropertyOptions(propertyName);\n      const attributeName = typeof options.attribute === 'string' ? options.attribute : propertyName;\n\n      if (name === attributeName) {\n        const converter = options.converter || defaultConverter;\n        const fromAttribute =\n          typeof converter === 'function' ? converter : (converter?.fromAttribute ?? defaultConverter.fromAttribute);\n\n        const newValue: unknown = fromAttribute!(value, options.type);\n\n        if (this[propertyName] !== newValue) {\n          this[key] = newValue;\n        }\n      }\n\n      attributeChangedCallback.call(this, name, old, value);\n    };\n  };\n"],
+  "mappings": ";AAiBA,SAAS,wBAAwB;AAG1B,IAAM,eACX,CAAC,eAAe,YAChB,CAAC,OAAwB,QAAgB;AACvC,QAAM,OAAO,MAAM;AAEnB,QAAM,2BAA2B,KAAK,UAAU;AAChD,OAAK,UAAU,2BAA2B,SAExC,MACA,KACA,OACA;AA/BN;AAgCM,UAAM,UAAU,KAAK,mBAAmB,YAAY;AACpD,UAAM,gBAAgB,OAAO,QAAQ,cAAc,WAAW,QAAQ,YAAY;AAElF,QAAI,SAAS,eAAe;AAC1B,YAAM,YAAY,QAAQ,aAAa;AACvC,YAAM,gBACJ,OAAO,cAAc,aAAa,aAAa,4CAAW,kBAAX,YAA4B,iBAAiB;AAE9F,YAAM,WAAoB,cAAe,OAAO,QAAQ,IAAI;AAE5D,UAAI,KAAK,YAAY,MAAM,UAAU;AACnC,aAAK,GAAG,IAAI;AAAA,MACd;AAAA,IACF;AAEA,6BAAyB,KAAK,MAAM,MAAM,KAAK,KAAK;AAAA,EACtD;AACF;",
+  "names": []
+}

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

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