@getflip/swirl-components 0.63.0 → 0.64.0

package/dist/components/swirl-menu-item.js

@@ -0,0 +1,177 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as closestPassShadow, p as parentsPassShadow } from './utils.js';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$6 } from './swirl-action-list-item2.js';
+import { d as defineCustomElement$5 } from './swirl-icon-check-small2.js';
+import { d as defineCustomElement$4 } from './swirl-icon-check-strong2.js';
+import { d as defineCustomElement$3 } from './swirl-icon-drag-handle2.js';
+import { d as defineCustomElement$2 } from './swirl-option-list-item2.js';
+
+const swirlMenuItemCss = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expanded ::part(action-list-item){background-color:var(--s-surface-overlay-hovered)}";
+
+const SwirlMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onSlotChange = () => {
+      this.subMenu = this.el.querySelector("swirl-menu");
+      this.updateActionListItemProps();
+    };
+    this.onActionListItemClick = () => {
+      if (this.actionListItem.disabled) {
+        return;
+      }
+      this.rootMenu.activateMenuItem(this.el);
+    };
+    this.onOptionListItemClick = () => {
+      if (this.optionListItem.disabled) {
+        return;
+      }
+      this.parentMenu.updateSelection(this.optionListItem);
+    };
+    this.onOptionListItemKeyDown = (event) => {
+      if (event.code === "Space") {
+        event.preventDefault();
+      }
+      else if (event.code === "Enter") {
+        if (this.optionListItem.disabled) {
+          return;
+        }
+        event.preventDefault();
+        this.parentMenu.updateSelection(this.optionListItem);
+      }
+    };
+    this.onOptionListItemKeyUp = (event) => {
+      if (event.code === "Space") {
+        if (this.optionListItem.disabled) {
+          return;
+        }
+        event.preventDefault();
+        this.parentMenu.updateSelection(this.optionListItem);
+      }
+    };
+    this.description = undefined;
+    this.disabled = undefined;
+    this.expanded = undefined;
+    this.icon = undefined;
+    this.intent = "default";
+    this.label = undefined;
+    this.value = undefined;
+    this.parentMenu = undefined;
+    this.subMenu = undefined;
+  }
+  componentWillLoad() {
+    this.parentMenu = closestPassShadow(this.el, "swirl-menu");
+    this.rootMenu = parentsPassShadow(this.el, "swirl-menu").pop();
+    this.subMenu = this.el.querySelector("swirl-menu");
+  }
+  watchExpanded() {
+    this.updateActionListItemProps();
+  }
+  /**
+   * Get the items sub menu
+   */
+  async getSubMenu() {
+    return this.subMenu;
+  }
+  /**
+   * Get the items parent menu
+   */
+  async getParentMenu() {
+    return this.parentMenu;
+  }
+  updateActionListItemProps() {
+    if (!Boolean(this.actionListItem)) {
+      return;
+    }
+    this.actionListItem.swirlAriaExpanded = this.expanded ? "true" : undefined;
+    this.actionListItem.swirlAriaHaspopup = Boolean(this.subMenu)
+      ? "true"
+      : undefined;
+    this.actionListItem.suffix = Boolean(this.subMenu)
+      ? '<swirl-icon-chevron-right size="16"></swirl-icon-chevron-right>'
+      : undefined;
+  }
+  renderActionListItem() {
+    var _a, _b, _c;
+    const badge = Boolean((_a = this.subMenu) === null || _a === void 0 ? void 0 : _a.value)
+      ? (_c = Array.from(((_b = this.subMenu) === null || _b === void 0 ? void 0 : _b.querySelectorAll("swirl-menu-item")) || []).find((item) => { var _a; return item.value === ((_a = this.subMenu) === null || _a === void 0 ? void 0 : _a.value); })) === null || _c === void 0 ? void 0 : _c.label
+      : undefined;
+    return (h("swirl-action-list-item", { badge: badge, description: this.description, disabled: this.disabled, icon: this.icon, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (el) => (this.actionListItem = el) }));
+  }
+  renderOptionListItem() {
+    var _a;
+    return (h("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (el) => (this.optionListItem = el), selected: ((_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.value) === this.value, swirlAriaRole: "menuitemradio", value: this.value }));
+  }
+  render() {
+    var _a;
+    const className = classnames("menu-item", {
+      "menu-item--expanded": this.expanded,
+    });
+    return (h(Host, null, h("div", { class: className }, ((_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.variant) === "selection"
+      ? this.renderOptionListItem()
+      : this.renderActionListItem(), h("slot", { onSlotchange: this.onSlotChange }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "expanded": ["watchExpanded"]
+  }; }
+  static get style() { return swirlMenuItemCss; }
+}, [1, "swirl-menu-item", {
+    "description": [1],
+    "disabled": [4],
+    "expanded": [4],
+    "icon": [1],
+    "intent": [1],
+    "label": [1],
+    "value": [1],
+    "parentMenu": [32],
+    "subMenu": [32],
+    "getSubMenu": [64],
+    "getParentMenu": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-menu-item", "swirl-action-list-item", "swirl-icon-check-small", "swirl-icon-check-strong", "swirl-icon-drag-handle", "swirl-option-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-menu-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlMenuItem$1);
+      }
+      break;
+    case "swirl-action-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-icon-check-small":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-icon-drag-handle":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-option-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlMenuItem = SwirlMenuItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlMenuItem, defineCustomElement };

package/dist/components/swirl-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlMenu extends Components.SwirlMenu, HTMLElement {}
+export const SwirlMenu: {
+  prototype: SwirlMenu;
+  new (): SwirlMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-menu.js

@@ -0,0 +1,348 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as computePosition, a as autoUpdate, o as offset, f as flip } from './floating-ui.dom.esm.js';
+import { c as classnames } from './index2.js';
+import { q as querySelectorAllDeep, c as closestPassShadow, p as parentsPassShadow, i as isMobileViewport, b as getActiveElement } from './utils.js';
+import { d as defineCustomElement$3 } from './swirl-button2.js';
+import { d as defineCustomElement$2 } from './swirl-heading2.js';
+
+const swirlMenuCss = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-1)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-surface-overlay-default)}";
+
+const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.done = createEvent(this, "done", 7);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.mobileMediaQuery = window.matchMedia("(min-width: 768px)");
+    this.mediaQueryHandler = () => {
+      this.updateMobileState();
+    };
+    this.resetMenu = () => {
+      this.items.forEach((item) => {
+        item.tabIndex = -1;
+      });
+      if (this.level > 0) {
+        return;
+      }
+      // wait for animation
+      setTimeout(() => {
+        this.activeLevel = 0;
+        const subMenus = querySelectorAllDeep(this.el, "swirl-menu");
+        // disable sub menus
+        subMenus.forEach((subMenu) => {
+          subMenu.active = false;
+          subMenu.parentElement.expanded = false;
+        });
+      }, this.mobile ? 200 : 60);
+    };
+    this.closeMenu = () => {
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.popover.close();
+      this.resetMenu();
+    };
+    this.reposition = async () => {
+      if (this.mobile || this.level === 0) {
+        this.position = undefined;
+        return;
+      }
+      const trigger = this.el.parentElement;
+      if (!Boolean(trigger) || !Boolean(this.menuContainer)) {
+        return;
+      }
+      this.position = await computePosition(trigger, this.menuContainer, {
+        placement: "right-start",
+        strategy: "fixed",
+        middleware: [offset({ mainAxis: -10, crossAxis: 0 }), flip()],
+      });
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusNextItem();
+      }
+      else if (event.code === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusPreviousItem();
+      }
+      else if (event.code === "ArrowLeft") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.rootMenu.goBack();
+      }
+      else if (event.code === "ArrowRight") {
+        event.preventDefault();
+        const activeItem = closestPassShadow(this.items[this.getActiveItemIndex()], "swirl-menu-item");
+        if (!Boolean(activeItem)) {
+          return;
+        }
+        this.rootMenu.activateMenuItem(activeItem);
+      }
+    };
+    this.onClose = () => {
+      this.closeMenu();
+    };
+    this.onDone = () => {
+      this.closeMenu();
+      this.done.emit();
+    };
+    this.onGoBack = () => {
+      this.rootMenu.goBack();
+    };
+    this.active = true;
+    this.label = undefined;
+    this.level = 0;
+    this.mobileBackButtonLabel = "Back";
+    this.mobileCloseMenuButtonLabel = "Close menu";
+    this.mobileDoneButtonLabel = "Done";
+    this.value = undefined;
+    this.variant = "action";
+    this.activeLevel = 0;
+    this.mobile = undefined;
+    this.position = undefined;
+  }
+  componentWillLoad() {
+    this.updateMobileState();
+    this.updateLevel();
+    this.observeSlotChanges();
+  }
+  componentDidLoad() {
+    var _a, _b;
+    (_b = (_a = this.mobileMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.mediaQueryHandler);
+    this.parentMenu = closestPassShadow(this.el.parentElement, "swirl-menu");
+    this.popover = closestPassShadow(this.el, "swirl-popover");
+    this.rootMenu = parentsPassShadow(this.el, "swirl-menu").pop();
+    if (Boolean(this.parentMenu)) {
+      queueMicrotask(() => {
+        this.active = false;
+      });
+    }
+    this.popover.addEventListener("popoverClose", this.resetMenu);
+    this.updateItems();
+  }
+  disconnectedCallback() {
+    var _a, _b, _c;
+    this.popover.removeEventListener("popoverClose", this.resetMenu);
+    (_b = (_a = this.mobileMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.mediaQueryHandler);
+    (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
+  }
+  watchActive() {
+    this.reposition();
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    this.disableAutoUpdate = autoUpdate(this.el.parentElement, this.menuContainer, this.reposition);
+  }
+  /**
+   * Activate a menu item with a sub menu. Only callable on a root menu.
+   * @returns
+   */
+  async activateMenuItem(menuItem) {
+    if (Boolean(this.parentMenu)) {
+      return;
+    }
+    const parentMenu = await menuItem.getParentMenu();
+    // deactivate sub menus of parent menu
+    const subMenus = querySelectorAllDeep(this.el, "swirl-menu").filter((subMenu) => subMenu.level >= parentMenu.level && subMenu !== parentMenu);
+    subMenus.forEach((subMenu) => {
+      subMenu.active = false;
+      subMenu.parentElement.expanded = false;
+    });
+    // activate sub menu
+    const subMenu = await menuItem.getSubMenu();
+    if (!Boolean(subMenu)) {
+      return;
+    }
+    menuItem.expanded = true;
+    subMenu.active = true;
+    this.activeLevel = subMenu.level;
+    // wait for animation to focus first item of sub menu
+    setTimeout(() => {
+      subMenu.focusFirstItem();
+    }, this.mobile ? 200 : 60);
+  }
+  /**
+   * Close and reset the menu. Only callable on a root menu.
+   * @returns
+   */
+  async close() {
+    this.closeMenu();
+  }
+  /**
+   * Collapse the currently active sub menu. Only callable on a root menu.
+   * @returns
+   */
+  async goBack() {
+    if (Boolean(this.parentMenu) || this.activeLevel === 0) {
+      return;
+    }
+    const currentlyActiveSubMenu = querySelectorAllDeep(this.el, "swirl-menu").find((subMenu) => subMenu.level === this.activeLevel && subMenu.active) || this.rootMenu;
+    const deactivatedMenuItem = currentlyActiveSubMenu.parentElement;
+    deactivatedMenuItem.expanded = false;
+    this.activeLevel = Math.max(this.activeLevel - 1, 0);
+    const subMenus = querySelectorAllDeep(this.el, "swirl-menu").filter((subMenu) => subMenu.level > this.activeLevel);
+    // disable sub menus of deactivated level(s)
+    subMenus.forEach((subMenu) => {
+      subMenu.active = false;
+    });
+    const activatedMenu = querySelectorAllDeep(this.el, "swirl-menu").find((subMenu) => subMenu.level === this.activeLevel && subMenu.active) || this.rootMenu;
+    activatedMenu.focusItemAtIndex(Array.from(deactivatedMenuItem.parentElement.children).indexOf(deactivatedMenuItem));
+  }
+  /**
+   * Focus the first menu item.
+   * @returns
+   */
+  async focusFirstItem() {
+    this.focusItem(this.items[0]);
+  }
+  /**
+   * Focus the menu item at index.
+   * @returns
+   */
+  async focusItemAtIndex(index) {
+    this.focusItem(this.items[index]);
+  }
+  /**
+   * Update the selection of a menu with variant "selection".
+   * @returns
+   */
+  async updateSelection(item) {
+    this.valueChange.emit(item.value);
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateItems();
+    });
+    this.observer.observe(this.el, { childList: true });
+  }
+  updateMobileState() {
+    const mobile = isMobileViewport();
+    if (mobile !== this.mobile) {
+      this.mobile = mobile;
+    }
+  }
+  updateItems() {
+    this.items = [
+      ...querySelectorAllDeep(this.el, '[role="menuitem"]'),
+      ...querySelectorAllDeep(this.el, '[role="menuitemradio"]'),
+    ].filter((item) => {
+      return closestPassShadow(item, "swirl-menu") === this.el;
+    });
+  }
+  updateLevel() {
+    const parents = parentsPassShadow(this.el.parentNode, "swirl-menu");
+    this.level = parents.length;
+  }
+  focusItem(item) {
+    const items = [
+      ...querySelectorAllDeep(this.rootMenu, '[role="menuitem"]'),
+      ...querySelectorAllDeep(this.rootMenu, '[role="menuitemradio"]'),
+    ];
+    items.forEach((item) => {
+      item.tabIndex = -1;
+    });
+    if (!Boolean(item)) {
+      return;
+    }
+    item.tabIndex = 0;
+    item.focus();
+  }
+  focusNextItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = (activeItemIndex + 1) % this.items.length;
+    const item = this.items[newIndex];
+    this.focusItem(item);
+  }
+  focusPreviousItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;
+    const item = this.items[newIndex];
+    this.focusItem(item);
+  }
+  getActiveItemIndex() {
+    const activeElement = getActiveElement();
+    return this.items.findIndex((item) => item === activeElement ||
+      item === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.querySelector('[role="menuitem"]')) ||
+      item === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.querySelector('[role="menuitemradio"]')));
+  }
+  render() {
+    var _a, _b;
+    const isTopLevelMenu = !Boolean(this.parentMenu);
+    const ariaLabel = isTopLevelMenu && this.mobile ? undefined : this.label;
+    const ariaLabelledby = isTopLevelMenu && this.mobile ? "menu-title" : undefined;
+    const role = isTopLevelMenu ? "menubar" : "menu";
+    const className = classnames("menu", `menu--level-${this.level}`, {
+      "menu--active": this.active,
+      "menu--mobile": this.mobile,
+      "menu--root": isTopLevelMenu,
+    });
+    return (h(Host, null, h("div", { class: className }, this.mobile && isTopLevelMenu && (h("div", { class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { class: "menu__title", id: "menu-title" }, h("swirl-heading", { align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
+        ? {
+          top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
+          left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+        }
+        : this.mobile
+          ? {
+            left: isTopLevelMenu
+              ? `calc(-100% * ${this.activeLevel})`
+              : "100%",
+          }
+          : undefined }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "active": ["watchActive"]
+  }; }
+  static get style() { return swirlMenuCss; }
+}, [1, "swirl-menu", {
+    "active": [1028],
+    "label": [1],
+    "level": [1026],
+    "mobileBackButtonLabel": [1, "mobile-back-button-label"],
+    "mobileCloseMenuButtonLabel": [1, "mobile-close-menu-button-label"],
+    "mobileDoneButtonLabel": [1, "mobile-done-button-label"],
+    "value": [1],
+    "variant": [1],
+    "activeLevel": [32],
+    "mobile": [32],
+    "position": [32],
+    "activateMenuItem": [64],
+    "close": [64],
+    "goBack": [64],
+    "focusFirstItem": [64],
+    "focusItemAtIndex": [64],
+    "updateSelection": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-menu", "swirl-button", "swirl-heading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlMenu$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlMenu = SwirlMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlMenu, defineCustomElement };

package/dist/components/swirl-option-list-item2.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './swirl-icon-check-small2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-check-strong2.js';
 import { d as defineCustomElement$1 } from './swirl-icon-drag-handle2.js';
 
-const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:inline-flex;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item__label.sc-swirl-option-list-item{flex-grow:1;color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
+const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:inline-flex;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item__label.sc-swirl-option-list-item{flex-grow:1;color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
 
 const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -32,6 +32,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.icon = undefined;
     this.label = undefined;
     this.selected = false;
+    this.swirlAriaRole = "option";
     this.value = undefined;
     this.iconSize = 24;
   }
@@ -65,7 +66,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       "option-list-item--dragging": this.dragging,
       "option-list-item--selected": this.selected,
     });
-    return (h(Host, null, h("div", { "aria-disabled": ariaDisabled, "aria-selected": ariaSelected, class: className, part: "option-list-item", role: "option" }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   get el() { return this; }
   static get style() { return swirlOptionListItemCss; }
@@ -79,6 +80,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     "icon": [1],
     "label": [1],
     "selected": [1028],
+    "swirlAriaRole": [1, "swirl-aria-role"],
     "value": [1],
     "iconSize": [32]
   }]);

package/dist/components/swirl-popover2.js

@@ -79,14 +79,17 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (!this.active) {
       return;
     }
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
     const target = event.target;
     const relatedTarget = event.relatedTarget;
     const activeElement = getActiveElement();
     const popoverLostFocus = !this.el.contains(target) &&
       !this.el.contains(activeElement) &&
-      !this.el.contains(relatedTarget || target) &&
       target !== this.triggerEl &&
-      relatedTarget !== this.el;
+      (!isSafari ||
+        (isSafari &&
+          !this.el.contains(relatedTarget || target) &&
+          relatedTarget !== this.el));
     if (popoverLostFocus) {
       this.close();
     }

package/dist/components/swirl-text-input2.js

@@ -173,7 +173,7 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       "text-input--inline": this.inline,
       "text-input--show-password": this.type === "password" && this.showPassword,
     });
-    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { size: this.iconSize })), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { size: this.iconSize })), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
   }
   static get style() { return swirlTextInputCss; }
 }, [2, "swirl-text-input", {

package/dist/components/utils.js

@@ -69,6 +69,23 @@ function getVisibleHeight(element, container) {
 function isMobileViewport() {
   return !window.matchMedia("(min-width: 768px)").matches;
 }
+function parentsPassShadow(node, selector, matches = []) {
+  if (!node) {
+    return matches;
+  }
+  if (node instanceof ShadowRoot) {
+    return parentsPassShadow(node.host, selector, matches);
+  }
+  if (node instanceof HTMLElement) {
+    if (node.matches(selector)) {
+      return parentsPassShadow(node.parentNode, selector, [...matches, node]);
+    }
+    else {
+      return parentsPassShadow(node.parentNode, selector, matches);
+    }
+  }
+  return parentsPassShadow(node.parentNode, selector, matches);
+}
 function querySelectorAllDeep(root, selector) {
   function collectAllElementsDeep(selector, root) {
     if (!Boolean(root)) {
@@ -94,4 +111,4 @@ function querySelectorAllDeep(root, selector) {
   return matches;
 }
 
-export { getVisibleHeight as a, getActiveElement as b, closestPassShadow as c, debounce as d, getDesktopMediaQuery as g, isMobileViewport as i, querySelectorAllDeep as q };
+export { getVisibleHeight as a, getActiveElement as b, closestPassShadow as c, debounce as d, getDesktopMediaQuery as g, isMobileViewport as i, parentsPassShadow as p, querySelectorAllDeep as q };