@synergy-design-system/components 3.14.0 → 3.15.1

package/dist/chunks/{chunk.OIZEJYK7.js → chunk.WFPTZ3W7.js}

@@ -1,12 +1,12 @@
 import {
   menu_styles_default
-} from "./chunk.NXIQ25W4.js";
+} from "./chunk.M3HEPL2F.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -15,11 +15,11 @@ import {
 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.checkmarkStyledItems = /* @__PURE__ */ new Set();
     this.updateCheckMarksByChildPropChange = (e) => {
       e.stopImmediatePropagation();
       this.handleUpdateCheckmarks(this.getAllItems());
@@ -27,30 +27,52 @@ var SynMenu = class extends SynergyElement {
   }
   handleUpdateCheckmarks(items) {
     this.hasMenuItemsWithCheckmarks = items.some((item) => item.type === "checkbox" || item.loading);
+    this.syncCheckmarkVisibility(items);
+  }
+  syncCheckmarkVisibility(items) {
+    this.checkmarkStyledItems.forEach((item) => {
+      if (!items.includes(item)) {
+        item.style.removeProperty("--display-checkmark");
+        this.checkmarkStyledItems.delete(item);
+      }
+    });
+    if (this.hasMenuItemsWithCheckmarks) {
+      items.forEach((item) => {
+        item.style.removeProperty("--display-checkmark");
+        this.checkmarkStyledItems.delete(item);
+      });
+      return;
+    }
+    items.forEach((item) => {
+      item.style.setProperty("--display-checkmark", "none");
+      this.checkmarkStyledItems.add(item);
+    });
   }
   disconnectedCallback() {
     this.removeEventListener("syn-attributes-changed", this.updateCheckMarksByChildPropChange);
+    this.checkmarkStyledItems.forEach((item) => item.style.removeProperty("--display-checkmark"));
+    this.checkmarkStyledItems.clear();
   }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "menu");
     this.addEventListener("syn-attributes-changed", this.updateCheckMarksByChildPropChange);
   }
