@synergy-design-system/components 3.1.0 → 3.2.0

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.26QTFTWA.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.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.4PUQDU4T.js.map
+//# sourceMappingURL=chunk.26QTFTWA.js.map

package/dist/chunks/chunk.26QTFTWA.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.ZJHL23CU.js → chunk.2EZFBKDU.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.Q6XDV7O7.js";
+} from "./chunk.KHRQ5VI4.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.ZJHL23CU.js.map
+//# sourceMappingURL=chunk.2EZFBKDU.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/icon.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynIcon from './icon.component.js';\n\nexport * from './icon.component.js';\nexport default SynIcon;\n\nSynIcon.define('syn-icon');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-icon': SynIcon;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,eAAQ;AAEf,QAAQ,OAAO,UAAU;",
+  "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.3PWAIWL5.js → chunk.2J5ARXAO.js}

@@ -1,18 +1,18 @@
+import {
+  watch
+} from "./chunk.SMIMHADA.js";
 import {
   accordion_styles_default
 } from "./chunk.WNUZ6LH4.js";
 import {
   enableDefaultSettings
-} from "./chunk.MLILJGXQ.js";
-import {
-  watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.3PWAIWL5.js.map
+//# sourceMappingURL=chunk.2J5ARXAO.js.map

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.BIRYJHTO.js → chunk.3GSHQV5Q.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.KY52MMTX.js";
+} from "./chunk.GOAMFSM4.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.BIRYJHTO.js.map
+//# sourceMappingURL=chunk.3GSHQV5Q.js.map

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.AQITYSQX.js → chunk.4K5KFEYL.js}

@@ -1,21 +1,21 @@
 import {
   radio_button_styles_default
-} from "./chunk.4BRJ5OJE.js";
+} from "./chunk.ZXEPSSXQ.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
-import {
-  enableDefaultSettings
-} from "./chunk.MLILJGXQ.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
+import {
+  enableDefaultSettings
+} from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.AQITYSQX.js.map
+//# sourceMappingURL=chunk.4K5KFEYL.js.map

