@synergy-design-system/components 2.10.2 → 2.11.0

package/dist/chunks/{chunk.RJA3VP67.js → chunk.RI6XEQMR.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.X7TOECRW.js";
+} from "./chunk.WEXZUPCC.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -53,4 +53,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.RJA3VP67.js.map
+//# sourceMappingURL=chunk.RI6XEQMR.js.map

package/dist/chunks/{chunk.OBF3X4XA.js → chunk.RV7BELAO.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.S22BO5SF.js";
 import {
   SynIcon
-} from "./chunk.MUNBPFME.js";
+} from "./chunk.YBCKQJK4.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.X7TOECRW.js";
+} from "./chunk.WEXZUPCC.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -89,4 +89,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.OBF3X4XA.js.map
+//# sourceMappingURL=chunk.RV7BELAO.js.map

package/dist/chunks/{chunk.EDQUG4GS.js → chunk.S5GTUR3T.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.3B22DBSJ.js";
 import {
   SynDivider
-} from "./chunk.JMZQTN66.js";
+} from "./chunk.NQEEDGN5.js";
 import {
   defaultValue
 } from "./chunk.RBG37CD4.js";
@@ -22,7 +22,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.MUNBPFME.js";
+} from "./chunk.YBCKQJK4.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -32,7 +32,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.X7TOECRW.js";
+} from "./chunk.WEXZUPCC.js";
 import {
   __decorateClass,
   __spreadValues
@@ -642,4 +642,4 @@ __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.EDQUG4GS.js.map
+//# sourceMappingURL=chunk.S5GTUR3T.js.map

package/dist/chunks/{chunk.SJGUHYQX.js → chunk.SYIBDFRD.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.CYPWCY4S.js";
+} from "./chunk.BOKB2LEP.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.SJGUHYQX.js.map
+//# sourceMappingURL=chunk.SYIBDFRD.js.map

package/dist/chunks/{chunk.3TN54QCH.js → chunk.SZHPXI4D.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.63UP5YZV.js";
+} from "./chunk.2CO2NVIH.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.3TN54QCH.js.map
+//# sourceMappingURL=chunk.SZHPXI4D.js.map

package/dist/chunks/{chunk.Z4LBSDQQ.js → chunk.TD7N3L4O.js}

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

package/dist/chunks/{chunk.NAKOCW4V.js → chunk.TQ6W2TC6.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.CWYEWSU2.js";
+} from "./chunk.3MVTZZBQ.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.NAKOCW4V.js.map
+//# sourceMappingURL=chunk.TQ6W2TC6.js.map

package/dist/chunks/{chunk.4WDUIIGW.js → chunk.TRCRLTVG.js}

@@ -1,6 +1,6 @@
 import {
   SynCard
-} from "./chunk.RJA3VP67.js";
+} from "./chunk.RI6XEQMR.js";
 
 // src/components/card/card.ts
 var card_default = SynCard;
@@ -9,4 +9,4 @@ SynCard.define("syn-card");
 export {
   card_default
 };
-//# sourceMappingURL=chunk.4WDUIIGW.js.map
+//# sourceMappingURL=chunk.TRCRLTVG.js.map

package/dist/chunks/{chunk.E2VFBJWM.js → chunk.U47WJHSG.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.W4H4PZKD.js";
+} from "./chunk.PUXBRQLH.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.E2VFBJWM.js.map
+//# sourceMappingURL=chunk.U47WJHSG.js.map

package/dist/chunks/{chunk.XF2OGXME.js → chunk.UI7YG4DD.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.5732DMBC.js";
 import {
   SynIconButton
-} from "./chunk.U47W5TZK.js";
+} from "./chunk.AA7UYQAJ.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -37,7 +37,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.X7TOECRW.js";
+} from "./chunk.WEXZUPCC.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -287,4 +287,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.XF2OGXME.js.map
+//# sourceMappingURL=chunk.UI7YG4DD.js.map

package/dist/chunks/{chunk.J2OXSQAK.js → chunk.UREJSW6U.js}

@@ -158,15 +158,12 @@ var combobox_styles_default = css`
     margin-inline-end: var(--syn-input-spacing-large);
   }
 
-/* Prefix */
-  .combobox__prefix {
-    flex: 0;
-    display: inline-flex;
-    align-items: center;
-    color: var(--syn-input-placeholder-color);
+  .combobox--large.combobox--multiple .combobox__prefix::slotted(*) {
+    margin-inline-start: var(--syn-input-spacing-large);
   }
 
-  /* Suffix */
+/* Prefix and Suffix */
+  .combobox__prefix,
   .combobox__suffix {
     flex: 0;
     display: inline-flex;
@@ -174,6 +171,10 @@ var combobox_styles_default = css`
     color: var(--syn-input-placeholder-color);
   }
 
