@synergy-design-system/components 2.30.3 → 2.30.5

package/dist/chunks/{chunk.GE3DTZIM.js → chunk.2CJUSDAJ.js}

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.2BF2ZBSM.js";
+} from "./chunk.4SQFOEOE.js";
 
 // src/components/file/file.ts
 var file_default = SynFile;
@@ -9,4 +9,4 @@ SynFile.define("syn-file");
 export {
   file_default
 };
-//# sourceMappingURL=chunk.GE3DTZIM.js.map
+//# sourceMappingURL=chunk.2CJUSDAJ.js.map

package/dist/chunks/{chunk.WZSMJ2WD.js → chunk.2G2KUL7J.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.WZSMJ2WD.js.map
+//# sourceMappingURL=chunk.2G2KUL7J.js.map

package/dist/chunks/{chunk.7PPS4IJJ.js → chunk.2GYFY3XF.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.RMDAJPSI.js";
+} from "./chunk.ZY2JORYK.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.7PPS4IJJ.js.map
+//# sourceMappingURL=chunk.2GYFY3XF.js.map

package/dist/chunks/{chunk.NGIPAGC4.js → chunk.2OTQLYT3.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.A77V4OPP.js";
+} from "./chunk.3W5WLB2W.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.NGIPAGC4.js.map
+//# sourceMappingURL=chunk.2OTQLYT3.js.map

package/dist/chunks/{chunk.DCDK3EXG.js → chunk.2SZWXVFA.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.GA2HU6II.js";
+} from "./chunk.DGWVBKVQ.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SynDialog;
@@ -9,4 +9,4 @@ SynDialog.define("syn-dialog");
 export {
   dialog_default
 };
-//# sourceMappingURL=chunk.DCDK3EXG.js.map
+//# sourceMappingURL=chunk.2SZWXVFA.js.map

package/dist/chunks/{chunk.SFKDMJXY.js → chunk.2W6TU7LZ.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.SFKDMJXY.js.map
+//# sourceMappingURL=chunk.2W6TU7LZ.js.map

package/dist/chunks/{chunk.K4EBTKOS.js → chunk.373FR4QS.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.XAQKFEHH.js";
 import {
   SynDivider
-} from "./chunk.ZHBRF2U3.js";
+} from "./chunk.QUNLF6QN.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -22,7 +22,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.IC3XQ2EB.js";
+} from "./chunk.UEBLSO7C.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -37,7 +37,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass,
   __spreadValues
@@ -653,4 +653,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.K4EBTKOS.js.map
+//# sourceMappingURL=chunk.373FR4QS.js.map

package/dist/chunks/{chunk.DMB7Z2ZQ.js → chunk.3MDEDVNX.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumb
-} from "./chunk.R3VV2JKB.js";
+} from "./chunk.MT5G5L22.js";
 
 // src/components/breadcrumb/breadcrumb.ts
 var breadcrumb_default = SynBreadcrumb;
@@ -9,4 +9,4 @@ SynBreadcrumb.define("syn-breadcrumb");
 export {
   breadcrumb_default
 };
-//# sourceMappingURL=chunk.DMB7Z2ZQ.js.map
+//# sourceMappingURL=chunk.3MDEDVNX.js.map

package/dist/chunks/{chunk.A77V4OPP.js → chunk.3W5WLB2W.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.DZ7YIR5N.js";
 import {
   SynIcon
-} from "./chunk.IC3XQ2EB.js";
+} from "./chunk.UEBLSO7C.js";
 import {
   enableDefaultSettings
 } from "./chunk.NUIJATJY.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -144,4 +144,4 @@ SynIconButton = __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.A77V4OPP.js.map
+//# sourceMappingURL=chunk.3W5WLB2W.js.map

package/dist/chunks/{chunk.3TECDOBS.js → chunk.3YCLAIOK.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.ZJ43C76S.js";
+} from "./chunk.U6DSXUOD.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.3TECDOBS.js.map
+//# sourceMappingURL=chunk.3YCLAIOK.js.map

package/dist/chunks/{chunk.B6HFSIU2.js → chunk.4DW7CR6A.js}