package/dist/chunks/chunk.4K5KFEYL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-button/radio-button.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit/static-html.js';\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 './radio-button.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The radio 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 * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */\n@enableDefaultSettings('SynRadioButton')\nexport default class SynRadioButton extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n\n  @query('.button') input: HTMLInputElement;\n  @query('.hidden-input') hiddenInput: HTMLInputElement;\n\n  @state() protected hasFocus = false;\n\n  /**\n   * @internal The radio button's checked state. This is exposed as an \"internal\" attribute so we can reflect it, making\n   * it easier to style in button groups.\n   */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string | number;\n\n  /** Disables the radio button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\n   * this attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style radio button with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.checked = true;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  /** Sets focus on the radio button. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio button. */\n  blur() {\n    this.input.blur();\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" role=\"presentation\">\n        <button\n          part=\"${`button${this.checked ? ' button--checked' : ''}`}\"\n          role=\"radio\"\n          aria-checked=\"${this.checked}\"\n          class=${classMap({\n            button: true,\n            'button--default': true,\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n            'button--checked': this.checked,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--outline': true,\n            'button--pill': this.pill,\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          aria-disabled=${this.disabled}\n          type=\"button\"\n          value=${ifDefined(this.value)}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n        >\n          <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n          <slot part=\"label\" class=\"button__label\"></slot>\n          <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        </button>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.ZBW4ZSZ7.js → chunk.4XZTYPIY.js}

@@ -19,4 +19,4 @@ var icon_styles_default = css`
 export {
   icon_styles_default
 };
-//# sourceMappingURL=chunk.ZBW4ZSZ7.js.map
+//# sourceMappingURL=chunk.4XZTYPIY.js.map

package/dist/chunks/chunk.4XZTYPIY.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/icon.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-block;\n    width: 1em;\n    height: 1em;\n    box-sizing: content-box !important;\n  }\n\n  svg {\n    display: block;\n    height: 100%;\n    width: 100%;\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,sBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.KIY5IDWY.js → chunk.4ZMYXIBW.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.KCLOTN4Z.js";
+} from "./chunk.GEMZSFPA.js";
 
 // src/components/spinner/spinner.ts
 var spinner_default = SynSpinner;
@@ -9,4 +9,4 @@ SynSpinner.define("syn-spinner");
 export {
   spinner_default
 };
-//# sourceMappingURL=chunk.KIY5IDWY.js.map
+//# sourceMappingURL=chunk.4ZMYXIBW.js.map

package/dist/chunks/chunk.4ZMYXIBW.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner/spinner.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynSpinner from './spinner.component.js';\n\nexport * from './spinner.component.js';\nexport default SynSpinner;\n\nSynSpinner.define('syn-spinner');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-spinner': SynSpinner;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,kBAAQ;AAEf,WAAW,OAAO,aAAa;",
+  "names": []
+}

package/dist/chunks/{chunk.IBWQFVMJ.js → chunk.52USEUTP.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.P3W7SDQW.js";
+} from "./chunk.GFD645IU.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.IBWQFVMJ.js.map
+//# sourceMappingURL=chunk.52USEUTP.js.map

package/dist/chunks/chunk.52USEUTP.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/popup/popup.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynPopup from './popup.component.js';\n\nexport * from './popup.component.js';\nexport default SynPopup;\n\nSynPopup.define('syn-popup');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-popup': SynPopup;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,gBAAQ;AAEf,SAAS,OAAO,WAAW;",
+  "names": []
+}

package/dist/chunks/{chunk.IVM3BGRH.js → chunk.5FVNGR5M.js}

@@ -90,4 +90,4 @@ var option_styles_default = css`
 export {
   option_styles_default
 };
-//# sourceMappingURL=chunk.IVM3BGRH.js.map
+//# sourceMappingURL=chunk.5FVNGR5M.js.map

package/dist/chunks/chunk.5FVNGR5M.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    color: var(--syn-color-neutral-700);\n    padding: var(--syn-spacing-x-small) var(--syn-spacing-medium) var(--syn-spacing-x-small) var(--syn-spacing-x-small);\n    transition: var(--syn-transition-fast) fill;\n    cursor: pointer;\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-color-neutral-100);\n    color: var(--syn-color-neutral-1000);\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n    opacity: 1;\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: var(--syn-line-height-dense);\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.2QDRZ3C6.js → chunk.5ICJ7VWS.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.VXC77KXR.js";
+} from "./chunk.BQTSV4AJ.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.2QDRZ3C6.js.map
+//# sourceMappingURL=chunk.5ICJ7VWS.js.map

package/dist/chunks/chunk.5ICJ7VWS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb-item/breadcrumb-item.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynBreadcrumbItem from './breadcrumb-item.component.js';\n\nexport * from './breadcrumb-item.component.js';\nexport default SynBreadcrumbItem;\n\nSynBreadcrumbItem.define('syn-breadcrumb-item');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-breadcrumb-item': SynBreadcrumbItem;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,0BAAQ;AAEf,kBAAkB,OAAO,qBAAqB;",
+  "names": []
+}

package/dist/chunks/{chunk.OI3HOOCT.js → chunk.5KL2GWNQ.js}

@@ -10,4 +10,4 @@ var resize_observer_styles_default = css`
 export {
   resize_observer_styles_default
 };
-//# sourceMappingURL=chunk.OI3HOOCT.js.map
+//# sourceMappingURL=chunk.5KL2GWNQ.js.map

package/dist/chunks/chunk.5KL2GWNQ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/resize-observer/resize-observer.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: contents;\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,iCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.QS53GZR4.js → chunk.5QMMVRAY.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.QCAMWDPP.js";
+} from "./chunk.PN5GCUMW.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.QS53GZR4.js.map
+//# sourceMappingURL=chunk.5QMMVRAY.js.map

package/dist/chunks/chunk.5QMMVRAY.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab/tab.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynTab from './tab.component.js';\n\nexport * from './tab.component.js';\nexport default SynTab;\n\nSynTab.define('syn-tab');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-tab': SynTab;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,cAAQ;AAEf,OAAO,OAAO,SAAS;",
+  "names": []
+}