-  handleClick(event) {
-    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+  getMenuItemFromEvent(event) {
     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;
-    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;
+    const target = composedPath.find((el) => el instanceof HTMLElement && this.isMenuItem(el));
+    if (!target || !(target instanceof HTMLElement)) {
+      return void 0;
+    }
+    const closestMenu = composedPath.find((el) => el instanceof Element && el.getAttribute("role") === "menu");
+    if (closestMenu !== this) {
+      return void 0;
+    }
+    return target;
+  }
+  handleClick(event) {
+    const item = this.getMenuItemFromEvent(event);
+    if (!item) return;
     if (item.type === "checkbox") {
       item.checked = !item.checked;
     }
@@ -90,8 +112,8 @@ var SynMenu = class extends SynergyElement {
     }
   }
   handleMouseDown(event) {
-    const target = event.target;
-    if (this.isMenuItem(target)) {
+    const target = this.getMenuItemFromEvent(event);
+    if (target) {
       this.setCurrentItem(target);
     }
   }
@@ -106,14 +128,21 @@ var SynMenu = class extends SynergyElement {
     var _a;
     return item.tagName.toLowerCase() === "syn-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
   }
+  getMenuItemsFromElement(element) {
+    if (element.inert) {
+      return [];
+    }
+    if (this.isMenuItem(element)) {
+      return [element];
+    }
+    if (element.tagName.toLowerCase() === "syn-menu") {
+      return [];
+    }
+    return [...element.children].flatMap((child) => this.getMenuItemsFromElement(child));
+  }
   /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
   getAllItems() {
-    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
-      if (el.inert || !this.isMenuItem(el)) {
-        return false;
-      }
-      return true;
-    });
+    return [...this.defaultSlot.assignedElements({ flatten: true })].flatMap((el) => this.getMenuItemsFromElement(el));
   }
   /**
    * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
@@ -135,9 +164,6 @@ 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}
@@ -157,4 +183,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.OIZEJYK7.js.map
+//# sourceMappingURL=chunk.WFPTZ3W7.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu/menu.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { html } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport { state } from 'lit/decorators.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 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-design-system.github.io/?path=/docs/components-syn-menu--docs\n * @status stable\n * @since 1.12.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];\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @state() hasMenuItemsWithCheckmarks = false;\n  private checkmarkStyledItems = new Set<SynMenuItem>();\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    this.syncCheckmarkVisibility(items);\n  }\n\n  private syncCheckmarkVisibility(items: SynMenuItem[]) {\n    this.checkmarkStyledItems.forEach(item => {\n      if (!items.includes(item)) {\n        item.style.removeProperty('--display-checkmark');\n        this.checkmarkStyledItems.delete(item);\n      }\n    });\n\n    if (this.hasMenuItemsWithCheckmarks) {\n      items.forEach(item => {\n        item.style.removeProperty('--display-checkmark');\n        this.checkmarkStyledItems.delete(item);\n      });\n      return;\n    }\n\n    items.forEach(item => {\n      item.style.setProperty('--display-checkmark', 'none');\n      this.checkmarkStyledItems.add(item);\n    });\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    this.checkmarkStyledItems.forEach(item => item.style.removeProperty('--display-checkmark'));\n    this.checkmarkStyledItems.clear();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n    this.addEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  private getMenuItemFromEvent(event: Event) {\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el: EventTarget) => el instanceof HTMLElement && this.isMenuItem(el));\n\n    if (!target || !(target instanceof HTMLElement)) {\n      return undefined;\n    }\n\n    const closestMenu = composedPath.find((el: EventTarget) => el instanceof Element && el.getAttribute('role') === 'menu');\n    if (closestMenu !== this) {\n      return undefined;\n    }\n\n    return target as SynMenuItem;\n  }\n\n  private handleClick(event: MouseEvent) {\n    const item = this.getMenuItemFromEvent(event);\n\n    if (!item) return;\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 = this.getMenuItemFromEvent(event);\n\n    if (target) {\n      this.setCurrentItem(target);\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  private getMenuItemsFromElement(element: HTMLElement): SynMenuItem[] {\n    if (element.inert) {\n      return [];\n    }\n\n    if (this.isMenuItem(element)) {\n      return [element as SynMenuItem];\n    }\n\n    if (element.tagName.toLowerCase() === 'syn-menu') {\n      return [];\n    }\n\n    return [...element.children].flatMap(child => this.getMenuItemsFromElement(child as HTMLElement));\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].flatMap(el => this.getMenuItemsFromElement(el as HTMLElement));\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.RLWMJ7ST.js → chunk.WP2OIWA5.js}

@@ -1,6 +1,6 @@
 import {
   SynPagination
-} from "./chunk.NB7NQ6ZJ.js";
+} from "./chunk.PHR6O2TK.js";
 
 // src/components/pagination/pagination.ts
 var pagination_default = SynPagination;
@@ -9,4 +9,4 @@ SynPagination.define("syn-pagination");
 export {
   pagination_default
 };
-//# sourceMappingURL=chunk.RLWMJ7ST.js.map
+//# sourceMappingURL=chunk.WP2OIWA5.js.map

package/dist/chunks/{chunk.YAXXSDKF.js → chunk.WTJCFKLR.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.M3E33KXI.js";
+} from "./chunk.UJBDQHXK.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.YAXXSDKF.js.map
+//# sourceMappingURL=chunk.WTJCFKLR.js.map

package/dist/chunks/{chunk.BC532CB6.js → chunk.WUGCLTH6.js}

@@ -5,6 +5,7 @@ var SubmenuController = class {
   constructor(host, hasSlotController) {
     this.popupRef = createRef();
     this.enableSubmenuTimer = -1;
+    this.hasGlobalDismissListeners = false;
     this.isConnected = false;
     this.isPopupConnected = false;
     this.skidding = 0;
@@ -19,6 +20,12 @@ var SubmenuController = class {
         this.enableSubmenu();
       }
     };
+    this.handleHostMouseLeave = (event) => {
+      if (this.isWithinSubmenuInteractionTree(event.relatedTarget)) {
+        return;
+      }
+      this.disableSubmenu();
+    };
     // Focus on the first menu-item of a submenu.
     this.handleKeyDown = (event) => {
       switch (event.key) {
@@ -59,10 +66,33 @@ var SubmenuController = class {
       }
       this.disableSubmenu();
     };
+    this.handleWindowBlur = () => {
+      this.disableSubmenu();
+    };
+    this.handlePageHide = () => {
+      this.disableSubmenu();
+    };
+    this.handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        this.disableSubmenu();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape" && this.isExpanded()) {
+        this.disableSubmenu();
+        event.stopPropagation();
+      }
+    };
     // Prevent the parent menu-item from getting focus on mouse movement on the submenu
     this.handlePopupMouseover = (event) => {
       event.stopPropagation();
     };
+    this.handlePopupMouseLeave = (event) => {
+      if (this.isWithinSubmenuInteractionTree(event.relatedTarget)) {
+        return;
+      }
+      this.disableSubmenu();
+    };
     // Set the safe triangle values for the submenu when the position changes
     this.handlePopupReposition = () => {
       const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
@@ -100,6 +130,7 @@ var SubmenuController = class {
     if (!this.isConnected) {
       this.host.addEventListener("mousemove", this.handleMouseMove);
       this.host.addEventListener("mouseover", this.handleMouseOver);
+      this.host.addEventListener("mouseleave", this.handleHostMouseLeave);
       this.host.addEventListener("keydown", this.handleKeyDown);
       this.host.addEventListener("click", this.handleClick);
       this.host.addEventListener("focusout", this.handleFocusOut);
@@ -108,6 +139,7 @@ var SubmenuController = class {
     if (!this.isPopupConnected) {
       if (this.popupRef.value) {
         this.popupRef.value.addEventListener("mouseover", this.handlePopupMouseover);
+        this.popupRef.value.addEventListener("mouseleave", this.handlePopupMouseLeave);
         this.popupRef.value.addEventListener("syn-reposition", this.handlePopupReposition);
         this.isPopupConnected = true;
       }
@@ -117,6 +149,7 @@ var SubmenuController = class {
     if (this.isConnected) {
       this.host.removeEventListener("mousemove", this.handleMouseMove);
       this.host.removeEventListener("mouseover", this.handleMouseOver);
+      this.host.removeEventListener("mouseleave", this.handleHostMouseLeave);
       this.host.removeEventListener("keydown", this.handleKeyDown);
       this.host.removeEventListener("click", this.handleClick);
       this.host.removeEventListener("focusout", this.handleFocusOut);
@@ -125,10 +158,49 @@ var SubmenuController = class {
     if (this.isPopupConnected) {
       if (this.popupRef.value) {
         this.popupRef.value.removeEventListener("mouseover", this.handlePopupMouseover);
+        this.popupRef.value.removeEventListener("mouseleave", this.handlePopupMouseLeave);
         this.popupRef.value.removeEventListener("syn-reposition", this.handlePopupReposition);
         this.isPopupConnected = false;
       }
     }
+    this.removeGlobalDismissListeners();
+  }
+  addGlobalDismissListeners() {
+    if (this.hasGlobalDismissListeners) {
+      return;
+    }
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    window.addEventListener("blur", this.handleWindowBlur);
+    window.addEventListener("pagehide", this.handlePageHide);
+    document.addEventListener("visibilitychange", this.handleVisibilityChange);
+    this.hasGlobalDismissListeners = true;
+  }
+  removeGlobalDismissListeners() {
+    if (!this.hasGlobalDismissListeners) {
+      return;
+    }
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    window.removeEventListener("blur", this.handleWindowBlur);
+    window.removeEventListener("pagehide", this.handlePageHide);
+    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+    this.hasGlobalDismissListeners = false;
+  }
+  isWithinSubmenuInteractionTree(target) {
+    var _a;
+    if (!(target instanceof Node)) {
+      return false;
+    }
+    if (this.host.contains(target)) {
+      return true;
+    }
+    if ((_a = this.popupRef.value) == null ? void 0 : _a.contains(target)) {
+      return true;
+    }
+    const rootNode = target.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      return this.isWithinSubmenuInteractionTree(rootNode.host);
+    }
+    return false;
   }
   handleSubmenuEntry(event) {
     const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
@@ -172,6 +244,11 @@ var SubmenuController = class {
     if (this.popupRef.value) {
       if (this.popupRef.value.active !== state) {
         this.popupRef.value.active = state;
+        if (state) {
+          this.addGlobalDismissListeners();
+        } else {
+          this.removeGlobalDismissListeners();
+        }
         this.host.requestUpdate();
       }
     }
@@ -237,4 +314,4 @@ var SubmenuController = class {
 export {
   SubmenuController
 };
-//# sourceMappingURL=chunk.BC532CB6.js.map
+//# sourceMappingURL=chunk.WUGCLTH6.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/submenu-controller.ts"],
+  "sourcesContent": ["/* 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 hasGlobalDismissListeners = false;\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('mouseleave', this.handleHostMouseLeave);\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('mouseleave', this.handlePopupMouseLeave);\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('mouseleave', this.handleHostMouseLeave);\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('mouseleave', this.handlePopupMouseLeave);\n        this.popupRef.value.removeEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = false;\n      }\n    }\n\n    this.removeGlobalDismissListeners();\n  }\n\n  private addGlobalDismissListeners() {\n    if (this.hasGlobalDismissListeners) {\n      return;\n    }\n\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    window.addEventListener('blur', this.handleWindowBlur);\n    window.addEventListener('pagehide', this.handlePageHide);\n    document.addEventListener('visibilitychange', this.handleVisibilityChange);\n    this.hasGlobalDismissListeners = true;\n  }\n\n  private removeGlobalDismissListeners() {\n    if (!this.hasGlobalDismissListeners) {\n      return;\n    }\n\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    window.removeEventListener('blur', this.handleWindowBlur);\n    window.removeEventListener('pagehide', this.handlePageHide);\n    document.removeEventListener('visibilitychange', this.handleVisibilityChange);\n    this.hasGlobalDismissListeners = false;\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 isWithinSubmenuInteractionTree(target: EventTarget | null): boolean {\n    if (!(target instanceof Node)) {\n      return false;\n    }\n\n    if (this.host.contains(target)) {\n      return true;\n    }\n\n    if (this.popupRef.value?.contains(target)) {\n      return true;\n    }\n\n    const rootNode = target.getRootNode();\n    if (rootNode instanceof ShadowRoot) {\n      return this.isWithinSubmenuInteractionTree(rootNode.host);\n    }\n\n    return false;\n  }\n\n  private handleHostMouseLeave = (event: MouseEvent) => {\n    if (this.isWithinSubmenuInteractionTree(event.relatedTarget)) {\n      return;\n    }\n\n    this.disableSubmenu();\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  private handleWindowBlur = () => {\n    this.disableSubmenu();\n  };\n\n  private handlePageHide = () => {\n    this.disableSubmenu();\n  };\n\n  private handleVisibilityChange = () => {\n    if (document.visibilityState === 'hidden') {\n      this.disableSubmenu();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.isExpanded()) {\n      this.disableSubmenu();\n      event.stopPropagation();\n    }\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  private handlePopupMouseLeave = (event: MouseEvent) => {\n    if (this.isWithinSubmenuInteractionTree(event.relatedTarget)) {\n      return;\n    }\n\n    this.disableSubmenu();\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 = getComputedStyle(this.host).direction === '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        if (state) {\n          this.addGlobalDismissListeners();\n        } else {\n          this.removeGlobalDismissListeners();\n        }\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 = getComputedStyle(this.host).direction === '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        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n      >\n        <slot name=\"submenu\"></slot>\n      </syn-popup>\n    `;\n  }\n}\n"],
+  "mappings": ";AACA,SAAS,WAAW,WAAqB;AAEzC,SAAS,YAAY;AAMd,IAAM,oBAAN,MAAsD;AAAA,EAW3D,YAAY,MAA4C,mBAAsC;AAT9F,SAAQ,WAA0B,UAAU;AAC5C,SAAQ,qBAAqB;AAC7B,SAAQ,4BAA4B;AACpC,SAAQ,cAAc;AACtB,SAAQ,mBAAmB;AAC3B,SAAQ,WAAW;AAEnB,SAAiB,mBAAmB;AAgGpC;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;AAuBA,SAAQ,uBAAuB,CAAC,UAAsB;AACpD,UAAI,KAAK,+BAA+B,MAAM,aAAa,GAAG;AAC5D;AAAA,MACF;AAEA,WAAK,eAAe;AAAA,IACtB;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;AApO/C;AAsOI,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;AAEA,SAAQ,mBAAmB,MAAM;AAC/B,WAAK,eAAe;AAAA,IACtB;AAEA,SAAQ,iBAAiB,MAAM;AAC7B,WAAK,eAAe;AAAA,IACtB;AAEA,SAAQ,yBAAyB,MAAM;AACrC,UAAI,SAAS,oBAAoB,UAAU;AACzC,aAAK,eAAe;AAAA,MACtB;AAAA,IACF;AAEA,SAAQ,wBAAwB,CAAC,UAAyB;AACxD,UAAI,MAAM,QAAQ,YAAY,KAAK,WAAW,GAAG;AAC/C,aAAK,eAAe;AACpB,cAAM,gBAAgB;AAAA,MACxB;AAAA,IACF;AAGA;AAAA,SAAQ,uBAAuB,CAAC,UAAsB;AACpD,YAAM,gBAAgB;AAAA,IACxB;AAEA,SAAQ,wBAAwB,CAAC,UAAsB;AACrD,UAAI,KAAK,+BAA+B,MAAM,aAAa,GAAG;AAC5D;AAAA,MACF;AAEA,WAAK,eAAe;AAAA,IACtB;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,iBAAiB,KAAK,IAAI,EAAE,cAAc;AACxD,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;AArRE,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,cAAc,KAAK,oBAAoB;AAClE,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,cAAc,KAAK,qBAAqB;AAC7E,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,cAAc,KAAK,oBAAoB;AACrE,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,cAAc,KAAK,qBAAqB;AAChF,aAAK,SAAS,MAAM,oBAAoB,kBAAkB,KAAK,qBAAqB;AACpF,aAAK,mBAAmB;AAAA,MAC1B;AAAA,IACF;AAEA,SAAK,6BAA6B;AAAA,EACpC;AAAA,EAEQ,4BAA4B;AAClC,QAAI,KAAK,2BAA2B;AAClC;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,KAAK,qBAAqB;AAC/D,WAAO,iBAAiB,QAAQ,KAAK,gBAAgB;AACrD,WAAO,iBAAiB,YAAY,KAAK,cAAc;AACvD,aAAS,iBAAiB,oBAAoB,KAAK,sBAAsB;AACzE,SAAK,4BAA4B;AAAA,EACnC;AAAA,EAEQ,+BAA+B;AACrC,QAAI,CAAC,KAAK,2BAA2B;AACnC;AAAA,IACF;AAEA,aAAS,oBAAoB,WAAW,KAAK,qBAAqB;AAClE,WAAO,oBAAoB,QAAQ,KAAK,gBAAgB;AACxD,WAAO,oBAAoB,YAAY,KAAK,cAAc;AAC1D,aAAS,oBAAoB,oBAAoB,KAAK,sBAAsB;AAC5E,SAAK,4BAA4B;AAAA,EACnC;AAAA,EAcQ,+BAA+B,QAAqC;AA7H9E;AA8HI,QAAI,EAAE,kBAAkB,OAAO;AAC7B,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,KAAK,SAAS,MAAM,GAAG;AAC9B,aAAO;AAAA,IACT;AAEA,SAAI,UAAK,SAAS,UAAd,mBAAqB,SAAS,SAAS;AACzC,aAAO;AAAA,IACT;AAEA,UAAM,WAAW,OAAO,YAAY;AACpC,QAAI,oBAAoB,YAAY;AAClC,aAAO,KAAK,+BAA+B,SAAS,IAAI;AAAA,IAC1D;AAEA,WAAO;AAAA,EACT;AAAA,EAUQ,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,UAAU,CAAC,aAAa,aAAa;AACvC,sBAAU,CAAC,EAAE,MAAM;AAAA,UACrB;AAAA,QACF,CAAC;AACD,aAAK,KAAK,cAAc;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAAA,EAoGQ,gBAAgB,OAAgB;AACtC,QAAI,KAAK,SAAS,OAAO;AACvB,UAAI,KAAK,SAAS,MAAM,WAAW,OAAO;AACxC,aAAK,SAAS,MAAM,SAAS;AAC7B,YAAI,OAAO;AACT,eAAK,0BAA0B;AAAA,QACjC,OAAO;AACL,eAAK,6BAA6B;AAAA,QACpC;AACA,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;AA7UjC;AA+UI,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;AArVzD,UAAAA;AAsVM,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,iBAAiB,KAAK,IAAI,EAAE,cAAc;AAGxD,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,EAO/B;AACF;",
+  "names": ["_a"]
+}

package/dist/chunks/{chunk.ZJRSA6FU.js → chunk.WWJFXCJ7.js}

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

package/dist/chunks/{chunk.TTCMP7MI.js → chunk.X72G6ASQ.js}

@@ -1,9 +1,9 @@
-import {
-  defaultValue
-} from "./chunk.3JDUKQRN.js";
 import {
   checkbox_styles_default
 } from "./chunk.VOUZJK5T.js";
+import {
+  defaultValue
+} from "./chunk.3JDUKQRN.js";
 import {
   form_control_styles_default
 } from "./chunk.34WYIU4C.js";
@@ -15,19 +15,19 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.I4Z5TIK5.js";
-import {
-  watch
-} from "./chunk.SMIMHADA.js";
+} from "./chunk.7WBNGACU.js";
 import {
   enableDefaultSettings
 } from "./chunk.4MG3QDNW.js";
+import {
+  watch
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -266,4 +266,4 @@ SynCheckbox = __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.TTCMP7MI.js.map
+//# sourceMappingURL=chunk.X72G6ASQ.js.map

package/dist/chunks/{chunk.TYSWA3XY.js → chunk.XT6UCMCP.js}

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "./chunk.KI5VDJAL.js";
+} from "./chunk.4E5YHPM6.js";
 
 // src/components/tab-group/tab-group.ts
 var tab_group_default = SynTabGroup;
@@ -9,4 +9,4 @@ SynTabGroup.define("syn-tab-group");
 export {
   tab_group_default
 };
-//# sourceMappingURL=chunk.TYSWA3XY.js.map
+//# sourceMappingURL=chunk.XT6UCMCP.js.map

package/dist/chunks/{chunk.UISWB5WE.js → chunk.YBXR5HES.js}

@@ -81,7 +81,7 @@ var SynergyElement = class extends LitElement {
 _hasRecordedInitialProperties = new WeakMap();
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-SynergyElement.version = "3.14.0";
+SynergyElement.version = "3.15.1";
 SynergyElement.dependencies = {};
 __decorateClass([
   property()
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynergyElement
 };
-//# sourceMappingURL=chunk.UISWB5WE.js.map
+//# sourceMappingURL=chunk.YBXR5HES.js.map

package/dist/chunks/{chunk.UISWB5WE.js.map → chunk.YBXR5HES.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/internal/synergy-element.ts"],
-  "sourcesContent": ["/* eslint-disable */\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? never\n      : // ...and has at least one non-optional property\n        Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? never\n        : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? T\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? T\n        : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n        : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent<unknown>\n  : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n    name: EventTypeDoesNotRequireDetail<T>,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof EventTypesWithRequiredDetail>(\n    name: EventTypeRequiresDetail<T>,\n    options: SynEventInit<T>\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof ValidEventTypeMap>(\n    name: T,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T> {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType<T>;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = \"3.14.0\";\n  \n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof SynergyElement;\n\n    if (!currentlyRegisteredConstructor) {\n      // We try to register as the actual class first. If for some reason that fails, we fall back to anonymous classes.\n      // customElements can only have 1 class of the same \"object id\" per registry, so that is why the try {} catch {} exists.\n      // Some tools like Jest Snapshots and if you import the constructor and call `new SynButton()` they will fail with\n      //   the anonymous class version.\n      try {\n        customElements.define(name, elementConstructor, options);\n      } catch (_err) {\n        customElements.define(name, class extends elementConstructor {}, options);\n      }\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record<string, typeof SynergyElement> = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof SynergyElement).define(name, component);\n    });\n  }\n\n  #hasRecordedInitialProperties = false;\n\n  // Store the constructor value of all `static properties = {}`\n  initialReflectedProperties: Map<string, unknown> = new Map();\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    if (!this.#hasRecordedInitialProperties) {\n      (this.constructor as typeof SynergyElement).elementProperties.forEach(\n        (obj, prop: keyof typeof this & string) => {\n          // eslint-disable-next-line\n          if (obj.reflect && this[prop] != null) {\n            this.initialReflectedProperties.set(prop, this[prop]);\n          }\n        }\n      );\n\n      this.#hasRecordedInitialProperties = true;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]): void {\n    super.willUpdate(changedProperties);\n\n    // Run the morph fixing *after* willUpdate.\n    this.initialReflectedProperties.forEach((value, prop: string & keyof typeof this) => {\n      // If a prop changes to `null`, we assume this happens via an attribute changing to `null`.\n      // eslint-disable-next-line\n      if (changedProperties.has(prop) && this[prop] == null) {\n        // Silly type gymnastics to appease the compiler.\n        (this as Record<string, unknown>)[prop] = value;\n      }\n    });\n  }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n"],
+  "sourcesContent": ["/* eslint-disable */\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? never\n      : // ...and has at least one non-optional property\n        Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? never\n        : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? T\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? T\n        : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n        : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent<unknown>\n  : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n    name: EventTypeDoesNotRequireDetail<T>,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof EventTypesWithRequiredDetail>(\n    name: EventTypeRequiresDetail<T>,\n    options: SynEventInit<T>\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof ValidEventTypeMap>(\n    name: T,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T> {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType<T>;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = \"3.15.1\";\n  \n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof SynergyElement;\n\n    if (!currentlyRegisteredConstructor) {\n      // We try to register as the actual class first. If for some reason that fails, we fall back to anonymous classes.\n      // customElements can only have 1 class of the same \"object id\" per registry, so that is why the try {} catch {} exists.\n      // Some tools like Jest Snapshots and if you import the constructor and call `new SynButton()` they will fail with\n      //   the anonymous class version.\n      try {\n        customElements.define(name, elementConstructor, options);\n      } catch (_err) {\n        customElements.define(name, class extends elementConstructor {}, options);\n      }\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record<string, typeof SynergyElement> = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof SynergyElement).define(name, component);\n    });\n  }\n\n  #hasRecordedInitialProperties = false;\n\n  // Store the constructor value of all `static properties = {}`\n  initialReflectedProperties: Map<string, unknown> = new Map();\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    if (!this.#hasRecordedInitialProperties) {\n      (this.constructor as typeof SynergyElement).elementProperties.forEach(\n        (obj, prop: keyof typeof this & string) => {\n          // eslint-disable-next-line\n          if (obj.reflect && this[prop] != null) {\n            this.initialReflectedProperties.set(prop, this[prop]);\n          }\n        }\n      );\n\n      this.#hasRecordedInitialProperties = true;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]): void {\n    super.willUpdate(changedProperties);\n\n    // Run the morph fixing *after* willUpdate.\n    this.initialReflectedProperties.forEach((value, prop: string & keyof typeof this) => {\n      // If a prop changes to `null`, we assume this happens via an attribute changing to `null`.\n      // eslint-disable-next-line\n      if (changedProperties.has(prop) && this[prop] == null) {\n        // Silly type gymnastics to appease the compiler.\n        (this as Record<string, unknown>)[prop] = value;\n      }\n    });\n  }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n"],
   "mappings": ";;;;;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAFzB;AAiEA,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EA8ErD,cAAc;AACZ,UAAM;AAMR,sDAAgC;AAGhC;AAAA,sCAAmD,oBAAI,IAAI;AARzD,WAAO,QAAS,KAAK,YAAsC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACtG,MAAC,KAAK,YAAsC,OAAO,MAAM,SAAS;AAAA,IACpE,CAAC;AAAA,EACH;AAAA,EArEA,KACE,MACA,SACuB;AACvB,UAAM,QAAQ,IAAI,YAAY,MAAM;AAAA,MAClC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ,CAAC;AAAA,OACN,QACJ;AAED,SAAK,cAAc,KAAK;AAExB,WAAO;AAAA,EACT;AAAA,EAOA,OAAO,OAAO,MAAc,qBAAqB,MAAM,UAAoC,CAAC,GAAG;AAC7F,UAAM,iCAAiC,eAAe,IAAI,IAAI;AAI9D,QAAI,CAAC,gCAAgC;AAKnC,UAAI;AACF,uBAAe,OAAO,MAAM,oBAAoB,OAAO;AAAA,MACzD,SAAS,MAAM;AACb,uBAAe,OAAO,MAAM,cAAc,mBAAmB;AAAA,QAAC,GAAG,OAAO;AAAA,MAC1E;AACA;AAAA,IACF;AAEA,QAAI,aAAa;AACjB,QAAI,kBAAkB;AAEtB,QAAI,aAAa,sBAAsB,mBAAmB,SAAS;AACjE,mBAAa,OAAO,mBAAmB;AAAA,IACzC;AAEA,QAAI,aAAa,kCAAkC,+BAA+B,SAAS;AACzF,wBAAkB,OAAO,+BAA+B;AAAA,IAC1D;AAGA,QAAI,cAAc,mBAAmB,eAAe,iBAAiB;AAEnE;AAAA,IACF;AAEA,YAAQ;AAAA,MACN,0BAA0B,IAAI,IAAI,UAAU,UAAU,IAAI,IAAI,eAAe;AAAA,IAC/E;AAAA,EACF;AAAA,EAgBA,yBAAyB,MAAc,UAAyB,UAAyB;AACvF,QAAI,CAAC,mBAAK,gCAA+B;AACvC,MAAC,KAAK,YAAsC,kBAAkB;AAAA,QAC5D,CAAC,KAAK,SAAqC;AAEzC,cAAI,IAAI,WAAW,KAAK,IAAI,KAAK,MAAM;AACrC,iBAAK,2BAA2B,IAAI,MAAM,KAAK,IAAI,CAAC;AAAA,UACtD;AAAA,QACF;AAAA,MACF;AAEA,yBAAK,+BAAgC;AAAA,IACvC;AAEA,UAAM,yBAAyB,MAAM,UAAU,QAAQ;AAAA,EACzD;AAAA,EAEU,WAAW,mBAAkE;AACrF,UAAM,WAAW,iBAAiB;AAGlC,SAAK,2BAA2B,QAAQ,CAAC,OAAO,SAAqC;AAGnF,UAAI,kBAAkB,IAAI,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM;AAErD,QAAC,KAAiC,IAAI,IAAI;AAAA,MAC5C;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAnCE;AAAA;AAAA;AArFmB,eAiCZ,UAAU;AAjCE,eA4EZ,eAAsD,CAAC;AA1ElD;AAAA,EAAX,SAAS;AAAA,GAFS,eAEP;AACA;AAAA,EAAX,SAAS;AAAA,GAHS,eAGP;",
   "names": []
 }

