@getflip/swirl-components 0.335.0 → 0.337.0

package/dist/collection/components/swirl-modal/swirl-modal.js

@@ -25,6 +25,9 @@ export class SwirlModal {
         this.onCloseButtonClick = () => {
             this.close();
         };
+        this.onFullscreenButtonClick = () => {
+            this.setFullscreen(!this.isFullscreen);
+        };
         this.onSidebarCloseButtonClick = () => {
             this.hideSidebarContent = true;
             this.sidebarClose.emit();
@@ -71,6 +74,8 @@ export class SwirlModal {
         };
         this.closable = true;
         this.closeButtonLabel = "Close modal";
+        this.fullscreenEnableButtonLabel = "Full screen";
+        this.fullscreenDisableButtonLabel = "Exit full screen";
         this.height = undefined;
         this.hideCloseButton = undefined;
         this.hideLabel = undefined;
@@ -94,6 +99,7 @@ export class SwirlModal {
         this.secondaryContentPaddingBlockStart = undefined;
         this.secondaryContentPaddingInlineEnd = undefined;
         this.secondaryContentPaddingInlineStart = undefined;
+        this.showFullscreenButton = undefined;
         this.sidebarLabel = undefined;
         this.sidebarPadded = true;
         this.sidebarFooterPadded = true;
@@ -101,6 +107,8 @@ export class SwirlModal {
         this.hasSidebarCloseButton = undefined;
         this.sidebarCloseButtonLabel = "Close sidebar";
         this.isOpen = false;
+        this.isFullscreen = false;
+        this.isFullscreenTransitioning = false;
         this.closing = false;
         this.hasCustomHeader = undefined;
         this.hasCustomFooter = undefined;
@@ -180,6 +188,15 @@ export class SwirlModal {
             this.closing = false;
         }, 150);
     }
+    async setFullscreen(isFullscreen) {
+        if (this.isFullscreen === isFullscreen) {
+            return;
+        }
+        this.isFullscreenTransitioning = true;
+        this.isFullscreen = isFullscreen;
+        this.toggleFullscreen.emit(this.isFullscreen);
+        setTimeout(() => (this.isFullscreenTransitioning = false), 150);
+    }
     updateCustomFooterStatus() {
         this.hasCustomFooter = Boolean(this.el.querySelector('[slot="custom-footer"]'));
     }
@@ -217,6 +234,8 @@ export class SwirlModal {
         const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
         const className = classnames("modal", `modal--variant-${this.variant}`, {
             "modal--closing": this.closing,
+            "modal--fullscreen": this.isFullscreen,
+            "modal--fullscreen-transitioning": this.isFullscreenTransitioning,
             "modal--has-custom-footer": this.hasCustomFooter,
             "modal--has-custom-header": this.hasCustomHeader,
             "modal--has-header-tools": this.hasHeaderTools,
@@ -237,23 +256,29 @@ export class SwirlModal {
             "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
             "modal--sidebar-scrollable": this.sidebarScrollable,
         });
-        return (h(Host, { key: '1a9eb8a9970023ad99eabf1d17eb759eb75afad2' }, h("section", { key: 'deb32d3563c0393fdacd7bbfb9aa07c0ae397159', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '25b29175d141fe4d010c1585ff8154f88d8b4d9f', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '7ad5e8e10b50ab09792c77c1f3b122d2398612f4', class: "modal__body", style: {
-                "--swirl-modal-max-height": this.maxHeight,
-                "--swirl-modal-height": this.height,
-                minHeight: this.minHeight,
-                maxWidth: this.maxWidth,
-            } }, h("aside", { key: 'fb5853f488161fbb2df6e0ef1bc911d115999e9a', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '3643530a51c304a2a7c4ac1103f1546a4d090618', class: classnames("modal__sidebar-header", {
+        return (h(Host, { key: '2b23bee007479c77c1d9b2933b2c4d4810c53c32' }, h("section", { key: '64d583fdc341ab721810f81054f82673c1ee382f', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: 'f0c219caceeb4a4f71738c2d3fc263c7beb4c208', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '1329ab999eeddbe8d28a96c972f3789560cd8c1d', class: "modal__body", style: !this.isFullscreen
+                ? {
+                    "--swirl-modal-max-height": this.maxHeight,
+                    "--swirl-modal-height": this.height,
+                    minHeight: this.minHeight,
+                    maxWidth: this.maxWidth,
+                }
+                : {} }, h("aside", { key: '63f669b4ad672558db1d1fa6bc3b7b97454dc78b', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'd7eead9a08be568d954af5aa2d2e68e3c67db59c', class: classnames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '29aa13a04ef83133049eb6f49f4578ccd93cfc6b', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: 'b92e3d38bc6559e9868e5f75e3aaf296e78c9696', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '8bf37fa2dd52477ca828758ace0ef7b18bb945bb', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'c1c0873ff28611a5cc5ed9705322e86b75b67c93', name: "sidebar-content" })), h("div", { key: 'fbebaaf26c3152ce16ee5cd8e82cfc7ca5d8b8b8', class: "modal__sidebar-footer" }, h("slot", { key: '83c9f754a9e5c9063a12bd403476a84b746a96bd', name: "sidebar-footer" }))), h("div", { key: '55d511a2c357da9c2f54caa1981e54ae45519409', class: "modal__main-content" }, h("header", { key: 'fa630f032e937e80bae3aaa03f7f20209bd0728e', class: "modal__custom-header" }, h("slot", { key: '0bdb2933cda72a2013058294c5130c01a7de196f', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '6ca45cec4e99f4a43a54b619757749e3841899b0', class: "modal__header" }, h("div", { key: '7628dcff105c33d18a2baa1fe5c9b98f64ec626e', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '536e9768763548232a010e4ff1c9742989af674b', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '54fbca0f39217bbf7d6d8200b6462eb295a99e43', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '6072ef15fc9c9f8e4d5eac37379aaa658e82f8e1', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '53da064e8995cf4be83e30ba6c5b0e0ca15ffb55', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'd03f908e630b4732731b0f9079f9a2d803569083', name: "sidebar-content" })), h("div", { key: '013734312f1dbded05d40e3f7dbb0f2a82e391ef', class: "modal__sidebar-footer" }, h("slot", { key: 'd2b9d588479058021563e9e898e3429fdd5724aa', name: "sidebar-footer" }))), h("div", { key: '54bf61dd702931a4cfc91548c3f240e7adad0268', class: "modal__main-content" }, h("header", { key: '3fee55ec687e448b15c97f2084c26d098ea82895', class: "modal__custom-header" }, h("slot", { key: 'ad4893a36c51280dc039b9f5fb38c1c5ff219ba3', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '51c21e62a5e8c9addacdf9683e269b082b6d8d69', class: "modal__header" }, h("div", { key: 'a6872ebf5ccd2e94e2727d51e927eb43a3eaa0cf', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'aa957cec58fb976602decedc4b86fdc22f2658a1', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '518b2561a7c6a50a1e7c689fc19184a42307fc8b', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '0152c4b62ccc9e291d262ccf12d15b9a472d5583', class: "modal__content-container", style: {
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '64f5445121a25644bac5226896f23f33854f6b88', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
+                ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
+                : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
+                ? this.fullscreenDisableButtonLabel
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'b30b7e9691d24b0ac0d3a9636a7f79c454c4f139', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '562bb64ba36106327e16ca1f2a5ea336ec45f796', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: '61838be7fb71b6472ee38d02e56535b98df3fd02', class: "modal__primary-content", style: {
+            } }, h("div", { key: 'f2c8bb40bdd191b92b88acff3a96712c9efca717', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: 'fdf89c643852c02c9661d72d8926c120bfe8fa78', class: "modal__header-tools" }, h("slot", { key: '722ac833e1c53029732a806d8aea56b2af195740', name: "header-tools" })), h("div", { key: '5d65274b8121e39358dda35dbf6cbf6b780d3933', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '6e22111e1e0436a8e0d11c20f1faedad1e55e4e2' }))), h("div", { key: '20ee5f4f6ac4b9048081967a10338696329f4134', class: "modal__secondary-content", style: {
+            } }, h("div", { key: '8f87e7a5c7a0904637627e927d86ec2e286408fe', class: "modal__header-tools" }, h("slot", { key: '4097e5d5ec47a737d1f66d5d54297845e6409a87', name: "header-tools" })), h("div", { key: '1c50d0ff133324c69fa717e39d58360a2d112922', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '8a08576a54e4e270c6ac0cb48ddb367bb962fba5' }))), h("div", { key: '9cfecbc1bb7e4e75b7e868fbb2cf098bb41c490e', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -271,7 +296,7 @@ export class SwirlModal {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: '52e7ff912e0ae9470737ff2e7e1bdfa5efbbc886', name: "secondary-content" }))), h("div", { key: '9203acddc3938230cc0f969291fb367ca097b048', class: "modal__custom-footer" }, h("slot", { key: '0565cd9f141112c4d89d7254c7fd4d770eebe47f', name: "custom-footer" })), showControls && (h("footer", { key: '85eac43cf12814b865a0ad924631fe65955e329c', class: "modal__controls" }, h("swirl-button-group", { key: 'dc8eb5bd5fbfd3b2663eb9004be754ee14af9976', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'e39f06e8d355ca92ee4eb90b16be67ef632cbc40', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '1ef4dd744b20a90ab6c1e37233aed06d8edebc6f', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, h("slot", { key: 'bfebcaa9b7bb8c5a8c2b1dca7a966892a9476ae3', name: "secondary-content" }))), h("div", { key: '7ee46134d7e88144004a50106706c9f7ef6afce6', class: "modal__custom-footer" }, h("slot", { key: '2808a25c4d093faea576e39a8f91ed93fbab9197', name: "custom-footer" })), showControls && (h("footer", { key: 'a20d76c251b5a1b4c96adedc61f3775ec0ef1d6f', class: "modal__controls" }, h("swirl-button-group", { key: '79b50ac7dca79c37a5b754755146917596d101a7', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '903d1f7a4d4cbfd71e8183eb52eef9089e1a4082', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '83566b3c0a6202a9702c7d9c0638d5550a127837', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     static get is() { return "swirl-modal"; }
     static get originalStyleUrls() {
@@ -322,6 +347,42 @@ export class SwirlModal {
                 "reflect": false,
                 "defaultValue": "\"Close modal\""
             },
+            "fullscreenEnableButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fullscreen-enable-button-label",
+                "reflect": false,
+                "defaultValue": "\"Full screen\""
+            },
+            "fullscreenDisableButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fullscreen-disable-button-label",
+                "reflect": false,
+                "defaultValue": "\"Exit full screen\""
+            },
             "height": {
                 "type": "string",
                 "mutable": false,
@@ -757,6 +818,23 @@ export class SwirlModal {
                 "attribute": "secondary-content-padding-inline-start",
                 "reflect": false
             },
+            "showFullscreenButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-fullscreen-button",
+                "reflect": false
+            },
             "sidebarLabel": {
                 "type": "string",
                 "mutable": false,
@@ -867,6 +945,8 @@ export class SwirlModal {
     static get states() {
         return {
             "isOpen": {},
+            "isFullscreen": {},
+            "isFullscreenTransitioning": {},
             "closing": {},
             "hasCustomHeader": {},
             "hasCustomFooter": {},
@@ -884,6 +964,21 @@ export class SwirlModal {
     }
     static get events() {
         return [{
+                "method": "toggleFullscreen",
+                "name": "toggleFullscreen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
                 "method": "modalClose",
                 "name": "modalClose",
                 "bubbles": true,
@@ -1024,6 +1119,27 @@ export class SwirlModal {
                     "text": "Close the modal. Pass `true` to force close even if the modal is not closable.",
                     "tags": []
                 }
+            },
+            "setFullscreen": {
+                "complexType": {
+                    "signature": "(isFullscreen: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "isFullscreen",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/swirl-modal/swirl-modal.spec.js

@@ -75,7 +75,7 @@ describe("swirl-modal", () => {
             components: [SwirlModal],
             html: `
         <swirl-modal label="Dialog" sidebar-label="Sidebar label" has-sidebar-close-button="true">
-          Main Content 
+          Main Content
 
           <swirl-box slot="sidebar-content">
             <swirl-text>
@@ -147,4 +147,37 @@ describe("swirl-modal", () => {
         closeButton.click();
         expect(sidebarCloseSpy).toHaveBeenCalled();
     });
+    it("renders fullscreen button when showFullscreenButton is true", async () => {
+        const page = await newSpecPage({
+            components: [SwirlModal],
+            html: `<swirl-modal label="Dialog" show-fullscreen-button="true">Content</swirl-modal>`,
+        });
+        const fullscreenButton = page.root.querySelector(".modal__fullscreen-button");
+        expect(fullscreenButton).not.toBeNull();
+        expect(fullscreenButton.getAttribute("label")).toEqual("Full screen");
+        expect(fullscreenButton.getAttribute("icon")).toEqual("<swirl-icon-open-in-full></swirl-icon-open-in-full>");
+    });
+    it("toggles the fullscreen state when clicking the fullscreen button", async () => {
+        const page = await newSpecPage({
+            components: [SwirlModal],
+            html: `<swirl-modal label="Dialog" show-fullscreen-button="true">Content</swirl-modal>`,
+        });
+        const fullscreenButton = page.root.querySelector(".modal__fullscreen-button");
+        const spy = jest.fn();
+        page.root.addEventListener("toggleFullscreen", spy);
+        expect(page.root.querySelector(".modal--fullscreen")).toBeNull();
+        fullscreenButton.click();
+        await page.waitForChanges();
+        expect(page.root.querySelector(".modal--fullscreen")).not.toBeNull();
+        expect(fullscreenButton.getAttribute("label")).toEqual("Exit full screen");
+        expect(fullscreenButton.getAttribute("icon")).toEqual("<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>");
+        fullscreenButton.click();
+        await page.waitForChanges();
+        expect(page.root.querySelector(".modal--fullscreen")).toBeNull();
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy.mock.calls[0][0].detail).toBe(true);
+        expect(spy.mock.calls[1][0].detail).toBe(false);
+        expect(fullscreenButton.getAttribute("label")).toEqual("Full screen");
+        expect(fullscreenButton.getAttribute("icon")).toEqual("<swirl-icon-open-in-full></swirl-icon-open-in-full>");
+    });
 });

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

@@ -340,7 +340,7 @@ export class SwirlOptionList {
     render() {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
-        return (h(Host, { key: '003cbff6423c2009a237caf4e9ea62924b961c43' }, h("swirl-visually-hidden", { key: '4ba3e72997bc2c7583c15ff4fdc68d00ce87dfa0', role: "alert" }, this.assistiveText), h("div", { key: '903a5bcf61080d8095ceb1a0d4f0369b02f765c2', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", { key: 'aeb537f31f17b798410e39f3fcc1f3b3112e2fad', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '2512eba831f2e9f89ae94d49a6ae5037a7e837de' }, h("swirl-visually-hidden", { key: '62fece91e90526b0ea3e116980998ee00c4eeeb7', role: "alert" }, this.assistiveText), h("div", { key: 'a4f59b6756d83ac497caa5fa6b6fa34ab5bdc0a0', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", { key: '1d807503b36f418ba2ab675b7f14265445c1843c', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-option-list"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js

@@ -68,9 +68,9 @@ export class SwirlOptionListItem {
             "option-list-item--selected": this.selected,
             "option-list-item--show-avatar": showAvatar,
         });
-        return (h(Host, { key: 'f10b9d5998e571b30de2b9755b20aa9ff6553b7c' }, h("div", { key: '7351b14adf1f9b8e7f6c8fe95bff82703e3cb0c8', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        return (h(Host, { key: '2e58235788d8911634f33eb928f1c5292305cb26' }, h("div", { key: 'dd9066a9241582ab59b4d4856d0a6b40527d5139', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
                 ? `option-list-item-${this.elementId}-description`
-                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '28b5bf751e4b6f040e217976431cc10ccc18b2ab', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '17d8ee99d49bc39e9c29acbdefa6a33ac1fe011f', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: 'c96a9aa51eb3d24d8d2981e72f57258ec104a4f0', class: "option-list-item__checkbox" }, h("span", { key: 'e5e16760dac9d5f8fd32dfc1a87b276bac40e218', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '19678c01717c67032d419f1c081c79dd3d2d86d2', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: '206a3376c0fc0cc5fc251417d3807cb9d021dcc8', class: "option-list-item__avatar" }, h("slot", { key: 'd017728bbc40c000fd35fb1baa92ea4c01f730a2', name: "avatar" })), h("span", { key: '0fd4cec5ad5274106c2db52c304bc1877bbb03fd', class: "option-list-item__label-container" }, h("span", { key: 'b3e61b55ed5e5a0f40a59ee5ff6705ba0f170915', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'a789b71d53ce36c63aacba3136d29e778da6c506', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: 'cc615418e02db15288d1038518c032216db71025', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '6f06dee5b1cd618ad9fabb61b6bf9f4abf07fa0a', size: this.iconSize })))), this.allowDrag && (h("button", { key: '1bad552ed0a4324962a5e4735bc4330bb44cd3ea', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: '124518bd0178c8e3e8021b5519ae751213f2e99a', size: this.iconSize })))));
+                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: 'd142e25b8e6e808d36aa9d1bb0e6bab507af0f7f', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '018097420675c99a8f705161fcfdeb516a630eee', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '9d075be31274cb2c6d01028e3598c9322805dc50', class: "option-list-item__checkbox" }, h("span", { key: '2f37bf57fb3add11ca8da59a605ff16627b75cff', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: 'cc04b88fd0337f9e16930ba052001273ab17ee1f', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'b26ce1982dbd5aeea140019b43fb32f94b5b1cbe', class: "option-list-item__avatar" }, h("slot", { key: '5dbbd9bc9e65e51318c6ddd7974fbcf66e83987d', name: "avatar" })), h("span", { key: '1e8989c708ad67ed232dd31f4818535886a1816f', class: "option-list-item__label-container" }, h("span", { key: '507200c84ef3547c75cac11f4479c3340c44c326', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '2603281d05a2453051643964bad5148a4330e863', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '2339027ce2cd215e61cddf5abe44015bc0397c8a', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '1937c8bfd793fd7f8b193f66b51b8c716cee1fc9', size: this.iconSize })))), this.allowDrag && (h("button", { key: '1afd8dcae377cb02fc5941e1ab5ee5a6020a5fb6', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: 'd12151e89ab0f86cb618db201ed0333b11669b6e', size: this.iconSize })))));
     }
     static get is() { return "swirl-option-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-option-list-section/swirl-option-list-section.js

@@ -10,7 +10,7 @@ export class SwirlOptionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: 'f5832c96333784d5e8ea2eb3ead657a3c7523dc3' }, this.hasSeparator && (h("swirl-separator", { key: 'ca93eb58cc46a3fb1182f1016b0f9a1bda10f4b9', spacing: this.separatorSpacing })), h("div", { key: '79ab591521d0784b01e8fdc044e0072497a8f44d', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '008e6db3d5b2a3723c9a005a6ea6a8654731d6c0', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: 'e3e78c76de534757bd8973c6fb81c8da7883407c', spacing: this.spacing, align: "stretch" }, h("slot", { key: '37884f1e3df673c8ac1d5730c511438634e23b43' })))));
+        return (h(Host, { key: '20c8027068e061e80b6dbb82403be87add89055a' }, this.hasSeparator && (h("swirl-separator", { key: 'a1fa9cef1579a72b93433d56bc15569323388fc8', spacing: this.separatorSpacing })), h("div", { key: '7db7df72a5a8775b948b32d44b11ba5d4e501a6a', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '02cd99f65d69d70287785e60d574a1dd08544ed3', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: 'fa3f0499cd11498a6abc9d626c54228813d48fc0', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'f986decc2419b6c20f2de77e831d0d5dc64ca877' })))));
     }
     static get is() { return "swirl-option-list-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-pagination/swirl-pagination.js

@@ -81,7 +81,7 @@ export class SwirlPagination {
         const showDropDown = this.variant === "advanced";
         const ariaPageLabel = `${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`;
         const className = classnames("pagination", `pagination--variant-${this.variant}`);
-        return (h(Host, { key: '08c165e0dd8f22f1dd462079afbb904e3f7f50b3' }, h("nav", { key: 'c6fc744fcc8ae4f67f6a5e655ca974962c5cb515', "aria-label": this.label, class: className }, h("ul", { key: 'ee19e8b5b81e9fdf26b0be2a9ac1b277a8d4629a', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: 'eb039a282c427edb7ea44fd2af641b3f88ea1342', class: "pagination__list-item" }, h("label", { key: '7fb991ffd443fe256914638308dee16108ce14f6', class: "pagination__page-size-selection" }, h("swirl-text", { key: '6c02e7b3c8f4b2fc308cdba23cfb75c8bdbb370b', whiteSpace: "inherit" }, this.pageSizeSelectLabel), h("swirl-stack", { key: 'c3941c2f196618e857fff5d7056ff4634a51ea0e', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: '073e9ede82d16fc9b1a118f428c03b507dd969c7', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), h("swirl-icon-expand-more", { key: 'ea7208c33ebd133e84d5e518140bb58137f12bfe', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: '98269dd12133ccf1f48b118aec35d730d0ff05e0', class: "pagination__list-item" }, h("swirl-button", { key: '023beef078ddc519c1ac3806a99d9622246842ed', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), h("li", { key: '6c61b9fef4793d02fbf6f8cc872a73aca704721b', class: "pagination__list-item" }, h("swirl-button", { key: '57440dfac7ee40a3cf58a1078227b228707949e8', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { key: 'd419d0a1786dfc70389d218299656a495cfcb8f6', class: "pagination__list-item" }, h("swirl-button", { key: 'd2bfc26fdeba915ed92bdae39b7a7dfa29b03de3', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), h("li", { key: 'c86fb75f20ee6ec5b5d0299df3c501e8e798b8c6', class: "pagination__list-item" }, h("swirl-button", { key: '79bfcd72e7a97dc01d4ac4bd2531960b618208d8', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
+        return (h(Host, { key: '0402b2a64d56d926253ad477a7be0e3a9a98a561' }, h("nav", { key: '10c8f15e1c67976163ab968947fcea762a76f4d9', "aria-label": this.label, class: className }, h("ul", { key: '58658726f4d916e505f9ac0d84165e5947d441e9', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: '50a0c3572c057b094e109d5122c12fa05a3a19f0', class: "pagination__list-item" }, h("label", { key: '4b2d8c7dd077df50920839933ed7b1af978f54a8', class: "pagination__page-size-selection" }, h("swirl-text", { key: '6a0085737edca1701419cd8ccfec43ff56d6d211', whiteSpace: "inherit" }, this.pageSizeSelectLabel), h("swirl-stack", { key: '174b9b24838db58e6d25d6642cd602525ae22bb1', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: '075ef3ffa1aeea7d6a0eb6a9e634777139fe7400', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), h("swirl-icon-expand-more", { key: '165ff6e18086347955546fdc5b9f47ef4134e694', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: 'ef567d2280438c435a9c9c2cf4edf7632d65cbd0', class: "pagination__list-item" }, h("swirl-button", { key: '82dfda97938179b53553cc81d895496dd0cbfadb', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), h("li", { key: '82e2399b7a8961102f5ba9faf576f7d0e4f59e35', class: "pagination__list-item" }, h("swirl-button", { key: '26b9a4afae8b817ebe519af5db9e79b9fa50286d', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { key: '8f0c607327413a8fd5c4c0f159b6c8fc88eb3bf1', class: "pagination__list-item" }, h("swirl-button", { key: 'a6b7b8bc5ad007fb65327c127ecb5f40fcd3650e', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), h("li", { key: '66f4551ea9a595b80c26af7dbc24cfd7c9b05b04', class: "pagination__list-item" }, h("swirl-button", { key: 'bb19278d4fc1d3f6f7479401fa02a0d87312e197', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
     }
     static get is() { return "swirl-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.js

@@ -181,15 +181,15 @@ export class SwirlPdfReader {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (h(Host, { key: 'e78a93834790fb705a46c9d46230f6555aff17e5' }, h("section", { key: '07a76a9a3ff3f5e7b24950f4c32abb6d8f4f2e79', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '951418d03803cc2fbc4d447296eba560f0a61a63', class: "pdf-reader__body", role: "document" }, h("header", { key: '6590f3e9dd2894a5e42942e867e5d73ba24fdf67', class: "pdf-reader__header" }, h("span", { key: '7b4ae43784541b75c530b32507dc285ca02fd283', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'e5020b5b071b93d17428fd8fc4cfbe336b06be76', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'd67fb7cb78b676746f80248c724b62874c93b870', class: "pdf-reader__label" }, this.label)), h("span", { key: 'dad46d9e4260a681c4b6d9ff19d1023bdb81689e', class: "pdf-reader__header-center" }, h("span", { key: '15392deafb7c4e24595a12cc67a3cb40dca20911', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: 'ae745adac38b228952636f420a7e09e2a7501fc2', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: '8d79291b941f7f13752d30a0c5c28b96702cab20', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: '6f86d1788221308e80d294f182eba8d3b398865f', class: "pdf-reader__zoom-select-container" }, h("select", { key: 'b928a5a6489340e65c4d3f879236602e9ad56888', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: 'bd2620223c70bb6d210a0bb5aae1a55b3ac43433', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: '0100c5c0dcdb8ca41bb4d817db59e7ee41e4d9a1', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '884910223431ca6efc3192986eb4005a4ee0ba6d', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: 'e2b280e30ab50af9ca81ad4b1356468708c89f77', swirlPopover: this.menu }, h("swirl-button", { key: 'd69cf500996ed399dca84deea9fe853084be1b0c', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: 'a886e744daeb6562cebca9f6d6cda3c5e75e1dfd', class: "pdf-reader__floating-tools" }, h("button", { key: '12c4ee28efcbbd0de21abeabdb64891048560833', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: 'f88906a98bc5a8a7c3f093ce530686e4e8b518e2' })), h("button", { key: '4530af82a896ad8fcac2a594db18603ecb2f6880', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: '31ba3cd3aef48717c188b9668741603501305150' })))), h("div", { key: '29287fcf3a321699cf6aa2459cbf1c4e73fc47fd', class: "pdf-reader__content" }, h("nav", { key: 'af5fcd44bc6a54fc7d7cf31474719bb369b61222', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '36b044b81bd39b905322cf631e038343d3f9b2c1' }), !this.loadingThumbnails &&
+        return (h(Host, { key: '053b7aa5a2d2d86daa561cbe58d5c097001f35b5' }, h("section", { key: '5f2f3facfdc59d3068f2baf20ed1a8e9f0c39a1b', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'a8a431d06afa8703f3f1804512a59ae08a49037b', class: "pdf-reader__body", role: "document" }, h("header", { key: 'eab2a3b33ab3d39db136f5af99f49aff95548baa', class: "pdf-reader__header" }, h("span", { key: '3a1b6b4991ecb9b32b1c707cab4b10b5f1f47942', class: "pdf-reader__header-left" }, h("swirl-button", { key: '343c058bb3bf5e059e4587c8f3b079aefe1cf0e1', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'ceb1a95f4a5bae6ba818512281f4e08d919d797d', class: "pdf-reader__label" }, this.label)), h("span", { key: '33b2b8dceb2ef941ea0b9ec3e62a9b45aa65832d', class: "pdf-reader__header-center" }, h("span", { key: 'a887e0ff5b46db26b84301e397ee399350d50653', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: 'b4807125fb5a50ee67a35cef54416a02ab0e889f', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: '69a7f43c71629b20c1251428e59ffe9cf325fda1', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: 'dbf61127314757ecb78b95272072fb2e93fbf96a', class: "pdf-reader__zoom-select-container" }, h("select", { key: 'cce1baedb535709d48f531a513f4c4181858a837', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: 'd9f151d05da8bd8f1116dd16d4f1d296da4db1db', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: 'e0de62d0d1b68ffa35914927d37a804ccaa3e649', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '55be7b08aa62c4eb04b07583cc6f9cc62f518bf7', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: 'dc0f2d49b72bfdd1086f36e17e7a1377a4305c6e', swirlPopover: this.menu }, h("swirl-button", { key: '4951006600f356d0c916bc5c54002a432c348a68', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '032d539b36635d88ac3461cfaeb8209c9ac36a27', class: "pdf-reader__floating-tools" }, h("button", { key: '3a6867909d9ea9ee60a43f1b5298653fd50b8cce', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '224445482de9e38ce5a6e5207c0dbd94a37ef96f' })), h("button", { key: '57371f356b128aeca7cc2d6563c41dc6074ea4a4', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: 'bc0afd54bd72bb22ac00f8bbcf758ed48592fa4f' })))), h("div", { key: '6b3d7cf7974ef513d91a1c8b0b86daeb947d7b54', class: "pdf-reader__content" }, h("nav", { key: '9c82f0e86ac4cb6ddb458c97a44866789f7394fe', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: 'ed21ebc0a51682bf55f365dcb48b973d72db2a24' }), !this.loadingThumbnails &&
             this.thumbnails.map((thumbnail, index) => {
                 const thumbnailClassName = classnames("pdf-reader__thumbnail", {
                     "pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
                 });
                 return (h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index), type: "button" }, h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
-            })), h("swirl-file-viewer", { key: '91f17a8d7924fcb91547ad6f0e214997b025292a', active: this.active, class: "pdf-reader__viewer", file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), h("div", { key: '4e3b7cdd6c18aca9fc059711b0c3d9d1e09482c2', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '4041ba876b40c84a5a979c8262fe33ae2ec2d797', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: 'e5b8c381bc62cd3c51460a4516271acda322bccb', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: '25cc06b58c191b2d1ba477a776cf5f7c6de8891d' })), h("button", { key: '964b671c2f78296c2e58f0c670c2e457de3ab774', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: 'deb24f624bc634b224d7e8794e8d231fd14f6848' }))))), h("swirl-popover", { key: '913b824bfb95365858e47275ba762806f599dc76', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '9cfea064c15c6b39bbee5058fc60d8c0bb362c7c' }, h("div", { key: 'e6fcb05b497b9a064d9352e97f83c349607f019e', class: "pdf-reader__meta" }, h("div", { key: '150d3adfc65148e14a30d9718cea4cd6c8e95051', class: "pdf-reader__file-icon" }, h("svg", { key: '30157e5227a1f316c3ac59d8758d7eda657bf57c', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: 'eb7b4df4b151236ac65cc756531bf220684e06e4', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '3919882c22c523483692c766ca35c4375e004b05', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'c8902d23791924ef347655125d34b0e75b29e619', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: 'ab271f45ecf494d58141f54c2c9ef0d83dc182d4', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: '67df861405c8901c79d7ff3be7623c7f484d75b2', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: 'fbc136b085e60005b43e0e7ef5c072a7d12c647a', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '53e7719c7e7be2e481a01d2ad162b3ab81cdfccb', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'a7e76a6633fc125fe2fc8d69046602c454be1de1', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '98fc2cf49eef06d73b66e04239a7f728a3a34d21', class: "pdf-reader__file-info" }, h("swirl-text", { key: '5b7ed460613e3e5e9dbf6723ec17dbf5debfdfff', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: 'ba187f3a6775b856162fe30dbf39ee6d49c54a79', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '9650d57f92506f50d87de46bde441be7aba747cd' }), h("swirl-action-list", { key: 'a27f372a63c6d4c362ce0cc8739575d9d8973f40', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '9a3b70c0bc1ff347f3dd4f276ef30d4c0b642149', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'f05b509243c31f645122cdab165148cbeeb89896', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), h("swirl-file-viewer", { key: '02866276d25b8af05ef2ea2ad652c042c94bcdde', active: this.active, class: "pdf-reader__viewer", file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), h("div", { key: '50d35d1514002077fdf6c6fbdc338200eef316f8', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: 'd15e86f128a299275ff362c57ee89b282b24f86c', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: '3414d58fe633201597e5d54fa4f25984e7ae55fe', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: 'e8a9099238f7d8af886af10257f7f1fc456d5cf4' })), h("button", { key: 'f6cda0053a6736049f6f6ed766dd84dee00bae2e', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: '7a1e60007946e5096aa647ed8838ae1a65ae5b97' }))))), h("swirl-popover", { key: 'e8233a386c3a4315642c4e1f297a9000262522aa', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '3cab8aa09141205c1405fe338bd3e0da5369f637' }, h("div", { key: 'bd7728823fd181859f1d4da625c956e2efe9288b', class: "pdf-reader__meta" }, h("div", { key: '032c350d13613ab7c49842cf639874aeda2db0ea', class: "pdf-reader__file-icon" }, h("svg", { key: '26ac0d2ca9a8cfa780aa5e5f2a985e9f199de78d', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '38473cc7e8d878e8595f73d2e5d07302f4f36a82', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'c6496a19932dde54a28a8bab54bf1ec4ed5c9f3f', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '86b4d75ae0c88e950c451ebf73b1ba53826e0faf', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: 'd0a6d28babc08db97dd37cfadf7afd6dae5c56cd', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: 'f899451a3799ad287eb9061d908096fba3ce7993', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: '360774fc5ebe1f63ba5b6c592bbd67ed2191e37c', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '7030925104073fd86d90936ad4690f1c22793738', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '840f490a078601c719936e2243ce9250d3585525', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '7ca93136569a792d6d8b00dd75bbc5138877fef7', class: "pdf-reader__file-info" }, h("swirl-text", { key: 'd747db885743b9f1ca5df51bd6ba5392f88745fd', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: 'a358e07d9193cc89dda45bc9f3d89ae8409f8b89', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: 'd392eb997baadff6442247b288523f521ddc7228' }), h("swirl-action-list", { key: '04d7e96d82fa759a6a5e81f59089bbaef56faf2f', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '047dfe87633d94741e3bfa27ec9eab7ffaf1a9ec', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'd42cf3d08b75aa6fbd5bca6d33a114aaa932a506', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
                 ? "<swirl-icon-download></swirl-icon-download>"
-                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '5e97d819f5b9090a6762aba3d96d243c47100a68', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'b90a5223a9027108960de5e451a43df3252068e6', name: "menu-items" })))))));
     }
     static get is() { return "swirl-pdf-reader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-popover/swirl-popover.js

@@ -261,14 +261,14 @@ export class SwirlPopover {
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (h(Host, { key: '7ea8241370e14dd37690d7918a4ddf0a944b64bf', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '431cb1938ed6c6e06ee81655ade5444bf5830676', class: className, onKeyDown: this.onKeydown }, h("div", { key: '44a0efe834d9aac633f72099efffdd32eaa55718', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (h(Host, { key: '6907c550357d20afd7f9f316601f287b5674f597', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '383b66c0da4bfa419c9a52c9e6555f383ce964ed', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'c6bb0459dac6b2c3c0652eb4fecf79bb5e696fd3', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-            }, tabindex: "-1" }, h("span", { key: '75950980e16617133e9ab6cae51714170b08962a', class: "popover__handle" }), h("div", { key: '6e9bff5adf252d1e2a7e9e7e2bf426d667d79e6c', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, h("span", { key: '5a53ba8c3cd21aa00b013a96da45af5191b33a8c', class: "popover__handle" }), h("div", { key: 'f74591631a5643e8a67230a267a5ab9bcd3f693a', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: '3db02444e9fa7a0352c5e573445b1e40a7295207' }))), this.active && (h("div", { key: '24a768a535e0e4473471cc1adafd3b646202bf6c', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: '33c144896504b23c95b4078a45f3af2a5be563e6' }))), this.active && (h("div", { key: '4c347a0605f4c81b23845afa07aa69060da42fae', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -158,7 +158,7 @@ export class SwirlPopoverTrigger {
         return isActive;
     }
     render() {
-        return (h(Host, { key: '4b372a51ae6112d7a685e2be38b3590c1ba6d25c', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '74996244be9f82e04887ffbbdeda7d95a11d6736' })));
+        return (h(Host, { key: 'f5ee0a02b5087a9169d99ab3e4a50adf7a472984', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '407c4f4aa1e361d4fac9e2350172058c851ae216' })));
     }
     static get is() { return "swirl-popover-trigger"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-progress-indicator/swirl-progress-indicator.js

@@ -13,7 +13,7 @@ export class SwirlProgressIndicator {
         const radius = this.size === "m" ? 20 : 10;
         const circumference = Math.round(radius * 2 * Math.PI);
         const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
-        return (h(Host, { key: '723ee9fccf1bee2032efd9c7e076ad56e8244939', class: this.variant }, this.variant === "bar" && (h("progress", { key: '210dbee96d76b7f90d55608f2fcae3405da17504', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: '0416de83b2197625349f8237e468cde61a1192ad', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'efef3c0be2d4ebfcd73abf6c436670e0da8f18d8', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '9ce31abfc191b7fbda6ac8dfcc8a06fc67f21681', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '2c53c955f44af00a8eacb1773647c52890520f6b', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+        return (h(Host, { key: '7a88d62c22d1028baf3fd842ba8fb4c86271158c', class: this.variant }, this.variant === "bar" && (h("progress", { key: '5d88596118c66c0e1695bbe50fae489a75fc1c9b', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: '7e4a2586ce5be138b84cc8b7737fcc2a0983aa62', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: '1f3eeaea011ed9fc855c961dd1d85cb1d6e5e292', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: 'bfc5d9ba40856037622773c93789b0372f0cbc76', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '3ff0cfe2119bb7a0ae650271c1f515b871cfeab0', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
     }
     static get is() { return "swirl-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-radio/swirl-radio.js

@@ -37,7 +37,7 @@ export class SwirlRadio {
             "radio--invalid": this.invalid,
             "radio--unchecked": unchecked,
         });
-        return (h(Host, { key: 'ffc86019706f785e80edcacfaafe70cd33a4318e', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '0d92ec5a8c55d04e4036e7e8b44eab3ced9e8c66', class: className, htmlFor: this.inputId }, h("span", { key: '93ffcee887ebbcf70e2c1adb0ef4818b6e1baf7a', class: "radio__control" }, h("swirl-visually-hidden", { key: '1591f9e611101724f575de7618bccb007c311fae' }, h("input", { key: 'e95e209f9f892740325585285198f8ba83448807', "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { key: '8105cc59e8f59f056579f21f56d82e518cfe7396', "aria-hidden": "true", class: "radio__box" })), h("span", { key: 'c5460f18c4d28bb9b41108600749f68cf42595dc', class: "radio__label-container" }, this.label && (h("span", { key: '42769a01c4d19f7d8bcc4703db4c279ef703b605', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: '78a1a418488e4038db1690a23fe437c2809ec8c9', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: '62df0dab9980f31ff213cc8c23f3cffbd1d92bfa', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: 'ec5f93ff9db3aa970620857d7fe1b07b25f01a4b', class: "radio__description", innerHTML: this.description }))))));
+        return (h(Host, { key: 'ffe68d39d6fc31ad2a1772be1a1fe19c8fbe448e', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '77243bb1e6df44ae5fd863a3c1fed676750c4a5f', class: className, htmlFor: this.inputId }, h("span", { key: 'ee87f324ba2b6cc966fdf1070973dd51953272e6', class: "radio__control" }, h("swirl-visually-hidden", { key: 'e1162f789a4ab367ba2b3a37ab06e5f8f0599ec3' }, h("input", { key: 'de16d6993cc8e972e4e0a33b3be4c1d786d39d36', "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { key: '0e84c5efadec428203e4a1666d11e3074721513c', "aria-hidden": "true", class: "radio__box" })), h("span", { key: '5b3366df2427cf38a26c5d211eace69adf2d6bad', class: "radio__label-container" }, this.label && (h("span", { key: 'a336e0468756983586607bca4aa525759e369ead', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: '7078e2d29c1e640443d4300672a6d8f8f96f157c', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: 'f12ce6eefb230098d117282c8180ce1432a5c957', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: '3b838d01b28a72b463c79dbb6c4e4f52178fc75e', class: "radio__description", innerHTML: this.description }))))));
     }
     static get is() { return "swirl-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-radio-group/swirl-radio-group.js

@@ -37,7 +37,7 @@ export class SwirlRadioGroup {
         }
     }
     render() {
-        return (h(Host, { key: '60a933cf20baf8e0681e97f41076c19177ace493', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: 'a200a19f62406d9361dca165d3afe9bbdc85f267', class: "radio-group" }, h("slot", { key: 'abfbb7e1d8d98615ed13ac3e4e6b7efb46a50ccf' }))));
+        return (h(Host, { key: '583e3f8b197674e380dfc6b6952a8a729dd02347', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '864cf9e03b1bcdd344f49fad6bb0b070b64d2b28', class: "radio-group" }, h("slot", { key: '036bf566b981e92e4a37d1500497c6edbb0c62d8' }))));
     }
     static get is() { return "swirl-radio-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list/swirl-resource-list.js

@@ -254,7 +254,7 @@ export class SwirlResourceList {
         });
     }
     render() {
-        return (h(Host, { key: '5448bca29d649a700b2ac2facf72f505660cf0dc', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'e422fac574b92aacea59635078906e46d3a8d588', role: "alert" }, this.assistiveText), h("swirl-box", { key: '24ca364643f0d57ebb04300427ce805b8d951865', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '065270327ec17c41eb8762da1690019c1f984274', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: '74498fe31f2bdf496e3453f17e7ecd36df099cc8' })))));
+        return (h(Host, { key: '5eb8d40323ec2d5a2274d5578bc4507ab8de58e9', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'a175e1fe34b4a852b5e9241f32692761305d6b7e', role: "alert" }, this.assistiveText), h("swirl-box", { key: '8b42646a8c97977f88f343ecdc1c4b4137b34f72', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '079663797907c78d8f58aa46e0df4e5850c22682', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: '65a096f4f7b8dd8bca6d12afff4180eefbc326d3' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js

@@ -35,7 +35,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: '797c98557ff5e39033e17c29084569904f4e812f', role: "row" }, h("div", { key: '33016c8f3d834df73db61f270eecb39e65c04351', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '6e6d71eaca65dca563d0dbdcc45d2ecf8b45abca', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'b64cac98b464e068323e0ac99716228603124550', class: "resource-list-file-item__label-container" }, h("span", { key: '3f629bb1234f9033a944a91d7b9abff6f49b83e1', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '3d1c84a6cffac8d91f3ce8c0554266fca393991f', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '9d63095b44e4f64d5f430e268193d28246bb555f', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '17ad8f2a85505623d7109cf3b2e823041b654392', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'ce2b8ee5952104e331a52c129ca61e767749008b', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'f279b7fb82f4e67e1a35186f123e37a1611b1e0f', size: "s" }))), showRemoveButton && (h("span", { key: 'a7947969b6d6f23d042ba586aeb54117e0b9a540', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '82341fa9a05856503ce9e45dfed5413da31df6bf', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: '15aa75db8bb9cbde8bc64c605ac351ac8c2f8278', role: "row" }, h("div", { key: '43a92e81a40ca22c63c12ac288744ad141940b80', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '8fc2d7250027bc08e1d0c83a62b18990e8278f9d', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'a6b9f99149880e331b2ae4e7d6866460a738ac1a', class: "resource-list-file-item__label-container" }, h("span", { key: '50f0d09592761207a78300ee5dbed53830cea5df', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'f602c21177e2068ee775014439d5de5e67dd4624', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '8c9a9abf9b5096c5060e0819bf3e06a72db77820', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '934e49ca58cfad7e35792b14135233ae0773e8b4', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '708ae11a7739edf640df57eac8dcfd6b184f3112', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'ad8742fde536da17ec5ed1b35baa9672b00c1371', size: "s" }))), showRemoveButton && (h("span", { key: '67b7fa9f83639675660dbb3435c5352a62d8033a', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '9d8428165e883f892e9967144f5534a782678a65', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
     static get is() { return "swirl-resource-list-file-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -153,7 +153,7 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (h(Host, { key: '63387d5ff4c56c678c6c0e30d8236d5b966d0bff', role: "row" }, h("div", { key: '6fd8f35b61a84ea91ff9ff80f6f754ee50a5933f', class: className, role: "gridcell" }, h(Tag, { key: '17e7329e6692317ad3dea70d660720c6fb8b33a5', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '4d12c2a220c03d1ee1bb77e214e028f013a23e21', class: "resource-list-item__media" }, h("slot", { key: '5d104523e7da44ceac278d5f6eebea6c2d2e516f', name: "media" }))), h("span", { key: 'cdc7fdf4a5a3e2df7080fece60638aa1d67c6388', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '187fd3a9974f65902e0fa89cb6c90b4178df7063', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '5047356c9b024dcdcf1299cc8479aedb2eb7b961', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '1a5039459c067b4de2a540f79124ac9310f9c594', class: "resource-list-item__meta" }, h("span", { key: 'a74caa7e64e88b8cbd9be7be020d63d833f03781', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'ae4f5a2e927b934fba247e989cfc219b09805c99', class: "resource-list-item__badges" }, h("slot", { key: '59df5cb937ffc581ad1f6470b6080561045997fd', name: "badges" }))))), this.selectable && (h("span", { key: 'a494bc2e24fd043cc3c1024e89ae0a16d7c14f86', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'b0070f0ad50a683528c216d8e0d1221b53652433', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'dc3cdd5fa6e9adda926966fc77d8acf44762fda5' }))))), h("span", { key: 'd5b2f9079f6cae27bca88d7b00d9eb954641e3f1', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '263ee1c8cd59301ebd510a29ce29afd112fa6c32', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '16ecfb13e3bf0e3d36851671f708ce949ff3dfee', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'a1d94f00a09a875a689c015b332a794cda4612ca', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '6a580ae58f2e50fe42828d9db668260b91bb9d43', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'e999dfe63293b3367c6d8507532761887b3835d6', size: this.iconSize })))));
+        return (h(Host, { key: '432dd643259f55092ec79c6e1a54ddafc2ebbc9d', role: "row" }, h("div", { key: 'a7a7491252619c832247612c6454afbda08ebd8a', class: className, role: "gridcell" }, h(Tag, { key: 'e8caf68524fb6265ede2c9b3a9811ff0369ed1a8', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'e7e38f6301771823621664dff2016dac20d6d825', class: "resource-list-item__media" }, h("slot", { key: 'cb3cf6c820031f499377170dd2526ae70b07510e', name: "media" }))), h("span", { key: '76b22549e10fa7bba56d526fb7de388636ac8466', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '6e58a2b6731562363b2e5b01a32ec78745760c4c', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'ea49e06faa4b74092659a1f4f00b3b4f74aa0d99', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: 'e0ba68effd3c35ba69c9cb9014aa9c12b667b5e0', class: "resource-list-item__meta" }, h("span", { key: 'a51f4c56ee3854a37abbf25db37822b9dc44eed2', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'bc1c6ba6fc69c8bfce50e0952df4264ce58bd23b', class: "resource-list-item__badges" }, h("slot", { key: '3983518afe1feee2f972e33fbd2ae74d8f0821d9', name: "badges" }))))), this.selectable && (h("span", { key: 'e82d7da702c475a9ec3fd45490f279a3ddce226c', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '9ed402e6f2acb17b190f12e7d01cab187574f43f', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '150e2723e9720084eaacae64e53e6c9b9ac8408e' }))))), h("span", { key: 'aba6f565d6ea61d07c270639d5aa8d2f3e6a2044', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '430f298c9657d8ce2bd541593c2d0ac29bba10d2', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '1678df1931067652d198f1343ecb9e3d8415d331', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'd0f671904e036222a62fc68c536e6ce96ce2bf71', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'bda920ee8ccd52c5c529fed32ed60f6bfefa6d7c', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '83818328a7452cd150dfe7b2c0228b962dea2c1c', size: this.iconSize })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }