@synergy-design-system/components 2.45.2 → 2.46.0

package/dist/chunks/{chunk.7VCXMB4O.js → chunk.23VRSHVV.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.ARR23WUY.js";
 import {
   SynIcon
-} from "./chunk.AVJBYGN3.js";
+} from "./chunk.OUB2FMOU.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -165,4 +165,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.7VCXMB4O.js.map
+//# sourceMappingURL=chunk.23VRSHVV.js.map

package/dist/chunks/{chunk.HB5VOG7O.js → chunk.24SRZBBX.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EHSNF4SS.js";
 import {
   SynIcon
-} from "./chunk.AVJBYGN3.js";
+} from "./chunk.OUB2FMOU.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -120,4 +120,4 @@ SynRadio = __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.HB5VOG7O.js.map
+//# sourceMappingURL=chunk.24SRZBBX.js.map

package/dist/chunks/{chunk.C54XEFIT.js → chunk.2BPIJI67.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.DR2XVWMI.js";
+} from "./chunk.5C44JOXD.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.C54XEFIT.js.map
+//# sourceMappingURL=chunk.2BPIJI67.js.map

package/dist/chunks/{chunk.LTBKA57Y.js → chunk.2MMV32NH.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.AHFMEUB7.js";
+} from "./chunk.TPA42B34.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.LTBKA57Y.js.map
+//# sourceMappingURL=chunk.2MMV32NH.js.map

package/dist/chunks/{chunk.VN2PSQ4U.js → chunk.2NIFD3YE.js}

@@ -10,14 +10,15 @@ var tag_custom_styles_default = css`
   }
 
   .tag {
-    background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-neutral-400);
+    background-color: var(--syn-panel-background-color);
+    border-color: var(--syn-panel-border-color);
     border-radius: var(--syn-border-radius-small);
+    border-width: var(--syn-border-width-small);
     color: var(--syn-input-color);
   }
 
   .tag .tag__remove {
-    color: var(--syn-color-neutral-500);
+    color: var(--syn-input-icon-icon-clearable-color);
   }
 
 
@@ -67,11 +68,11 @@ var tag_custom_styles_default = css`
 
   /* Hover */
   .tag.tag--removable:hover {
-    background-color: var(--syn-color-neutral-100);
+    background-color: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-100));
   }
   
   .tag .tag__remove:hover {
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-input-icon-icon-clearable-color-hover);
   }
 
 