+  .combobox__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
   /* Clear button */
   .combobox__clear {
     display: inline-flex;
@@ -342,4 +343,4 @@ var combobox_styles_default = css`
 export {
   combobox_styles_default
 };
-//# sourceMappingURL=chunk.J2OXSQAK.js.map
+//# sourceMappingURL=chunk.UREJSW6U.js.map

package/dist/chunks/{chunk.J2OXSQAK.js.map → chunk.UREJSW6U.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/combobox/combobox.styles.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .combobox {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .combobox::part(popup) {\n    z-index: var(--syn-z-index-dropdown);\n  }\n\n  .combobox[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .combobox[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .combobox__inputs {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    letter-spacing: var(--syn-input-letter-spacing);\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition:\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) border,\n      var(--syn-transition-fast) box-shadow,\n      var(--syn-transition-fast) background-color;\n  }\n\n  .combobox__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--syn-input-color);\n    cursor: inherit;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  .combobox__display-input::placeholder {\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox:not(.combobox--disabled):hover .combobox__display-input {\n    color: var(--syn-input-color-hover);\n  }\n\n  .combobox__display-input:focus {\n    outline: none;\n  }\n\n  .combobox__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  /* Standard combobox */\n  .combobox--standard .combobox__inputs {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .combobox--standard.combobox--disabled .combobox__inputs {\n    background-color: var(--syn-input-background-color-disabled);\n    border-color: var(--syn-input-border-color-disabled);\n    color: var(--syn-input-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\n    background-color: var(--syn-input-background-color-focus);\n    border-color: var(--syn-input-border-color-focus);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n  }\n\n/* Sizes */\n  .combobox--small .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-small);\n    font-size: var(--syn-input-font-size-small);\n    min-height: var(--syn-input-height-small);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-medium);\n    font-size: var(--syn-input-font-size-medium);\n    min-height: var(--syn-input-height-medium);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-large);\n    font-size: var(--syn-input-font-size-large);\n    min-height: var(--syn-input-height-large);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-large);\n  }\n\n/* Prefix */\n  .combobox__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  /* Suffix */\n  .combobox__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  /* Clear button */\n  .combobox__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--syn-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--syn-transition-fast) color;\n    cursor: pointer;\n  }\n\n  .combobox__clear:hover {\n    color: var(--syn-input-icon-color-hover);\n  }\n\n  .combobox__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: var(--syn-transition-medium) rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .combobox--open .combobox__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .combobox__listbox {\n    display: block;\n    position: relative;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    box-shadow: var(--syn-shadow-large);\n    background: var(--syn-panel-background-color);\n    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-medium);\n    padding-block: var(--syn-spacing-x-small);\n    padding-inline: 0;\n    overflow: auto;\n    overscroll-behavior: none;\n\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n  }\n\n  .combobox__listbox ::slotted(syn-divider) {\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  .combobox__listbox ::slotted(small) {\n    display: block;\n    font-size: var(--syn-font-size-small);\n    font-weight: var(--syn-font-weight-semibold);\n    color: var(--syn-color-neutral-500);\n    padding-block: var(--syn-spacing-2x-small);\n    padding-inline: var(--syn-spacing-x-large);\n  }\n\n\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\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  .combobox__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--small .combobox__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--large .combobox__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Change combobox border on hover */\n  .combobox:not(.combobox--disabled):hover .combobox__inputs {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .combobox--small .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox__prefix,\n  .combobox__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n\n\n  /* Listbox */\n  .combobox__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  .combobox__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
-  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .combobox {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .combobox::part(popup) {\n    z-index: var(--syn-z-index-dropdown);\n  }\n\n  .combobox[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .combobox[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .combobox__inputs {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    letter-spacing: var(--syn-input-letter-spacing);\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition:\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) border,\n      var(--syn-transition-fast) box-shadow,\n      var(--syn-transition-fast) background-color;\n  }\n\n  .combobox__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--syn-input-color);\n    cursor: inherit;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  .combobox__display-input::placeholder {\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox:not(.combobox--disabled):hover .combobox__display-input {\n    color: var(--syn-input-color-hover);\n  }\n\n  .combobox__display-input:focus {\n    outline: none;\n  }\n\n  .combobox__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  /* Standard combobox */\n  .combobox--standard .combobox__inputs {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .combobox--standard.combobox--disabled .combobox__inputs {\n    background-color: var(--syn-input-background-color-disabled);\n    border-color: var(--syn-input-border-color-disabled);\n    color: var(--syn-input-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\n    background-color: var(--syn-input-background-color-focus);\n    border-color: var(--syn-input-border-color-focus);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n  }\n\n/* Sizes */\n  .combobox--small .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-small);\n    font-size: var(--syn-input-font-size-small);\n    min-height: var(--syn-input-height-small);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-medium);\n    font-size: var(--syn-input-font-size-medium);\n    min-height: var(--syn-input-height-medium);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-large);\n    font-size: var(--syn-input-font-size-large);\n    min-height: var(--syn-input-height-large);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large.combobox--multiple .combobox__prefix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n/* Prefix and Suffix */\n  .combobox__prefix,\n  .combobox__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Clear button */\n  .combobox__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--syn-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--syn-transition-fast) color;\n    cursor: pointer;\n  }\n\n  .combobox__clear:hover {\n    color: var(--syn-input-icon-color-hover);\n  }\n\n  .combobox__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: var(--syn-transition-medium) rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .combobox--open .combobox__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .combobox__listbox {\n    display: block;\n    position: relative;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    box-shadow: var(--syn-shadow-large);\n    background: var(--syn-panel-background-color);\n    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-medium);\n    padding-block: var(--syn-spacing-x-small);\n    padding-inline: 0;\n    overflow: auto;\n    overscroll-behavior: none;\n\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n  }\n\n  .combobox__listbox ::slotted(syn-divider) {\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  .combobox__listbox ::slotted(small) {\n    display: block;\n    font-size: var(--syn-font-size-small);\n    font-weight: var(--syn-font-weight-semibold);\n    color: var(--syn-color-neutral-500);\n    padding-block: var(--syn-spacing-2x-small);\n    padding-inline: var(--syn-spacing-x-large);\n  }\n\n\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\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  .combobox__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--small .combobox__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--large .combobox__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Change combobox border on hover */\n  .combobox:not(.combobox--disabled):hover .combobox__inputs {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .combobox--small .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox__prefix,\n  .combobox__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n\n\n  /* Listbox */\n  .combobox__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  .combobox__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.WVHXHIV3.js → chunk.VBPJP47S.js}

@@ -1,12 +1,12 @@
-import {
-  tooltip_styles_default
-} from "./chunk.O644HRW3.js";
 import {
   tooltip_custom_styles_default
 } from "./chunk.4X3HY2V5.js";
+import {
+  tooltip_styles_default
+} from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.TUSYVDNG.js";
+} from "./chunk.3XYKUOSA.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -28,7 +28,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.X7TOECRW.js";
+} from "./chunk.WEXZUPCC.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -272,4 +272,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.WVHXHIV3.js.map
+//# sourceMappingURL=chunk.VBPJP47S.js.map

package/dist/chunks/{chunk.ANZWKSQQ.js → chunk.VHBHYODZ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.X7TOECRW.js";
+} from "./chunk.WEXZUPCC.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -103,4 +103,4 @@ __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.ANZWKSQQ.js.map
+//# sourceMappingURL=chunk.VHBHYODZ.js.map

package/dist/chunks/{chunk.CRUL2A6N.js → chunk.VN7RN2HU.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.OB4SHXTW.js";
+} from "./chunk.5WTQAMIT.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.CRUL2A6N.js.map
+//# sourceMappingURL=chunk.VN7RN2HU.js.map

package/dist/chunks/{chunk.J5LJA64M.js → chunk.VSJELW2C.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.WVHXHIV3.js";
+} from "./chunk.VBPJP47S.js";
 import {
   range_styles_default
 } from "./chunk.277APOW3.js";
@@ -30,7 +30,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.X7TOECRW.js";
+} from "./chunk.WEXZUPCC.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -633,4 +633,4 @@ __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.J5LJA64M.js.map
+//# sourceMappingURL=chunk.VSJELW2C.js.map

package/dist/chunks/{chunk.TKOSP7ST.js → chunk.VSM3FPJC.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.4RJU3JRS.js";
+} from "./chunk.35XN5YQW.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.TKOSP7ST.js.map
+//# sourceMappingURL=chunk.VSM3FPJC.js.map

package/dist/chunks/{chunk.X7TOECRW.js → chunk.WEXZUPCC.js}

@@ -1,12 +1,25 @@
 import {
   __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
   __spreadValues
 } from "./chunk.2GFK6XTO.js";
 
 // src/internal/synergy-element.ts
 import { LitElement } from "lit";
 import { property } from "lit/decorators.js";
+var _hasRecordedInitialProperties;
 var SynergyElement = class extends LitElement {
+  constructor() {
+    super();
+    __privateAdd(this, _hasRecordedInitialProperties, false);
+    // Store the constructor value of all `static properties = {}`
+    this.initialReflectedProperties = /* @__PURE__ */ new Map();
+    Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
+      this.constructor.define(name, component);
+    });
+  }
   emit(name, options) {
     const event = new CustomEvent(name, __spreadValues({
       bubbles: true,
@@ -43,16 +56,32 @@ var SynergyElement = class extends LitElement {
       `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`
     );
   }
-  constructor() {
-    super();
-    Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
-      this.constructor.define(name, component);
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!__privateGet(this, _hasRecordedInitialProperties)) {
+      this.constructor.elementProperties.forEach(
+        (obj, prop) => {
+          if (obj.reflect && this[prop] != null) {
+            this.initialReflectedProperties.set(prop, this[prop]);
+          }
+        }
+      );
+      __privateSet(this, _hasRecordedInitialProperties, true);
+    }
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    this.initialReflectedProperties.forEach((value, prop) => {
+      if (changedProperties.has(prop) && this[prop] == null) {
+        this[prop] = value;
+      }
     });
   }
 };
+_hasRecordedInitialProperties = new WeakMap();
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-SynergyElement.version = "2.10.2";
+SynergyElement.version = "2.11.0";
 SynergyElement.dependencies = {};
 __decorateClass([
   property()
@@ -84,4 +113,4 @@ export {
   SynergyElement,
   component_styles_default
 };
-//# sourceMappingURL=chunk.X7TOECRW.js.map
+//# sourceMappingURL=chunk.WEXZUPCC.js.map

package/dist/chunks/{chunk.X7TOECRW.js.map → chunk.WEXZUPCC.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/internal/synergy-element.ts", "../../src/styles/component.styles.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? never\n      : // ...and has at least one non-optional property\n        Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? never\n        : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? T\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? T\n        : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n        : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent<unknown>\n  : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n    name: EventTypeDoesNotRequireDetail<T>,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof EventTypesWithRequiredDetail>(\n    name: EventTypeRequiresDetail<T>,\n    options: SynEventInit<T>\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof ValidEventTypeMap>(\n    name: T,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T> {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType<T>;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = \"2.10.2\";\n  \n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof SynergyElement;\n\n    if (!currentlyRegisteredConstructor) {\n      // We try to register as the actual class first. If for some reason that fails, we fall back to anonymous classes.\n      // customElements can only have 1 class of the same \"object id\" per registry, so that is why the try {} catch {} exists.\n      // Some tools like Jest Snapshots and if you import the constructor and call `new SynButton()` they will fail with\n      //   the anonymous class version.\n      try {\n        customElements.define(name, elementConstructor, options);\n      } catch (_err) {\n        customElements.define(name, class extends elementConstructor {}, options);\n      }\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record<string, typeof SynergyElement> = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof SynergyElement).define(name, component);\n    });\n  }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n", "/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n`;\n"],
-  "mappings": ";;;;;;AAQA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AA+DzB,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAcrD,KACE,MACA,SACuB;AACvB,UAAM,QAAQ,IAAI,YAAY,MAAM;AAAA,MAClC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ,CAAC;AAAA,OACN,QACJ;AAED,SAAK,cAAc,KAAK;AAExB,WAAO;AAAA,EACT;AAAA,EAOA,OAAO,OAAO,MAAc,qBAAqB,MAAM,UAAoC,CAAC,GAAG;AAC7F,UAAM,iCAAiC,eAAe,IAAI,IAAI;AAI9D,QAAI,CAAC,gCAAgC;AAKnC,UAAI;AACF,uBAAe,OAAO,MAAM,oBAAoB,OAAO;AAAA,MACzD,SAAS,MAAM;AACb,uBAAe,OAAO,MAAM,cAAc,mBAAmB;AAAA,QAAC,GAAG,OAAO;AAAA,MAC1E;AACA;AAAA,IACF;AAEA,QAAI,aAAa;AACjB,QAAI,kBAAkB;AAEtB,QAAI,aAAa,sBAAsB,mBAAmB,SAAS;AACjE,mBAAa,OAAO,mBAAmB;AAAA,IACzC;AAEA,QAAI,aAAa,kCAAkC,+BAA+B,SAAS;AACzF,wBAAkB,OAAO,+BAA+B;AAAA,IAC1D;AAGA,QAAI,cAAc,mBAAmB,eAAe,iBAAiB;AAEnE;AAAA,IACF;AAEA,YAAQ;AAAA,MACN,0BAA0B,IAAI,IAAI,UAAU,UAAU,IAAI,IAAI,eAAe;AAAA,IAC/E;AAAA,EACF;AAAA,EAIA,cAAc;AACZ,UAAM;AACN,WAAO,QAAS,KAAK,YAAsC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACtG,MAAC,KAAK,YAAsC,OAAO,MAAM,SAAS;AAAA,IACpE,CAAC;AAAA,EACH;AACF;AAAA;AAAA;AApFqB,eAiCZ,UAAU;AAjCE,eA4EZ,eAAsD,CAAC;AA1ElD;AAAA,EAAX,SAAS;AAAA,GAFS,eAEP;AACA;AAAA,EAAX,SAAS;AAAA,GAHS,eAGP;;;ACnEd,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? never\n      : // ...and has at least one non-optional property\n        Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? never\n        : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? T\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? T\n        : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n        : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent<unknown>\n  : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n    name: EventTypeDoesNotRequireDetail<T>,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof EventTypesWithRequiredDetail>(\n    name: EventTypeRequiresDetail<T>,\n    options: SynEventInit<T>\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof ValidEventTypeMap>(\n    name: T,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T> {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType<T>;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = \"2.11.0\";\n  \n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof SynergyElement;\n\n    if (!currentlyRegisteredConstructor) {\n      // We try to register as the actual class first. If for some reason that fails, we fall back to anonymous classes.\n      // customElements can only have 1 class of the same \"object id\" per registry, so that is why the try {} catch {} exists.\n      // Some tools like Jest Snapshots and if you import the constructor and call `new SynButton()` they will fail with\n      //   the anonymous class version.\n      try {\n        customElements.define(name, elementConstructor, options);\n      } catch (_err) {\n        customElements.define(name, class extends elementConstructor {}, options);\n      }\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record<string, typeof SynergyElement> = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof SynergyElement).define(name, component);\n    });\n  }\n\n  #hasRecordedInitialProperties = false;\n\n  // Store the constructor value of all `static properties = {}`\n  initialReflectedProperties: Map<string, unknown> = new Map();\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    if (!this.#hasRecordedInitialProperties) {\n      (this.constructor as typeof SynergyElement).elementProperties.forEach(\n        (obj, prop: keyof typeof this & string) => {\n          // eslint-disable-next-line\n          if (obj.reflect && this[prop] != null) {\n            this.initialReflectedProperties.set(prop, this[prop]);\n          }\n        }\n      );\n\n      this.#hasRecordedInitialProperties = true;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]): void {\n    super.willUpdate(changedProperties);\n\n    // Run the morph fixing *after* willUpdate.\n    this.initialReflectedProperties.forEach((value, prop: string & keyof typeof this) => {\n      // If a prop changes to `null`, we assume this happens via an attribute changing to `null`.\n      // eslint-disable-next-line\n      if (changedProperties.has(prop) && this[prop] == null) {\n        // Silly type gymnastics to appease the compiler.\n        (this as Record<string, unknown>)[prop] = value;\n      }\n    });\n  }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n", "/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n`;\n"],
+  "mappings": ";;;;;;;;;AAQA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AATzB;AAwEA,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EA8ErD,cAAc;AACZ,UAAM;AAMR,sDAAgC;AAGhC;AAAA,sCAAmD,oBAAI,IAAI;AARzD,WAAO,QAAS,KAAK,YAAsC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACtG,MAAC,KAAK,YAAsC,OAAO,MAAM,SAAS;AAAA,IACpE,CAAC;AAAA,EACH;AAAA,EArEA,KACE,MACA,SACuB;AACvB,UAAM,QAAQ,IAAI,YAAY,MAAM;AAAA,MAClC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ,CAAC;AAAA,OACN,QACJ;AAED,SAAK,cAAc,KAAK;AAExB,WAAO;AAAA,EACT;AAAA,EAOA,OAAO,OAAO,MAAc,qBAAqB,MAAM,UAAoC,CAAC,GAAG;AAC7F,UAAM,iCAAiC,eAAe,IAAI,IAAI;AAI9D,QAAI,CAAC,gCAAgC;AAKnC,UAAI;AACF,uBAAe,OAAO,MAAM,oBAAoB,OAAO;AAAA,MACzD,SAAS,MAAM;AACb,uBAAe,OAAO,MAAM,cAAc,mBAAmB;AAAA,QAAC,GAAG,OAAO;AAAA,MAC1E;AACA;AAAA,IACF;AAEA,QAAI,aAAa;AACjB,QAAI,kBAAkB;AAEtB,QAAI,aAAa,sBAAsB,mBAAmB,SAAS;AACjE,mBAAa,OAAO,mBAAmB;AAAA,IACzC;AAEA,QAAI,aAAa,kCAAkC,+BAA+B,SAAS;AACzF,wBAAkB,OAAO,+BAA+B;AAAA,IAC1D;AAGA,QAAI,cAAc,mBAAmB,eAAe,iBAAiB;AAEnE;AAAA,IACF;AAEA,YAAQ;AAAA,MACN,0BAA0B,IAAI,IAAI,UAAU,UAAU,IAAI,IAAI,eAAe;AAAA,IAC/E;AAAA,EACF;AAAA,EAgBA,yBAAyB,MAAc,UAAyB,UAAyB;AACvF,QAAI,CAAC,mBAAK,gCAA+B;AACvC,MAAC,KAAK,YAAsC,kBAAkB;AAAA,QAC5D,CAAC,KAAK,SAAqC;AAEzC,cAAI,IAAI,WAAW,KAAK,IAAI,KAAK,MAAM;AACrC,iBAAK,2BAA2B,IAAI,MAAM,KAAK,IAAI,CAAC;AAAA,UACtD;AAAA,QACF;AAAA,MACF;AAEA,yBAAK,+BAAgC;AAAA,IACvC;AAEA,UAAM,yBAAyB,MAAM,UAAU,QAAQ;AAAA,EACzD;AAAA,EAEU,WAAW,mBAAkE;AACrF,UAAM,WAAW,iBAAiB;AAGlC,SAAK,2BAA2B,QAAQ,CAAC,OAAO,SAAqC;AAGnF,UAAI,kBAAkB,IAAI,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM;AAErD,QAAC,KAAiC,IAAI,IAAI;AAAA,MAC5C;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAnCE;AAAA;AAAA;AArFmB,eAiCZ,UAAU;AAjCE,eA4EZ,eAAsD,CAAC;AA1ElD;AAAA,EAAX,SAAS;AAAA,GAFS,eAEP;AACA;AAAA,EAAX,SAAS;AAAA,GAHS,eAGP;;;ACnEd,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.NGI67WXT.js → chunk.XOXVVU5C.js}