@@ -143,10 +143,37 @@ var select_custom_styles_default = css`
     --display-divider: none;
   }
 
+  /**
+   * #850: Allow to measure the size of the combobox.
+   * This is needed so we can automatically size and truncate the tags in the <syn-select multiple> component.
+   * Scoped to multiple to not break the single select per accident.
+   */
+  :host([multiple]) .select__tags {
+    min-width: 100px;
+    overflow: hidden;
+  }
+
+  :host([multiple]) .select__tags > div {
+    display: contents;
+  }
+
+  :host([multiple]) .select__tags > div > syn-tag {
+    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
+
+    max-width: var(--syn-select-tag-max-width);
+  }
+
+  :host([multiple]) .select__tags > div > syn-tag::part(content) {
+    display: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   ${option_size_styles_default}
 `;
 
 export {
   select_custom_styles_default
 };
-//# sourceMappingURL=chunk.B6HFSIU2.js.map
+//# sourceMappingURL=chunk.4DW7CR6A.js.map

package/dist/chunks/{chunk.B6HFSIU2.js.map → chunk.4DW7CR6A.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/select/select.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\nimport sharedOptionSize from '../option/option-size.styles.js';\n\nexport default css`\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox,\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .select__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--small .select__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--large .select__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    color: var(--syn-color-neutral-950);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .select--small .select__expand-icon {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--medium .select__expand-icon {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--large .select__expand-icon {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  /* Change select border on hover */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .select:not(.select--disabled):hover .select__combobox {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .select--small .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(syn-icon),\n  .select--small .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  /* Medium */\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(syn-icon),\n  .select--medium .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /* Large */\n  .select--large .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(syn-icon),\n  .select--large .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n\n  .select__prefix,\n  .select__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n  /* Multi Select */\n  .select__tags {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .select--small .select__tags {\n    gap: var(--syn-spacing-2x-small);\n  }\n\n  .select--medium .select__tags {\n    gap: var(--syn-spacing-x-small);\n  }\n\n  .select--large .select__tags {\n    gap: var(--syn-spacing-small);\n  }\n\n  /* Listbox */\n  .select__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .select__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n\n  ${sharedOptionSize}\n`;\n"],
-  "mappings": ";;;;;AAAA,SAAS,WAAW;AAGpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2IX,0BAAgB;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\nimport sharedOptionSize from '../option/option-size.styles.js';\n\nexport default css`\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox,\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .select__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--small .select__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--large .select__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    color: var(--syn-color-neutral-950);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .select--small .select__expand-icon {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--medium .select__expand-icon {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--large .select__expand-icon {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  /* Change select border on hover */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .select:not(.select--disabled):hover .select__combobox {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .select--small .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(syn-icon),\n  .select--small .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  /* Medium */\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(syn-icon),\n  .select--medium .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /* Large */\n  .select--large .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(syn-icon),\n  .select--large .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n\n  .select__prefix,\n  .select__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n  /* Multi Select */\n  .select__tags {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .select--small .select__tags {\n    gap: var(--syn-spacing-2x-small);\n  }\n\n  .select--medium .select__tags {\n    gap: var(--syn-spacing-x-small);\n  }\n\n  .select--large .select__tags {\n    gap: var(--syn-spacing-small);\n  }\n\n  /* Listbox */\n  .select__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .select__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\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-select multiple> component.\n   * Scoped to multiple to not break the single select per accident.\n   */\n  :host([multiple]) .select__tags {\n    min-width: 100px;\n    overflow: hidden;\n  }\n\n  :host([multiple]) .select__tags > div {\n    display: contents;\n  }\n\n  :host([multiple]) .select__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]) .select__tags > div > syn-tag::part(content) {\n    display: initial;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ${sharedOptionSize}\n`;\n"],
+  "mappings": ";;;;;AAAA,SAAS,WAAW;AAGpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsKX,0BAAgB;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.2BF2ZBSM.js → chunk.4SQFOEOE.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.AERTEAG5.js";
 import {
   SynButton
-} from "./chunk.UMJHRTE5.js";
+} from "./chunk.NVCHSKXT.js";
 import {
   FormControlController
 } from "./chunk.OLRA37R5.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.IC3XQ2EB.js";
+} from "./chunk.UEBLSO7C.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -41,7 +41,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -534,4 +534,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.2BF2ZBSM.js.map
+//# sourceMappingURL=chunk.4SQFOEOE.js.map

