@synergy-design-system/components 2.14.4 → 2.15.0

package/dist/chunks/{chunk.U4ZYDVZJ.js → chunk.JJ7D73E7.js}

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

package/dist/chunks/{chunk.5APLEMQN.js → chunk.JKNY5XWP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.IFW77IB7.js";
 import {
   SynDivider
-} from "./chunk.UWYZBI2G.js";
+} from "./chunk.5JF5AJ3G.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.74IOULXM.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.5APLEMQN.js.map
+//# sourceMappingURL=chunk.JKNY5XWP.js.map

package/dist/chunks/{chunk.MLCOWC6S.js → chunk.JYKBB4MA.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.5APLEMQN.js";
+} from "./chunk.JKNY5XWP.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.MLCOWC6S.js.map
+//# sourceMappingURL=chunk.JYKBB4MA.js.map

package/dist/chunks/{chunk.YT722J2Q.js → chunk.K2QY3FGE.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.BKKAEDNO.js";
+} from "./chunk.MN7WOOJV.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -19,18 +19,18 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.HQ6QUSK7.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -275,4 +275,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.YT722J2Q.js.map
+//# sourceMappingURL=chunk.K2QY3FGE.js.map

package/dist/chunks/{chunk.EZJD2GUY.js → chunk.K5WTIEZV.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   SynButton
-} from "./chunk.BS63LJFI.js";
+} from "./chunk.TD3P6CWD.js";
 import {
   FormControlController
 } from "./chunk.AMIQC3O7.js";
@@ -26,19 +26,19 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.KKIDHUOP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.BWDC4HUA.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -528,4 +528,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.EZJD2GUY.js.map
+//# sourceMappingURL=chunk.K5WTIEZV.js.map

package/dist/chunks/{chunk.2U2GQVFO.js → chunk.KF27CNFO.js}

@@ -1,6 +1,6 @@
 import {
   menu_custom_styles_default
-} from "./chunk.PILX7LVU.js";
+} from "./chunk.AVZITCPQ.js";
 import {
   menu_styles_default
 } from "./chunk.C2CWYCOU.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -17,10 +17,27 @@ import {
 // src/components/menu/menu.component.ts
 import { html } from "lit";
 import { query } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 var SynMenu = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.hasMenuItemsWithCheckmarks = false;
