@synergy-design-system/components 3.10.3 → 3.10.5

package/dist/chunks/{chunk.ZBFZ6I5O.js → chunk.2EX7ZQ3B.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.ZBFZ6I5O.js.map
+//# sourceMappingURL=chunk.2EX7ZQ3B.js.map

package/dist/chunks/{chunk.ILWP4D4Q.js → chunk.2MMTYLJJ.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.FTJEO6ZS.js";
+} from "./chunk.ETSFMLK7.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.ILWP4D4Q.js.map
+//# sourceMappingURL=chunk.2MMTYLJJ.js.map

package/dist/chunks/{chunk.S3WN2TXZ.js → chunk.2QK4X7IQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   enableDefaultSettings
-} from "./chunk.5YZ63VR2.js";
+} from "./chunk.WCFCAC7D.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.S3WN2TXZ.js.map
+//# sourceMappingURL=chunk.2QK4X7IQ.js.map

package/dist/chunks/{chunk.YUZJRFKC.js → chunk.2RQVKRYN.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.TBICHER6.js";
+} from "./chunk.OJZUYG52.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.YUZJRFKC.js.map
+//# sourceMappingURL=chunk.2RQVKRYN.js.map

package/dist/chunks/{chunk.JDJB6QZK.js → chunk.2SEL4TFB.js}

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

package/dist/chunks/{chunk.MABSJAIZ.js → chunk.356WF3OF.js}

@@ -1,6 +1,6 @@
 import {
   SynValidate
-} from "./chunk.3LK3732L.js";
+} from "./chunk.FDUH3S3D.js";
 
 // src/components/validate/validate.ts
 var validate_default = SynValidate;
@@ -9,4 +9,4 @@ SynValidate.define("syn-validate");
 export {
   validate_default
 };
-//# sourceMappingURL=chunk.MABSJAIZ.js.map
+//# sourceMappingURL=chunk.356WF3OF.js.map

package/dist/chunks/{chunk.PGKPRFJN.js → chunk.3ABCRA5I.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.EQUDFX74.js";
 import {
   SynPopup
-} from "./chunk.ICIKU6OS.js";
+} from "./chunk.I7TW62NV.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -272,4 +272,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.PGKPRFJN.js.map
+//# sourceMappingURL=chunk.3ABCRA5I.js.map

package/dist/chunks/{chunk.WFGFKYSA.js → chunk.3D52IAB3.js}

@@ -15,13 +15,13 @@ import {
 } from "./chunk.RJUVM6NO.js";
 import {
   SynIcon
-} from "./chunk.ALSNIU7H.js";
+} from "./chunk.CISXP56D.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
-} from "./chunk.5YZ63VR2.js";
+} from "./chunk.WCFCAC7D.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -245,4 +245,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.WFGFKYSA.js.map
+//# sourceMappingURL=chunk.3D52IAB3.js.map

package/dist/chunks/{chunk.GSZK4O2H.js → chunk.4B62MZL6.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -40,4 +40,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.GSZK4O2H.js.map
+//# sourceMappingURL=chunk.4B62MZL6.js.map

package/dist/chunks/{chunk.CBV7BBKO.js → chunk.4GHYLTWM.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.JDYQ7EFG.js";
 import {
   SynIconButton
-} from "./chunk.6AY3L2KK.js";
+} from "./chunk.IKLYC5F2.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.CBV7BBKO.js.map
+//# sourceMappingURL=chunk.4GHYLTWM.js.map

package/dist/chunks/{chunk.JEJO727M.js → chunk.52P5S76J.js}

@@ -1,10 +1,10 @@
-import {
-  sortComponentsForUpdate
-} from "./chunk.JIHDB74M.js";
 import {
   INITIAL_DEFAULT_SETTINGS,
   defaultSettings
 } from "./chunk.ST3G47SZ.js";
+import {
+  sortComponentsForUpdate
+} from "./chunk.JIHDB74M.js";
 
 // src/utilities/defaultSettings/functions.ts
 var SYNERGY_SETTING_EMIT_EVENTS = false;
@@ -164,4 +164,4 @@ export {
   setGlobalDefaultSettings,
   resetGlobalDefaultSettings
 };
-//# sourceMappingURL=chunk.JEJO727M.js.map
+//# sourceMappingURL=chunk.52P5S76J.js.map

package/dist/chunks/{chunk.4O2Q4UVL.js → chunk.5DZ44PNG.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.K5MZVORR.js";
 import {
   SynDivider
-} from "./chunk.GSZK4O2H.js";
+} from "./chunk.4B62MZL6.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.ALSNIU7H.js";
+} from "./chunk.CISXP56D.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -353,4 +353,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.4O2Q4UVL.js.map
+//# sourceMappingURL=chunk.5DZ44PNG.js.map

