@getflip/swirl-components 0.313.1 → 0.315.0

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

@@ -8,6 +8,7 @@ import * as focusTrap from "focus-trap";
  * @slot header-tools - Used to display elements inside the sticky header, below the label
  * @slot custom-header - Optional custom header; should be used hidden label
  * @slot custom-footer - Optional custom footer; replaces the default footer with primary and secondary actions
+ * @slot sidebar-content - Sidebar content
  */
 export class SwirlModal {
     constructor() {
@@ -30,6 +31,10 @@ export class SwirlModal {
             this.secondaryAction.emit(event);
         };
         this.determineScrollStatus = () => {
+            this.determineMainScrollStatus();
+            this.determineSidebarScrollStatus();
+        };
+        this.determineMainScrollStatus = () => {
             const scrolled = this.scrollContainer?.scrollTop > 0;
             const scrolledDown = Math.ceil(this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight) >= this.scrollContainer?.scrollHeight;
             const scrollable = this.scrollContainer?.scrollHeight > this.scrollContainer?.offsetHeight;
@@ -43,6 +48,12 @@ export class SwirlModal {
                 this.scrollable = scrollable;
             }
         };
+        this.determineSidebarScrollStatus = () => {
+            const scrolled = this.sidebarScrollContainer?.scrollTop > 0;
+            if (scrolled !== this.sidebarScrolled) {
+                this.sidebarScrolled = scrolled;
+            }
+        };
         this.closable = true;
         this.closeButtonLabel = "Close modal";
         this.height = undefined;
@@ -68,6 +79,8 @@ export class SwirlModal {
         this.secondaryContentPaddingBlockStart = undefined;
         this.secondaryContentPaddingInlineEnd = undefined;
         this.secondaryContentPaddingInlineStart = undefined;
+        this.sidebarLabel = undefined;
+        this.hideSidebarContent = undefined;
         this.isOpen = false;
         this.closing = false;
         this.hasCustomHeader = undefined;
@@ -76,7 +89,9 @@ export class SwirlModal {
         this.hasSecondaryContent = undefined;
         this.scrollable = false;
         this.scrolled = false;
+        this.sidebarScrolled = false;
         this.scrolledDown = false;
+        this.hasSidebarContent = undefined;
     }
     componentDidLoad() {
         this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
@@ -93,6 +108,7 @@ export class SwirlModal {
             this.updateCustomHeaderStatus();
             this.updateHeaderToolsStatus();
             this.updateSecondaryContentStatus();
+            this.updateSidebarContentStatus();
         });
     }
     componentDidRender() {
@@ -152,14 +168,19 @@ export class SwirlModal {
     updateSecondaryContentStatus() {
         this.hasSecondaryContent = Boolean(this.el.querySelector('[slot="secondary-content"]'));
     }
+    updateSidebarContentStatus() {
+        this.hasSidebarContent = Boolean(this.el.querySelector('[slot="sidebar-content"]'));
+    }
     handleAutoFocus() {
         this.modalEl.querySelector("input[autofocus]")?.focus();
     }
     lockBodyScroll() {
         disableBodyScroll(this.scrollContainer);
+        disableBodyScroll(this.sidebarScrollContainer);
     }
     unlockBodyScroll() {
         enableBodyScroll(this.scrollContainer);
+        enableBodyScroll(this.sidebarScrollContainer);
     }
     render() {
         const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
@@ -173,24 +194,26 @@ export class SwirlModal {
             "modal--padded": this.padded,
             "modal--scrollable": this.scrollable,
             "modal--scrolled": this.scrolled,
+            "modal--sidebar-scrolled": this.sidebarScrolled,
             "modal--scrolled-down": this.scrolledDown,
             "modal--hide-secondary-content-borders": this.hideSecondaryContentBorders,
+            "modal--has-sidebar-content": this.hasSidebarContent && !this.hideSidebarContent,
         });
-        return (h(Host, { key: '489e6f51113342c2bd3df6952f6cb624f96a5752' }, h("section", { key: '052d8e44f60607b98a0c44a8cf5b2b5d0769ed4e', "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: '412f3ba042f44340e27d29635df3c0bb7b546ab3', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'd50c04d55d1776c3abc92754508264c75e4153bf', class: "modal__body", style: {
+        return (h(Host, { key: 'd83eb2f5ad1e55b55fd2aeb3b6b56017f25645ae' }, h("section", { key: '689da28246f94089cc15c9192e9429f334ab381f', "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: '700ee93e5698164a29e5abb396f8e2d1ee03a83b', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'e083a0ead29396bb923c68e4e1ea529c95a1cf7b', class: "modal__body", style: {
                 "--swirl-modal-max-height": this.maxHeight,
                 "--swirl-modal-height": this.height,
                 minHeight: this.minHeight,
                 maxWidth: this.maxWidth,
-            } }, h("header", { key: 'e4565be23a59443f9c96d4059f4da68e0eeae8a7', class: "modal__custom-header" }, h("slot", { key: 'd6eec7880f41b72574eefe0fcee99147e2b7c02f', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '93dbd08e5069064270c5765b7d8832a534a63685', class: "modal__header" }, h("div", { key: '18a11e0d9078daafc08d06e9ebce86781442dc84', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '85e45fac1cda1bceeeb37c6c18834ebc84fbf854', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            } }, h("aside", { key: 'bab821dd0f6b8e3e2c06674419e9874009a3eee6', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '5d02aae278ab7e091b5229df0ca1bd01e9502bda', class: "modal__sidebar-header" }, h("swirl-heading", { key: '44e72e3172ccc96f30add2c05952cd7e68be928b', as: "h3", class: "modal__sidebar-heading", level: 3, text: this.sidebarLabel }))), h("div", { key: '1aec35149fafa056058987cfe7b9cb5b5927e4cf', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '8fc6849c14ac4b3ea635f1a3bdee930efdf7ddf3', name: "sidebar-content" }))), h("div", { key: 'e49e79ff4253efcabbb99c87fad194b6bf683048', class: "modal__main-content" }, h("header", { key: 'b389bf0b5d173fb891d6d96d82eedc2f0755aa7a', class: "modal__custom-header" }, h("slot", { key: '56c797b445060a2590528b3b983fa8dafa9666a5', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '0d1941638cb33f74463eb1700ea4798e368053c6', class: "modal__header" }, h("div", { key: '6c7bbcd733ad94cf7e5558800a894db2e8471a44', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'c436082ee6c3e8888e6dad3853d97859b96ec807', 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: '73304efa624ecdf6536fd084d8cfe7445a88d04b', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '896b4e3a5ceec854b264d6f780b7d1e592a72a29', class: "modal__content-container", style: {
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '06cfbd6edcfe13861a0a3332f3a3f95227b32fe8', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'e9cbd554d92018f6718db0643a80283bbf68a7fa', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: '7ecfec7fa0b1c8fedd5d4dc3aa74f4e6413aa6c4', class: "modal__primary-content", style: {
+            } }, h("div", { key: '1e351e7e27216524eba51e0f33c09fad9d371636', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: '2807d370099a4311012e4d7a4ab6047aa1d4ad84', class: "modal__header-tools" }, h("slot", { key: '67e63aa64416e028fce9457b8d94f756b8550727', name: "header-tools" })), h("div", { key: '8e0b2301c72bf8f9404800187c2076904a405253', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '125a1753f5191201728b40ef846e29d4ed53631b' }))), h("div", { key: '8a0d01f693d63dcac146f30ac3c6690fb35aad44', class: "modal__secondary-content", style: {
+            } }, h("div", { key: 'ebccae92208659f4cece6ee1146992e9a10cdbac', class: "modal__header-tools" }, h("slot", { key: '980fdf7637abe2e7dbc473ad23d34bf4819ace54', name: "header-tools" })), h("div", { key: '68fe74b27c08e278368b5eb49f0f4b7a047148a5', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '2cff014d7b3526f4b66cf695f7afeeb5523dfb17' }))), h("div", { key: '89da507b1a17b64297acf9c5d40687e310adeccb', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -208,7 +231,7 @@ export class SwirlModal {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: 'eb019f455144b468f9d6c409a297981bd4823d50', name: "secondary-content" }))), h("div", { key: '5d9ee4d9c20182b4f7f327ca6526632ea7c93382', class: "modal__custom-footer" }, h("slot", { key: 'b586fad0746334c818784b5a6e37bdd70838b12c', name: "custom-footer" })), showControls && (h("footer", { key: '2c11ab500412841d0356e952de246c12163e3c04', class: "modal__controls" }, h("swirl-button-group", { key: 'e813aadf4314368b8e6153a346e8a0934101245e', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '9a31c1969a6a276809f0e3eb907761def71f8464', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '3f5883b9d453cb2d8b47bbf34797aaef72e0bff8', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+            } }, h("slot", { key: 'd88250edad6df3c101975ae3e53809f483973915', name: "secondary-content" }))), h("div", { key: '76633379ef651d1e297b5b2a6b82d2db5c9115a7', class: "modal__custom-footer" }, h("slot", { key: 'bd9734502bf0bc566e24584cbd130defecdba0de', name: "custom-footer" })), showControls && (h("footer", { key: '66eded5e059d22c8c45cf252fdbd22bf9cd70c1e', class: "modal__controls" }, h("swirl-button-group", { key: '2557df6c4f02368d7b073d8dd6d2e5cbb13debe7', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'dd1e2d6fcd31b8313feaa305596fbef1b26aec23', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'd3826c07f9f7fb39c8ceaab74246c895c7177b85', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     static get is() { return "swirl-modal"; }
     static get originalStyleUrls() {
@@ -693,6 +716,40 @@ export class SwirlModal {
                 },
                 "attribute": "secondary-content-padding-inline-start",
                 "reflect": false
+            },
+            "sidebarLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sidebar-label",
+                "reflect": false
+            },
+            "hideSidebarContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-sidebar-content",
+                "reflect": false
             }
         };
     }
@@ -706,7 +763,9 @@ export class SwirlModal {
             "hasSecondaryContent": {},
             "scrollable": {},
             "scrolled": {},
-            "scrolledDown": {}
+            "sidebarScrolled": {},
+            "scrolledDown": {},
+            "hasSidebarContent": {}
         };
     }
     static get events() {

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

@@ -7,30 +7,49 @@ describe("swirl-modal", () => {
             html: `<swirl-modal label="Dialog">Content</swirl-modal>`,
         });
         expect(page.root).toEqualHtml(`
-      <swirl-modal label="Dialog">
-        <section aria-hidden="true" aria-label="Dialog" aria-modal="true" class="modal modal--padded modal--variant-default" role="dialog">
-          <div class="modal__backdrop"></div>
-          <div class="modal__body">
-            <header class="modal__custom-header"></header>
-            <header class="modal__header">
-              <div class="modal__header-bar">
-                <swirl-button class="modal__close-button" hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close modal"></swirl-button>
-                <swirl-heading as="h2" class="modal__heading" level="3" text="Dialog"></swirl-heading>
-              </div>
-            </header>
-            <div class="modal__content-container">
-              <div class="modal__primary-content">
-                <div class="modal__header-tools"></div>
-                <div class="modal__content">
-                  Content
-                </div>
-              </div>
-              <div class="modal__secondary-content"></div>
-            </div>
-            <div class="modal__custom-footer"></div>
+     <swirl-modal label="Dialog">
+  <section
+    aria-hidden="true"
+    aria-label="Dialog"
+    aria-modal="true"
+    class="modal modal--padded modal--variant-default"
+    role="dialog"
+  >
+    <div class="modal__backdrop"></div>
+    <div class="modal__body">
+      <aside class="modal__sidebar">
+        <div class="modal__sidebar-content"></div>
+      </aside>
+      <div class="modal__main-content">
+        <header class="modal__custom-header"></header>
+        <header class="modal__header">
+          <div class="modal__header-bar">
+            <swirl-button
+              class="modal__close-button"
+              hidelabel=""
+              icon="<swirl-icon-close></swirl-icon-close>"
+              label="Close modal"
+            ></swirl-button>
+            <swirl-heading
+              as="h2"
+              class="modal__heading"
+              level="3"
+              text="Dialog"
+            ></swirl-heading>
           </div>
-        </section>
-      </swirl-modal>
+        </header>
+        <div class="modal__content-container">
+          <div class="modal__primary-content">
+            <div class="modal__header-tools"></div>
+            <div class="modal__content">Content</div>
+          </div>
+          <div class="modal__secondary-content"></div>
+        </div>
+        <div class="modal__custom-footer"></div>
+      </div>
+    </div>
+  </section>
+</swirl-modal>
     `);
     });
     it("renders controls and fires events", async () => {

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

@@ -7,7 +7,7 @@ export default {
         docs: {
             page: Docs,
             source: {
-                code: `<swirl-modal id="modal" label="Dialog" primary-action-label="Primary" secondary-action-label="Cancel">
+                code: `<swirl-modal id="modal" label="Dialog" primary-action-label="Primary" secondary-action-label="Cancel" sidebar-label="Sidebar" >
   <swirl-text>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
     eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -58,9 +58,24 @@ const Template = (args) => {
     </swirl-text>
   </swirl-card>
 </swirl-box>
+<swirl-box  slot="sidebar-content">
+  <swirl-text >
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt.
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+    sit amet.
+  </swirl-text>
+</swirl-box>
 <swirl-box padding-block-start="4" padding-block-end="16" slot="header-tools">
   <swirl-search auto-focus label="Search"></swirl-search>
-</div>
+</swirl-box>
   `;
     container.append(trigger, element);
     return container;
@@ -70,4 +85,5 @@ SwirlModal.args = {
     label: "Label",
     primaryActionLabel: "Primary",
     secondaryActionLabel: "Secondary",
+    sidebarLabel: "Sidebar",
 };

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: '43f5710aeb2b65898268fcd927fdeb874a824b6a' }, h("swirl-visually-hidden", { key: '10926f4878a5d2f6af9ff263295dea78da3e4490', role: "alert" }, this.assistiveText), h("div", { key: 'c4de01c87a4656fec4a36f39f750b37b63e13a03', "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: '28995610d59ef6639a1f84d4efdfce1d72895687', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '4eab0b0c423b8828eba51a502a4151deedc92314' }, h("swirl-visually-hidden", { key: '065551ffde4b331cf8841918ac460de1405ae338', role: "alert" }, this.assistiveText), h("div", { key: 'f64d9a5c330cf280aa33899df5756037ba5ad884', "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: '26c9fc517ecd7a54bf30e1d48ce881493c64ec5f', 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

@@ -71,9 +71,9 @@ export class SwirlOptionListItem {
             "option-list-item--selected": this.selected,
             "option-list-item--show-avatar": showAvatar,
         });
-        return (h(Host, { key: 'b2492b2d478e6435a97f7fa4c2657ebb852e8c0d' }, h("div", { key: '6a091e0500dd92613309bdb88d3bff6f07cfdc68', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        return (h(Host, { key: 'f1b6b512f2372ae3cb60d36983abe03a6b6bb9fc' }, h("div", { key: 'e86bcb9748b59b56f490b62554cc54ab85443b69', "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: '09c09dc002f9bfc69697d51f8f4dd639d497353d', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '27f2b44a6df768bc9907663f38072325f0aa52ce', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '513a2da62cbce54fff1cee3710a3bf7a48ce9dfd', class: "option-list-item__checkbox" }, h("span", { key: 'e0a3e8e765ed079bedbfb321ab61bfb50932f459', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '684b13d9ddf7ffca4fc12b24b30d2383ab0ac52f', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'eef7f6947815c12298a5b19fd8a2a4678de9de7b', class: "option-list-item__avatar" }, h("slot", { key: '225f3a61eb4ddae350eaf9bdfbd53b736da17c53', name: "avatar" })), h("span", { key: '15b825ca1114482a9211d2b2bbb02141349d0b1d', class: "option-list-item__label-container" }, h("span", { key: 'e7d3bfbe8def7ec92ebeda6b390ae813618fe0a1', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '1076b9cefb756094aea85f5197478db2b5d73d2e', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '8056616d581324485dc7fff9a705909420fe22a2', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'e5391c164fef2078b03cd1ace8943ea0c3205277', size: this.iconSize })))), this.allowDrag && (h("button", { key: '780f66258f6dda72f5cb429d654d7f7119e3c9ad', "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: 'f39ccecbc05e90b18d8385c6f6a019d054ce313e', 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: '179a9507fb40f6278eac9acfcf77a86ccd9efa7b', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'da0ffafdd3ec011ed86daaaca4e086e24d7ec300', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '8bed40c7d7eec1863d53b06857a877145b7fcb08', class: "option-list-item__checkbox" }, h("span", { key: '64b4b8b73040af5d858711968d3882e5dc96ef33', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '1b849f3d62245c98f9dcebc0ca4272ed2ce9e7c5', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: '99cac6c037931133269d9d8e8cf50fc546f52f83', class: "option-list-item__avatar" }, h("slot", { key: '0458052c4864c367cae1869b446da4f1013d3079', name: "avatar" })), h("span", { key: '5e582a00f832a1d6bc9948459eaa24d1adea28cb', class: "option-list-item__label-container" }, h("span", { key: 'e86dd76f9d65ff06f87538bd83c18fe093cea9c6', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'a497c2a9673827573af1d502810bc66934392fe6', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '484d043d967ebee0cb42141a084a7f7820c5cdda', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'e2fe3ba67f836ec3a6b0b2af3ec51b61d037fa9c', size: this.iconSize })))), this.allowDrag && (h("button", { key: '12f85e5050baee5bbda1be1c4f5722292b22b880', "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: 'bd74ec69747e7fc6ae4798ffb8841251dcee7ca8', 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: '4bbe29eed063cd4492d784554b3bf7d0bad8e033' }, this.hasSeparator && (h("swirl-separator", { key: '492c34faebffe59b4d6861d5e5b6f860a8b0de9c', spacing: this.separatorSpacing })), h("div", { key: '7647b82e5219048c7245a1d08a88e7e5207ad535', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'ce0f368d84916358da4528efc4356e8e3cfd210d', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: '0423559633818a2d10c9d1338fbadaa6dad585d1', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'b9bb99263df785c9e647b39fda0520c601f005f8' })))));
+        return (h(Host, { key: '9242a258bef0b3abc2ad3123987e90671cab2d65' }, this.hasSeparator && (h("swirl-separator", { key: '234d8ac7c1136905df7821c0015b371777847ccf', spacing: this.separatorSpacing })), h("div", { key: '1b5f4e348be9afa01f006afe6fc369291bc5f234', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'f60b9e0d209d215bdffd7aec9aba9a1c1129ae8d', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: 'fa6f86dede5f1dce1e345f78d4b8bdcb5989e821', spacing: this.spacing, align: "stretch" }, h("slot", { key: '9e055ce5c423e8678f2dac9900f2a1a12361b108' })))));
     }
     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: '6eadabc50d3253b3bae2ff7fe619e2e812cac193' }, h("nav", { key: '6aaee3c5ddf05c178fa81543d692029fe1fc4612', "aria-label": this.label, class: className }, h("ul", { key: '3bf3297683dbe8f4e733817e6ead22b09494854d', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: '766abed08331a0ffb574037cca066895b76ea0be', class: "pagination__list-item" }, h("label", { key: '5ba62cf676a2a5032c863271c77079e8ec479051', class: "pagination__page-size-selection" }, h("swirl-text", { key: '9dcd198c5fa5f2ebd0cb8ff409cfbee825e21b3f', whiteSpace: "inherit" }, this.pageSizeSelectLabel), h("swirl-stack", { key: 'dcb6286d0040bcbb3a4ea8e0cc61bacfc64d59eb', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: '5d71d8d6a65348151b33439eddb5950fab2ffe24', 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: 'bd019a569bf65b1ee93e91704a329e07ee405a10', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: '94b14f468e6dabfae84373d5d8bd36df61667e72', class: "pagination__list-item" }, h("swirl-button", { key: 'b3c5033fe6abd18b2247d2a799350a182fe90c18', 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: '09ed662e6e74f660c1166df4c9399a5c833bbebf', class: "pagination__list-item" }, h("swirl-button", { key: '9958f061ff87481d073837130d0f282cbdd610dc', 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: 'b342b1a08725314f48069d6669846e3ada73830a', class: "pagination__list-item" }, h("swirl-button", { key: 'ad5d288642a1d94559a113f8bd6bff50e78ca380', 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: '26a16ded1d6f49f6bc4ea8d39f9f955326c3b2b8', class: "pagination__list-item" }, h("swirl-button", { key: 'a87d63ae4e7a7bba041a838003148c3c79fb8c59', 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: '62e08cd836fd2810e719e3421dd94a5b0370bd84' }, h("nav", { key: '54e4c27ed20365075124e92f2b22b48d1023f91c', "aria-label": this.label, class: className }, h("ul", { key: '6b134db7693ebd86c9e0e8c98faa8784027264a4', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: '3804a82567146c1fc426480fe84b87400fddce6d', class: "pagination__list-item" }, h("label", { key: '60c92bb97feb5e7851d2c101e7bf7fe6520e3e20', class: "pagination__page-size-selection" }, h("swirl-text", { key: 'a144cbdbc1ded86c0694e2d28e058fd1f1b0c888', whiteSpace: "inherit" }, this.pageSizeSelectLabel), h("swirl-stack", { key: '12ecf456b716dfa2b377b749f2dafa7d31c994af', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: '6602f58fc465fade856bbff9bedc4c36e1d7962d', 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: '4d557bd872f01c3718f0c6e530db5ffbf5d52279', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: '606e22bc458436d0f86899fbbe09c1e6fd877e29', class: "pagination__list-item" }, h("swirl-button", { key: '83a5b6c796c96259208e21620de1f550fa7d3933', 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: 'bcf60eebd48715dab6d83963b7dea280f048cbb5', class: "pagination__list-item" }, h("swirl-button", { key: '0553846a6a7a269b42975f49bc3b34debab1e971', 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: '199cc13116236c7ded78e1e9759f07dfd440949d', class: "pagination__list-item" }, h("swirl-button", { key: 'e2b10e3ccde153001305391393f8b88391d3cdc7', 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: '279d3a9127648b40a3313fdd5a2fb7f2b6385a22', class: "pagination__list-item" }, h("swirl-button", { key: '7ee45a34fa1f7826e01afd5bd5b910e307cc073c', 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

@@ -89,6 +89,7 @@ export class SwirlPdfReader {
         this.zoomInButtonLabel = "Zoom in";
         this.zoomOutButtonLabel = "Zoom out";
         this.zoomSelectLabel = "Select zoom";
+        this.skipNativeDownload = false;
         this.active = false;
         this.closing = false;
         this.downloading = false;
@@ -180,15 +181,15 @@ export class SwirlPdfReader {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (h(Host, { key: '992fef5b6970fd612b677c354ba47ff653dd96e3' }, h("section", { key: 'd1c59d334a9dd8f398f6f8c16fd20e1ee32acfac', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '2130f9218a585514fb901dd901840d1b555ec369', class: "pdf-reader__body", role: "document" }, h("header", { key: '4f1c214e5cabbb02c9d45461835665e9be206987', class: "pdf-reader__header" }, h("span", { key: '0a789aafc0454307e30f48ecf81d8a9697beffd3', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'd78dd1ee05406e959ba18a8562d9023b076d4215', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'f3ad8c8647613308ba2712d88736e1e7b5e417de', class: "pdf-reader__label" }, this.label)), h("span", { key: 'bba298e50ecf29304eb0547ebfdd1141a63546db', class: "pdf-reader__header-center" }, h("span", { key: '52b2d668494d050f9fac8a690bfe16ccccf469a9', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: 'd365314672db7f451854ac7df85bdf29823416a8', 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: '2b934f9c2ff486a06ca587669282540a90e4a765', 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: '81677759185f4c7fcad9ff5fdbcd0b5cdff003c9', class: "pdf-reader__zoom-select-container" }, h("select", { key: 'de9461e117c6e41e0dae2239ae32a806133ace77', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: 'bd2b83401bf2b092782c1d0777add05111447d7d', 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: '0e911455a41fd882fa59931c4c7b9a19ce10d6dc', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: 'ed79a6aaa0f30436c6d8fa7bc749b39c17de21c2', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: 'f7a17110310920b51f19371606a618812097aa1b', swirlPopover: this.menu }, h("swirl-button", { key: '7231faa705d521b06c4ca989d0bbe37def29c2ec', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '54a2cb24ed9b27caabecb2cf1910880e742ab2fd', class: "pdf-reader__floating-tools" }, h("button", { key: '79b61e89cb001d8c94566cecb23260141b7115e3', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: 'db3d57465d2021ad52107909bd8ed104d803d7c0' })), h("button", { key: 'ffad0d592c62e48c6ec927c54c09041a5a23637c', "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: 'c4250893e58b06d0a8746d573d04130b3539eea7' })))), h("div", { key: '012b3ac76d82ad7c78fe63c28dfd8f790fbc6f1b', class: "pdf-reader__content" }, h("nav", { key: 'fe8b02a98336cc96d603dadd60e6fae696856716', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '5ccf1fbb314155d3937014fe5457cc2a461a9021' }), !this.loadingThumbnails &&
+        return (h(Host, { key: '68fe3fb26ca8d6a2a6221dac7662e69edc831a34' }, h("section", { key: '97877b48bc2ae84b4fe42f73f8fac4f3170c8a56', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'fcfb7ca295f7804b55a2f1c0370188b020fafff6', class: "pdf-reader__body", role: "document" }, h("header", { key: '97622442f6b5bb0d9a53bb811ae709deb7022c18', class: "pdf-reader__header" }, h("span", { key: 'b70dbb787d88ecfa67661525dcfce034f0da7c31', class: "pdf-reader__header-left" }, h("swirl-button", { key: '4f5df9142d0b4a39d351983b6c2d17437c4b0a22', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: '3cf0def7b643e5bb2f1f7f93d87e5c6b6044b5bd', class: "pdf-reader__label" }, this.label)), h("span", { key: '6103529999d12ed351857f934a2005cf91d26d49', class: "pdf-reader__header-center" }, h("span", { key: '771644b7d36a80224481c160f21902a087f0ecd6', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '2014382d675d88e90655eeec17118fdfeae628dd', 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: '450cb710556d6afa21cb2fd4ba97fbe9a5588006', 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: 'd785b2020c2944e6efe7f8db84d265fc3a6b4ed6', class: "pdf-reader__zoom-select-container" }, h("select", { key: 'c22d36001a8f51f4c76cd2f792678a9a38c8a93f', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '01ae264edbc31f615b3311d68a0b2dac75aab2b5', 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: '9e3091ce704f67faea703f64c0400f36ef16f78b', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: 'f67959ba3a3faab12a66bf9072bf6caf88112ec9', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '65d049b17941e657de34d104b0a00d4b6fd4aed5', swirlPopover: this.menu }, h("swirl-button", { key: '25844a1ada8c2e438d716e7048f03c18dbb5ec33', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: 'e46722f8faf6c7852ce58a7720e6638d7c91f61a', class: "pdf-reader__floating-tools" }, h("button", { key: '5d853b7449dccf816c0a70a508f2fba91a856af6', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '4861263a2859a970ad35823e46157290739781e9' })), h("button", { key: '9e77cfe7e938a7f36237bc31c35f26d916a2b99c', "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: '1b9d90eea848d5ee7abeea7df2b0d6eb25aaa5df' })))), h("div", { key: '172ad126404bdb09bbda038b7f0c515dace5c0bc', class: "pdf-reader__content" }, h("nav", { key: '2de7efe73ae58a99c5455b606232a901375a5a35', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '23ce3475392038b6588c1c306fe3747aff64ee2c' }), !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: '422cebc36f71f4fa2c45c13ed55f37582b73ce00', 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 }), h("div", { key: '4ad22dc6ec7ccca223e95656f68b9d47b9c492f7', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: 'df227c8f056c8c2e48d2c1e3ad0f93610a729746', "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: '319fb3f4ad513b85579a31fead40d25eacfcdf94', "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: 'e0ffbfe2c3d8c1b0e591ca1dcac97fcc5bcc016d' })), h("button", { key: 'f605e3df513157e5fc6a083997750016bf177616', "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: '6702b26a1f81d2ece6a061ec887d52f1d8aa14cb' }))))), h("swirl-popover", { key: 'a9a6644500f0da30cf30f3a5d0f3649dcc077e2c', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'da3c3ee50152c450cf6e7a4cf4b90e4bd0872dde' }, h("div", { key: 'a9b5ac4548f7c34e65a0afe4ac36dddd9e9beb10', class: "pdf-reader__meta" }, h("div", { key: '327b78223435e9741702df2af6618a73927623a7', class: "pdf-reader__file-icon" }, h("svg", { key: '407f9f8e1b2fd0f26d521c30782698ccfd9ab12d', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '5d9287e742c32e470a564654625d69e728e88799', 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: 'c7a4658bbf03c5d83d0e873708541797f01991b2', 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: '7e883f67394ef0021ba7a2e719b1be772712632d', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '75f3d7b072c5fb1bd736b0871078d880c080ec14', 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: 'e6cacf0ca512e4977cef5718639e76b224c4141a', 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: '3e5c878a1228e9f11930b1f25ed9bcd121950880', 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: 'f53547daef5cd671bf6f31c82719c2ad88b5917e', 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: 'a8614488f7079f903876d87f24fa4d98b04d8cbb', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '5f8b9b576d3e0648c4a0cac03d642072fa7fee08', class: "pdf-reader__file-info" }, h("swirl-text", { key: '8bce6d6e345c19aaa6fda479971d51c3fa91d28d', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '5a1bcee1bf3fae44907d174498ff5a0699a89e57', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: 'c4f94cad01825edc6dd6597baa50287e40daa9ee' }), h("swirl-action-list", { key: 'f0f6aa278e2ca04d0ecbbd632ec3e7cab640135a', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: 'fe07f96326edfe52542e49d1d24b43a00bf6bb85', 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: 'ea8d070974560a90c8fb30f24600241064f919ad', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), h("swirl-file-viewer", { key: '85cdfe552913be085a3a92a3d806d2024b9fb396', 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: '1bd0d0b99f8201292d16d0d7168bfcdb854ec712', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '5c6fdaabfee213c8eccd12e0e134459f70f599f0', "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: '984e22c79231bf99f28226b803ac34ad206a38de', "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: 'a526892dea67da08b9580b7f59141239c109d03a' })), h("button", { key: '38c2f6186101dc21f74302364e0df7896a665aeb', "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: 'd1f4b00b8c67c99c929177c609ddc278b3e11ed7' }))))), h("swirl-popover", { key: '74176031c6d634877abffe560a50f8428f29519f', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '7c7ecbcf4c8c047fa5f11c10abc20a1e1443183a' }, h("div", { key: '68324500f368fbdf88ce38327a12150737d48a31', class: "pdf-reader__meta" }, h("div", { key: '8f9c1567d9fc05ee3f3386b0a8be44cb63ad495c', class: "pdf-reader__file-icon" }, h("svg", { key: 'e44d2af432550b1359eebf14465e9d16cf674615', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: 'cf22a919c07549529ae671e46f7c6a1d3cff69c8', 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: '7ebd7da468354f97899aa16e4cbc7d1aa288775d', 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: '88a52e65a22e4a588a0f903c2a6394eac840d52b', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: 'd6071d3d09098a8a7fdf9c31cd81847464833149', 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: '38eb50b41edd4e5538d5cf1e69d1015b28c8d0e2', 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: '560747787f6dcc4a07accfd4882901e5ebe0e097', 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: 'b37ca051c411f85ecacac1fbff45219b47f36c38', 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: '694f2c767019d8ffe96ec8321d544a04fb5a5816', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: 'fec2e0a783c8c32bda30303a17514c726753dbe2', class: "pdf-reader__file-info" }, h("swirl-text", { key: '4f749feb315eff4b68590174e6c082ccbae563be', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: 'de18528ef84f2a86625091e56613df3006ab7ccf', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '81246ea284f9bb16647e0434e9290a64d3c0bbf9' }), h("swirl-action-list", { key: 'd8120b9d8c3ba03e1e606dc9362cb29554753a3d', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '235e908b2df517a4163eb0b5906f73694b2e0e49', 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: 'd4c316799ea5b3c86c2e5f0ba4983467d0a1fe39', 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: 'af5898560556ee374d633a1156733377cac40cf0', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '697cf76c5f11084ec146cb334d7d62e96eb5b046', name: "menu-items" })))))));
     }
     static get is() { return "swirl-pdf-reader"; }
     static get encapsulation() { return "shadow"; }
@@ -559,6 +560,24 @@ export class SwirlPdfReader {
                 "attribute": "zoom-select-label",
                 "reflect": false,
                 "defaultValue": "\"Select zoom\""
+            },
+            "skipNativeDownload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "skip-native-download",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -17,9 +17,16 @@ export default {
         },
     },
     title: "Components/SwirlPdfReader",
+    argTypes: {
+        skipNativeDownload: {
+            control: { type: "boolean" },
+            description: "Use in conjuction with the `downloadStart` event to handle downloads manually.",
+        },
+    },
 };
 const Template = (args) => {
     const container = document.createElement("div");
+    container.setAttribute("style", "min-height: 250px;");
     const trigger = document.createElement("swirl-button");
     const element = generateStoryElement("swirl-pdf-reader", args);
     element.innerHTML = `

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: '8a94aaffe5ad9b929d0ae849a4316c03d0ce98a4' }, h("div", { key: '2a24d486eb4afb18ad47f6a569628f16f62f042b', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'b1bb6d323e2fcd366047ea767c0ecc6b87884e29', "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: '0be3360e6c6e65aa850f81f7668d752f35970ab9' }, h("div", { key: '6ac92c612fb75f1fa51be7c92798ba9f20763f85', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'b8d05aa9d7eecbbed08e3b10c00f4b2027d70819', "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: 'af481155c9ef5bdc271a3e52c182535d0d9efb1a', class: "popover__handle" }), h("div", { key: '289a5b14358aaf0e66bb1c8c405a8b50f0151783', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, h("span", { key: '64f5e64fd2fe82b34db2843df3057ba7e9b758e9', class: "popover__handle" }), h("div", { key: '8f829c982769769fcdf8386f271dad64bddf44b0', 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: 'e2643f787ba7ad786a7bdb141134c52a2a2d73c2' }))), this.active && (h("div", { key: '2427b9be81ec3a0660bb7e81705359f4b78a6e46', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: '6f751adb6e5e8a0c92ad0f2b73b5d118b37b5484' }))), this.active && (h("div", { key: 'bc3811cee60191af2a3fd8c8cecbcfcec4cc688a', 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: '3046f1575d3434a95ebb17c0f8dd95d98463bcad', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '2cbfd0353550104679817ead78bdc5b16a522b90' })));
+        return (h(Host, { key: 'd2beaef326dd07fffa844859ba7437ece4ca1042', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '1ff4f7905d7d42d73acbd4debecfcc05ef8d6371' })));
     }
     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: 'cc6d3aa374149c926eec899dddb04b33e9c57138', class: this.variant }, this.variant === "bar" && (h("progress", { key: '04a9165a76bbab7f804a26b8f1b54cdf195f553b', "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: '1e9b616ed5f0b0a685e5a49efd9806922d2a1444', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'cc650b21538e9f4d445015e0b22d8e564227ab71', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '8e25d0ab0152d4becd2b07fcaedb3183c0edc6df', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '1d3c153c7f002254e24cb2696331093f992d65a3', 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: '23e7a46fbf396093c1bcc1ecc500bf1e7c53f9b9', class: this.variant }, this.variant === "bar" && (h("progress", { key: '4ef244ee03166989f070e960f4aa5c0254e3ea57', "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: '44f04df3716422a0eed636f7771bbd902fc1035a', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'eda1f27adb4dd00de229950e8afddd03e59cb051', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '38395c949b9df88b64ad300fc2450ab27d90c893', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '068cc78bfedcc3583501d974ade4b65c5ec1ec76', 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: '4607923f3db2a298ca47aeb05968aa6f14773333', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '66eb4fa06560252f4b3820b0cd0605fd65b4695d', class: className, htmlFor: this.inputId }, h("span", { key: '2af9cc8ca09e21000ffec6172176b774d786fee3', class: "radio__control" }, h("swirl-visually-hidden", { key: '30244916724cd4d71a8522073bfb8bbcad1e26fc' }, h("input", { key: 'f0641f5eea6b249bab86dca0b23a888efe2daea9', "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: '8c70b4bbd03cbb5da726ac9851e1248f10a14e00', "aria-hidden": "true", class: "radio__box" })), h("span", { key: '62ce3d8658b9a1a37053b6097b6f0fb0e38c10e7', class: "radio__label-container" }, this.label && (h("span", { key: 'd4ddd620532bb2ac8287dcf0dd3cb49db1822825', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: 'e9aca03790122bddf368d9c4c4e3203be396af64', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: '0ca3de2265cef55bd378a2028600aa84e8c07bda', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: '420cb2bfb23a7ec2177ff18f9593dab8dc70c830', class: "radio__description", innerHTML: this.description }))))));
+        return (h(Host, { key: 'ad56628cf4575b65b487a3eb4d01957bb16ce0b7', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: 'e2725b3015165d9a119e4aa57eaa77ebb32a6bfe', class: className, htmlFor: this.inputId }, h("span", { key: 'e180737197ea8e73940217b35bc6a251e4c848b5', class: "radio__control" }, h("swirl-visually-hidden", { key: '2ff163944fc6ddaec58974f876c7d7be4be63a9b' }, h("input", { key: '88af1c18816dc34d60e192c3b03042bc80861284', "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: '190b01f5a04c87c6b9678989521f45c7a3c5e1e1', "aria-hidden": "true", class: "radio__box" })), h("span", { key: '9b839a5c718262005f8ebb4938d69504b98ce017', class: "radio__label-container" }, this.label && (h("span", { key: '8ac46aec2d9488bedc383246f6904a61347f4819', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: 'b2d3bd38561b9ceaca0b02e09ff2f8df749f1271', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: 'b90f040b493ff9a12a9ead2bc5703e7192db0e82', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: '05d0f432a62879472fe90082b011e8e96330d21e', 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: '66daf56b2f74fca0c851041e1794488d97979915', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: 'dc1f0bcaf44404b0198f8fe505bcf02dacff3978', class: "radio-group" }, h("slot", { key: '9a7b1ffd42079f0df210d4ae0e57c87147e8c116' }))));
+        return (h(Host, { key: '77c7d089714bdf6b103e852f138b86c9b20da7cc', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '7e0c15f39ab9d0d35bf5b5f24029e5995d02df9e', class: "radio-group" }, h("slot", { key: 'a16565c47d0a2947d6174d62b3acf5e6b96a949d' }))));
     }
     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: 'ea624b9cdc78f5c8c6e3ef92b0ce1c0f5c43c425', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '54338db2bd13503985458d6d69424119d739d380', role: "alert" }, this.assistiveText), h("swirl-box", { key: '8e6317c2b577ab84b1f9f7958e80637d6379d5ad', 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: '667bc6e6a548d59ba9a7c82611fad24e82c9481c', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: 'fb0056dedef07635f6afe08f6e7745437b83127b' })))));
+        return (h(Host, { key: '53653097b5fbc2d9f3cf72a0f5d332b94e9faeaa', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'fcba0dc8059168959b86c41201d977dbb078f6d7', role: "alert" }, this.assistiveText), h("swirl-box", { key: '737da1c26c13b7b19547a45195cbec75d9ab724b', 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: 'ac5008ad9a70b8b0c17a08d2e8060a03e49389f6', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: '7448d614bfe249a27b4ec80d722cf77d22d657e1' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }