@synergy-design-system/components 2.67.0 → 2.69.0

package/dist/chunks/{chunk.JUGAR7WL.js → chunk.JEU3XS2U.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.YSIEZZXC.js";
+} from "./chunk.BY25GXYZ.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.JUGAR7WL.js.map
+//# sourceMappingURL=chunk.JEU3XS2U.js.map

package/dist/chunks/{chunk.SIJFIKOW.js → chunk.JMTJXNW7.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.JEHFYWEN.js";
+} from "./chunk.3GZ4FMTK.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.SIJFIKOW.js.map
+//# sourceMappingURL=chunk.JMTJXNW7.js.map

package/dist/chunks/{chunk.U63OTNG4.js → chunk.JOFGNDDM.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.VTQVXGIA.js";
+} from "./chunk.6OMO7EMH.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.U63OTNG4.js.map
+//# sourceMappingURL=chunk.JOFGNDDM.js.map

package/dist/chunks/{chunk.O2J5DFS6.js → chunk.K6D7S3YG.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -430,4 +430,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.O2J5DFS6.js.map
+//# sourceMappingURL=chunk.K6D7S3YG.js.map

package/dist/chunks/{chunk.53WASOQJ.js → chunk.K7MGUFJL.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.53WASOQJ.js.map
+//# sourceMappingURL=chunk.K7MGUFJL.js.map

package/dist/chunks/{chunk.6JHHTQHV.js → chunk.KJKXMRGM.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk.74N5WLM5.js";
 import {
   SynNavItem
-} from "./chunk.VBJRJCBV.js";
+} from "./chunk.HGIWZAAQ.js";
 import {
   SynMenu
-} from "./chunk.RPUJPNLC.js";
+} from "./chunk.V5UBDZIV.js";
 import {
   SynDropdown
-} from "./chunk.XOMFYFY6.js";
+} from "./chunk.J3M5OC76.js";
 import {
   SynIcon
-} from "./chunk.D5TUJ7H4.js";
+} from "./chunk.YUWOVCYX.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.6JHHTQHV.js.map
+//# sourceMappingURL=chunk.KJKXMRGM.js.map

package/dist/chunks/{chunk.GCGMGUYR.js → chunk.KJQARAIM.js}

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

package/dist/chunks/{chunk.TQSUJA4L.js → chunk.KWCADW5G.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressBar
-} from "./chunk.GOOWCBYP.js";
+} from "./chunk.YRUZRVQC.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SynProgressBar;
@@ -9,4 +9,4 @@ SynProgressBar.define("syn-progress-bar");
 export {
   progress_bar_default
 };
-//# sourceMappingURL=chunk.TQSUJA4L.js.map
+//# sourceMappingURL=chunk.KWCADW5G.js.map

package/dist/chunks/{chunk.3JWWA3AR.js → chunk.KZL3QIE4.js}

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

package/dist/chunks/{chunk.XYFRA2JI.js → chunk.L2Z5L3ZF.js}

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

package/dist/chunks/{chunk.PVLBNBRC.js → chunk.L64IEHBD.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.RT2FQCUP.js";
+} from "./chunk.QEWFQ4YU.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.PVLBNBRC.js.map
+//# sourceMappingURL=chunk.L64IEHBD.js.map

package/dist/chunks/{chunk.EM34XAIK.js → chunk.LQPPJTWA.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.OQFR7442.js";
+} from "./chunk.QVRDABLT.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.EM34XAIK.js.map
+//# sourceMappingURL=chunk.LQPPJTWA.js.map

package/dist/chunks/{chunk.LO2YGOUQ.js → chunk.LRFK2SKK.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.DTZOPFUY.js";
+} from "./chunk.UCNMHEPF.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.LO2YGOUQ.js.map
+//# sourceMappingURL=chunk.LRFK2SKK.js.map