package/dist/chunks/{chunk.3XIUZPE3.js → chunk.5SK7GE53.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.QKRQEB4F.js";
 import {
   SynDivider
-} from "./chunk.GSZK4O2H.js";
+} from "./chunk.4B62MZL6.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -31,4 +31,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.3XIUZPE3.js.map
+//# sourceMappingURL=chunk.5SK7GE53.js.map

package/dist/chunks/{chunk.3S3VS4WU.js → chunk.5U2JVZ6F.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   enableDefaultSettings
-} from "./chunk.5YZ63VR2.js";
+} from "./chunk.WCFCAC7D.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -264,4 +264,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.3S3VS4WU.js.map
+//# sourceMappingURL=chunk.5U2JVZ6F.js.map

package/dist/chunks/{chunk.7KNRCYCH.js → chunk.5XHM4VV3.js}

@@ -1,9 +1,6 @@
-import {
-  accordion_styles_default
-} from "./chunk.WNUZ6LH4.js";
 import {
   enableDefaultSettings
-} from "./chunk.5YZ63VR2.js";
+} from "./chunk.WCFCAC7D.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -12,7 +9,10 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
+import {
+  accordion_styles_default
+} from "./chunk.WNUZ6LH4.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.7KNRCYCH.js.map
+//# sourceMappingURL=chunk.5XHM4VV3.js.map

package/dist/chunks/{chunk.FCA66FUU.js → chunk.74QL32ZB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.FCA66FUU.js.map
+//# sourceMappingURL=chunk.74QL32ZB.js.map

package/dist/chunks/{chunk.WX7OUS6S.js → chunk.7663MKRG.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -68,4 +68,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.WX7OUS6S.js.map
+//# sourceMappingURL=chunk.7663MKRG.js.map

package/dist/chunks/{chunk.7KBJVSO3.js → chunk.7JWCZWAU.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.3T6ULO23.js";
 import {
   SynDivider
-} from "./chunk.GSZK4O2H.js";
+} from "./chunk.4B62MZL6.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -131,4 +131,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.7KBJVSO3.js.map
+//# sourceMappingURL=chunk.7JWCZWAU.js.map

package/dist/chunks/{chunk.OXRU6S76.js → chunk.A5GCYWCA.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.S3WN2TXZ.js";
+} from "./chunk.2QK4X7IQ.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.OXRU6S76.js.map
+//# sourceMappingURL=chunk.A5GCYWCA.js.map

package/dist/chunks/{chunk.LGOSYXZY.js → chunk.AS7IAH66.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuLabel
-} from "./chunk.3XIUZPE3.js";
+} from "./chunk.5SK7GE53.js";
 
 // src/components/menu-label/menu-label.ts
 var menu_label_default = SynMenuLabel;
@@ -9,4 +9,4 @@ SynMenuLabel.define("syn-menu-label");
 export {
   menu_label_default
 };
-//# sourceMappingURL=chunk.LGOSYXZY.js.map
+//# sourceMappingURL=chunk.AS7IAH66.js.map

package/dist/chunks/{chunk.ZOVF2LKT.js → chunk.AWHWYEKL.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.7KBJVSO3.js";
+} from "./chunk.7JWCZWAU.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.ZOVF2LKT.js.map
+//# sourceMappingURL=chunk.AWHWYEKL.js.map

package/dist/chunks/{chunk.4HGSL553.js → chunk.B77LPYVJ.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.Q5EKPQBR.js";
 import {
   SynResizeObserver
-} from "./chunk.T4OFF4K7.js";
+} from "./chunk.VRNF56CZ.js";
 import {
   scrollIntoView
 } from "./chunk.2DT3C6WE.js";
 import {
   SynIconButton
-} from "./chunk.6AY3L2KK.js";
+} from "./chunk.IKLYC5F2.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass,
   __spreadValues
