@synergy-design-system/components 2.74.1 → 2.74.3

package/dist/chunks/{chunk.W5HIE2DW.js → chunk.EMDEMBGU.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.EBWQTRRI.js";
+} from "./chunk.PUHGMEFB.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.W5HIE2DW.js.map
+//# sourceMappingURL=chunk.EMDEMBGU.js.map

package/dist/chunks/{chunk.NCHBG2AH.js → chunk.EN34MWPO.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.F4Q7QJ2H.js";
+} from "./chunk.HSRVNDYY.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.NCHBG2AH.js.map
+//# sourceMappingURL=chunk.EN34MWPO.js.map

package/dist/chunks/{chunk.VFYX3MLZ.js → chunk.FAA3R4OT.js}

@@ -1,3 +1,9 @@
+import {
+  badge_custom_styles_default
+} from "./chunk.CCEFC33U.js";
+import {
+  badge_styles_default
+} from "./chunk.Y5TMYX2L.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -9,13 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
-import {
-  badge_custom_styles_default
-} from "./chunk.CCEFC33U.js";
-import {
-  badge_styles_default
-} from "./chunk.Y5TMYX2L.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.VFYX3MLZ.js.map
+//# sourceMappingURL=chunk.FAA3R4OT.js.map

package/dist/chunks/{chunk.ASTOBZLW.js → chunk.FJWNYN2A.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk.74N5WLM5.js";
 import {
   SynNavItem
-} from "./chunk.OL27A5AB.js";
+} from "./chunk.BEKZFUN3.js";
 import {
   SynMenu
-} from "./chunk.ZXTLQK2A.js";
+} from "./chunk.QTB2ZBWC.js";
 import {
   SynDropdown
-} from "./chunk.2VG4OZMP.js";
+} from "./chunk.GVQD4X3Z.js";
 import {
   SynIcon
-} from "./chunk.UFWMHXX3.js";
+} from "./chunk.TOTIIH7U.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.ASTOBZLW.js.map
+//# sourceMappingURL=chunk.FJWNYN2A.js.map

package/dist/chunks/{chunk.GTQVARLT.js → chunk.GEVJTVIQ.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.23UHYTVZ.js";
+} from "./chunk.X72QE5BC.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -31,18 +31,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -292,4 +292,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.GTQVARLT.js.map
+//# sourceMappingURL=chunk.GEVJTVIQ.js.map

package/dist/chunks/{chunk.2VG4OZMP.js → chunk.GVQD4X3Z.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.G76BKD7B.js";
 import {
   SynPopup
-} from "./chunk.EGQVXHZN.js";
+} from "./chunk.B7X66MC5.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -22,18 +22,18 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.7JGKUB4A.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -385,4 +385,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.2VG4OZMP.js.map
+//# sourceMappingURL=chunk.GVQD4X3Z.js.map

package/dist/chunks/{chunk.XUVO6D62.js → chunk.GYD4OFXA.js}

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

package/dist/chunks/{chunk.OJ3CKV3L.js → chunk.HEJZSUQA.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.OL27A5AB.js";
+} from "./chunk.BEKZFUN3.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.OJ3CKV3L.js.map
+//# sourceMappingURL=chunk.HEJZSUQA.js.map

package/dist/chunks/{chunk.C2WNYVCX.js → chunk.HM4QXG7D.js}

@@ -19,19 +19,19 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.UFWMHXX3.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
+} from "./chunk.TOTIIH7U.js";
 import {
   enableDefaultSettings
 } from "./chunk.HYFCK7MM.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -267,4 +267,4 @@ SynCheckbox = __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.C2WNYVCX.js.map
+//# sourceMappingURL=chunk.HM4QXG7D.js.map

package/dist/chunks/{chunk.2CHFE6YR.js → chunk.HPD2QDBH.js}

@@ -6,25 +6,25 @@ import {
 } from "./chunk.PKYC7QF3.js";
 import {
   SynResizeObserver
-} from "./chunk.7MKNPJWH.js";
+} from "./chunk.S446HPMA.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
 import {
   SynIconButton
-} from "./chunk.23UHYTVZ.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
+} from "./chunk.X72QE5BC.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass,
   __spreadValues
@@ -516,4 +516,4 @@ __decorateClass([
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.2CHFE6YR.js.map
+//# sourceMappingURL=chunk.HPD2QDBH.js.map

package/dist/chunks/{chunk.F4Q7QJ2H.js → chunk.HSRVNDYY.js}

@@ -17,18 +17,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   enableDefaultSettings
 } from "./chunk.HYFCK7MM.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -383,4 +383,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.F4Q7QJ2H.js.map
+//# sourceMappingURL=chunk.HSRVNDYY.js.map

package/dist/chunks/{chunk.ZRJQZ7AA.js → chunk.HYGG3QCF.js}

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

package/dist/chunks/{chunk.3CS4Y6SD.js → chunk.ICCDTTUU.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.UFWMHXX3.js";
+} from "./chunk.TOTIIH7U.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.3CS4Y6SD.js.map
+//# sourceMappingURL=chunk.ICCDTTUU.js.map

package/dist/chunks/{chunk.IH4DMLOB.js → chunk.IRJ5PBNY.js}

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

package/dist/chunks/{chunk.W6RGFC5V.js → chunk.JFWUJ5J2.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.OIPB4JNU.js";
+} from "./chunk.RM35KF3L.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.W6RGFC5V.js.map
+//# sourceMappingURL=chunk.JFWUJ5J2.js.map

package/dist/chunks/{chunk.QTBECE3Q.js → chunk.JI2LCPHP.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.F5RIEPDV.js";
+} from "./chunk.KJ5HFVFI.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.QTBECE3Q.js.map
+//# sourceMappingURL=chunk.JI2LCPHP.js.map

package/dist/chunks/{chunk.B4BZQ7AA.js → chunk.JIIWV3RO.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.7NSZTEQQ.js";
+} from "./chunk.62LGIN6Y.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.B4BZQ7AA.js.map
+//# sourceMappingURL=chunk.JIIWV3RO.js.map

package/dist/chunks/{chunk.YYYL5AK2.js → chunk.JKZKZIED.js}

@@ -1,6 +1,6 @@
 import {
   SynValidate
-} from "./chunk.FV32DE62.js";
+} from "./chunk.AZPMQVOW.js";
 
 // src/components/validate/validate.ts
 var validate_default = SynValidate;
