@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/cjs/swirl-inline-status.cjs.entry.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlInlineStatusCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.inline-status{display:inline-flex;color:var(--s-text-default);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.inline-status--size-s{font-size:var(--s-font-size-sm)}.inline-status--size-s .inline-status__icon{padding-top:0.125rem}.inline-status--size-s .inline-status__message{padding-top:0}.inline-status--intent-critical{color:var(--s-text-critical)}.inline-status--intent-critical .inline-status__icon{color:var(--s-icon-critical)}.inline-status--intent-info{color:var(--s-text-info)}.inline-status--intent-info .inline-status__icon{color:var(--s-icon-info)}.inline-status--intent-success{color:var(--s-text-success)}.inline-status--intent-success .inline-status__icon{color:var(--s-icon-success)}.inline-status--intent-warning{color:var(--s-text-warning)}.inline-status--intent-warning .inline-status__icon{color:var(--s-icon-warning)}.inline-status__icon{display:inline-flex;margin-right:var(--s-space-4);color:var(--s-icon-default);align-self:flex-start}.inline-status__message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__message{padding-top:0}}";
+
+const SwirlInlineStatus = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.desktopMediaQuery = utils.getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+    this.icon = undefined;
+    this.intent = undefined;
+    this.message = undefined;
+    this.size = "m";
+    this.iconSize = 20;
+  }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    if (!Boolean(icon)) {
+      return;
+    }
+    let iconSize = "24";
+    if (this.size === "s") {
+      iconSize = "16";
+    }
+    else if (smallIcon) {
+      iconSize = "20";
+    }
+    icon.setAttribute("size", iconSize);
+  }
+  render() {
+    const className = index$1.classnames("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
+    return (index.h(index.Host, null, index.h("span", { class: className, part: "inline-status" }, this.icon && (index.h("span", { class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { class: "inline-status__message" }, this.message))));
+  }
+};
+SwirlInlineStatus.style = swirlInlineStatusCss;
+
+exports.swirl_inline_status = SwirlInlineStatus;

package/dist/cjs/swirl-lightbox.cjs.entry.js

@@ -0,0 +1,237 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
+const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlLightboxCss = ":host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden=\"true\"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.6)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__menu-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__menu-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}.lightbox__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.lightbox__meta{max-width:18rem}}.lightbox__thumbnail{display:inline-flex;flex-shrink:0}.lightbox__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}";
+
+const SwirlLightbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dragging = false;
+    this.mediaPlayers = [];
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onDownloadButtonClick = () => {
+      this.slides[this.activeSlideIndex]?.download();
+      this.menu.close();
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+      else if (event.code === "ArrowLeft") {
+        this.onPreviousSlideClick();
+      }
+      else if (event.code === "ArrowRight") {
+        this.onNextSlideClick();
+      }
+    };
+    this.onNextSlideClick = () => {
+      this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
+    };
+    this.onPreviousSlideClick = () => {
+      this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
+    };
+    this.registerSlides = () => {
+      this.slides = Array.from(this.el.children).filter((el) => el.tagName === "SWIRL-FILE-VIEWER");
+      this.setSlideAttributes();
+      this.updateMediaPlayers();
+    };
+    this.onPointerDown = (event) => {
+      this.dragging = true;
+      this.dragStartPosition =
+        event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+      this.slides.forEach((slide) => {
+        slide.style.transition = "none";
+      });
+    };
+    this.onPointerMove = async (event) => {
+      const isMultiTouch = !(event instanceof MouseEvent) && event.touches.length > 1;
+      const imageViewer = this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image");
+      const showsZoomedImage = Boolean(imageViewer)
+        ? (await imageViewer.getZoom()) > 1
+        : false;
+      if (isMultiTouch || showsZoomedImage) {
+        return;
+      }
+      if (this.dragging) {
+        event.preventDefault();
+        const deltaX = event instanceof MouseEvent
+          ? event.clientX - this.dragStartPosition
+          : event.touches[0].clientX - this.dragStartPosition;
+        this.slides.forEach((slide) => {
+          const pixelOffset = this.activeSlideIndex * slide.getBoundingClientRect().width;
+          this.dragDelta = deltaX;
+          slide.style.transform = `translate3d(${(-pixelOffset + this.dragDelta) / 16}rem, 0, 0)`;
+        });
+      }
+    };
+    this.onPointerUp = () => {
+      this.dragging = false;
+      this.dragStartPosition = undefined;
+      const dragRatio = this.dragDelta /
+        this.slides[this.activeSlideIndex].getBoundingClientRect().width;
+      this.dragDelta = 0;
+      const shouldMoveToPreviousSlide = dragRatio > 0.2;
+      const shouldMoveToNextSlide = dragRatio < -0.2;
+      this.slides.forEach((slide) => {
+        slide.style.transition = "";
+      });
+      if (shouldMoveToPreviousSlide) {
+        this.onPreviousSlideClick();
+      }
+      else if (shouldMoveToNextSlide) {
+        this.onNextSlideClick();
+      }
+      else {
+        this.resetSlidePositions();
+      }
+    };
+    this.closeButtonLabel = "Close modal";
+    this.downloadButtonLabel = "Download";
+    this.hideMenu = undefined;
+    this.label = undefined;
+    this.menuLabel = "Slide options";
+    this.menuTriggerLabel = "Open slide menu";
+    this.nextSlideButtonLabel = "Next slide";
+    this.previousSlideButtonLabel = "Previous slide";
+    this.activeSlideIndex = 0;
+    this.closing = false;
+    this.slides = undefined;
+  }
+  componentWillLoad() {
+    this.registerSlides();
+  }
+  componentDidLoad() {
+    this.modal = new a11yDialog_esm.A11yDialog(this.modalEl);
+    this.activateSlide(0);
+  }
+  disconnectedCallback() {
+    this.modal?.destroy();
+    this.unlockBodyScroll();
+  }
+  /**
+   * Open the lightbox.
+   */
+  async open() {
+    this.modal.show();
+    this.lockBodyScroll();
+    this.activateSlide(this.activeSlideIndex || 0);
+  }
+  /**
+   * Close the lightbox.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.resetImageZoom();
+      this.closing = false;
+    }, 150);
+  }
+  /**
+   * Activate a slide.
+   * @param newActiveSlideIndex
+   */
+  async activateSlide(newActiveSlideIndex) {
+    this.menu?.close?.();
+    this.dragging = false;
+    this.activeSlideIndex = newActiveSlideIndex;
+    this.slides.forEach((slide, index) => {
+      if (index === this.activeSlideIndex) {
+        slide.removeAttribute("aria-hidden");
+        slide.setAttribute("active", "true");
+      }
+      else if (index === this.activeSlideIndex - 1 ||
+        index === this.activeSlideIndex + 1) {
+        slide.setAttribute("aria-hidden", "true");
+        slide.setAttribute("active", "true");
+      }
+      else {
+        slide.setAttribute("aria-hidden", "true");
+      }
+      slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+    // wait for slide animation before deactivating the slide
+    setTimeout(() => {
+      this.slides.forEach((slide, index) => {
+        if (index !== this.activeSlideIndex &&
+          index !== this.activeSlideIndex - 1 &&
+          index !== this.activeSlideIndex + 1) {
+          slide.setAttribute("active", "false");
+        }
+      });
+    }, 300);
+    this.stopAllMediaPlayers();
+    this.updateMediaPlayers();
+    this.resetImageZoom();
+  }
+  setSlideAttributes() {
+    this.slides.forEach((slide) => {
+      slide.setAttribute("active", "false");
+      slide.setAttribute("aria-label", slide.file);
+      slide.setAttribute("aria-roledescription", "slide");
+      slide.setAttribute("role", "group");
+    });
+  }
+  resetSlidePositions() {
+    this.slides.forEach((slide) => {
+      slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+  }
+  getCurrentFileName() {
+    return this.slides[this.activeSlideIndex]?.file?.split("/").pop();
+  }
+  getCurrentFileType() {
+    return this.slides[this.activeSlideIndex]?.type;
+  }
+  getCurrentThumbnailUrl() {
+    return this.slides[this.activeSlideIndex]?.thumbnailUrl;
+  }
+  lockBodyScroll() {
+    bodyScrollLock_esm.disableBodyScroll(this.el);
+  }
+  unlockBodyScroll() {
+    bodyScrollLock_esm.enableBodyScroll(this.el);
+  }
+  updateMediaPlayers() {
+    const mediaPlayers = utils.querySelectorAllDeep(this.el, "video");
+    this.mediaPlayers = mediaPlayers;
+  }
+  stopAllMediaPlayers() {
+    this.mediaPlayers.forEach((mediaPlayer) => mediaPlayer.pause());
+  }
+  resetImageZoom() {
+    this.slides.forEach((slide) => {
+      const imageViewer = slide?.shadowRoot?.querySelector("swirl-file-viewer-image");
+      if (Boolean(imageViewer)) {
+        imageViewer.resetZoom();
+      }
+    });
+  }
+  render() {
+    const showPagination = this.slides.length > 1;
+    const currentFileName = this.getCurrentFileName();
+    const currentFileType = this.getCurrentFileType();
+    const currentThumbnailUrl = this.getCurrentThumbnailUrl();
+    const className = index$1.classnames("lightbox", {
+      "lightbox--closing": this.closing,
+    });
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "lightbox__body", role: "document" }, index.h("header", { class: "lightbox__header" }, index.h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", null)), !this.hideMenu && (index.h("swirl-popover-trigger", { popover: this.menu }, index.h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", null))))), index.h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, index.h("slot", { onSlotchange: this.registerSlides }))), index.h("div", { class: "lightbox__controls" }, index.h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", null)), index.h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, index.h("swirl-icon-arrow-right", null))), showPagination && (index.h("span", { class: "lightbox__pagination" }, index.h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", null, index.h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), index.h("div", { class: "lightbox__file-info" }, index.h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), index.h("swirl-separator", null), index.h("swirl-action-list", null, index.h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), index.h("slot", { name: "menu-items" }))))))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlLightbox.style = swirlLightboxCss;
+
+exports.swirl_lightbox = SwirlLightbox;

