@synergy-design-system/components 2.74.2 → 2.74.4

package/dist/chunks/{chunk.TYYJNNQX.js → chunk.OAAB4YO4.js}

@@ -4,28 +4,43 @@ var menu_item_custom_styles_default = css`
   :host {
     /* Custom override for hiding the checkmark in menus it is not needed */
     --display-checkmark: flex;
+
+    /**
+     * Default size settings for menu-item
+     * This prepares the custom sizes that we will add later on
+     * @see https://github.com/synergy-design-system/design/issues/277
+     */
+    --menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);
+    --menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
+    --menuitem-min-height: var(--syn-input-height-medium);
+    --menuitem-padding: var(--syn-input-spacing-medium);
+    --menuitem-font-size: var(--syn-input-font-size-medium);
+    --menuitem-icon-size: var(--syn-spacing-large);
   }
 
   .menu-item {
+    align-items: center;
+
     /*
-     * #958: Brand2025 defines a small gap between menu items
-     * and rounded corners. We achieve that using an outline
+     * #1127: Brand2025 defines a small gap between options
+     * and rounded corners. We achieve that using an border
      * 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);
+    border: solid var(--syn-panel-background-color);
+
+    /* Border Radius needs to be increased to cover the outline */
+    border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));
+    border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);
     color: var(--syn-option-color, var(--syn-typography-color-text));
-    font-size: var(--syn-font-size-medium);
-    outline: var(--outline) solid var(--syn-panel-background-color);
-    outline-offset: calc(var(--outline) * -1 + 1px);
-    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+    font-size: var(--menuitem-font-size);
+
+    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
+    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));
+    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }
 
   :host(:focus-visible) .menu-item {
     background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
-    outline: var(--outline) solid var(--syn-panel-background-color);
-    outline-offset: calc(var(--outline) * -1 + 1px);
   }
 
   /** #429: Use token for opacity */
@@ -146,7 +161,7 @@ var menu_item_custom_styles_default = css`
 
     color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
     font-size: var(--syn-font-size-medium);