package/dist/chunks/{chunk.XV6MIV3R.js → chunk.5I5NDOSG.js}

@@ -6,10 +6,10 @@ import {
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.RM54PPPR.js";
+} from "./chunk.JOP6PHFJ.js";
 import {
   SynAlert
-} from "./chunk.RMDAJPSI.js";
+} from "./chunk.ZY2JORYK.js";
 import {
   enableDefaultSettings
 } from "./chunk.NUIJATJY.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -330,4 +330,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.XV6MIV3R.js.map
+//# sourceMappingURL=chunk.5I5NDOSG.js.map

package/dist/chunks/{chunk.ICGTNBIJ.js → chunk.5NVXYY67.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.MJ7R4QQT.js";
 import {
   SynDivider
-} from "./chunk.ZHBRF2U3.js";
+} from "./chunk.QUNLF6QN.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -131,4 +131,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.ICGTNBIJ.js.map
+//# sourceMappingURL=chunk.5NVXYY67.js.map

package/dist/chunks/{chunk.KXDWM25J.js → chunk.5OPXSFO3.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynResizeObserver
 };
-//# sourceMappingURL=chunk.KXDWM25J.js.map
+//# sourceMappingURL=chunk.5OPXSFO3.js.map

package/dist/chunks/{chunk.IGLOIZ2W.js → chunk.5Q3QBE47.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.IGLOIZ2W.js.map
+//# sourceMappingURL=chunk.5Q3QBE47.js.map

package/dist/chunks/{chunk.ZOLZENHH.js → chunk.5QVULGQH.js}

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "./chunk.PJF3RP7Q.js";
+} from "./chunk.EWKPIUFG.js";
 
 // src/components/tab-group/tab-group.ts
 var tab_group_default = SynTabGroup;
@@ -9,4 +9,4 @@ SynTabGroup.define("syn-tab-group");
 export {
   tab_group_default
 };
-//# sourceMappingURL=chunk.ZOLZENHH.js.map
+//# sourceMappingURL=chunk.5QVULGQH.js.map

package/dist/chunks/{chunk.QFS6KGDB.js → chunk.5VHNIBDU.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.PCHN7UNX.js";
+} from "./chunk.AB53B6S6.js";
 
 // src/components/spinner/spinner.ts
 var spinner_default = SynSpinner;
@@ -9,4 +9,4 @@ SynSpinner.define("syn-spinner");
 export {
   spinner_default
 };
-//# sourceMappingURL=chunk.QFS6KGDB.js.map
+//# sourceMappingURL=chunk.5VHNIBDU.js.map

package/dist/chunks/{chunk.VHXR6VJU.js → chunk.6MAVQHAQ.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.5U2JN5LA.js";
+} from "./chunk.FYP6H2SW.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.VHXR6VJU.js.map
+//# sourceMappingURL=chunk.6MAVQHAQ.js.map

package/dist/chunks/{chunk.WJR72FH5.js → chunk.6MHW7ADB.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.ARJFVRBM.js";
+} from "./chunk.PIGPWCVF.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.WJR72FH5.js.map
+//# sourceMappingURL=chunk.6MHW7ADB.js.map

package/dist/chunks/{chunk.MVBAJTOF.js → chunk.6NQJCMRV.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.H3HTSQKK.js";
 import {
   SynDivider
-} from "./chunk.ZHBRF2U3.js";
+} from "./chunk.QUNLF6QN.js";
 import {
   SynDrawer
-} from "./chunk.QCGPJAQF.js";
+} from "./chunk.VYZRA53Q.js";
 import {
   unlockBodyScrolling
 } from "./chunk.5732DMBC.js";
@@ -35,7 +35,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -317,4 +317,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.MVBAJTOF.js.map
+//# sourceMappingURL=chunk.6NQJCMRV.js.map

package/dist/chunks/{chunk.VP73GNNH.js → chunk.6PI6RK7K.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.S3JOQPQH.js";
+} from "./chunk.M5STYIDV.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.VP73GNNH.js.map
+//# sourceMappingURL=chunk.6PI6RK7K.js.map

