@getflip/swirl-components 0.483.0 → 0.484.0

package/dist/types/components.d.ts

@@ -28,7 +28,7 @@ import { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
 import { SwirlDataCellIntent } from "./components/swirl-data-cell/swirl-data-cell";
 import { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 import { SwirlDialogIntent } from "./components/swirl-dialog/swirl-dialog";
-import { SwirlDialogToggleEvent } from "./utils";
+import { SwirlCursor, SwirlDialogToggleEvent } from "./utils";
 import { SwirlEmojiSize } from "./components/swirl-emoji/swirl-emoji.types";
 import { SwirlButtonVariant as SwirlButtonVariant1 } from "./components/swirl-button/swirl-button";
 import { SwirlFileViewerPdfViewMode, SwirlFileViewerPdfZoom } from "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf";
@@ -110,7 +110,7 @@ export { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
 export { SwirlDataCellIntent } from "./components/swirl-data-cell/swirl-data-cell";
 export { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 export { SwirlDialogIntent } from "./components/swirl-dialog/swirl-dialog";
-export { SwirlDialogToggleEvent } from "./utils";
+export { SwirlCursor, SwirlDialogToggleEvent } from "./utils";
 export { SwirlEmojiSize } from "./components/swirl-emoji/swirl-emoji.types";
 export { SwirlButtonVariant as SwirlButtonVariant1 } from "./components/swirl-button/swirl-button";
 export { SwirlFileViewerPdfViewMode, SwirlFileViewerPdfZoom } from "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf";
@@ -5337,6 +5337,10 @@ export namespace Components {
     }
     interface SwirlThumbnail {
         "alt": string;
+        /**
+          * @default "pointer"
+         */
+        "cursor"?: SwirlCursor;
         /**
           * @default "<swirl-icon-crop></swirl-icon-crop>"
          */
@@ -5345,16 +5349,33 @@ export namespace Components {
           * @default "Edit"
          */
         "editButtonLabel"?: string;
+        "error"?: boolean;
         /**
           * @default "landscape"
          */
         "format"?: SwirlThumbnailFormat;
         "interactive"?: boolean;
+        /**
+          * @default "More actions"
+         */
+        "menuButtonLabel"?: string;
+        /**
+          * @default "<swirl-icon-visibility></swirl-icon-visibility>"
+         */
+        "openButtonIcon"?: string;
+        /**
+          * @default "Open"
+         */
+        "openButtonLabel"?: string;
         "progress"?: number;
         /**
           * @default "Loading progress"
          */
         "progressLabel"?: string;
+        /**
+          * @default "<swirl-icon-delete></swirl-icon-delete>"
+         */
+        "removeButtonIcon"?: string;
         /**
           * @default "Remove"
          */
@@ -14994,6 +15015,10 @@ declare namespace LocalJSX {
     }
     interface SwirlThumbnail {
         "alt": string;
+        /**
+          * @default "pointer"
+         */
+        "cursor"?: SwirlCursor;
         /**
           * @default "<swirl-icon-crop></swirl-icon-crop>"
          */
@@ -15002,19 +15027,36 @@ declare namespace LocalJSX {
           * @default "Edit"
          */
         "editButtonLabel"?: string;
+        "error"?: boolean;
         /**
           * @default "landscape"
          */
         "format"?: SwirlThumbnailFormat;
         "interactive"?: boolean;
+        /**
+          * @default "More actions"
+         */
+        "menuButtonLabel"?: string;
         "onEdit"?: (event: SwirlThumbnailCustomEvent<MouseEvent>) => void;
         "onRemove"?: (event: SwirlThumbnailCustomEvent<MouseEvent>) => void;
         "onThumbnailClick"?: (event: SwirlThumbnailCustomEvent<MouseEvent>) => void;
+        /**
+          * @default "<swirl-icon-visibility></swirl-icon-visibility>"
+         */
+        "openButtonIcon"?: string;
+        /**
+          * @default "Open"
+         */
+        "openButtonLabel"?: string;
         "progress"?: number;
         /**
           * @default "Loading progress"
          */
         "progressLabel"?: string;
+        /**
+          * @default "<swirl-icon-delete></swirl-icon-delete>"
+         */
+        "removeButtonIcon"?: string;
         /**
           * @default "Remove"
          */
@@ -17896,12 +17938,18 @@ declare namespace LocalJSX {
     }
     interface SwirlThumbnailAttributes {
         "alt": string;
+        "cursor": SwirlCursor;
         "editButtonIcon": string;
         "editButtonLabel": string;
+        "error": boolean;
         "format": SwirlThumbnailFormat;
         "interactive": boolean;
+        "menuButtonLabel": string;
+        "openButtonIcon": string;
+        "openButtonLabel": string;
         "progress": number;
         "progressLabel": string;
+        "removeButtonIcon": string;
         "removeButtonLabel": string;
         "showEditButton": boolean;
         "showRemoveButton": boolean;

package/dist/types/index.d.ts

@@ -8,4 +8,4 @@ export { SwirlTableDropRowEvent } from "./components/swirl-table/swirl-table";
 export { SwirlOSTheme, SwirlOSThemeChangeEventData, SwirlThemeProviderConfig, SwirlThemeProviderStorage, SwirlTheme as Theme, SwirlThemeDesignToken as ThemeDesignToken, SwirlThemeIcon as ThemeIcon, SwirlThemeImage as ThemeImage, SwirlThemeRgbaColor as ThemeRgbaColor, SwirlThemes as Themes, } from "./components/swirl-theme-provider/swirl-theme-provider.types";
 export { SwirlTreeViewItemKeyboardMoveEvent } from "./components/swirl-tree-view-item/swirl-tree-view-item";
 export { SwirlTreeViewCanDropHandler, SwirlTreeViewDropItemEvent, } from "./components/swirl-tree-view/swirl-tree-view";
-export { SwirlDialogToggleEvent } from "./utils";
+export { SwirlCursor, SwirlDialogToggleEvent } from "./utils";

package/dist/types/utils/body-scroll-lock.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Body scroll lock utility.
+ *
+ * - Non-iOS: sets `overflow: hidden` on body
+ * - iOS: uses `position: fixed` + scroll position preservation
+ *   (iOS Safari ignores `overflow: hidden` on body)
+ *
+ * Uses reference counting so multiple simultaneous locks are safe.
+ */
+export declare function disableBodyScroll(targetElement: Element | null | undefined): void;
+export declare function enableBodyScroll(targetElement: Element | null | undefined): void;

package/dist/types/utils.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from "./stencil-public-runtime";
+export type SwirlCursor = "auto" | "default" | "none" | "context-menu" | "help" | "pointer" | "progress" | "wait" | "cell" | "crosshair" | "text" | "vertical-text" | "alias" | "copy" | "move" | "no-drop" | "not-allowed" | "grab" | "grabbing" | "e-resize" | "n-resize" | "ne-resize" | "nw-resize" | "s-resize" | "se-resize" | "sw-resize" | "w-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "col-resize" | "row-resize" | "all-scroll" | "zoom-in" | "zoom-out";
 export type SwirlDialogToggleEvent = {
     newState: "open" | "closed";
     dialog: HTMLDialogElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.483.0",
+  "version": "0.484.0",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -48,7 +48,6 @@
     "@stencil/core": "4.43.1",
     "a11y-dialog": "7.5.2",
     "balance-text": "3.3.1",
-    "body-scroll-lock": "4.0.0-beta.0",
     "classnames": "2.3.1",
     "color2k": "2.0.0",
     "date-fns": "2.29.3",
@@ -77,7 +76,6 @@
     "@storybook/addon-themes": "10.2.11",
     "@storybook/html-vite": "10.2.11",
     "@types/autoprefixer": "10.2.0",
-    "@types/body-scroll-lock": "3.1.0",
     "@types/debounce-promise": "3.1.5",
     "@types/file-saver": "2.0.5",
     "@types/jest": "27.5.2",

package/vscode-data.json

@@ -24865,6 +24865,120 @@
           "name": "alt",
           "description": ""
         },
+        {
+          "name": "cursor",
+          "description": "",
+          "values": [
+            {
+              "name": "alias"
+            },
+            {
+              "name": "all-scroll"
+            },
+            {
+              "name": "auto"
+            },
+            {
+              "name": "cell"
+            },
+            {
+              "name": "col-resize"
+            },
+            {
+              "name": "context-menu"
+            },
+            {
+              "name": "copy"
+            },
+            {
+              "name": "crosshair"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "e-resize"
+            },
+            {
+              "name": "ew-resize"
+            },
+            {
+              "name": "grab"
+            },
+            {
+              "name": "grabbing"
+            },
+            {
+              "name": "help"
+            },
+            {
+              "name": "move"
+            },
+            {
+              "name": "n-resize"
+            },
+            {
+              "name": "ne-resize"
+            },
+            {
+              "name": "nesw-resize"
+            },
+            {
+              "name": "no-drop"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "not-allowed"
+            },
+            {
+              "name": "ns-resize"
+            },
+            {
+              "name": "nw-resize"
+            },
+            {
+              "name": "nwse-resize"
+            },
+            {
+              "name": "pointer"
+            },
+            {
+              "name": "progress"
+            },
+            {
+              "name": "row-resize"
+            },
+            {
+              "name": "s-resize"
+            },
+            {
+              "name": "se-resize"
+            },
+            {
+              "name": "sw-resize"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "vertical-text"
+            },
+            {
+              "name": "w-resize"
+            },
+            {
+              "name": "wait"
+            },
+            {
+              "name": "zoom-in"
+            },
+            {
+              "name": "zoom-out"
+            }
+          ]
+        },
         {
           "name": "edit-button-icon",
           "description": ""
@@ -24873,6 +24987,10 @@
           "name": "edit-button-label",
           "description": ""
         },
+        {
+          "name": "error",
+          "description": ""
+        },
         {
           "name": "format",
           "description": "",
@@ -24892,6 +25010,18 @@
           "name": "interactive",
           "description": ""
         },
+        {
+          "name": "menu-button-label",
+          "description": ""
+        },
+        {
+          "name": "open-button-icon",
+          "description": ""
+        },
+        {
+          "name": "open-button-label",
+          "description": ""
+        },
         {
           "name": "progress",
           "description": ""
@@ -24900,6 +25030,10 @@
           "name": "progress-label",
           "description": ""
         },
+        {
+          "name": "remove-button-icon",
+          "description": ""
+        },
         {
           "name": "remove-button-label",
           "description": ""

package/dist/cjs/bodyScrollLock.esm-DMDeaEpJ.js

@@ -1,256 +0,0 @@
-'use strict';
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-// Older browsers don't support event options, feature detect it.
-
-// Adopted and modified solution from Bohdan Didukh (2017)
-// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
-
-var hasPassiveEvents = false;
-if (typeof window !== 'undefined') {
-  var passiveTestOptions = {
-    get passive() {
-      hasPassiveEvents = true;
-      return undefined;
-    }
-  };
-  window.addEventListener('testPassive', null, passiveTestOptions);
-  window.removeEventListener('testPassive', null, passiveTestOptions);
-}
-
-var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
-
-
-var locks = [];
-var documentListenerAdded = false;
-var initialClientY = -1;
-var previousBodyOverflowSetting = void 0;
-var previousBodyPosition = void 0;
-var previousBodyPaddingRight = void 0;
-
-// returns true if `el` should be allowed to receive touchmove events.
-var allowTouchMove = function allowTouchMove(el) {
-  return locks.some(function (lock) {
-    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
-      return true;
-    }
-
-    return false;
-  });
-};
-
-var preventDefault = function preventDefault(rawEvent) {
-  var e = rawEvent || window.event;
-
-  // For the case whereby consumers adds a touchmove event listener to document.
-  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
-  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
-  // the touchmove event on document will break.
-  if (allowTouchMove(e.target)) {
-    return true;
-  }
-
-  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
-  if (e.touches.length > 1) return true;
-
-  if (e.preventDefault) e.preventDefault();
-
-  return false;
-};
-
-var setOverflowHidden = function setOverflowHidden(options) {
-  // If previousBodyPaddingRight is already set, don't set it again.
-  if (previousBodyPaddingRight === undefined) {
-    var _reserveScrollBarGap = false;
-    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
-
-    if (_reserveScrollBarGap && scrollBarGap > 0) {
-      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
-      previousBodyPaddingRight = document.body.style.paddingRight;
-      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
-    }
-  }
-
-  // If previousBodyOverflowSetting is already set, don't set it again.
-  if (previousBodyOverflowSetting === undefined) {
-    previousBodyOverflowSetting = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-  }
-};
-
-var restoreOverflowSetting = function restoreOverflowSetting() {
-  if (previousBodyPaddingRight !== undefined) {
-    document.body.style.paddingRight = previousBodyPaddingRight;
-
-    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
-    // can be set again.
-    previousBodyPaddingRight = undefined;
-  }
-
-  if (previousBodyOverflowSetting !== undefined) {
-    document.body.style.overflow = previousBodyOverflowSetting;
-
-    // Restore previousBodyOverflowSetting to undefined
-    // so setOverflowHidden knows it can be set again.
-    previousBodyOverflowSetting = undefined;
-  }
-};
-
-var setPositionFixed = function setPositionFixed() {
-  return window.requestAnimationFrame(function () {
-    // If previousBodyPosition is already set, don't set it again.
-    if (previousBodyPosition === undefined) {
-      previousBodyPosition = {
-        position: document.body.style.position,
-        top: document.body.style.top,
-        left: document.body.style.left
-      };
-
-      // Update the dom inside an animation frame 
-      var _window = window,
-          scrollY = _window.scrollY,
-          scrollX = _window.scrollX,
-          innerHeight = _window.innerHeight;
-
-      document.body.style.position = 'fixed';
-      document.body.style.top = -scrollY;
-      document.body.style.left = -scrollX;
-
-      setTimeout(function () {
-        return window.requestAnimationFrame(function () {
-          // Attempt to check if the bottom bar appeared due to the position change
-          var bottomBarHeight = innerHeight - window.innerHeight;
-          if (bottomBarHeight && scrollY >= innerHeight) {
-            // Move the content further up so that the bottom bar doesn't hide it
-            document.body.style.top = -(scrollY + bottomBarHeight);
-          }
-        });
-      }, 300);
-    }
-  });
-};
-
-var restorePositionSetting = function restorePositionSetting() {
-  if (previousBodyPosition !== undefined) {
-    // Convert the position from "px" to Int
-    var y = -parseInt(document.body.style.top, 10);
-    var x = -parseInt(document.body.style.left, 10);
-
-    // Restore styles
-    document.body.style.position = previousBodyPosition.position;
-    document.body.style.top = previousBodyPosition.top;
-    document.body.style.left = previousBodyPosition.left;
-
-    // Restore scroll
-    window.scrollTo(x, y);
-
-    previousBodyPosition = undefined;
-  }
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
-var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
-  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
-};
-
-var handleScroll = function handleScroll(event, targetElement) {
-  var clientY = event.targetTouches[0].clientY - initialClientY;
-
-  if (allowTouchMove(event.target)) {
-    return false;
-  }
-
-  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
-    // element is at the top of its scroll.
-    return preventDefault(event);
-  }
-
-  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
-    // element is at the bottom of its scroll.
-    return preventDefault(event);
-  }
-
-  event.stopPropagation();
-  return true;
-};
-
-var disableBodyScroll = function disableBodyScroll(targetElement, options) {
-  // targetElement must be provided
-  if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
-    return;
-  }
-
-  // disableBodyScroll must not have been called on this targetElement before
-  if (locks.some(function (lock) {
-    return lock.targetElement === targetElement;
-  })) {
-    return;
-  }
-
-  var lock = {
-    targetElement: targetElement,
-    options: {}
-  };
-
-  locks = [].concat(_toConsumableArray(locks), [lock]);
-
-  if (isIosDevice) {
-    setPositionFixed();
-  } else {
-    setOverflowHidden();
-  }
-
-  if (isIosDevice) {
-    targetElement.ontouchstart = function (event) {
-      if (event.targetTouches.length === 1) {
-        // detect single touch.
-        initialClientY = event.targetTouches[0].clientY;
-      }
-    };
-    targetElement.ontouchmove = function (event) {
-      if (event.targetTouches.length === 1) {
-        // detect single touch.
-        handleScroll(event, targetElement);
-      }
-    };
-
-    if (!documentListenerAdded) {
-      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-      documentListenerAdded = true;
-    }
-  }
-};
-
-var enableBodyScroll = function enableBodyScroll(targetElement) {
-  if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
-    return;
-  }
-
-  locks = locks.filter(function (lock) {
-    return lock.targetElement !== targetElement;
-  });
-
-  if (isIosDevice) {
-    targetElement.ontouchstart = null;
-    targetElement.ontouchmove = null;
-
-    if (documentListenerAdded && locks.length === 0) {
-      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-      documentListenerAdded = false;
-    }
-  }
-
-  if (isIosDevice) {
-    restorePositionSetting();
-  } else {
-    restoreOverflowSetting();
-  }
-};
-
-exports.disableBodyScroll = disableBodyScroll;
-exports.enableBodyScroll = enableBodyScroll;

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

@@ -1,49 +0,0 @@
-'use strict';
-
-var index = require('./index-DlHdtZvn.js');
-var index$1 = require('./index-DcAhLZUH.js');
-var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
-require('./utils-UfZG-xPD.js');
-
-const swirlActionListItemCss = () => `:host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-state-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-translucent-low-pressed)}.action-list-item:disabled{cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}`;
-
-const SwirlActionListItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.intent = "default";
-        this.size = "m";
-        this.truncateLabel = true;
-        this.mediaQueryUnsubscribe = () => { };
-    }
-    componentDidLoad() {
-        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-        });
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    forceIconProps(smallIcon) {
-        const icon = this.iconEl?.children[0];
-        const suffix = this.suffixEl?.children[0];
-        icon?.setAttribute("size", smallIcon ? "20" : "24");
-        const iconBadge = this.iconBadgeEl?.children[0];
-        iconBadge?.setAttribute("size", "xs");
-        iconBadge?.setAttribute("variant", "dot");
-        if (suffix?.tagName === "SWIRL-TAG")
-            return;
-        suffix?.setAttribute("size", smallIcon ? "20" : "24");
-    }
-    render() {
-        const showBadge = Boolean(this.badge);
-        const showIconBadge = Boolean(this.iconBadge);
-        const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
-        const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
-        const className = index$1.classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-        return (index.h(index.Host, { key: 'a8ec31c9d8234291c8379e9b3521f91c176e811e' }, index.h("button", { key: '3018e2f041a84b321b9cef388c85c59afa518b79', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, index.h("slot", { key: '34bebbac07562f76eb29e1b93900019a75143add', name: "avatar" }), this.icon && (index.h("span", { key: '15b82e7eb50d334254f1f6da7d55cecad4706475', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '0c4c8fc78fd13d707cb33dab2309c85f97a4e201', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), index.h("span", { key: 'c3c1a34a74a8dfbec8a82cb3fc797ce03e6ddd55', class: "action-list-item__label-container" }, index.h("span", { key: '9626f3a01f7c95da947b7665e7c97a9542f48cfb', class: "action-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" } }, this.label), this.description && (index.h("span", { key: 'e002430aa42252b68c1550af4d2c75dd744f78ee', class: "action-list-item__description" }, this.description))), showBadge && (index.h("span", { key: '1aca4916c0f3fca1601c49db73ae72516520572f', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (index.h("span", { key: 'c355f7123d3d5deba0a72ca3ee1142ef3210d96e', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, index.h("slot", { key: 'd3d6cac336709a2592f637971f0479587cbf0dee', name: "suffix" }))))));
-    }
-    get el() { return index.getElement(this); }
-};
-SwirlActionListItem.style = swirlActionListItemCss();
-
-exports.swirl_action_list_item = SwirlActionListItem;