@@ -227,9 +227,27 @@ var tab_group_custom_styles_default = css`
     border-bottom: none;
     border-top: solid var(--track-width) var(--track-color);
   }
+
+  /**
+   * Shoelace 2.17 introduced a new attribute "fixed-scroll-controls".
+   * Per default, tab-groups now hide the scroll buttons when they are not needed.
+   * "fixed-scroll-controls" will keep the scroll buttons visible at all times,
+   * which is the default behavior of Synergy.
+   * For this reason, we make the buttons visible by default, but show them in a "disabled" state when they are not needed.
+   */
+  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,
+  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {
+    visibility: visible;
+  }
+
+  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden::part(base),
+  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden::part(base) {
+    opacity: var(--syn-input-disabled-opacity);
+    pointer-events: none;
+  }
 `;
 
 export {
   tab_group_custom_styles_default
 };
-//# sourceMappingURL=chunk.NGI67WXT.js.map
+//# sourceMappingURL=chunk.XOXVVU5C.js.map

package/dist/chunks/{chunk.NGI67WXT.js.map → chunk.XOXVVU5C.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/tab-group/tab-group.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* stylelint-disable no-descending-specificity */\n  /* Write custom CSS here */\n  :host {\n    --track-width: var(--syn-border-width-small);\n    --track-color: var(--syn-color-neutral-300);\n    --indicator-width: var(--syn-border-width-x-large);\n  }\n\n  /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */\n  .tab-group--top .tab-group__body {\n    position: relative;\n    top: calc(-1 * var(--syn-panel-border-width));\n  }\n\n  .tab-group--top .tab-group__nav {\n    padding: 0 0 var(--syn-panel-border-width) 0;\n  }\n\n  /**\n   * Indicator\n   */\n  .tab-group--top .tab-group__indicator {\n    border-bottom: solid var(--indicator-width) var(--indicator-color);\n    bottom: 0;\n  }\n\n  .tab-group--start .tab-group__indicator {\n    border-right: solid var(--indicator-width) var(--indicator-color);\n    right: 0;\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    left: 0;\n  }\n\n  .tab-group--end .tab-group__indicator {\n    border-inline-start: solid var(--indicator-width) var(--indicator-color);\n    left: 0;\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: 0;\n  }\n\n  /**\n   * Panel\n   */\n  .tab-group--top ::slotted(syn-tab-panel) {\n    --padding: var(--syn-spacing-large) 0;\n  }\n\n  .tab-group--start ::slotted(syn-tab-panel) {\n    --padding: 0 var(--syn-spacing-large);\n  }\n\n  .tab-group--end ::slotted(syn-tab-panel) {\n    --padding: 0 var(--syn-spacing-large);\n  }\n\n  /**\n   * Contained styling\n   */ \n  .tab-group--contained .tab-group__tabs {\n    border: none;\n  }\n\n  .tab-group--contained ::slotted(syn-tab-panel) {\n    --padding: var(--syn-spacing-large);\n\n    background-color: var(--syn-panel-background-color);\n    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-medium);\n  }\n\n  /* Stretch the tab panel container for non-top placements, otherwise the borders are not drawn correctly */\n  .tab-group--contained:not(.tab-group--top) ::slotted(syn-tab-panel) {\n    height: 100%;\n  }\n\n  /* Draw the correct border radii of the panel depending on the placement and direction */\n  .tab-group--top.tab-group--contained:not(.tab-group--sharp):not(.tab-group--has-scroll-controls) ::slotted(syn-tab-panel:first-of-type),\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {\n    border-start-start-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {\n    border-end-start-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {\n    border-end-end-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {\n    border-start-end-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--contained .tab-group__indicator {\n    /* Remove the animation of the indicator */\n    transition: none;\n    \n    /* Needed, otherwise the indicator is hidden under the background of the tab */\n    z-index: 2;\n  }\n\n  /* Contained styling for tabs */\n  .tab-group--contained ::slotted(syn-tab) {\n    --background-color: var(--syn-panel-background-color);\n    --border-width: var(--syn-panel-border-width);\n\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Top */\n  .tab-group--top.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none);\n  }\n\n  .tab-group--top.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);\n\n    /* We need to move the tab down, so the bottom border, hides parts of the border of the tab-group */\n    top: var(--syn-panel-border-width);\n  }\n\n  .tab-group--top.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move down the non-active tabs also, so we don't get jumping of the tab text content */\n    top: var(--syn-panel-border-width);\n  }\n\n  /* Start & End with rtl */\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),\n  .tab-group--end.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none) var(--syn-border-radius-medium);\n  }\n\n  .tab-group--start.tab-group--contained ::slotted(syn-tab[active]),\n  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-background-color) var(--syn-panel-border-color)  var(--syn-panel-border-color) ;\n\n    /* We need to move the tab right, so the right border, hides parts of the border of the tab-group */\n    left: var(--syn-panel-border-width);\n    right: unset;\n  }\n\n  .tab-group--start.tab-group--contained ::slotted(syn-tab:not([active])),\n  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move right the non-active tabs also, so we don't get jumping of the tab text content */\n    left: var(--syn-panel-border-width);\n    right: unset;\n  }\n\n  /* End & Start with rtl */\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),\n  .tab-group--start.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-none) var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained ::slotted(syn-tab[active]),\n  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);\n\n    /* We need to move the tab left, so the left border, hides parts of the border of the tab-group */\n    left: unset;\n    right: var(--syn-panel-border-width);\n  }\n\n  .tab-group--end.tab-group--contained ::slotted(syn-tab:not([active])),\n  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move left the non-active tabs also, so we don't get jumping of the tab text content */\n    left: unset;\n    right: var(--syn-panel-border-width);\n  }\n\n\n  /**\n   * Sharp styling\n   */\n  .tab-group--sharp ::slotted(syn-tab-panel) {\n    border-radius: var(--syn-border-radius-none);\n  }\n\n\n  /**\n   * Scroll buttons\n   */\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    padding: 0 calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));\n  }\n\n  .tab-group__scroll-button {\n    /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */\n    bottom: var(--syn-panel-border-width);\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-medium);\n    width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));\n  }\n\n  .tab-group__scroll-button::part(base) {\n    padding: calc(var(--syn-spacing-small) - var(--syn-spacing-3x-small));\n  }\n\n  /* Make sure the direction of the chevrons match the scrolling directions. */\n  .tab-group--has-scroll-controls:not(.tab-group--rtl) .tab-group__scroll-button--start,\n  .tab-group--rtl .tab-group__scroll-button--end {\n    rotate: 180deg;\n  }\n\n  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--start {\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--end {\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--start {\n    border-bottom: solid var(--track-width) var(--track-color);\n    border-top: none;\n  }\n\n  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--end {\n    border-bottom: none;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,kCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* stylelint-disable no-descending-specificity */\n  /* Write custom CSS here */\n  :host {\n    --track-width: var(--syn-border-width-small);\n    --track-color: var(--syn-color-neutral-300);\n    --indicator-width: var(--syn-border-width-x-large);\n  }\n\n  /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */\n  .tab-group--top .tab-group__body {\n    position: relative;\n    top: calc(-1 * var(--syn-panel-border-width));\n  }\n\n  .tab-group--top .tab-group__nav {\n    padding: 0 0 var(--syn-panel-border-width) 0;\n  }\n\n  /**\n   * Indicator\n   */\n  .tab-group--top .tab-group__indicator {\n    border-bottom: solid var(--indicator-width) var(--indicator-color);\n    bottom: 0;\n  }\n\n  .tab-group--start .tab-group__indicator {\n    border-right: solid var(--indicator-width) var(--indicator-color);\n    right: 0;\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    left: 0;\n  }\n\n  .tab-group--end .tab-group__indicator {\n    border-inline-start: solid var(--indicator-width) var(--indicator-color);\n    left: 0;\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: 0;\n  }\n\n  /**\n   * Panel\n   */\n  .tab-group--top ::slotted(syn-tab-panel) {\n    --padding: var(--syn-spacing-large) 0;\n  }\n\n  .tab-group--start ::slotted(syn-tab-panel) {\n    --padding: 0 var(--syn-spacing-large);\n  }\n\n  .tab-group--end ::slotted(syn-tab-panel) {\n    --padding: 0 var(--syn-spacing-large);\n  }\n\n  /**\n   * Contained styling\n   */ \n  .tab-group--contained .tab-group__tabs {\n    border: none;\n  }\n\n  .tab-group--contained ::slotted(syn-tab-panel) {\n    --padding: var(--syn-spacing-large);\n\n    background-color: var(--syn-panel-background-color);\n    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-medium);\n  }\n\n  /* Stretch the tab panel container for non-top placements, otherwise the borders are not drawn correctly */\n  .tab-group--contained:not(.tab-group--top) ::slotted(syn-tab-panel) {\n    height: 100%;\n  }\n\n  /* Draw the correct border radii of the panel depending on the placement and direction */\n  .tab-group--top.tab-group--contained:not(.tab-group--sharp):not(.tab-group--has-scroll-controls) ::slotted(syn-tab-panel:first-of-type),\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {\n    border-start-start-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {\n    border-end-start-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {\n    border-end-end-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {\n    border-start-end-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--contained .tab-group__indicator {\n    /* Remove the animation of the indicator */\n    transition: none;\n    \n    /* Needed, otherwise the indicator is hidden under the background of the tab */\n    z-index: 2;\n  }\n\n  /* Contained styling for tabs */\n  .tab-group--contained ::slotted(syn-tab) {\n    --background-color: var(--syn-panel-background-color);\n    --border-width: var(--syn-panel-border-width);\n\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Top */\n  .tab-group--top.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none);\n  }\n\n  .tab-group--top.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);\n\n    /* We need to move the tab down, so the bottom border, hides parts of the border of the tab-group */\n    top: var(--syn-panel-border-width);\n  }\n\n  .tab-group--top.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move down the non-active tabs also, so we don't get jumping of the tab text content */\n    top: var(--syn-panel-border-width);\n  }\n\n  /* Start & End with rtl */\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),\n  .tab-group--end.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none) var(--syn-border-radius-medium);\n  }\n\n  .tab-group--start.tab-group--contained ::slotted(syn-tab[active]),\n  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-background-color) var(--syn-panel-border-color)  var(--syn-panel-border-color) ;\n\n    /* We need to move the tab right, so the right border, hides parts of the border of the tab-group */\n    left: var(--syn-panel-border-width);\n    right: unset;\n  }\n\n  .tab-group--start.tab-group--contained ::slotted(syn-tab:not([active])),\n  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move right the non-active tabs also, so we don't get jumping of the tab text content */\n    left: var(--syn-panel-border-width);\n    right: unset;\n  }\n\n  /* End & Start with rtl */\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),\n  .tab-group--start.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-none) var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained ::slotted(syn-tab[active]),\n  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);\n\n    /* We need to move the tab left, so the left border, hides parts of the border of the tab-group */\n    left: unset;\n    right: var(--syn-panel-border-width);\n  }\n\n  .tab-group--end.tab-group--contained ::slotted(syn-tab:not([active])),\n  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move left the non-active tabs also, so we don't get jumping of the tab text content */\n    left: unset;\n    right: var(--syn-panel-border-width);\n  }\n\n\n  /**\n   * Sharp styling\n   */\n  .tab-group--sharp ::slotted(syn-tab-panel) {\n    border-radius: var(--syn-border-radius-none);\n  }\n\n\n  /**\n   * Scroll buttons\n   */\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    padding: 0 calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));\n  }\n\n  .tab-group__scroll-button {\n    /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */\n    bottom: var(--syn-panel-border-width);\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-medium);\n    width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));\n  }\n\n  .tab-group__scroll-button::part(base) {\n    padding: calc(var(--syn-spacing-small) - var(--syn-spacing-3x-small));\n  }\n\n  /* Make sure the direction of the chevrons match the scrolling directions. */\n  .tab-group--has-scroll-controls:not(.tab-group--rtl) .tab-group__scroll-button--start,\n  .tab-group--rtl .tab-group__scroll-button--end {\n    rotate: 180deg;\n  }\n\n  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--start {\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--end {\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--start {\n    border-bottom: solid var(--track-width) var(--track-color);\n    border-top: none;\n  }\n\n  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--end {\n    border-bottom: none;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  /**\n   * Shoelace 2.17 introduced a new attribute \"fixed-scroll-controls\".\n   * Per default, tab-groups now hide the scroll buttons when they are not needed.\n   * \"fixed-scroll-controls\" will keep the scroll buttons visible at all times,\n   * which is the default behavior of Synergy.\n   * For this reason, we make the buttons visible by default, but show them in a \"disabled\" state when they are not needed.\n   */\n  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,\n  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {\n    visibility: visible;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden::part(base),\n  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden::part(base) {\n    opacity: var(--syn-input-disabled-opacity);\n    pointer-events: none;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,kCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.MUNBPFME.js → chunk.YBCKQJK4.js}

@@ -15,7 +15,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.X7TOECRW.js";
+} from "./chunk.WEXZUPCC.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -44,11 +44,6 @@ var SynIcon = class extends SynergyElement {
       this.svg = html`<svg part="svg">
         <use part="use" href="${url}"></use>
       </svg>`;
-      await this.updateComplete;
-      const svg = this.shadowRoot.querySelector("[part='svg']");
-      if (typeof library.mutator === "function") {
-        library.mutator(svg);
-      }
       return this.svg;
     }
     try {
@@ -134,6 +129,13 @@ var SynIcon = class extends SynergyElement {
     }
     if (isTemplateResult(svg)) {
       this.svg = svg;
+      if (library) {
+        await this.updateComplete;
+        const shadowSVG = this.shadowRoot.querySelector("[part='svg']");
+        if (typeof library.mutator === "function" && shadowSVG) {
+          library.mutator(shadowSVG);
+        }
+      }
       return;
     }
     switch (svg) {
@@ -178,4 +180,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.MUNBPFME.js.map
+//# sourceMappingURL=chunk.YBCKQJK4.js.map