@@ -122,4 +123,4 @@ var tag_custom_styles_default = css`
 export {
   tag_custom_styles_default
 };
-//# sourceMappingURL=chunk.VN2PSQ4U.js.map
+//# sourceMappingURL=chunk.2NIFD3YE.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tag/tag.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /*\n     * #850: This is needed for position adjustments when using the tags in syn-select[multiple].\n     * It will get adjusted in the syn-select component.\n     */\n    --syn-tag-position-adjustment: 0px;\n  }\n\n  .tag {\n    background-color: var(--syn-panel-background-color);\n    border-color: var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-small);\n    border-width: var(--syn-border-width-small);\n    color: var(--syn-input-color);\n  }\n\n  .tag .tag__remove {\n    color: var(--syn-input-icon-icon-clearable-color);\n  }\n\n\n  /* Size small */\n  .tag--small {\n    font-size: var(--syn-font-size-x-small);\n    height: var(--syn-font-size-x-large);\n    line-height: calc(var(--syn-font-size-x-large) - var(--syn-input-border-width) * 2);\n  }\n\n  .tag--small.tag--removable {\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n\n  /* Size medium */\n  .tag--medium {\n    font-size: var(--syn-font-size-small);\n    height: var(--syn-font-size-2x-large);\n    line-height: calc(var(--syn-font-size-2x-large) - var(--syn-input-border-width) * 2);\n  }\n\n  .tag--medium.tag--removable {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .tag--medium .tag__remove {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n\n  /* Size large */\n  .tag--large {\n    font-size: var(--syn-font-size-medium);\n    height: var(--syn-font-size-3x-large);\n    line-height: calc(var(--syn-font-size-3x-large) - var(--syn-input-border-width) * 2);\n  }\n\n  .tag--large .tag__remove {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .tag--large.tag--removable {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n\n  /* Hover */\n  .tag.tag--removable:hover {\n    background-color: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-100));\n  }\n  \n  .tag .tag__remove:hover {\n    color: var(--syn-input-icon-icon-clearable-color-hover);\n  }\n\n\n  /* Focus \n     ! Focus styling is currently not working because shoelace does not support to focus icon-button \n  */\n  .tag.tag--removable:focus ~ .tag__remove {\n    border: solid 1px var(--syn-color-primary-500);\n  }\n\n\n  /* Slotted icon style */\n  .tag ::slotted(syn-icon) {\n    position: relative;\n    top: var(--syn-tag-position-adjustment);\n  }\n\n  .tag--small ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-small);\n    margin-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .tag--medium ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .tag--large ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-large);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n\n  /* Remove icon-button style */\n  .tag--small .tag__remove::part(base){\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .tag--medium .tag__remove::part(base){\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .tag--large .tag__remove::part(base){\n    font-size: var(--syn-font-size-2x-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.G325VK6R.js → chunk.32OFRTVL.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.NZ7ZWYRP.js";
+} from "./chunk.WJXSE46S.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.G325VK6R.js.map
+//# sourceMappingURL=chunk.32OFRTVL.js.map

package/dist/chunks/{chunk.5R4H4RCZ.js → chunk.3CIWKBTC.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.PCMT3MUM.js";
+} from "./chunk.PARACD3O.js";
 import {
   FormControlController,
   validValidityState
@@ -17,7 +17,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.AVJBYGN3.js";
+} from "./chunk.OUB2FMOU.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -32,7 +32,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -295,4 +295,4 @@ SynButton = __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.5R4H4RCZ.js.map
+//# sourceMappingURL=chunk.3CIWKBTC.js.map

package/dist/chunks/{chunk.AWMAUFQ2.js → chunk.3D5JYV3S.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.AWMAUFQ2.js.map
+//# sourceMappingURL=chunk.3D5JYV3S.js.map

package/dist/chunks/{chunk.DAQXMWRG.js → chunk.4ONQSQWY.js}

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

package/dist/chunks/{chunk.3LVJS4GV.js → chunk.4RDGXLUO.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.G76BKD7B.js";
 import {
   SynPopup
-} from "./chunk.RJYU4MHA.js";
+} from "./chunk.VHCKZLOU.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -385,4 +385,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.3LVJS4GV.js.map
+//# sourceMappingURL=chunk.4RDGXLUO.js.map

package/dist/chunks/{chunk.FA6V2WD6.js → chunk.57RV2JXO.js}

@@ -2,12 +2,9 @@
 import { css } from "lit";
 var divider_custom_styles_default = css`
   /* Write custom CSS here */