package/dist/chunks/{chunk.R7H46OHS.js → chunk.M4MYWEBC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.R7H46OHS.js.map
+//# sourceMappingURL=chunk.M4MYWEBC.js.map

package/dist/chunks/{chunk.TMUFDIVN.js → chunk.MQK2OKFA.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.W7MIBTKU.js";
+} from "./chunk.SMFSDEEQ.js";
 import {
   FormControlController,
   validValidityState
@@ -17,7 +17,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.D5TUJ7H4.js";
+} from "./chunk.YUWOVCYX.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -32,7 +32,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -295,4 +295,4 @@ SynButton = __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.TMUFDIVN.js.map
+//# sourceMappingURL=chunk.MQK2OKFA.js.map

package/dist/chunks/{chunk.2IRMFJQ6.js → chunk.NCSH4ROH.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.NTRLT76V.js";
+} from "./chunk.EQDRZGD6.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.2IRMFJQ6.js.map
+//# sourceMappingURL=chunk.NCSH4ROH.js.map

package/dist/chunks/{chunk.QKRZD7YM.js → chunk.NYFVGD4T.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.D5TUJ7H4.js";
+} from "./chunk.YUWOVCYX.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -31,7 +31,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -267,4 +267,4 @@ SynCheckbox = __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.QKRZD7YM.js.map
+//# sourceMappingURL=chunk.NYFVGD4T.js.map

package/dist/chunks/{chunk.6TYH5BHW.js → chunk.OHKR3AP3.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.2RRRUEJX.js";
+} from "./chunk.FYVYGXL7.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.6TYH5BHW.js.map
+//# sourceMappingURL=chunk.OHKR3AP3.js.map

package/dist/chunks/{chunk.YXFOI64K.js → chunk.OMV7GVII.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.YXFOI64K.js.map
+//# sourceMappingURL=chunk.OMV7GVII.js.map

package/dist/chunks/{chunk.RT2FQCUP.js → chunk.QEWFQ4YU.js}

@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -255,4 +255,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.RT2FQCUP.js.map
+//# sourceMappingURL=chunk.QEWFQ4YU.js.map

package/dist/chunks/{chunk.UKOHKRVR.js → chunk.QH4E7254.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.S22BO5SF.js";
 import {
   SynIcon
-} from "./chunk.D5TUJ7H4.js";
+} from "./chunk.YUWOVCYX.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.UKOHKRVR.js.map
+//# sourceMappingURL=chunk.QH4E7254.js.map

package/dist/chunks/{chunk.ZZME3OC2.js → chunk.QLEB5FN4.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.SAF7VAGK.js";
+} from "./chunk.GU3LJCSZ.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.ZZME3OC2.js.map
+//# sourceMappingURL=chunk.QLEB5FN4.js.map

package/dist/chunks/{chunk.IFI7ZLER.js → chunk.QPJSR64I.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.VBJRJCBV.js";
+} from "./chunk.HGIWZAAQ.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.IFI7ZLER.js.map
+//# sourceMappingURL=chunk.QPJSR64I.js.map

package/dist/chunks/{chunk.OQFR7442.js → chunk.QVRDABLT.js}

@@ -1,6 +1,3 @@
-import {
-  accordion_styles_default
-} from "./chunk.WNUZ6LH4.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -12,7 +9,10 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
+import {
+  accordion_styles_default
+} from "./chunk.WNUZ6LH4.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.OQFR7442.js.map
+//# sourceMappingURL=chunk.QVRDABLT.js.map

package/dist/chunks/{chunk.G3KRSXVI.js → chunk.R7DJWLTC.js}

@@ -13,28 +13,54 @@ var option_custom_styles_default = css`
    * See below for usage of these variables
    */
   .option {
+    /*
+     * #988: Brand2025 defines a small gap between options
+     * and rounded corners. We achieve that using an outline
+     * that simulates the gap using the menu background color.
+     */
+    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);
+
+    border-radius: calc(var(--outline) * 1.5);
     font-size: var(--option-font-size, var(--syn-font-size-medium));
-    
+
     /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
     min-height: var(--option-min-height, var(--syn-input-height-medium));
-    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));
+    outline: var(--outline) solid var(--syn-panel-background-color);
+    outline-offset: calc(var(--outline) * -1 + 1px);
+    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));    
   }
 
   .option:not(.option--current) {
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-option-color, var(--syn-typography-color-text));
+  }
+
+  .option--current,
+  .option--current.option--hover:not(.option--disabled) {
+    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
   }
 
   /** #429: Use token for opacity */
-  .option--disabled { 
+  .option--disabled {
     opacity: var(--syn-input-disabled-opacity);
   }
 
+  .option--current.option--disabled {
+    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+  }
+
   .option__label {
     line-height: var(--syn-line-height-normal);
   }
 
   .option__check {
-    color: var(--syn-color-primary-600);
+    color: var(--syn-option-check-color, var(--syn-color-primary-600));
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
@@ -44,7 +70,11 @@ var option_custom_styles_default = css`
 
   /* Invert the check mark when keyboard navigation is used */
   .option--current .option__check {
-    color: var(--syn-color-neutral-0);
+    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+  }
+
+  .option--hover:not(.option--current) .option__check {
+    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
   }
 
   /* Use larger spacing between icons and content */
@@ -59,28 +89,29 @@ var option_custom_styles_default = css`
   /* Set correct icon size when someone uses syn-icon in the slots */
   .option__prefix::slotted(syn-icon),
   .option__suffix::slotted(syn-icon) {
-    color: var(--syn-color-neutral-800);
+    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
+  .option--hover .option__prefix::slotted(syn-icon),
+  .option--hover .option__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));
+  }
+
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-color-neutral-0);
+    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));
   }
 
   /* This is needed for the highlight styling of the options in syn-combobox */
   .option__label::slotted(.syn-highlight-style) {
     background-color: transparent;
-    color: var(--syn-color-neutral-950);
+    color: unset;
     font: var(--syn-body-medium-bold);
   }
-
-  :host([aria-selected='true']) .option__label::slotted(.syn-highlight-style) {
-    color: var(--syn-color-neutral-0);
-  }
 `;
 
 export {
   option_custom_styles_default
 };
-//# sourceMappingURL=chunk.G3KRSXVI.js.map
+//# sourceMappingURL=chunk.R7DJWLTC.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * The syn-option is now able to adjust its height from a parent item\n   * This is done by exposing multiple css variables to the outside:\n   *\n   * --option-min-height (defaults to 48px) The minimal height of an element\n   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use\n   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use\n   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark\n   * \n   * See below for usage of these variables\n   */\n  .option {\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an outline\n     * that simulates the gap using the menu background color.\n     */\n    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);\n\n    border-radius: calc(var(--outline) * 1.5);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    outline: var(--outline) solid var(--syn-panel-background-color);\n    outline-offset: calc(var(--outline) * -1 + 1px);\n    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));    \n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color, var(--syn-typography-color-text));\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  /** #429: Use token for opacity */\n  .option--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color, var(--syn-color-primary-600));\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color, var(--syn-typography-color-text));\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--hover .option__prefix::slotted(syn-icon),\n  .option--hover .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.UZ5VWJCK.js → chunk.RLCKZDNW.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.KICTVFFR.js";
+} from "./chunk.DIZPR4UK.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.UZ5VWJCK.js.map
+//# sourceMappingURL=chunk.RLCKZDNW.js.map

package/dist/chunks/{chunk.6E2JXKYY.js → chunk.SC53WP5D.js}

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

package/dist/chunks/{chunk.4NKB647A.js → chunk.SLTOBVBL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.E3Z62YYT.js";
 import {
   SynIcon
-} from "./chunk.D5TUJ7H4.js";
+} from "./chunk.YUWOVCYX.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -144,4 +144,4 @@ SynIconButton = __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.4NKB647A.js.map
+//# sourceMappingURL=chunk.SLTOBVBL.js.map

package/dist/chunks/{chunk.W7MIBTKU.js → chunk.SMFSDEEQ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LJOGOH4A.js";
+} from "./chunk.AJ4C6ZUX.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.W7MIBTKU.js.map
+//# sourceMappingURL=chunk.SMFSDEEQ.js.map

package/dist/chunks/{chunk.WGBBUS47.js → chunk.T3YBXPW5.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.74DVCVP4.js";
+} from "./chunk.CR5WL4GI.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.WGBBUS47.js.map
+//# sourceMappingURL=chunk.T3YBXPW5.js.map

package/dist/chunks/{chunk.EXBF3QZ7.js → chunk.T7QLW4WH.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.RPUJPNLC.js";
+} from "./chunk.V5UBDZIV.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.EXBF3QZ7.js.map
+//# sourceMappingURL=chunk.T7QLW4WH.js.map