package/dist/chunks/{chunk.ZT47ZFJC.js → chunk.YEVEQT3G.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.JDYQ7EFG.js";
 import {
   SynIconButton
-} from "./chunk.T4L342TL.js";
+} from "./chunk.RKAIJDOM.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.ZT47ZFJC.js.map
+//# sourceMappingURL=chunk.YEVEQT3G.js.map

package/dist/chunks/{chunk.S3SB2L64.js → chunk.YJPWGTIA.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.ZT47ZFJC.js";
+} from "./chunk.YEVEQT3G.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.S3SB2L64.js.map
+//# sourceMappingURL=chunk.YJPWGTIA.js.map

package/dist/chunks/{chunk.ZQZGMCRB.js → chunk.YT4ZXOLI.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.66QNJSLF.js";
+} from "./chunk.7W55HRDH.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.ZQZGMCRB.js.map
+//# sourceMappingURL=chunk.YT4ZXOLI.js.map

package/dist/chunks/{chunk.X7M4AZCK.js → chunk.Z3WWZV5J.js}

@@ -1,6 +1,3 @@
-import {
-  textarea_styles_default
-} from "./chunk.NDJJVGQL.js";
 import {
   defaultValue
 } from "./chunk.3JDUKQRN.js";
@@ -10,21 +7,24 @@ import {
 import {
   FormControlController
 } from "./chunk.J3GDDM6Q.js";
+import {
+  textarea_styles_default
+} from "./chunk.NDJJVGQL.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
-import {
-  watch
-} from "./chunk.SMIMHADA.js";
 import {
   enableDefaultSettings
 } from "./chunk.4MG3QDNW.js";
+import {
+  watch
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -379,4 +379,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.X7M4AZCK.js.map
+//# sourceMappingURL=chunk.Z3WWZV5J.js.map