package/dist/cjs/swirl-link.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlLinkCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}";
+
+const SwirlLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.color = "default";
+    this.href = undefined;
+    this.label = undefined;
+    this.target = undefined;
+  }
+  render() {
+    const className = index$1.classnames("link", `link--color-${this.color}`);
+    return (index.h(index.Host, null, index.h("a", { class: className, href: this.href, part: "link", target: this.target }, this.label)));
+  }
+};
+SwirlLink.style = swirlLinkCss;
+
+exports.swirl_link = SwirlLink;

package/dist/cjs/swirl-list.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+
+const swirlListCss = ":host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:\"•\"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) \".\";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) \".\";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidRender() {
+    const children = Array.from(this.containerEl.children);
+    if (children.some((child) => !["UL", "OL"].includes(child.tagName))) {
+      console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.");
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "swirl-list", ref: (el) => (this.containerEl = el) }, index.h("slot", null))));
+  }
+};
+SwirlList.style = swirlListCss;
+
+exports.swirl_list = SwirlList;

package/dist/cjs/swirl-menu-item.cjs.entry.js

@@ -0,0 +1,117 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const utils = require('./utils-2b6367e4.js');
+const index$1 = require('./index-2ddd0598.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 = utils.closestPassShadow(this.el, "swirl-menu");
+    this.rootMenu = utils.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() {
+    const badge = Boolean(this.subMenu?.value)
+      ? Array.from(this.subMenu?.querySelectorAll("swirl-menu-item") || []).find((item) => item.value === this.subMenu?.value)?.label
+      : undefined;
+    return (index.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() {
+    return (index.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: this.parentMenu?.value === this.value, swirlAriaRole: "menuitemradio", value: this.value }));
+  }
+  render() {
+    const className = index$1.classnames("menu-item", {
+      "menu-item--expanded": this.expanded,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: className }, this.parentMenu?.variant === "selection"
+      ? this.renderOptionListItem()
+      : this.renderActionListItem(), index.h("slot", { onSlotchange: this.onSlotChange }))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "expanded": ["watchExpanded"]
+  }; }
+};
+SwirlMenuItem.style = swirlMenuItemCss;
+
+exports.swirl_menu_item = SwirlMenuItem;