@@ -516,4 +516,4 @@ __decorateClass([
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.4HGSL553.js.map
+//# sourceMappingURL=chunk.B77LPYVJ.js.map

package/dist/chunks/{chunk.PPC2IFA5.js → chunk.CCWI54WT.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.W2REEZSG.js";
+} from "./chunk.KFX6QF4R.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.PPC2IFA5.js.map
+//# sourceMappingURL=chunk.CCWI54WT.js.map

package/dist/chunks/{chunk.ALSNIU7H.js → chunk.CISXP56D.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.ALSNIU7H.js.map
+//# sourceMappingURL=chunk.CISXP56D.js.map

package/dist/chunks/{chunk.BL5JW7YS.js → chunk.CUDIVEVT.js}

@@ -1,8 +1,19 @@
-// src/components/option/option.custom.styles.ts
+// src/components/option/option.styles.ts
 import { css } from "lit";
-var option_custom_styles_default = css`
+var option_styles_default = css`
+  :host {
+    display: block;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
   /**
-   * The syn-option is now able to adjust its height from a parent item
+   * syn-option is now able to adjust its height from a parent item
    * This is done by exposing multiple css variables to the outside:
    *
    * --option-min-height (defaults to 48px) The minimal height of an element
@@ -13,6 +24,8 @@ var option_custom_styles_default = css`
    * See below for usage of these variables
    */
   .option {
+    align-items: center;
+
     /*
      * #988: Brand2025 defines a small gap between options
      * and rounded corners. We achieve that using an border
@@ -26,13 +39,22 @@ var option_custom_styles_default = css`
      * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to "0"
      * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring
      */
-    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);
+    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 2px) / calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 4px);
     border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);
+    color: var(--syn-color-neutral-700);
+    cursor: pointer;
+    display: flex;
+    font-family: var(--syn-font-sans);
     font-size: var(--option-font-size, var(--syn-font-size-medium));
+    font-weight: var(--syn-font-weight-normal);
+    letter-spacing: var(--syn-letter-spacing-normal);
+    line-height: var(--syn-line-height-normal);
 
     /* 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: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
+    position: relative;
+    transition: var(--syn-transition-fast) fill;
   }
 
   .option:not(.option--current) {
@@ -50,9 +72,10 @@ var option_custom_styles_default = css`
     color: var(--syn-option-color-hover);
   }
 
-  /** #429: Use token for opacity */
   .option--disabled {
-    opacity: var(--syn-input-disabled-opacity);
+    cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
+    outline: none;
   }
 
   .option--current.option--disabled {
@@ -61,6 +84,8 @@ var option_custom_styles_default = css`
   }
 
   .option__label {
+    display: inline-block;
+    flex: 1 1 auto;
     line-height: var(--syn-line-height-normal);
   }
 
@@ -70,7 +95,12 @@ var option_custom_styles_default = css`
   }
 
   .option .option__check {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
     padding-inline-end: var(--syn-spacing-small);
+    visibility: hidden;
   }
 
   /* Invert the check mark when keyboard navigation is used */
@@ -78,10 +108,21 @@ var option_custom_styles_default = css`
     color: var(--syn-option-check-color-active);
   }
 
+  .option--selected .option__check {
+    visibility: visible;
+  }
+
   .option--hover:not(.option--current) .option__check {
     color: var(--syn-option-check-color-hover);
   }
 
+  .option__prefix,
+  .option__suffix {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+  }
+
   /* Use larger spacing between icons and content */
   .option__prefix::slotted(*) {
     margin-inline-end: var(--syn-spacing-small);
@@ -114,9 +155,16 @@ var option_custom_styles_default = css`
     color: unset;
     font: var(--syn-body-medium-bold);
   }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .option {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
 `;
 
 export {
-  option_custom_styles_default
+  option_styles_default
 };
-//# sourceMappingURL=chunk.BL5JW7YS.js.map
+//# sourceMappingURL=chunk.CUDIVEVT.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  /**\n   * 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    align-items: center;\n\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 2px) / calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 4px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    color: var(--syn-color-neutral-700);\n    cursor: pointer;\n    display: flex;\n    font-family: var(--syn-font-sans);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n    font-weight: var(--syn-font-weight-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    line-height: var(--syn-line-height-normal);\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    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n    position: relative;\n    transition: var(--syn-transition-fast) fill;\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color);\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active);\n    color: var(--syn-option-color-active);\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option--disabled {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */\n    outline: none;\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option__label {\n    display: inline-block;\n    flex: 1 1 auto;\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    padding-inline-end: var(--syn-spacing-small);\n    visibility: hidden;\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);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover);\n  }\n\n  .option__prefix,\n  .option__suffix {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\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);\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);\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);\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  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.DETKAKHM.js → chunk.CZ2YYDXW.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.WRPQ3635.js";
 import {
   SynIcon
-} from "./chunk.ALSNIU7H.js";
+} from "./chunk.CISXP56D.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.6IHE7NM5.js";
+} from "./chunk.UGETYAWQ.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.DETKAKHM.js.map
+//# sourceMappingURL=chunk.CZ2YYDXW.js.map

package/dist/chunks/{chunk.UGDY32BO.js → chunk.DHFUKRSY.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.JMXGJZSQ.js";
+} from "./chunk.GJ3PJNLA.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.UGDY32BO.js.map
+//# sourceMappingURL=chunk.DHFUKRSY.js.map