-    left: var(--syn-spacing-medium);
+    left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }
 
   /**
@@ -165,9 +180,18 @@ var menu_item_custom_styles_default = css`
   syn-popup::part(popup) {
     border-radius: var(--syn-input-border-radius-medium);
   }
+
+  /**
+   * #1009: Adjust the position for submenus when they are opened to the left, too.
+   * This works because the data-current-placement attribute is set on the popup accordingly.
+   * We do not use the actual placement attribute, because it does not update when the placement changes
+   */
+  syn-popup[data-current-placement^="left"]::part(popup) {
+    margin-left: calc(-1 * var(--submenu-offset));
+  }
 `;
 
 export {
   menu_item_custom_styles_default
 };
-//# sourceMappingURL=chunk.TYYJNNQX.js.map
+//# sourceMappingURL=chunk.OAAB4YO4.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/menu-item.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /* Custom override for hiding the checkmark in menus it is not needed */\n    --display-checkmark: flex;\n\n    /**\n     * Default size settings for menu-item\n     * This prepares the custom sizes that we will add later on\n     * @see https://github.com/synergy-design-system/design/issues/277\n     */\n    --menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);\n    --menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);\n    --menuitem-min-height: var(--syn-input-height-medium);\n    --menuitem-padding: var(--syn-input-spacing-medium);\n    --menuitem-font-size: var(--syn-input-font-size-medium);\n    --menuitem-icon-size: var(--syn-spacing-large);\n  }\n\n  .menu-item {\n    align-items: center;\n\n    /*\n     * #1127: 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    /* Border Radius needs to be increased to cover the outline */\n    border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));\n    border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);\n    color: var(--syn-option-color, var(--syn-typography-color-text));\n    font-size: var(--menuitem-font-size);\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));\n  }\n\n  :host(:focus-visible) .menu-item {\n    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));\n  }\n\n  /** #429: Use token for opacity */\n  .menu-item.menu-item--disabled {\n    opacity: var(--syn-opacity-50);\n  }\n\n  /**\n   * Handling for slotted prefix and suffix\n   */\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /**\n   * Set the default font size to make icons appear correct\n   */\n  .menu-item .menu-item__prefix::slotted(syn-icon),\n  .menu-item .menu-item__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color, var(--syn-typography-color-text));\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  :host(:hover) .menu-item .menu-item__prefix::slotted(syn-icon),\n  :host(:hover) .menu-item__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  :host(:focus-visible) .menu-item .menu-item__prefix::slotted(syn-icon),\n  :host(:focus-visible) .menu-item .menu-item__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active, var(--syn-typography-color-text-inverted));\n  }\n\n  /* Adjust background and text color for focused elements */\n  /* stylelint-disable selector-not-notation, plugin/no-unsupported-browser-features */\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,\n  .menu-item--submenu-expanded {\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  /* stylelint-enable selector-not-notation, plugin/no-unsupported-browser-features */\n\n  /**\n   * Adjust the size of icons\n   */\n  .menu-item .menu-item__chevron,\n  .menu-item .menu-item__check {\n    display: var(--display-checkmark);\n    font-size: var(--syn-font-size-x-large);\n    width: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * This makes sure the chevron does not take any space if we do not have children\n   */\n  .menu-item .menu-item__chevron {\n    display: none;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .menu-item .menu-item__check {\n    color: var(--syn-option-check-color, var(--syn-color-primary-600));\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  /**\n   * When in loading state, do not show the checkmark as it would bleed through\n   */\n  .menu-item--loading .menu-item__check {\n    visibility: hidden;\n  }\n\n  /**\n   * Make sure the checkbox is also visible when the item is active\n   */\n  :host(:focus-visible) .menu-item--checked .menu-item__check {\n    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));\n  }\n\n  :host(:hover) .menu-item--checked .menu-item__check {\n    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));\n  }\n\n  /**\n   * Special handling for the submenu chevron:\n   * We are using the \"chevron-down\" icon per default as\n   * we do not want all chevrons to be part of the bundle\n   * Therefore, we have to transform it into the right direction\n   */\n  .menu-item .menu-item__chevron syn-icon {\n    transform: rotate(-90deg);\n  }\n\n  .menu-item--rtl .menu-item__chevron syn-icon {\n    transform: rotate(90deg);\n  }\n\n  .menu-item.menu-item--loading *:not(syn-spinner) {\n    opacity: var(--syn-opacity-50);\n  }\n\n  /**\n   * Make sure to show the chevron if there are children\n   */\n  .menu-item--has-submenu .menu-item__chevron {\n    display: flex;\n  }\n\n  /**\n   * Adjustments for the spinner in loading state\n   */\n  .menu-item--loading syn-spinner {\n    --track-width: 2px;\n\n    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));\n    font-size: var(--syn-font-size-medium);\n    left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));\n  }\n\n  /**\n   * Highlight checked items\n   */\n  .menu-item--checked .menu-item__label {\n    font-weight: var(--syn-font-weight-semibold);\n  }\n\n  /* Needed if we do not show the checkmark */\n  :host(:not([type=\"checkmark\"]):not([loading])) .menu-item__label {\n    min-height: var(--syn-font-size-x-large);\n  }\n\n  /* #1131: Make sure that slotted menus do show the correct border radius */\n  syn-popup::part(popup) {\n    border-radius: var(--syn-input-border-radius-medium);\n  }\n\n  /**\n   * #1009: Adjust the position for submenus when they are opened to the left, too.\n   * This works because the data-current-placement attribute is set on the popup accordingly.\n   * We do not use the actual placement attribute, because it does not update when the placement changes\n   */\n  syn-popup[data-current-placement^=\"left\"]::part(popup) {\n    margin-left: calc(-1 * var(--submenu-offset));\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;",
+  "names": []
+}

package/dist/chunks/{chunk.T73IPDAA.js → chunk.OET7LHA6.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.RAOPZXJL.js";
 import {
   SynDivider
-} from "./chunk.AUWPYBAC.js";
+} from "./chunk.JXD6UCMG.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -34,4 +34,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.T73IPDAA.js.map
+//# sourceMappingURL=chunk.OET7LHA6.js.map

package/dist/chunks/{chunk.KUWL67WA.js → chunk.OMLDIQQJ.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.ECBXARLW.js";
+} from "./chunk.KCC2VVVO.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SynDialog;
@@ -9,4 +9,4 @@ SynDialog.define("syn-dialog");
 export {
   dialog_default
 };
-//# sourceMappingURL=chunk.KUWL67WA.js.map
+//# sourceMappingURL=chunk.OMLDIQQJ.js.map

package/dist/chunks/{chunk.SXQGBF67.js → chunk.OX2WQUTC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.43YNZAWL.js";
 import {
   SynIconButton
-} from "./chunk.N3HEKV7X.js";
+} from "./chunk.RVCV6RUY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.SXQGBF67.js.map
+//# sourceMappingURL=chunk.OX2WQUTC.js.map

package/dist/chunks/{chunk.GKV2FQPU.js → chunk.PFYF5DIA.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.G76BKD7B.js";
 import {
   SynPopup
-} from "./chunk.W6QBJCY5.js";
+} from "./chunk.ETEGLGBQ.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -385,4 +385,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.GKV2FQPU.js.map
+//# sourceMappingURL=chunk.PFYF5DIA.js.map

package/dist/chunks/{chunk.ZDWBZJQ3.js → chunk.PV7RLGD4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.W6QBJCY5.js";
+} from "./chunk.ETEGLGBQ.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -275,4 +275,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.ZDWBZJQ3.js.map
+//# sourceMappingURL=chunk.PV7RLGD4.js.map

package/dist/chunks/{chunk.AVPA4P56.js → chunk.Q4BF3BVQ.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.I4FB4MYP.js";
+} from "./chunk.I2GVGBNK.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.AVPA4P56.js.map
+//# sourceMappingURL=chunk.Q4BF3BVQ.js.map

package/dist/chunks/{chunk.OFORCGYM.js → chunk.Q6YG3BQL.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.WCD4CU3M.js";
+} from "./chunk.MJZIGGWM.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.OFORCGYM.js.map
+//# sourceMappingURL=chunk.Q6YG3BQL.js.map

package/dist/chunks/{chunk.UUUMNZOZ.js → chunk.QA2YR4UP.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.UUUMNZOZ.js.map
+//# sourceMappingURL=chunk.QA2YR4UP.js.map

package/dist/chunks/{chunk.MVZAPFZG.js → chunk.QHKKPNTL.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumb
-} from "./chunk.RLFAR54Q.js";
+} from "./chunk.KAITRHY6.js";
 
 // src/components/breadcrumb/breadcrumb.ts
 var breadcrumb_default = SynBreadcrumb;
@@ -9,4 +9,4 @@ SynBreadcrumb.define("syn-breadcrumb");
 export {
   breadcrumb_default
 };
-//# sourceMappingURL=chunk.MVZAPFZG.js.map
+//# sourceMappingURL=chunk.QHKKPNTL.js.map

package/dist/chunks/{chunk.7TVT5OVT.js → chunk.QQLKBD4F.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.6WJYXMXT.js";
+} from "./chunk.XH5DFZZW.js";
 
 // src/components/tab-panel/tab-panel.ts
 var tab_panel_default = SynTabPanel;
@@ -9,4 +9,4 @@ SynTabPanel.define("syn-tab-panel");
 export {
   tab_panel_default
 };
-//# sourceMappingURL=chunk.7TVT5OVT.js.map
+//# sourceMappingURL=chunk.QQLKBD4F.js.map

package/dist/chunks/{chunk.PHD24JZN.js → chunk.R7UXESM2.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.7MEEYLHY.js";
+} from "./chunk.Y42TVHH5.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.PHD24JZN.js.map
+//# sourceMappingURL=chunk.R7UXESM2.js.map

package/dist/chunks/{chunk.N3HEKV7X.js → chunk.RVCV6RUY.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.E3Z62YYT.js";
 import {
   SynIcon
-} from "./chunk.CT7EZBDX.js";
+} from "./chunk.WVR5S62X.js";
 import {
   enableDefaultSettings
 } from "./chunk.HYFCK7MM.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -144,4 +144,4 @@ SynIconButton = __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.N3HEKV7X.js.map
+//# sourceMappingURL=chunk.RVCV6RUY.js.map

package/dist/chunks/{chunk.ODACZSP6.js → chunk.S3C7RQT6.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.D6TNS56V.js";
+} from "./chunk.JHS4VIRW.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.ODACZSP6.js.map
+//# sourceMappingURL=chunk.S3C7RQT6.js.map

package/dist/chunks/{chunk.ICOVIME6.js → chunk.S5RYPLSE.js}

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

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

@@ -15,19 +15,24 @@ var option_custom_styles_default = css`
   .option {
     /*
      * #988: Brand2025 defines a small gap between options
-     * and rounded corners. We achieve that using an outline
+     * and rounded corners. We achieve that using an border
      * that simulates the gap using the menu background color.
      */
-    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);
+    border: solid var(--syn-panel-background-color);
 