@@ -9,4 +9,4 @@ SynValidate.define("syn-validate");
 export {
   validate_default
 };
-//# sourceMappingURL=chunk.YYYL5AK2.js.map
+//# sourceMappingURL=chunk.JKZKZIED.js.map

package/dist/chunks/{chunk.MGWZVSDA.js → chunk.JX2DW2EO.js}

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

package/dist/chunks/{chunk.UYJSU27F.js → chunk.K2LLJIBB.js}

@@ -1,12 +1,12 @@
-import {
-  SynIcon
-} from "./chunk.UFWMHXX3.js";
 import {
   breadcrumb_custom_styles_default
 } from "./chunk.32CYREEV.js";
 import {
   breadcrumb_styles_default
 } from "./chunk.S22BO5SF.js";
+import {
+  SynIcon
+} from "./chunk.TOTIIH7U.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.UYJSU27F.js.map
+//# sourceMappingURL=chunk.K2LLJIBB.js.map

package/dist/chunks/{chunk.F5RIEPDV.js → chunk.KJ5HFVFI.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.F5RIEPDV.js.map
+//# sourceMappingURL=chunk.KJ5HFVFI.js.map

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

@@ -165,9 +165,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.KJD7JSLN.js.map

package/dist/chunks/{chunk.TYYJNNQX.js.map → chunk.KJD7JSLN.js.map}

@@ -1,7 +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  .menu-item {\n    /*\n     * #958: Brand2025 defines a small gap between menu items\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    color: var(--syn-option-color, var(--syn-typography-color-text));\n    font-size: var(--syn-font-size-medium);\n    outline: var(--outline) solid var(--syn-panel-background-color);\n    outline-offset: calc(var(--outline) * -1 + 1px);\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium);\n  }\n\n  :host(:focus-visible) .menu-item {\n    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));\n    outline: var(--outline) solid var(--syn-panel-background-color);\n    outline-offset: calc(var(--outline) * -1 + 1px);\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: var(--syn-spacing-medium);\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"],
-  "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;",
+  "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  .menu-item {\n    /*\n     * #958: Brand2025 defines a small gap between menu items\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    color: var(--syn-option-color, var(--syn-typography-color-text));\n    font-size: var(--syn-font-size-medium);\n    outline: var(--outline) solid var(--syn-panel-background-color);\n    outline-offset: calc(var(--outline) * -1 + 1px);\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium);\n  }\n\n  :host(:focus-visible) .menu-item {\n    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));\n    outline: var(--outline) solid var(--syn-panel-background-color);\n    outline-offset: calc(var(--outline) * -1 + 1px);\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: var(--syn-spacing-medium);\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;",
   "names": []
 }

package/dist/chunks/{chunk.WOICKHLW.js → chunk.KPQYUOUV.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.KVPUKDL2.js";
+} from "./chunk.L3HYHAOI.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.WOICKHLW.js.map
+//# sourceMappingURL=chunk.KPQYUOUV.js.map

package/dist/chunks/{chunk.KVPUKDL2.js → chunk.L3HYHAOI.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.FA2IOVVT.js";
+} from "./chunk.DV27L2WV.js";
 import {
   range_styles_default
 } from "./chunk.BXXVSZMC.js";
@@ -35,7 +35,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -716,4 +716,4 @@ SynRange = __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.KVPUKDL2.js.map
+//# sourceMappingURL=chunk.L3HYHAOI.js.map

package/dist/chunks/{chunk.CUX2KT6G.js → chunk.L6K5CQ4T.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.CUX2KT6G.js.map
+//# sourceMappingURL=chunk.L6K5CQ4T.js.map

package/dist/chunks/{chunk.TRR3237I.js → chunk.LB23NYLC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -89,4 +89,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.TRR3237I.js.map
+//# sourceMappingURL=chunk.LB23NYLC.js.map

package/dist/chunks/{chunk.44MYYRMX.js → chunk.MSX3OKAU.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.DU3PYL27.js";
+} from "./chunk.SEJDQ2P6.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.44MYYRMX.js.map
+//# sourceMappingURL=chunk.MSX3OKAU.js.map

package/dist/chunks/{chunk.2RSFWRV3.js → chunk.NQXJKPJY.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.CEQKJHVR.js";
+} from "./chunk.3CQ4HBPW.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.2RSFWRV3.js.map
+//# sourceMappingURL=chunk.NQXJKPJY.js.map

package/dist/chunks/{chunk.FMWLGI55.js → chunk.NSD4MJKE.js}

@@ -6,19 +6,19 @@ import {
 } from "./chunk.43YNZAWL.js";
 import {
   SynIconButton
-} from "./chunk.23UHYTVZ.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
+} from "./chunk.X72QE5BC.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.TPVPME5H.js";
+} from "./chunk.7DWGONGW.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.FMWLGI55.js.map
+//# sourceMappingURL=chunk.NSD4MJKE.js.map