@synergy-design-system/components 2.6.0 → 2.7.1

package/dist/chunks/{chunk.LQCQI2F4.js → chunk.JGAVJWAD.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.PPKWM5KJ.js";
+} from "./chunk.675UQUVN.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.LQCQI2F4.js.map
+//# sourceMappingURL=chunk.JGAVJWAD.js.map

package/dist/chunks/{chunk.3SWRT4AL.js → chunk.JMXGX6SJ.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.4SSPQ66Z.js";
+} from "./chunk.57BEXIUH.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.3SWRT4AL.js.map
+//# sourceMappingURL=chunk.JMXGX6SJ.js.map

package/dist/chunks/{chunk.U2OMGNNZ.js → chunk.JNP34M27.js}

@@ -2,7 +2,7 @@
 import { createRef, ref } from "lit/directives/ref.js";
 import { html } from "lit";
 var SubmenuController = class {
-  constructor(host, hasSlotController, localize) {
+  constructor(host, hasSlotController) {
     this.popupRef = createRef();
     this.enableSubmenuTimer = -1;
     this.isConnected = false;
@@ -67,7 +67,7 @@ var SubmenuController = class {
     this.handlePopupReposition = () => {
       const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
       const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "syn-menu")[0];
-      const isRtl = this.localize.dir() === "rtl";
+      const isRtl = this.host.matches(":dir(rtl)");
       if (!menu) {
         return;
       }
@@ -79,7 +79,6 @@ var SubmenuController = class {
     };
     (this.host = host).addController(this);
     this.hasSlotController = hasSlotController;
-    this.localize = localize;
   }
   hostConnected() {
     if (this.hasSlotController.test("submenu") && !this.host.disabled) {
@@ -214,19 +213,21 @@ var SubmenuController = class {
     return this.popupRef.value ? this.popupRef.value.active : false;
   }
   renderSubmenu() {
-    const isLtr = this.localize.dir() === "ltr";
+    const isRtl = this.host.matches(":dir(rtl)");
     if (!this.isConnected) {
       return html` <slot name="submenu" hidden></slot> `;
     }
     return html`
       <syn-popup
         ${ref(this.popupRef)}
-        placement=${isLtr ? "right-start" : "left-start"}
+        placement=${isRtl ? "left-start" : "right-start"}
         anchor="anchor"
         flip
         flip-fallback-strategy="best-fit"
         skidding="${this.skidding}"
         strategy="fixed"
+        auto-size="vertical"
+        auto-size-padding="10"
       >
         <slot name="submenu"></slot>
       </syn-popup>
@@ -237,4 +238,4 @@ var SubmenuController = class {
 export {
   SubmenuController
 };
-//# sourceMappingURL=chunk.U2OMGNNZ.js.map
+//# sourceMappingURL=chunk.JNP34M27.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/submenu-controller.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 { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { type HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type SynMenuItem from './menu-item.js';\nimport type SynPopup from '../popup/popup.js';\n\n/** A reactive controller to manage the registration of event listeners for submenus. */\nexport class SubmenuController implements ReactiveController {\n  private host: ReactiveControllerHost & SynMenuItem;\n  private popupRef: Ref<SynPopup> = createRef();\n  private enableSubmenuTimer = -1;\n  private isConnected = false;\n  private isPopupConnected = false;\n  private skidding = 0;\n  private readonly hasSlotController: HasSlotController;\n  private readonly submenuOpenDelay = 100;\n\n  constructor(host: ReactiveControllerHost & SynMenuItem, hasSlotController: HasSlotController) {\n    (this.host = host).addController(this);\n    this.hasSlotController = hasSlotController;\n  }\n\n  hostConnected() {\n    if (this.hasSlotController.test('submenu') && !this.host.disabled) {\n      this.addListeners();\n    }\n  }\n\n  hostDisconnected() {\n    this.removeListeners();\n  }\n\n  hostUpdated() {\n    if (this.hasSlotController.test('submenu') && !this.host.disabled) {\n      this.addListeners();\n      this.updateSkidding();\n    } else {\n      this.removeListeners();\n    }\n  }\n\n  private addListeners() {\n    if (!this.isConnected) {\n      this.host.addEventListener('mousemove', this.handleMouseMove);\n      this.host.addEventListener('mouseover', this.handleMouseOver);\n      this.host.addEventListener('keydown', this.handleKeyDown);\n      this.host.addEventListener('click', this.handleClick);\n      this.host.addEventListener('focusout', this.handleFocusOut);\n      this.isConnected = true;\n    }\n\n    // The popup does not seem to get wired when the host is\n    // connected, so manage its listeners separately.\n    if (!this.isPopupConnected) {\n      if (this.popupRef.value) {\n        this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);\n        this.popupRef.value.addEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = true;\n      }\n    }\n  }\n\n  private removeListeners() {\n    if (this.isConnected) {\n      this.host.removeEventListener('mousemove', this.handleMouseMove);\n      this.host.removeEventListener('mouseover', this.handleMouseOver);\n      this.host.removeEventListener('keydown', this.handleKeyDown);\n      this.host.removeEventListener('click', this.handleClick);\n      this.host.removeEventListener('focusout', this.handleFocusOut);\n      this.isConnected = false;\n    }\n    if (this.isPopupConnected) {\n      if (this.popupRef.value) {\n        this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);\n        this.popupRef.value.removeEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = false;\n      }\n    }\n  }\n\n  // Set the safe triangle cursor position\n  private handleMouseMove = (event: MouseEvent) => {\n    this.host.style.setProperty('--safe-triangle-cursor-x', `${event.clientX}px`);\n    this.host.style.setProperty('--safe-triangle-cursor-y', `${event.clientY}px`);\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasSlotController.test('submenu')) {\n      this.enableSubmenu();\n    }\n  };\n\n  private handleSubmenuEntry(event: KeyboardEvent) {\n    // Pass focus to the first menu-item in the submenu.\n    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector(\"slot[name='submenu']\");\n\n    // Missing slot\n    if (!submenuSlot) {\n      console.error('Cannot activate a submenu if no corresponding menuitem can be found.', this);\n      return;\n    }\n\n    // Menus\n    let menuItems: NodeListOf<Element> | null = null;\n    for (const elt of submenuSlot.assignedElements()) {\n      menuItems = elt.querySelectorAll(\"syn-menu-item, [role^='menuitem']\");\n      if (menuItems.length !== 0) {\n        break;\n      }\n    }\n\n    if (!menuItems || menuItems.length === 0) {\n      return;\n    }\n\n    menuItems[0].setAttribute('tabindex', '0');\n    for (let i = 1; i !== menuItems.length; ++i) {\n      menuItems[i].setAttribute('tabindex', '-1');\n    }\n\n    // Open the submenu (if not open), and set focus to first menuitem.\n    if (this.popupRef.value) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (this.popupRef.value.active) {\n        if (menuItems[0] instanceof HTMLElement) {\n          menuItems[0].focus();\n        }\n      } else {\n        this.enableSubmenu(false);\n        this.host.updateComplete.then(() => {\n          if (menuItems![0] instanceof HTMLElement) {\n            menuItems![0].focus();\n          }\n        });\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  // Focus on the first menu-item of a submenu.\n  private handleKeyDown = (event: KeyboardEvent) => {\n    switch (event.key) {\n      case 'Escape':\n      case 'Tab':\n        this.disableSubmenu();\n        break;\n      case 'ArrowLeft':\n        // Either focus is currently on the host element or a child\n        if (event.target !== this.host) {\n          event.preventDefault();\n          event.stopPropagation();\n          this.host.focus();\n          this.disableSubmenu();\n        }\n        break;\n      case 'ArrowRight':\n      case 'Enter':\n      case ' ':\n        this.handleSubmenuEntry(event);\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    // Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate\n    if (event.target === this.host) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (\n      event.target instanceof Element &&\n      (event.target.tagName === 'syn-menu-item' || event.target.role?.startsWith('menuitem'))\n    ) {\n      this.disableSubmenu();\n    }\n  };\n\n  // Close this submenu on focus outside of the parent or any descendants.\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {\n      return;\n    }\n    this.disableSubmenu();\n  };\n\n  // Prevent the parent menu-item from getting focus on mouse movement on the submenu\n  private handlePopupMouseover = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  // Set the safe triangle values for the submenu when the position changes\n  private handlePopupReposition = () => {\n    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector(\"slot[name='submenu']\");\n    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'syn-menu')[0];\n    const isRtl = this.host.matches(':dir(rtl)');\n    if (!menu) {\n      return;\n    }\n\n    const { left, top, width, height } = menu.getBoundingClientRect();\n\n    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);\n  };\n\n  private setSubmenuState(state: boolean) {\n    if (this.popupRef.value) {\n      if (this.popupRef.value.active !== state) {\n        this.popupRef.value.active = state;\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the\n  // newly opened menu.\n  private enableSubmenu(delay = true) {\n    if (delay) {\n      window.clearTimeout(this.enableSubmenuTimer);\n      this.enableSubmenuTimer = window.setTimeout(() => {\n        this.setSubmenuState(true);\n      }, this.submenuOpenDelay);\n    } else {\n      this.setSubmenuState(true);\n    }\n  }\n\n  private disableSubmenu() {\n    window.clearTimeout(this.enableSubmenuTimer);\n    this.setSubmenuState(false);\n  }\n\n  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.\n  private updateSkidding(): void {\n    // .computedStyleMap() not always available.\n    if (!this.host.parentElement?.computedStyleMap) {\n      return;\n    }\n    const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();\n    const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];\n\n    const skidding = attrs.reduce((accumulator, attr) => {\n      const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');\n      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');\n      const pxValue = unitValue.to('px');\n      return accumulator - pxValue.value;\n    }, 0);\n\n    this.skidding = skidding;\n  }\n\n  isExpanded(): boolean {\n    return this.popupRef.value ? this.popupRef.value.active : false;\n  }\n\n  renderSubmenu() {\n    const isRtl = this.host.matches(':dir(rtl)');\n\n    // Always render the slot, but conditionally render the outer <syn-popup>\n    if (!this.isConnected) {\n      return html` <slot name=\"submenu\" hidden></slot> `;\n    }\n\n    return html`\n      <syn-popup\n        ${ref(this.popupRef)}\n        placement=${isRtl ? 'left-start' : 'right-start'}\n        anchor=\"anchor\"\n        flip\n        flip-fallback-strategy=\"best-fit\"\n        skidding=\"${this.skidding}\"\n        strategy=\"fixed\"\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n      >\n        <slot name=\"submenu\"></slot>\n      </syn-popup>\n    `;\n  }\n}\n"],
+  "mappings": ";AAQA,SAAS,WAAW,WAAqB;AAEzC,SAAS,YAAY;AAMd,IAAM,oBAAN,MAAsD;AAAA,EAU3D,YAAY,MAA4C,mBAAsC;AAR9F,SAAQ,WAA0B,UAAU;AAC5C,SAAQ,qBAAqB;AAC7B,SAAQ,cAAc;AACtB,SAAQ,mBAAmB;AAC3B,SAAQ,WAAW;AAEnB,SAAiB,mBAAmB;AAkEpC;AAAA,SAAQ,kBAAkB,CAAC,UAAsB;AAC/C,WAAK,KAAK,MAAM,YAAY,4BAA4B,GAAG,MAAM,OAAO,IAAI;AAC5E,WAAK,KAAK,MAAM,YAAY,4BAA4B,GAAG,MAAM,OAAO,IAAI;AAAA,IAC9E;AAEA,SAAQ,kBAAkB,MAAM;AAC9B,UAAI,KAAK,kBAAkB,KAAK,SAAS,GAAG;AAC1C,aAAK,cAAc;AAAA,MACrB;AAAA,IACF;AAmDA;AAAA,SAAQ,gBAAgB,CAAC,UAAyB;AAChD,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AACH,eAAK,eAAe;AACpB;AAAA,QACF,KAAK;AAEH,cAAI,MAAM,WAAW,KAAK,MAAM;AAC9B,kBAAM,eAAe;AACrB,kBAAM,gBAAgB;AACtB,iBAAK,KAAK,MAAM;AAChB,iBAAK,eAAe;AAAA,UACtB;AACA;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AACH,eAAK,mBAAmB,KAAK;AAC7B;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAEA,SAAQ,cAAc,CAAC,UAAsB;AA/K/C;AAiLI,UAAI,MAAM,WAAW,KAAK,MAAM;AAC9B,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MACxB,WACE,MAAM,kBAAkB,YACvB,MAAM,OAAO,YAAY,qBAAmB,WAAM,OAAO,SAAb,mBAAmB,WAAW,eAC3E;AACA,aAAK,eAAe;AAAA,MACtB;AAAA,IACF;AAGA;AAAA,SAAQ,iBAAiB,CAAC,UAAsB;AAC9C,UAAI,MAAM,iBAAiB,MAAM,yBAAyB,WAAW,KAAK,KAAK,SAAS,MAAM,aAAa,GAAG;AAC5G;AAAA,MACF;AACA,WAAK,eAAe;AAAA,IACtB;AAGA;AAAA,SAAQ,uBAAuB,CAAC,UAAsB;AACpD,YAAM,gBAAgB;AAAA,IACxB;AAGA;AAAA,SAAQ,wBAAwB,MAAM;AACpC,YAAM,cAAsC,KAAK,KAAK,WAAW,cAAc,sBAAsB;AACrG,YAAM,OAAO,2CAAa,iBAAiB,EAAE,SAAS,KAAK,GAAG,OAAO,QAAM,GAAG,cAAc,YAAY;AACxG,YAAM,QAAQ,KAAK,KAAK,QAAQ,WAAW;AAC3C,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AAEA,YAAM,EAAE,MAAM,KAAK,OAAO,OAAO,IAAI,KAAK,sBAAsB;AAEhE,WAAK,KAAK,MAAM,YAAY,mCAAmC,GAAG,QAAQ,OAAO,QAAQ,IAAI,IAAI;AACjG,WAAK,KAAK,MAAM,YAAY,mCAAmC,GAAG,GAAG,IAAI;AACzE,WAAK,KAAK,MAAM,YAAY,iCAAiC,GAAG,QAAQ,OAAO,QAAQ,IAAI,IAAI;AAC/F,WAAK,KAAK,MAAM,YAAY,iCAAiC,GAAG,MAAM,MAAM,IAAI;AAAA,IAClF;AA7LE,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AACrC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,kBAAkB,KAAK,SAAS,KAAK,CAAC,KAAK,KAAK,UAAU;AACjE,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,kBAAkB,KAAK,SAAS,KAAK,CAAC,KAAK,KAAK,UAAU;AACjE,WAAK,aAAa;AAClB,WAAK,eAAe;AAAA,IACtB,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAAA,EACF;AAAA,EAEQ,eAAe;AACrB,QAAI,CAAC,KAAK,aAAa;AACrB,WAAK,KAAK,iBAAiB,aAAa,KAAK,eAAe;AAC5D,WAAK,KAAK,iBAAiB,aAAa,KAAK,eAAe;AAC5D,WAAK,KAAK,iBAAiB,WAAW,KAAK,aAAa;AACxD,WAAK,KAAK,iBAAiB,SAAS,KAAK,WAAW;AACpD,WAAK,KAAK,iBAAiB,YAAY,KAAK,cAAc;AAC1D,WAAK,cAAc;AAAA,IACrB;AAIA,QAAI,CAAC,KAAK,kBAAkB;AAC1B,UAAI,KAAK,SAAS,OAAO;AACvB,aAAK,SAAS,MAAM,iBAAiB,aAAa,KAAK,oBAAoB;AAC3E,aAAK,SAAS,MAAM,iBAAiB,kBAAkB,KAAK,qBAAqB;AACjF,aAAK,mBAAmB;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,kBAAkB;AACxB,QAAI,KAAK,aAAa;AACpB,WAAK,KAAK,oBAAoB,aAAa,KAAK,eAAe;AAC/D,WAAK,KAAK,oBAAoB,aAAa,KAAK,eAAe;AAC/D,WAAK,KAAK,oBAAoB,WAAW,KAAK,aAAa;AAC3D,WAAK,KAAK,oBAAoB,SAAS,KAAK,WAAW;AACvD,WAAK,KAAK,oBAAoB,YAAY,KAAK,cAAc;AAC7D,WAAK,cAAc;AAAA,IACrB;AACA,QAAI,KAAK,kBAAkB;AACzB,UAAI,KAAK,SAAS,OAAO;AACvB,aAAK,SAAS,MAAM,oBAAoB,aAAa,KAAK,oBAAoB;AAC9E,aAAK,SAAS,MAAM,oBAAoB,kBAAkB,KAAK,qBAAqB;AACpF,aAAK,mBAAmB;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAAA,EAcQ,mBAAmB,OAAsB;AAE/C,UAAM,cAAsC,KAAK,KAAK,WAAW,cAAc,sBAAsB;AAGrG,QAAI,CAAC,aAAa;AAChB,cAAQ,MAAM,wEAAwE,IAAI;AAC1F;AAAA,IACF;AAGA,QAAI,YAAwC;AAC5C,eAAW,OAAO,YAAY,iBAAiB,GAAG;AAChD,kBAAY,IAAI,iBAAiB,mCAAmC;AACpE,UAAI,UAAU,WAAW,GAAG;AAC1B;AAAA,MACF;AAAA,IACF;AAEA,QAAI,CAAC,aAAa,UAAU,WAAW,GAAG;AACxC;AAAA,IACF;AAEA,cAAU,CAAC,EAAE,aAAa,YAAY,GAAG;AACzC,aAAS,IAAI,GAAG,MAAM,UAAU,QAAQ,EAAE,GAAG;AAC3C,gBAAU,CAAC,EAAE,aAAa,YAAY,IAAI;AAAA,IAC5C;AAGA,QAAI,KAAK,SAAS,OAAO;AACvB,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,UAAI,KAAK,SAAS,MAAM,QAAQ;AAC9B,YAAI,UAAU,CAAC,aAAa,aAAa;AACvC,oBAAU,CAAC,EAAE,MAAM;AAAA,QACrB;AAAA,MACF,OAAO;AACL,aAAK,cAAc,KAAK;AACxB,aAAK,KAAK,eAAe,KAAK,MAAM;AAClC,cAAI,UAAW,CAAC,aAAa,aAAa;AACxC,sBAAW,CAAC,EAAE,MAAM;AAAA,UACtB;AAAA,QACF,CAAC;AACD,aAAK,KAAK,cAAc;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAAA,EAuEQ,gBAAgB,OAAgB;AACtC,QAAI,KAAK,SAAS,OAAO;AACvB,UAAI,KAAK,SAAS,MAAM,WAAW,OAAO;AACxC,aAAK,SAAS,MAAM,SAAS;AAC7B,aAAK,KAAK,cAAc;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA,EAIQ,cAAc,QAAQ,MAAM;AAClC,QAAI,OAAO;AACT,aAAO,aAAa,KAAK,kBAAkB;AAC3C,WAAK,qBAAqB,OAAO,WAAW,MAAM;AAChD,aAAK,gBAAgB,IAAI;AAAA,MAC3B,GAAG,KAAK,gBAAgB;AAAA,IAC1B,OAAO;AACL,WAAK,gBAAgB,IAAI;AAAA,IAC3B;AAAA,EACF;AAAA,EAEQ,iBAAiB;AACvB,WAAO,aAAa,KAAK,kBAAkB;AAC3C,SAAK,gBAAgB,KAAK;AAAA,EAC5B;AAAA;AAAA,EAGQ,iBAAuB;AAtPjC;AAwPI,QAAI,GAAC,UAAK,KAAK,kBAAV,mBAAyB,mBAAkB;AAC9C;AAAA,IACF;AACA,UAAM,WAAqC,KAAK,KAAK,cAAc,iBAAiB;AACpF,UAAM,QAAkB,CAAC,eAAe,oBAAoB,YAAY;AAExE,UAAM,WAAW,MAAM,OAAO,CAAC,aAAa,SAAS;AA9PzD,UAAAA;AA+PM,YAAM,cAA4BA,MAAA,SAAS,IAAI,IAAI,MAAjB,OAAAA,MAAsB,IAAI,aAAa,GAAG,IAAI;AAChF,YAAM,YAAY,sBAAsB,eAAe,aAAa,IAAI,aAAa,GAAG,IAAI;AAC5F,YAAM,UAAU,UAAU,GAAG,IAAI;AACjC,aAAO,cAAc,QAAQ;AAAA,IAC/B,GAAG,CAAC;AAEJ,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,aAAsB;AACpB,WAAO,KAAK,SAAS,QAAQ,KAAK,SAAS,MAAM,SAAS;AAAA,EAC5D;AAAA,EAEA,gBAAgB;AACd,UAAM,QAAQ,KAAK,KAAK,QAAQ,WAAW;AAG3C,QAAI,CAAC,KAAK,aAAa;AACrB,aAAO;AAAA,IACT;AAEA,WAAO;AAAA;AAAA,UAED,IAAI,KAAK,QAAQ,CAAC;AAAA,oBACR,QAAQ,eAAe,aAAa;AAAA;AAAA;AAAA;AAAA,oBAIpC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ/B;AACF;",
+  "names": ["_a"]
+}

package/dist/chunks/{chunk.4PD74CS6.js → chunk.JQYICBYX.js}

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

package/dist/chunks/{chunk.D3FO6WR5.js → chunk.JUFMYJ7U.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.X6GR6IA2.js";
 import {
   SynDivider
-} from "./chunk.4SSPQ66Z.js";
+} from "./chunk.57BEXIUH.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.HY75RTM4.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -32,4 +32,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.D3FO6WR5.js.map
+//# sourceMappingURL=chunk.JUFMYJ7U.js.map

package/dist/chunks/{chunk.6BJDFV76.js → chunk.KBBZD5N2.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.CGOHWVSA.js";
+} from "./chunk.LR22NFSQ.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.6BJDFV76.js.map
+//# sourceMappingURL=chunk.KBBZD5N2.js.map

package/dist/chunks/{chunk.WZ3DZS4C.js → chunk.KFOCAYIR.js}

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

package/dist/chunks/{chunk.EJNLN3CX.js → chunk.KIOPPTRE.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.LH75WEHB.js";
+} from "./chunk.NB2BFXJZ.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.EJNLN3CX.js.map
+//# sourceMappingURL=chunk.KIOPPTRE.js.map

package/dist/chunks/{chunk.2IEYCSI6.js → chunk.KKESNMMN.js}

@@ -9,14 +9,14 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   watch
-} from "./chunk.ITKS5ZOS.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.HY75RTM4.js";
 import {
   __decorateClass
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -111,4 +111,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.2IEYCSI6.js.map
+//# sourceMappingURL=chunk.KKESNMMN.js.map

package/dist/chunks/{chunk.OOFVD7M5.js → chunk.KUSHEB6D.js}

@@ -10,36 +10,36 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   SynButton
-} from "./chunk.3HG7LHI7.js";
+} from "./chunk.5NVN66IY.js";
 import {
   FormControlController
-} from "./chunk.YCNVMJNR.js";
+} from "./chunk.BBNQVEPD.js";
 import {
   animateTo
-} from "./chunk.FMSA5VHT.js";
+} from "./chunk.A3OYJILJ.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.KL7CAPPJ.js";
+} from "./chunk.HQ6QUSK7.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.UYCIME52.js";
+} from "./chunk.EIMGBKPN.js";
 import {
   LocalizeController
-} from "./chunk.QQ3HY3YJ.js";
+} from "./chunk.ESQAXAFE.js";
 import {
   watch
-} from "./chunk.ITKS5ZOS.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.HY75RTM4.js";
 import {
   __decorateClass
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/file/file.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -480,4 +480,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.OOFVD7M5.js.map
+//# sourceMappingURL=chunk.KUSHEB6D.js.map

package/dist/chunks/{chunk.MM55BLFM.js → chunk.LG6YHKE3.js}

@@ -7,10 +7,10 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.HY75RTM4.js";
 import {
   __decorateClass
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/menu/menu.component.ts
 import { html } from "lit";
@@ -22,12 +22,18 @@ var SynMenu = class extends SynergyElement {
   }
   handleClick(event) {
     const menuItemTypes = ["menuitem", "menuitemcheckbox"];
-    const target = event.composedPath().find((el) => {
+    const composedPath = event.composedPath();
+    const target = composedPath.find((el) => {
       var _a;
       return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
     });
-    if (!target)
-      return;
+    if (!target) return;
+    const closestMenu = composedPath.find((el) => {
+      var _a;
+      return ((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) === "menu";
+    });
+    const clickHasSubmenu = closestMenu !== this;
+    if (clickHasSubmenu) return;
     const item = target;
     if (item.type === "checkbox") {
       item.checked = !item.checked;
@@ -128,4 +134,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.MM55BLFM.js.map
+//# sourceMappingURL=chunk.LG6YHKE3.js.map

package/dist/chunks/chunk.LG6YHKE3.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 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\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\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\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        @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.YOHLIT2Z.js → chunk.LP2ZDM7P.js}

@@ -1,19 +1,19 @@
 import {
   icon_button_custom_styles_default
-} from "./chunk.ZHH2AHOZ.js";
+} from "./chunk.6QYKWCSO.js";
 import {
   icon_button_styles_default
 } from "./chunk.DZ7YIR5N.js";
 import {
   SynIcon
-} from "./chunk.UYCIME52.js";
+} from "./chunk.EIMGBKPN.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.HY75RTM4.js";
 import {
   __decorateClass
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/icon-button/icon-button.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -67,9 +67,7 @@ var SynIconButton = class extends SynergyElement {
       "icon-button--focused": this.hasFocus,
       "icon-button--small": this.size === "small",
       "icon-button--medium": this.size === "medium",
-      "icon-button--large": this.size === "large",
-      "icon-button--primary": this.color === "primary",
-      "icon-button--neutral": this.color === "neutral"
+      "icon-button--large": this.size === "large"
     })}
         ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
         type=${ifDefined(isLink ? void 0 : "button")}
@@ -138,4 +136,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.YOHLIT2Z.js.map
+//# sourceMappingURL=chunk.LP2ZDM7P.js.map

package/dist/chunks/{chunk.YOHLIT2Z.js.map → chunk.LP2ZDM7P.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/icon-button/icon-button.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 { classMap } from 'lit/directives/class-map.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './icon-button.styles.js';\nimport customStyles from './icon-button.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://synergy.style/components/icon-button\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @event syn-blur - Emitted when the icon button loses focus.\n * @event syn-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynIconButton extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** The icon button's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';\n\n  /**\n  * The color of the icon button.\n  * The default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.\n  */\n  @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral'  = 'currentColor';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  render() {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${classMap({\n          'icon-button': true,\n          'icon-button--disabled': !isLink && this.disabled,\n          'icon-button--focused': this.hasFocus,\n          'icon-button--small': this.size === 'small',\n          'icon-button--medium': this.size === 'medium',\n          'icon-button--large': this.size === 'large',\n          'icon-button--primary': this.color === 'primary',\n          'icon-button--neutral': this.color === 'neutral'\n        })}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : 'button')}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}\n        role=${ifDefined(isLink ? undefined : 'button')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=\"${this.label}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @click=${this.handleClick}\n      >\n        <syn-icon\n          class=\"icon-button__icon\"\n          name=${ifDefined(this.name)}\n          library=${ifDefined(this.library)}\n          src=${ifDefined(this.src)}\n          aria-hidden=\"true\"\n        ></syn-icon>\n      </${tag}>\n    `;\n  }\n}\n"],
-  "mappings": "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",
+  "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 { classMap } from 'lit/directives/class-map.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './icon-button.styles.js';\nimport customStyles from './icon-button.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://synergy.style/components/icon-button\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @event syn-blur - Emitted when the icon button loses focus.\n * @event syn-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynIconButton extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** The icon button's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';\n\n  /**\n  * The color of the icon button.\n  * The default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.\n  */\n  @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral'  = 'currentColor';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  render() {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${classMap({\n          'icon-button': true,\n          'icon-button--disabled': !isLink && this.disabled,\n          'icon-button--focused': this.hasFocus,\n          'icon-button--small': this.size === 'small',\n          'icon-button--medium': this.size === 'medium',\n          'icon-button--large': this.size === 'large',\n        })}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : 'button')}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}\n        role=${ifDefined(isLink ? undefined : 'button')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=\"${this.label}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @click=${this.handleClick}\n      >\n        <syn-icon\n          class=\"icon-button__icon\"\n          name=${ifDefined(this.name)}\n          library=${ifDefined(this.library)}\n          src=${ifDefined(this.src)}\n          aria-hidden=\"true\"\n        ></syn-icon>\n      </${tag}>\n    `;\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/chunks/{chunk.CGOHWVSA.js → chunk.LR22NFSQ.js}

@@ -4,12 +4,12 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.HY75RTM4.js";
 import {
   __decorateClass,
   __spreadProps,
   __spreadValues
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/popup/popup.component.ts
 import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from "@floating-ui/dom";
@@ -252,7 +252,7 @@ var SynPopup = class extends SynergyElement {
         getOffsetParent
       })
     }).then(({ x, y, middlewareData, placement }) => {
-      const isRtl = getComputedStyle(this).direction === "rtl";
+      const isRtl = this.matches(":dir(rtl)");
       const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[placement.split("-")[0]];
       this.setAttribute("data-current-placement", placement);
       Object.assign(this.popup.style, {
@@ -409,4 +409,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.CGOHWVSA.js.map
+//# sourceMappingURL=chunk.LR22NFSQ.js.map