-  :host {
-    --color: var(--syn-color-neutral-400);
-  }
 `;
 
 export {
   divider_custom_styles_default
 };
-//# sourceMappingURL=chunk.FA6V2WD6.js.map
+//# sourceMappingURL=chunk.57RV2JXO.js.map

package/dist/chunks/chunk.57RV2JXO.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/divider/divider.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* Write custom CSS here */\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,gCAAQ;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.DR2XVWMI.js → chunk.5C44JOXD.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.XAQKFEHH.js";
 import {
   SynDivider
-} from "./chunk.GWDNPLW3.js";
+} from "./chunk.EGURWFSB.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -25,7 +25,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.AVJBYGN3.js";
+} from "./chunk.OUB2FMOU.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -45,7 +45,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -867,4 +867,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.DR2XVWMI.js.map
+//# sourceMappingURL=chunk.5C44JOXD.js.map

package/dist/chunks/{chunk.ZVBLLRCO.js → chunk.63CI7YLN.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.DEN4XP76.js";
+} from "./chunk.UA4FJIW7.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.ZVBLLRCO.js.map
+//# sourceMappingURL=chunk.63CI7YLN.js.map

package/dist/chunks/{chunk.33HW5JD7.js → chunk.6C2VOQNT.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.2UXCJDAJ.js";
+} from "./chunk.GPTWHLC2.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.33HW5JD7.js.map
+//# sourceMappingURL=chunk.6C2VOQNT.js.map

package/dist/chunks/{chunk.2U2KM62A.js → chunk.6GVMJEC4.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.DLGN2SKF.js";
+} from "./chunk.XOLLUQPC.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.2U2KM62A.js.map
+//# sourceMappingURL=chunk.6GVMJEC4.js.map

package/dist/chunks/{chunk.YFEK7I4W.js → chunk.6I6HQGH4.js}

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

package/dist/chunks/{chunk.EBMWYPMN.js → chunk.6MR7BVV5.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.URNJAXTL.js";
+} from "./chunk.UC7M2DXH.js";
 import {
   compareValues,
   isAllowedValue
@@ -13,7 +13,7 @@ import {
 } from "./chunk.XTWO6ZZW.js";
 import {
   SynPopup
-} from "./chunk.RJYU4MHA.js";
+} from "./chunk.VHCKZLOU.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
@@ -40,7 +40,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.AVJBYGN3.js";
+} from "./chunk.OUB2FMOU.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -55,7 +55,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -879,4 +879,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.EBMWYPMN.js.map
+//# sourceMappingURL=chunk.6MR7BVV5.js.map

package/dist/chunks/{chunk.CDJYUWQJ.js → chunk.A2B7C3N2.js}

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

package/dist/chunks/{chunk.KR75XE3N.js → chunk.A4HL3BIH.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.AHFMEUB7.js";
+} from "./chunk.TPA42B34.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -32,7 +32,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   alert_custom_styles_default
 } from "./chunk.QBHZAR4C.js";
@@ -288,4 +288,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.KR75XE3N.js.map
+//# sourceMappingURL=chunk.A4HL3BIH.js.map

package/dist/chunks/{chunk.KNUR2AQS.js → chunk.BWSRCH7T.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.UW4JDWEI.js";
+} from "./chunk.IIHE22EW.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.KNUR2AQS.js.map
+//# sourceMappingURL=chunk.BWSRCH7T.js.map

package/dist/chunks/{chunk.7J4L52X7.js → chunk.CNXJ4AUG.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.43YNZAWL.js";
 import {
   SynIconButton
-} from "./chunk.AHFMEUB7.js";
+} from "./chunk.TPA42B34.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.7J4L52X7.js.map
+//# sourceMappingURL=chunk.CNXJ4AUG.js.map

package/dist/chunks/{chunk.HPO5QTRK.js → chunk.CZ7FEHUZ.js}

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

package/dist/chunks/{chunk.KX43XLOR.js → chunk.DFK2PRNS.js}

@@ -39,7 +39,7 @@ var details_custom_styles_default = css`
    * we have to adjust the rotation of the icon when the details is open.
    */
   .details--open .details__summary-icon {
-    rotate: -180deg;
+    rotate: var(--syn-details-open-rotation, 360deg);
   }
 
   /**
@@ -142,4 +142,4 @@ var details_custom_styles_default = css`
 export {
   details_custom_styles_default
 };
-//# sourceMappingURL=chunk.KX43XLOR.js.map
+//# sourceMappingURL=chunk.DFK2PRNS.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/details/details.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .details {\n    background-color: unset;\n    border-color: var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    border-width: 0 0 var(--syn-border-width-small);\n  }\n\n  /** #429: Use token for opacity */\n  .details--disabled {\n    opacity: var(--syn-opacity-50);\n  }\n\n  .details__summary-icon {\n    align-self: flex-start;\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n\n    /**\n     * As we are using an alignment of \"start\"  instead of \"center\" make sure\n     * the arrow starts on the same visual line as the first line of headline text\n     */\n    position: relative;\n    top: 2px;\n  }\n\n  .details .details__summary {\n    color: var(--syn-typography-color-text);\n  }\n\n  .details__header {\n    gap: var(--syn-spacing-medium);\n  }\n\n  /**\n   * As we are using top/down arrows for the details element,\n   * we have to adjust the rotation of the icon when the details is open.\n   */\n  .details--open .details__summary-icon {\n    rotate: var(--syn-details-open-rotation, 360deg);\n  }\n\n  /**\n   * Adjustments for medium variant\n   */\n  .details--size-medium .details__header {\n    padding: var(--syn-spacing-medium-large) 0;\n  }\n\n  .details--size-medium .details__content {\n    font-size: var(--syn-font-size-small);\n    line-height: var(--syn-line-height-normal);\n    padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);\n  }\n\n  .details--size-medium .details__summary {\n    font: var(--syn-body-medium-regular);\n  }\n\n  .details--size-medium .details__summary::slotted(syn-icon) {\n    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */\n    flex-shrink: 0;\n    font-size: var(--syn-spacing-large);\n    margin-right: var(--syn-spacing-small);\n  }\n\n  /**\n   * Adjustment for large variant\n   */\n  .details--size-large .details__header {\n    padding: var(--syn-spacing-large) 0;\n  }\n\n  .details--size-large .details__content {\n    font-size: var(--syn-font-size-medium);\n    line-height: var(--syn-line-height-normal);\n    padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);\n  }\n\n  .details--size-large .details__summary {\n    font: var(--syn-body-large-regular);\n  }\n\n  .details--size-large .details__summary-icon {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .details--size-large .details__summary::slotted(syn-icon) {\n    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */\n    flex-shrink: 0;\n    font-size: var(--syn-spacing-x-large);\n    margin-right: var(--syn-spacing-small);\n  }\n\n  /**\n   * Mark the details as open by adjusting its label\n   */\n  .details--open .details__summary {\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  /**\n   * Add a visually visible hover effect to the summary element\n   */\n  .details:not(.details--disabled) .details__header:hover .details__summary,\n  .details:not(.details--disabled) .details__header:hover .details__summary-icon {\n    color: var(--syn-color-primary-700);\n  }\n\n  /**\n   *  Contained style\n   */\n  .details--contained {\n    background-color: var(--syn-panel-background-color);\n    border-radius: var(--syn-border-radius-medium);\n    border-width: var(--syn-panel-border-width);\n  }\n\n  .details--contained .details__header:focus-visible {\n    border-radius: var(--syn-border-radius-medium);\n  }\n\n  .details--size-medium.details--contained .details__header {\n    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large);\n  }\n\n  .details--size-medium.details--contained .details__content {\n    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n\n  .details--size-large.details--contained .details__header {\n    padding: var(--syn-spacing-large);\n  }\n\n  .details--size-large.details--contained .details__content {\n    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,gCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.4XY2BVNK.js → chunk.DVZP7JU3.js}

@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -255,4 +255,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.4XY2BVNK.js.map
+//# sourceMappingURL=chunk.DVZP7JU3.js.map

package/dist/chunks/{chunk.SNFVW3JM.js → chunk.E5U2FHTA.js}

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

package/dist/chunks/{chunk.GWDNPLW3.js → chunk.EGURWFSB.js}

@@ -1,6 +1,6 @@
 import {
   divider_custom_styles_default
-} from "./chunk.FA6V2WD6.js";
+} from "./chunk.57RV2JXO.js";
 import {
   divider_styles_default
 } from "./chunk.FSZIE7IO.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.GWDNPLW3.js.map
+//# sourceMappingURL=chunk.EGURWFSB.js.map

package/dist/chunks/{chunk.7QHWUHRC.js → chunk.EIZLOSHH.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.MWT5A6UR.js";
+} from "./chunk.T2TALM4R.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.7QHWUHRC.js.map
+//# sourceMappingURL=chunk.EIZLOSHH.js.map

package/dist/chunks/{chunk.3YODD7Z3.js → chunk.EPSBD2E6.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.7PWEDR4V.js";
+} from "./chunk.IQ4IN3TD.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.3YODD7Z3.js.map
+//# sourceMappingURL=chunk.EPSBD2E6.js.map

package/dist/chunks/{chunk.R7NKVOAJ.js → chunk.FDLAEOEF.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.3YODD7Z3.js";
+} from "./chunk.EPSBD2E6.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.R7NKVOAJ.js.map
+//# sourceMappingURL=chunk.FDLAEOEF.js.map

package/dist/chunks/{chunk.2M3G5L4T.js → chunk.FWBTDW6R.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.DORATI2I.js";
+} from "./chunk.LMSCYNAW.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.2M3G5L4T.js.map
+//# sourceMappingURL=chunk.FWBTDW6R.js.map

package/dist/chunks/{chunk.IEUQSDIW.js → chunk.FWTCHF66.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.EBCCBTTK.js";
+} from "./chunk.I5SXKW7U.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.IEUQSDIW.js.map
+//# sourceMappingURL=chunk.FWTCHF66.js.map