package/dist/chunks/{chunk.2W4MHJAM.js → chunk.7I2XANDB.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk.OJ3N7TWP.js";
 import {
   SynNavItem
-} from "./chunk.ZJ43C76S.js";
+} from "./chunk.U6DSXUOD.js";
 import {
   SynMenu
-} from "./chunk.JIELXBUU.js";
+} from "./chunk.PL44V5ZN.js";
 import {
   SynDropdown
-} from "./chunk.R2CZGOPZ.js";
+} from "./chunk.BDNNAAVA.js";
 import {
   SynIcon
-} from "./chunk.IC3XQ2EB.js";
+} from "./chunk.UEBLSO7C.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.2W4MHJAM.js.map
+//# sourceMappingURL=chunk.7I2XANDB.js.map

package/dist/chunks/{chunk.4FYUNOAF.js → chunk.7R4BNYSA.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.JIELXBUU.js";
+} from "./chunk.PL44V5ZN.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.4FYUNOAF.js.map
+//# sourceMappingURL=chunk.7R4BNYSA.js.map

package/dist/chunks/{chunk.RCM2ZMZA.js → chunk.7TC5B32U.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.SV2YRXTN.js";
+} from "./chunk.ALIOCGNG.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.RCM2ZMZA.js.map
+//# sourceMappingURL=chunk.7TC5B32U.js.map

package/dist/chunks/{chunk.45RYQJWS.js → chunk.A6VTKITH.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.CXRCFXZR.js";
+} from "./chunk.LRZAOEPL.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.45RYQJWS.js.map
+//# sourceMappingURL=chunk.A6VTKITH.js.map

package/dist/chunks/{chunk.PCHN7UNX.js → chunk.AB53B6S6.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.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.PCHN7UNX.js.map
+//# sourceMappingURL=chunk.AB53B6S6.js.map

package/dist/chunks/{chunk.SV2YRXTN.js → chunk.ALIOCGNG.js}

@@ -1,9 +1,9 @@
 import {
   SynTag
-} from "./chunk.ARJFVRBM.js";
+} from "./chunk.PIGPWCVF.js";
 import {
   select_custom_styles_default
-} from "./chunk.B6HFSIU2.js";
+} from "./chunk.4DW7CR6A.js";
 import {
   select_styles_default
 } from "./chunk.XTWO6ZZW.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.LUQR4NNU.js";
 import {
   SynPopup
-} from "./chunk.5U2JN5LA.js";
+} from "./chunk.FYP6H2SW.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
@@ -39,7 +39,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.IC3XQ2EB.js";
+} from "./chunk.UEBLSO7C.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -54,7 +54,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FA4T7QQM.js";
+} from "./chunk.B7AUFQGQ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -242,6 +242,15 @@ var SynSelect = class extends SynergyElement {
   get validationMessage() {
     return this.valueInput.validationMessage;
   }
+  enableResizeObserver() {
+    if (this.multiple) {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries.at(0);
+        this.tagContainer.style.setProperty("--syn-select-tag-max-width", `${entry.contentRect.width}px`);
+      });
+      this.resizeObserver.observe(this.tagContainer);
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
     setTimeout(() => {
@@ -249,6 +258,11 @@ var SynSelect = class extends SynergyElement {
     });
     this.open = false;
   }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+  }
   addOpenListeners() {
     var _a;
     document.addEventListener("focusin", this.handleDocumentFocusIn);
@@ -473,6 +487,17 @@ var SynSelect = class extends SynergyElement {
   firstUpdated() {
     this.isInitialized = true;
   }
+  updated(changedProperties) {
+    var _a;
+    super.updated(changedProperties);
+    if (changedProperties.has("multiple")) {
+      if (!this.multiple) {
+        (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+      } else {
+        this.enableResizeObserver();
+      }
+    }
+  }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (!this.isInitialized && !this.defaultValue && this.value) {
@@ -747,6 +772,9 @@ __decorateClass([
 __decorateClass([
   query(".select__listbox")
 ], SynSelect.prototype, "listbox", 2);
+__decorateClass([
+  query(".select__tags")
+], SynSelect.prototype, "tagContainer", 2);
 __decorateClass([
   state()
 ], SynSelect.prototype, "hasFocus", 2);
@@ -849,4 +877,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.SV2YRXTN.js.map
+//# sourceMappingURL=chunk.ALIOCGNG.js.map