-    border-radius: calc(var(--outline) * 1.5);
+    /**
+     * Border Radius needs to be increased to cover the outline
+     * Note this also needs to take the following into account:
+     * - 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-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);
     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));
-    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));    
+    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
   }
 
   .option:not(.option--current) {
@@ -114,4 +119,4 @@ var option_custom_styles_default = css`
 export {
   option_custom_styles_default
 };
-//# sourceMappingURL=chunk.R7DJWLTC.js.map
+//# sourceMappingURL=chunk.S74CFZ4Z.js.map

package/dist/chunks/chunk.S74CFZ4Z.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 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) - 1px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\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    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\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;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.OJFHGAU4.js → chunk.SBCPIDQP.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.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.OJFHGAU4.js.map
+//# sourceMappingURL=chunk.SBCPIDQP.js.map

package/dist/chunks/{chunk.2BCXG3FP.js → chunk.SJWHYHPM.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.LO7ZCA7H.js";
+} from "./chunk.CNZPMYMY.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.2BCXG3FP.js.map
+//# sourceMappingURL=chunk.SJWHYHPM.js.map

package/dist/chunks/{chunk.VJLYMUEK.js → chunk.SN45QLA4.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.VMIOAZ2D.js";
+} from "./chunk.3WMZRG2O.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.VJLYMUEK.js.map
+//# sourceMappingURL=chunk.SN45QLA4.js.map

package/dist/chunks/{chunk.6KSLE6JE.js → chunk.TA57H5KF.js}

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

package/dist/chunks/{chunk.NB6VDHFZ.js → chunk.U5HM6HOK.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.CT7EZBDX.js";
+} from "./chunk.WVR5S62X.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.NB6VDHFZ.js.map
+//# sourceMappingURL=chunk.U5HM6HOK.js.map

package/dist/chunks/{chunk.NN5CFX7F.js → chunk.UOVZXEVU.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.UUUMNZOZ.js";
+} from "./chunk.QA2YR4UP.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.NN5CFX7F.js.map
+//# sourceMappingURL=chunk.UOVZXEVU.js.map

package/dist/chunks/{chunk.AOE5N5JV.js → chunk.UULDNEW4.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.ZDWBZJQ3.js";
+} from "./chunk.PV7RLGD4.js";
 import {
   range_styles_default
 } from "./chunk.BXXVSZMC.js";
@@ -35,7 +35,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -716,4 +716,4 @@ SynRange = __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.AOE5N5JV.js.map
+//# sourceMappingURL=chunk.UULDNEW4.js.map

package/dist/chunks/{chunk.GQTMIXNT.js → chunk.UW54JYTX.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.GQTMIXNT.js.map
+//# sourceMappingURL=chunk.UW54JYTX.js.map

package/dist/chunks/{chunk.YOGYNL53.js → chunk.VFOSKTS3.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.AUWPYBAC.js";
+} from "./chunk.JXD6UCMG.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.YOGYNL53.js.map
+//# sourceMappingURL=chunk.VFOSKTS3.js.map

package/dist/chunks/{chunk.ZRTEKDFA.js → chunk.W45HCBL4.js}

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

package/dist/chunks/{chunk.JSFZBWTA.js → chunk.WMX4RXGQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.JSFZBWTA.js.map
+//# sourceMappingURL=chunk.WMX4RXGQ.js.map

package/dist/chunks/{chunk.IUJ7GPA4.js → chunk.WNT4V4ZX.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk.74N5WLM5.js";
 import {
   SynNavItem
-} from "./chunk.I4FB4MYP.js";
+} from "./chunk.I2GVGBNK.js";
 import {
   SynMenu
-} from "./chunk.AHYFT5TE.js";
+} from "./chunk.ZDP2SBPC.js";
 import {
   SynDropdown
-} from "./chunk.GKV2FQPU.js";
+} from "./chunk.PFYF5DIA.js";
 import {
   SynIcon
-} from "./chunk.CT7EZBDX.js";
+} from "./chunk.WVR5S62X.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.Y725WOMN.js";
+} from "./chunk.FOSWTCLV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.IUJ7GPA4.js.map
+//# sourceMappingURL=chunk.WNT4V4ZX.js.map

package/dist/chunks/{chunk.JLHAJPKQ.js → chunk.WQAA4T7E.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.IUJ7GPA4.js";
+} from "./chunk.WNT4V4ZX.js";
 
 // src/components/prio-nav/prio-nav.ts
 var prio_nav_default = SynPrioNav;
@@ -9,4 +9,4 @@ SynPrioNav.define("syn-prio-nav");
 export {
   prio_nav_default
 };
-//# sourceMappingURL=chunk.JLHAJPKQ.js.map
+//# sourceMappingURL=chunk.WQAA4T7E.js.map