+    this.updateCheckMarksByChildPropChange = (e) => {
+      e.stopImmediatePropagation();
+      this.handleUpdateCheckmarks(this.getAllItems());
+    };
+  }
+  handleUpdateCheckmarks(items) {
+    this.hasMenuItemsWithCheckmarks = items.some((item) => item.type === "checkbox" || item.loading);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("syn-attributes-changed", this.updateCheckMarksByChildPropChange);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "menu");
+    this.addEventListener("syn-attributes-changed", this.updateCheckMarksByChildPropChange);
   }
   handleClick(event) {
     const menuItemTypes = ["menuitem", "menuitemcheckbox"];
@@ -83,6 +100,7 @@ var SynMenu = class extends SynergyElement {
   }
   handleSlotChange() {
     const items = this.getAllItems();
+    this.handleUpdateCheckmarks(items);
     if (items.length > 0) {
       this.setCurrentItem(items[0]);
     }
@@ -120,6 +138,9 @@ var SynMenu = class extends SynergyElement {
   render() {
     return html`
       <slot
+        class=${classMap({
+      "menu--no-checkmarks": !this.hasMenuItemsWithCheckmarks
+    })}
         @slotchange=${this.handleSlotChange}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
@@ -132,8 +153,11 @@ SynMenu.styles = [component_styles_default, menu_styles_default, menu_custom_sty
 __decorateClass([
   query("slot")
 ], SynMenu.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], SynMenu.prototype, "hasMenuItemsWithCheckmarks", 2);
 
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.2U2GQVFO.js.map
+//# sourceMappingURL=chunk.KF27CNFO.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu/menu.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport { state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { SynAttributesChangedEvent } from '../../events/syn-attributes-changed.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './menu.styles.js';\nimport customStyles from './menu.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynMenuItem from '../menu-item/menu-item.component.js';\n\nexport interface MenuSelectEventDetail {\n  item: SynMenuItem;\n}\n\n/**\n * @summary Menus provide a list of options for the user to choose from.\n * @documentation https://synergy.style/components/menu\n * @status stable\n * @since 2.0\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.\n */\nexport default class SynMenu extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @state() hasMenuItemsWithCheckmarks = false;\n\n  private handleUpdateCheckmarks(items: SynMenuItem[]) {\n    // #368: Treat a menu as having checkmarks if it has any checkboxes or items with loading states\n    // The loading indicator has to be checked as well, as it's specially placed over the check mark\n    this.hasMenuItemsWithCheckmarks = items.some(item => item.type === 'checkbox' || item.loading);  \n  }\n\n  private updateCheckMarksByChildPropChange = (e: SynAttributesChangedEvent) => {\n    e.stopImmediatePropagation();\n    this.handleUpdateCheckmarks(this.getAllItems());\n  };\n  \n  disconnectedCallback() {\n    this.removeEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n    this.addEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu');\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) return;\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as SynMenuItem;\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('syn-select', { detail: { item } });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as SynMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n    this.handleUpdateCheckmarks(items);\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'syn-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n      if (el.inert || !this.isMenuItem(el)) {\n        return false;\n      }\n      return true;\n    }) as SynMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: SynMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          'menu--no-checkmarks': !this.hasMenuItemsWithCheckmarks,\n        })}\n        @slotchange=${this.handleSlotChange}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleMouseDown}\n      ></slot>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.4FTVKKHK.js → chunk.KFKVKTLT.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.27OXOWH6.js";
+} from "./chunk.RWSNSLKJ.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.4FTVKKHK.js.map
+//# sourceMappingURL=chunk.KFKVKTLT.js.map

package/dist/chunks/{chunk.SVNA5JSU.js → chunk.KR7WAWSQ.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.LPRWR5XH.js";
+} from "./chunk.3H62SEV3.js";
 import {
   select_custom_styles_default
 } from "./chunk.KL5VXGK4.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.XTWO6ZZW.js";
 import {
   SynPopup
-} from "./chunk.BKKAEDNO.js";
+} from "./chunk.MN7WOOJV.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
@@ -36,19 +36,19 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.KKIDHUOP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.BWDC4HUA.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -804,4 +804,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.SVNA5JSU.js.map
+//# sourceMappingURL=chunk.KR7WAWSQ.js.map

package/dist/chunks/{chunk.FJ6R3VJZ.js → chunk.L7ZX5SBO.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.LPRWR5XH.js";
+} from "./chunk.3H62SEV3.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.FJ6R3VJZ.js.map
+//# sourceMappingURL=chunk.L7ZX5SBO.js.map

package/dist/chunks/{chunk.IQFXQYVK.js → chunk.LDV73CDS.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.7HCKODF3.js";
+} from "./chunk.DXJC357J.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.IQFXQYVK.js.map
+//# sourceMappingURL=chunk.LDV73CDS.js.map

package/dist/chunks/{chunk.ZSLMRR2F.js → chunk.LPORVGSO.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.I6IT6CZR.js";
+} from "./chunk.DFVWZ5PE.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -16,23 +16,23 @@ import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
-  alert_custom_styles_default
-} from "./chunk.JRYXECAY.js";
-import {
-  alert_styles_default
-} from "./chunk.IFXKIEOU.js";
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
+import {
+  alert_custom_styles_default
+} from "./chunk.JRYXECAY.js";
+import {
+  alert_styles_default
+} from "./chunk.IFXKIEOU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -271,4 +271,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.ZSLMRR2F.js.map
+//# sourceMappingURL=chunk.LPORVGSO.js.map

package/dist/chunks/{chunk.BKKAEDNO.js → chunk.MN7WOOJV.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -415,4 +415,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.BKKAEDNO.js.map
+//# sourceMappingURL=chunk.MN7WOOJV.js.map

package/dist/chunks/{chunk.G2ZSWWS6.js → chunk.MSCKNZTQ.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.Q27Z7MPU.js";
+} from "./chunk.Z2RURM2Z.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.G2ZSWWS6.js.map
+//# sourceMappingURL=chunk.MSCKNZTQ.js.map

package/dist/chunks/{chunk.QF2K5FUK.js → chunk.NAC4ZFLA.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.2U2GQVFO.js";
+} from "./chunk.KF27CNFO.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.QF2K5FUK.js.map
+//# sourceMappingURL=chunk.NAC4ZFLA.js.map

package/dist/chunks/{chunk.YFQBPHQQ.js → chunk.NTKHZN2V.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -89,4 +89,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.YFQBPHQQ.js.map
+//# sourceMappingURL=chunk.NTKHZN2V.js.map

package/dist/chunks/{chunk.BPEZP3WP.js → chunk.O3KNRGUR.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.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.BPEZP3WP.js.map
+//# sourceMappingURL=chunk.O3KNRGUR.js.map

package/dist/chunks/{chunk.5JK5C3NG.js → chunk.PSPBOUM5.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.5JK5C3NG.js.map
+//# sourceMappingURL=chunk.PSPBOUM5.js.map

package/dist/chunks/{chunk.Q5FWXJ5C.js → chunk.QHTYGI3G.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.YBVB2YSB.js";
+} from "./chunk.4LP3ABOA.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = SynProgressRing;
@@ -9,4 +9,4 @@ SynProgressRing.define("syn-progress-ring");
 export {
   progress_ring_default
 };
-//# sourceMappingURL=chunk.Q5FWXJ5C.js.map
+//# sourceMappingURL=chunk.QHTYGI3G.js.map

package/dist/chunks/{chunk.XGAH6W2F.js → chunk.QNM5254K.js}

@@ -18,19 +18,19 @@ import {
 } from "./chunk.HQ6QUSK7.js";
 import {
   SynIcon
-} from "./chunk.KKIDHUOP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.BWDC4HUA.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -241,4 +241,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.XGAH6W2F.js.map
+//# sourceMappingURL=chunk.QNM5254K.js.map

package/dist/chunks/{chunk.E7AZZSVA.js → chunk.R24T7WQN.js}

@@ -1,6 +1,11 @@
 // src/components/menu-item/menu-item.custom.styles.ts
 import { css } from "lit";
 var menu_item_custom_styles_default = css`
+  :host {
+    /* Custom override for hiding the checkmark in menus it is not needed */
+    --display-checkmark: flex;
+  }
+
   .menu-item {
     color: var(--syn-typography-color-text);
     font-size: var(--syn-font-size-medium);
@@ -37,6 +42,7 @@ var menu_item_custom_styles_default = css`
    */
   .menu-item .menu-item__chevron,
   .menu-item .menu-item__check {
+    display: var(--display-checkmark);
     font-size: var(--syn-font-size-x-large);
     width: var(--syn-font-size-x-large);
   }
@@ -109,9 +115,14 @@ var menu_item_custom_styles_default = css`
   .menu-item--checked .menu-item__label {
     font-weight: var(--syn-font-weight-semibold);
   }
+
+  /* Needed if we do not show the checkmark */
+  :host(:not([type="checkmark"]):not([loading])) .menu-item__label {
+    min-height: var(--syn-font-size-x-large);
+  }
 `;
 
 export {
   menu_item_custom_styles_default
 };
-//# sourceMappingURL=chunk.E7AZZSVA.js.map
+//# sourceMappingURL=chunk.R24T7WQN.js.map

package/dist/chunks/chunk.R24T7WQN.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  .menu-item {\n    color: var(--syn-typography-color-text);\n    font-size: var(--syn-font-size-medium);\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium);\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-color-neutral-800);\n    font-size: var(--syn-font-size-x-large);\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-color-neutral-0);\n  }\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-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-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  /**\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    --indicator-color: currentColor;\n    --track-width: 2px;\n\n    font-size: var(--syn-font-size-medium);\n    left: var(--syn-spacing-medium);\n    opacity: 1;\n    position: absolute;\n    top: calc(50% - 0.5em);\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"],
+  "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;",
+  "names": []
+}

package/dist/chunks/{chunk.27OXOWH6.js → chunk.RWSNSLKJ.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.YT722J2Q.js";
+} from "./chunk.K2QY3FGE.js";
 import {
   range_styles_default
 } from "./chunk.277APOW3.js";
@@ -32,7 +32,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -635,4 +635,4 @@ __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.27OXOWH6.js.map
+//# sourceMappingURL=chunk.RWSNSLKJ.js.map

package/dist/chunks/{chunk.WNPX6FIX.js → chunk.RZBALBTK.js}

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

package/dist/chunks/{chunk.ZRUVYNCI.js → chunk.S5CYMFHY.js}

@@ -3,13 +3,13 @@ import {
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.CJNT4TRJ.js";
+} from "./chunk.VIWVKO6H.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynAlert
-} from "./chunk.ZSLMRR2F.js";
+} from "./chunk.LPORVGSO.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -286,4 +286,4 @@ __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.ZRUVYNCI.js.map
+//# sourceMappingURL=chunk.S5CYMFHY.js.map

package/dist/chunks/{chunk.BQLRPCAA.js → chunk.SA775ZEU.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.RAOPZXJL.js";
 import {
   SynDivider
-} from "./chunk.UWYZBI2G.js";
+} from "./chunk.5JF5AJ3G.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LB6HDIPZ.js";
+} from "./chunk.7ULPDKAV.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -34,4 +34,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.BQLRPCAA.js.map
+//# sourceMappingURL=chunk.SA775ZEU.js.map