npm - @getflip/swirl-components - Versions diffs - 0.332.0 → 0.334.0 - Mend

@getflip/swirl-components 0.332.0 → 0.334.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1625) hide show

package/dist/collection/components/swirl-lightbox/swirl-lightbox.spec.js CHANGED Viewed

@@ -76,6 +76,41 @@ describe("swirl-lightbox", () => {
       </swirl-lightbox>
     `);
     });
+    it("closes when pressing Escape key", async () => {
+        const page = await newSpecPage({
+            components: [SwirlLightbox],
+            html: `
+        <swirl-lightbox label="Lightbox">
+          <swirl-file-viewer description="Cute dog in a blanket." file="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
+        </swirl-lightbox>
+      `,
+        });
+        const closeSpy = jest.fn();
+        page.rootInstance.isOpen = true;
+        page.rootInstance.close = closeSpy;
+        // wait for animation
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        page.win.dispatchEvent(new KeyboardEvent("keydown", { code: "Escape" }));
+        expect(closeSpy).toHaveBeenCalled();
+    });
+    it("closes when clicking on backdrop", async () => {
+        const page = await newSpecPage({
+            components: [SwirlLightbox],
+            html: `
+        <swirl-lightbox label="Lightbox">
+          <swirl-file-viewer description="Cute dog in a blanket." file="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
+        </swirl-lightbox>
+      `,
+        });
+        const closeSpy = jest.fn();
+        page.rootInstance.isOpen = true;
+        page.rootInstance.close = closeSpy;
+        // wait for animation
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        const slidesContainer = page.root.shadowRoot.querySelector(".lightbox__slides");
+        slidesContainer.click();
+        expect(closeSpy).toHaveBeenCalled();
+    });
     it("navigates through slides via buttons", async () => {
         const page = await newSpecPage({
             components: [SwirlLightbox],
@@ -126,14 +161,14 @@ describe("swirl-lightbox", () => {
         // wait for animation
         await new Promise((resolve) => setTimeout(resolve, 300));
         const slides = page.rootInstance.slides;
-        page.root.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowRight" }));
+        page.win.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowRight" }));
         // wait for animation
         await new Promise((resolve) => setTimeout(resolve, 300));
         expect(slides[0].getAttribute("active")).toBe("true");
         expect(slides[1].getAttribute("active")).toBe("true");
         expect(slides[2].getAttribute("active")).toBe("true");
         expect(page.rootInstance.activeSlideIndex).toBe(1);
-        page.root.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowLeft" }));
+        page.win.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowLeft" }));
         // wait for animation
         await new Promise((resolve) => setTimeout(resolve, 300));
         expect(slides[0].getAttribute("active")).toBe("true");

package/dist/collection/components/swirl-list/swirl-list.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class SwirlList {
         }
     }
     render() {
-        return (h(Host, { key: '735432e171a4b787a55cb39ab81374f8f29d362a' }, h("div", { key: 'e6af1b61701c7b32f696380ee343716fc1066671', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: 'a5c100c50f41071c6c702bddd389e7dfffa31497' }))));
+        return (h(Host, { key: '8e9885ba8500482b3655414fce3bfbb36f1323f9' }, h("div", { key: '67e7f395d2692501b0dd1bdb0b67b2063efad59d', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: '86ce365ec003fd1366381237b4a041974e1fad29' }))));
     }
     static get is() { return "swirl-list"; }
     static get originalStyleUrls() {

package/dist/collection/components/swirl-menu-item/swirl-menu-item.js CHANGED Viewed

@@ -116,9 +116,9 @@ export class SwirlMenuItem {
         const className = classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '88126ef17e8d218449719c211823f82430e0ff37' }, h("div", { key: '6967d97a08bb511dd0efe888998d7627c8de83fd', class: className }, this.parentMenu?.variant === "selection"
+        return (h(Host, { key: 'a8cec36a609b88295d386d37f0365d41aa59ec8c' }, h("div", { key: 'b40f54c07f333a5991304e8b21ecab2ea7dc6339', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: '0d82097151f385dbccc0eea9aa02e825c59fd0ea', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: '9c3b52e919cb8a6b8dab58195a8259a64d0c6953', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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: 'eac8484f4f74c271245cef16b1547167753dd7e0' }, h("swirl-visually-hidden", { key: '0bdb4e627f405b6b96b658da1d04276358f93c94', role: "alert" }, this.assistiveText), h("div", { key: '0f32f1da494f38ea70b1c4d000f9ec83179d9572', "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: 'c94ac4000ba0112ac12ec67ef40f3d356cd97618', onSlotchange: this.setSectionSeparator }))));
+        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 }))));
     }
     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 CHANGED Viewed

@@ -1,18 +1,14 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { v4 as uuid } from "uuid";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 /**
  * @slot avatar - Optional avatar displayed to the left of the label
  */
 export class SwirlOptionListItem {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
         this.elementId = uuid();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onDragHandleKeyDown = (event) => {
             if (event.code === "Space" || event.code === "Enter") {
                 event.preventDefault();
@@ -42,12 +38,13 @@ export class SwirlOptionListItem {
         this.focused = undefined;
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+            this.updateIconSize(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         const icon = this.iconEl?.children[0];
@@ -71,9 +68,9 @@ export class SwirlOptionListItem {
             "option-list-item--selected": this.selected,
             "option-list-item--show-avatar": showAvatar,
         });
-        return (h(Host, { key: 'd10255b1a3ce16def32576bcfce8b007122e80fc' }, h("div", { key: '67d2f23595c118dc104cc0c1bec3aa516d514783', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        return (h(Host, { key: 'f10b9d5998e571b30de2b9755b20aa9ff6553b7c' }, h("div", { key: '7351b14adf1f9b8e7f6c8fe95bff82703e3cb0c8', "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: '12c511dd3c23e90f0d4cc988daa0c9992cc71c60', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '9041ef204b95835c99fa409268337c553079d6c2', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '37ccff8e7e31a78eac6f9a1ede06e55123755a8f', class: "option-list-item__checkbox" }, h("span", { key: 'd0b3a8115a097ee4f538bf6ce64f4de6fe9e5c87', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '732bfb290c9c6038ec11001919c3bdd658843490', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'd2810259d04b5d49d40d0774c98ee56a7f5f7226', class: "option-list-item__avatar" }, h("slot", { key: '042f2a3c70063fd130fec296ccddec084d56aec4', name: "avatar" })), h("span", { key: '61032284deee69c6dc2a66fc0627a5dbedd1dc75', class: "option-list-item__label-container" }, h("span", { key: '320288d88e77a1e8033f102147e046e7fd52a98b', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '6af76305ce6ac4fd64d562801ae976a265075cac', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: 'd9a049efa8acc2f8e163bb201d537fa09e6e215c', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '57ce2025b73bdf1d5303b6c6abc1bc27f6f4beb6', size: this.iconSize })))), this.allowDrag && (h("button", { key: '94f9abc9e467ee5e7ca0bb20cbb41759cefe4207', "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: '3bf3b75c4fc6ea020ef18d595d80d8529ec227bf', 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: '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 })))));
     }
     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 CHANGED Viewed

@@ -10,7 +10,7 @@ export class SwirlOptionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: 'f140a544c37cde547ec88972c74b3e0a51fccd5b' }, this.hasSeparator && (h("swirl-separator", { key: 'b44bb904d94663319398e6b1eca2275c7bf46643', spacing: this.separatorSpacing })), h("div", { key: 'bb95d5639692ac55f62f72f470b5c53aa1b79c2e', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '60d922a8084f5b237f761ab4c22e29413a9c4309', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: 'd6eb638ac579bface9d3d922bd53f23eae365c12', spacing: this.spacing, align: "stretch" }, h("slot", { key: '388d3c7177c39297baeebef637a17fdd0f2742b6' })))));
+        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' })))));
     }
     static get is() { return "swirl-option-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -181,15 +181,15 @@ export class SwirlPdfReader {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (h(Host, { key: 'f342c6c583a065db85af758027558eca2505bc31' }, h("section", { key: 'd8c3a747e410c6610d03c10e6ecfe6dcb2cbf22e', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'ea898b43e5c6a6172ed6f2266d20ca2b70961904', class: "pdf-reader__body", role: "document" }, h("header", { key: '54b08cc05e4b657f9217139f0f4149309adf7d5e', class: "pdf-reader__header" }, h("span", { key: 'cc2039baa0afcf0a52a80265fc52542fea06bd65', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'dd747af4d1598497c7e1acc13db6b7a3feda1fd9', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'fd0b41a42bd26aa15c0519e96e125d765aaf8b20', class: "pdf-reader__label" }, this.label)), h("span", { key: 'e8ad2ee57b0bb4df1adf79386f14a53c59de3667', class: "pdf-reader__header-center" }, h("span", { key: 'ddff095ec76257a6c176d506c9e3d5d3cd898ffa', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '583ec19b61f6501581e39cb946963948e4053068', 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: '30fa9ad92c986b5f27647375e0ca683c5d4f0c88', 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: '501ad097db7a50cf3a37dc6f9fab93a71802233c', class: "pdf-reader__zoom-select-container" }, h("select", { key: 'dfcec45f7e5f797aa99e277eaad56e02d9ae60ab', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '25001a0d2688a203f6b673cabc925b674436ee55', 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: 'c371314ebc3b6984051cd0330c732fb0e422de47', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '58ae61fa64489b5ec8de27e7a3fb75b313255da7', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '48ae2a50d284b066645e162e34d55c5a1cddbefe', swirlPopover: this.menu }, h("swirl-button", { key: '2765a3cc4aaa9c6f0e1be1ed345a8b273f506394', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '165cbeaa2622ff8c6fdd42671bc143e4bb9b1c4e', class: "pdf-reader__floating-tools" }, h("button", { key: '846981700cc6d6a409b103fe525b39f047996960', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '58684cde03a83ab08df50ee2a2c957e494b737db' })), h("button", { key: '790d2986ece162219ea112dd5d22b3f28b03cb97', "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: '3ed32486366be32038b90e451019a6827012a76e' })))), h("div", { key: '9e73c89a83a09a7f6abc474b80f2df217f2093e4', class: "pdf-reader__content" }, h("nav", { key: 'a600376e97cd89ce66df47214c9372e2d2bd4615', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '3be7973480a7ff5ef9653a25000c2d3227a0cf72' }), !this.loadingThumbnails &&
+        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 &&
             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: 'b1e7fa88dd94f369672547702eac363c20003d30', 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: 'ce57de729eae4931b1abbb7c8feca59e109aa86d', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '7917feba38840d5505d0222d17144fb0c5d87b5a', "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: 'be1c700733a5ae5f7378b1af28d83d24e60b3ddb', "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: 'a3e657f919512892820beb3dc4189e0ea8b1b831' })), h("button", { key: '88111b09c875c287bc4caf18d3d89de503781355', "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: '31af28c95925543ec7a53dbaf5241cddca90664d' }))))), h("swirl-popover", { key: '02e825df5e1f89308b268c42573b5c6bcfe104b8', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'ea4cf98acfcd857283db7098976457bf42efcdb4' }, h("div", { key: 'be553a4ad26655f5a900551d89def4135f4831f4', class: "pdf-reader__meta" }, h("div", { key: 'b1da0ae5879ebac6fb3e47ba5c5523dd6c291069', class: "pdf-reader__file-icon" }, h("svg", { key: '5f8a251d5308e012a74a65180a49cf813e9b32c4', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: 'd9285ea636f64ecdc60902500eae23053773c6f0', 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: 'eca4b71b6396ed1a4b45d264bb99f4dfa812a8fe', 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: '0304513d87a8a3a2b4ae0db2914f6dfb4436477a', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '76d3e6479d81ab768cf55bbfe36b3b9c917f2887', 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: 'c9cd91afbbb120aff0f25aca7f7f88678881534b', 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: 'ce323f8bca0fdfe2966877981b115a883217308c', 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: '61622a6e681aa80b02ba8e36c0a0b6043645fa0a', 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: 'dd3530de8245c6d9a8ac79016d103b215ee0c6ca', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '88ee9340d913301ce9d7da8c7f7d2aadeefe9de6', class: "pdf-reader__file-info" }, h("swirl-text", { key: 'e848ccfb71392ac0b36fe2e340f866d148425431', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: 'e46c1860b5293841d0c493885a13a9f32a415fbe', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '408ac10ea49b30fcfff994a19046ec7ae05f0b19' }), h("swirl-action-list", { key: '33e741ae6ca95142db754f3b02d553341f8006bd', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '7b07663443485737f5bb532bf839c18b720c0c8c', 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: '62a7b7085ef05d74bcfb12f9ea50166c1d8e9d76', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), 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
                 ? "<swirl-icon-download></swirl-icon-download>"
-                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '6343b4c2f89e5574f46871c1d8913f11783ba7fa', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '5e97d819f5b9090a6762aba3d96d243c47100a68', name: "menu-items" })))))));
     }
     static get is() { return "swirl-pdf-reader"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

@@ -1,12 +1,9 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlResourceListFileItem {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.description = undefined;
         this.errorMessage = undefined;
         this.icon = "<swirl-icon-file></swirl-icon-file>";
@@ -16,11 +13,12 @@ export class SwirlResourceListFileItem {
         this.removeButtonLabel = "Remove file";
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -37,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: 'a77fb6c728aa73b07338bf27be5fe1bcff9cd5ce', role: "row" }, h("div", { key: '4f3e56655138f59ded67feb2a1c56d14d5bdbfab', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: 'fd87bc5faf44da2adfe0531f14084a3716357ff0', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '591358738d945b39c9b9ffdeb8ff8420662fc2d1', class: "resource-list-file-item__label-container" }, h("span", { key: 'e542836253c3cbd2330d1ac3f8b39e9b4e44ccd4', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'a3fa60138b871755ddb9d6f882af6acd4add6594', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '22f1d243bf021a496f5bb1096a70915099d79e6b', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '76d645965f1c9e33ac2f74f9a5f53428fd76c430', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '0e3e3962afcdd746b1a46e3dd96f56563ae34170', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'cd07ad9b4b3f18f3d6d10dff309ba6451362f2ca', size: "s" }))), showRemoveButton && (h("span", { key: '0001190d82fc5a32420a465ee5bd5eaa917e0f42', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '7a6bc7c626ab5c9060c0bfc2aae771862055fbd8', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        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 }))))));
     }
     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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import classnames from "classnames";
 import { v4 as uuid } from "uuid";
 import { h, Host, } from "@stencil/core";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 /**
  * @slot control - Used to add a menu button to the item
  * @slot badges - Badges displayed inside the item
@@ -9,12 +9,8 @@ import { getDesktopMediaQuery } from "../../utils";
  */
 export class SwirlResourceListItem {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
         this.elementId = uuid();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onClick = () => {
             if (!this.selectable) {
                 return;
@@ -73,16 +69,17 @@ export class SwirlResourceListItem {
         this.updateMediaState();
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+            this.updateIconSize(isDesktop);
+        });
         this.makeControlUnfocusable();
         if (Boolean(this.menuTriggerId)) {
             console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
         }
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         const icon = this.iconEl?.children[0];
@@ -156,7 +153,7 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (h(Host, { key: '51070214010bb6f42b11d1451d711523908dcd24', role: "row" }, h("div", { key: '58da33a690ad26cc6cb613f7c3a120cc27c14168', class: className, role: "gridcell" }, h(Tag, { key: '4733c36969976407c76a0852e7b688005d829467', "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: '43feb905ed747fb0f3dce03c9bb0906e807f4cc9', class: "resource-list-item__media" }, h("slot", { key: '8bf74e8f11becef18f95a50ee78af293176e3c74', name: "media" }))), h("span", { key: 'b74ee63857ae512b974e9732d73ff2c7eb070ef6', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '7271335be0863add557483c3819bc61f0bcf3eee', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '4ddca66a33fcbe50927e3af38c6d1bea2ed67887', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '540c9ad85c13187700ff1607d59afc80d90529ac', class: "resource-list-item__meta" }, h("span", { key: 'cb31b8cebf261df69ebb90989e0ec0fbc3c267ee', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: '57d467dfc1dff7d17e93aa0e03f1760054d85de9', class: "resource-list-item__badges" }, h("slot", { key: '18ea4383798222c2aea1dac37464b65133143604', name: "badges" }))))), this.selectable && (h("span", { key: 'aa967cf2216cd148edca930425ecbda013413850', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '3cc2777fbf3850ba756ed88e0ad4ae29e4caf32c', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '61a80c63ef99e3b530c3cc231a1abada0f1940fc' }))))), h("span", { key: 'eaaf028e6c729fc7093d355ebc6c31bc2d4a8696', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: 'f988fee1daed088fb4fb56a5ab262f6e8815d4f7', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '170cc8abf345cbfeeb3d86a77ad4ba081465ee4d', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'b33497fd10358229f0125497dda088c1d0c3ee6b', "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: '1caaaf86725af4eb4215453453ab724c5777f035', "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: 'eb0b87432675feb37a2f6d8de9f6228e9e921b6e', size: this.iconSize })))));
+        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 })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js CHANGED Viewed

@@ -10,7 +10,7 @@ export class SwirlResourceListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '9359fa2c57788025883f95b9dd2e09fc2933ceb4' }, this.hasSeparator && (h("swirl-separator", { key: '961287d4c51086777767af9750cff525ca235ca5', spacing: this.separatorSpacing })), h("div", { key: '95b4dc82ee1b72fb2131682dcbec3593a379c090', "aria-labelledby": "label", role: "rowgroup" }, h("span", { key: 'ea0adcc5f0a1f4b332999811d1a5ceefb4930698', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: '421678eac1c9a6638625f264b68bffae2ee4f671', spacing: this.spacing }, h("slot", { key: '2b2329221f5d15ed509410431d37a26dea8aa843' })))));
+        return (h(Host, { key: '1429097f270d644d89e5d9821ebe7df378ac9b84' }, this.hasSeparator && (h("swirl-separator", { key: '7dc77393fee0393ca1c7f286e244e1840bb7fc84', spacing: this.separatorSpacing })), h("div", { key: '89ddc7cb97e2061932045f0b99e0e735815ddced', "aria-labelledby": "label", role: "rowgroup" }, h("span", { key: '07bc08c1d6a5c0b78e7f5d436eaf702591b9b524', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'd686b807b73ba4319816d53310d7789c47c6ea97', spacing: this.spacing }, h("slot", { key: '54838e6f0c9124c2e5df75220ceca8509b009d8a' })))));
     }
     static get is() { return "swirl-resource-list-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-search/swirl-search.js CHANGED Viewed

@@ -1,12 +1,9 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlSearch {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.clear = () => {
             this.input.value = "";
             this.input.focus();
@@ -35,8 +32,9 @@ export class SwirlSearch {
         this.variant = "filled";
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
         // see https://stackoverflow.com/a/27314017
         if (this.autoFocus) {
             setTimeout(() => {
@@ -45,7 +43,7 @@ export class SwirlSearch {
         }
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -64,7 +62,7 @@ export class SwirlSearch {
         const className = classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (h(Host, { key: '4092fdf29e81da467a01ce14169ef0a236fa1e81' }, h("span", { key: '8d44e68c5d1ee9dcaa87e7b072b7368060451a21', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'a398ce6356847a6cf619cef1d8d1a1e84949a624', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '4fe717d1512a62b47608dbc99042a01e438a38ef', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: '541696544a78036c61621ac82e9ab5071f4b69fe', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '57a0dbb569ca31f11ae9187c4675d90fffca4a0e' }))))));
+        return (h(Host, { key: 'c54510f133d5583f1cb2942a21e889a271ec083c' }, h("span", { key: 'f09bf81a55b0e0e23e78dd1929055e92fd966e90', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: '9d5107940cfaff59864c6a94c5eb2a3657a9168d', "aria-hidden": "true", class: "search__icon" }), h("input", { key: 'd42dcf2414af5d7f569a6990c5e85f67bdc8b9b5', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: 'b6ec549ceb75a93fda65cc8fb008e00c26b133ac', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '7bff26d8ebc73200035936d4add57e2ef6bdd1e5' }))))));
     }
     static get is() { return "swirl-search"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-select/swirl-select.js CHANGED Viewed

@@ -132,11 +132,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: '947b8abbe280851024395be50ee4be78d9ff5028', onKeyDown: this.onKeyDown }, h("div", { key: '74b67984dcf464941e35fbd5bc2b88ce91a74c4a', class: className }, h("swirl-popover-trigger", { key: '417f265b7458e520a4202febe36ef2ade56a7f8e', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '66f145e0575a57788abd9aa0173d144cf73c74f6', class: "select__value-container" }, this.standalone && (h("span", { key: '0feb430797afe9f5d4e526b97c043c6d85fff617', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '8fc3653477dfbfe22f933765cb8091b24f05cb19', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '14f2619b962f27a7d7e67b252a0451dfdeed837e', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: '765e25c749d2eb877dde67bd757b3206c3ed75a5', onKeyDown: this.onKeyDown }, h("div", { key: '9143737c82d76050d6506b939eb4a505a8cfe31d', class: className }, h("swirl-popover-trigger", { key: '51ae0424c072b1a9afe3a3448070abdc8ab75c81', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '9cd674b5b7417e1164e2d651d2d86288f11f0ce0', class: "select__value-container" }, this.standalone && (h("span", { key: '04c0a45f197cd3b7a9ca4f603dc704b3cbcc1596', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: 'eff25913c06c6f136fdb36b68dbcf0061c7d182e', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: 'c59a0e63c2dd9852a0c457255f442021bc365557', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '73bb94ea5aa5034560ec400b400e26febe886542', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: 'bf4556abe2525f75507568975ec58bb653ecda79', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: 'abab9d511d132daa820542618d6409e6c00e5db9', class: "select__search" }, h("swirl-icon-search", { key: '3f73b6156fc17813640644cc9b7eb279b2652d01', class: "select__search-icon", size: 20 }), h("input", { key: 'c1041e6ac36132351fe04f33c1fe67daa00c0743', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: 'e450bc76e2746cf19f8a52dc49ce47473fa081b9', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '2a7d06971386499d796cc64bc766ef568f88cc41', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '5ef2b14336a7a0cab9c7948cfc7cdb65aea1259c', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '46c8591fae8871ed825df1ac3f387a59fab7ff69', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'bd5aaabccfa5d42afcec73b833caccb3d75cf8d3', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '369294df27d922e085cc9a2d7e9c32f9bfebe7b4', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '724441014ff983db14d2eb996f7645390c2b93f0', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '6536a7ce0f4a80280a4fcdb83d9f580accb61c98', class: "select__search" }, h("swirl-icon-search", { key: '41e349d08fa079ab82f27fa2e361743b0e2db748', class: "select__search-icon", size: 20 }), h("input", { key: '3118c3a63781bfa7a620daaf83edecb5884b0b75', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '6c29d34c1317c81a83832c9aa85ed72d68227928', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '6f117b770860587182738b87051bd4409264f4c6', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: 'b93fafe0effeff337262920be347d92bb05e6a32', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '8bb01c60688dfa47b93765e177952491df006f95', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'fae8c50f99a97412356b773766ac2e01ecbd6dd1', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js CHANGED Viewed

@@ -212,25 +212,25 @@ export class SwirlShellLayout {
             "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: '5c7405d43be8d64d11bde2a2895ecaf2fa59e35c' }, h("div", { key: 'ee7e90c36feb4dacfac6d02e5d8648e07dc1c92d', class: className }, h("header", { key: '92b2857585baf1492b75ad9027eb0bd58e22dade', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'd2e9e8714b29de80d685f77edc4d91b1e8385692', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'ed1fd6cc4d5987ecf745cf65f00ca0999ee1836d', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '92baa63700c6d090a6ffc9c98896bad65a355686', content: this.navigationCollapsed
+        return (h(Host, { key: 'b41ec3c36c2cc718cac5f7dc7831a36eee22ed0d' }, h("div", { key: 'f547b129cf437004ab50a9c933b1f08939495c8d', class: className }, h("header", { key: '0b114b32d6727b297e7206cf7a8ea930bdf39962', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '69efc7887c653bd1195ca6fde601dba8db4622d5', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '46aa4833d45afa45129504f2325d3ef16ca53caa', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'f1d89e8d5cee4612e9ddb07448e0f320b0a2973a', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '421cdbaed37ab19f44ffbd049db7bf0abaae466f', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '89c5e70d2de9d483e949e0d459a7b7b3e822e5bb' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '1da2cede2f01be0a635f5bacdff33015a70673b5', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '43335b328fc600897cac805d5306287dfa80ab0d' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: '3d00148d1c7c94a7fcb16581790a05a22da7c0ca', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '73e9e08344fe16dc10b67ba1b0dadd89cdaf8fed', size: 20 }), h("swirl-visually-hidden", { key: 'a45ba9381c607f14737069bf474bb3740937ac13' }, this.browserBackButtonLabel)), h("a", { key: '18edeb45c16810175d2e2ffb483ff87b83ff3403', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '5e54c7e698835f2d3a2b43bd81be738cdb9cd2dd', size: 20 }), h("swirl-visually-hidden", { key: '1c05811dd41df8d5f8fde53d158d396738cc77b6' }, this.browserForwardButtonLabel)), h("slot", { key: 'c5057a933fc9c1cb0f2039b551dd1e0800df647a', name: "left-header-tools" })), h("div", { key: '292dc340b2de9689e00e627af051988a34affd11', class: "shell-layout__logo" }, h("slot", { key: 'bc11dae99c0a1b58fb56eef1e5109477d3433653', name: "logo" })), h("div", { key: '46f0c0f653620509114a685e79eebc5cee1d1adb', class: "shell-layout__header-right" }, h("slot", { key: 'b4529ff64725c2267a05f725077290d7a7ed499d', name: "right-header-tools" }), h("button", { key: '2b01df32ecbdd32c2164a0906c3f13470367761f', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '0b0ec4d2f363b677076465fb070bdac12bf8a5a7', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'feac2b61d67668951ebe0e1afdfa984fb146c308' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'a11bac7a01c9552efe516b17331c9135c1b091a8', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+            : this.collapseNavigationButtonLabel))), h("a", { key: '36dee7117b459a6a9aa8ae0d745f6f97a90c5488', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'bc6dec6db8fe2cf719c0ae128bd56230ad116b38', size: 20 }), h("swirl-visually-hidden", { key: 'b142716c718cf9087fe634fa2b80a29555746dd4' }, this.browserBackButtonLabel)), h("a", { key: 'e03a569ec1be73f56f7a6a94eb8d91cf5d44d7ad', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '49a94026e7bb3a832a9beb23b035b422ac72ddba', size: 20 }), h("swirl-visually-hidden", { key: 'f6cbe8819a8caa768e8dec45944f81bf6a2a6308' }, this.browserForwardButtonLabel)), h("slot", { key: 'f446bdcc52bd64ddbf14fe9a7f392a7f76ae5595', name: "left-header-tools" })), h("div", { key: '90ebf697aa67d8224cab425200098194685bd3a3', class: "shell-layout__logo" }, h("slot", { key: '6ffaefb48d653a4d4cd649c4ae090df616c9314a', name: "logo" })), h("div", { key: '7af5afa9f6e13696c63c452759ae487660f0f987', class: "shell-layout__header-right" }, h("slot", { key: '876ec618577d3a761f50d979d8944ac4b33a5d89', name: "right-header-tools" }), h("button", { key: 'c84b56657340099111cb759d7f35af0ae6225f17', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'e98c1a690ff54441abfd6ac78d6efaa01f76a63d', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'a51caeff8f2beb7c310a63316e78920a994b872b' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'eb55eb80e4adb3bf940d2f915fe12fbcf59eeaf8', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'a06cf70ddfaa3e304738d5981657afbae7f5a489', name: "avatar" }))), h("div", { key: '64f4e3cc45d4c9aa4a54293993c8f786de6812d2', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '3b90e0a4f9f8668a24b5790a955f12b5d886b52c', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '73375fa11ed673e7a85c950469cf8f0a656a4b12', class: "shell-layout__mobile-header" }, h("slot", { key: '66fd9745fa2bade61621da00474a176d55ec593d', name: "mobile-logo" }), h("div", { key: '1958beb802e6055c7cfd8f019d054ebbd32f97ed', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '33a90b8f1eaa59f5699284fe0a98450d686cf457', name: "mobile-header-tools" }), h("button", { key: '1b23a54560aec96efc3447867e86addd8f00d97b', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '05d056e099d654e3acceb1b23c006fdf57130c65', size: 20 }), h("swirl-visually-hidden", { key: '1d443040233b5366e3aac36e16052e624dd3427e' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '3c0c27318825c7e28b4062936dc5fa09804975a5', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'e71aed02f6f929d05740722c4c0c6a33f9dc7e45' }, h("span", { key: 'f81c05fb97642924cb80580d5288e898749bdf39', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'c897d4e2681dd38c7f62510c29dbfaba5376715d', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'c1bea8fdb7200d6559f573c6967401356060b99f', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'e3772b4b871c3099126f03ac741f66602cebcc02', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '5a54814c682137aae40e0c23dfeb30d75204f8d4', paddingBlockEnd: "16" }, h("swirl-stack", { key: '120b0d0679833e902ec4349dd04bd7be94e22807', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '46edf59b99827225451ab0a370ebd9717cd3c2aa', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'a392d1463af93a443ef07bfe574980666b9496ec', name: "avatar" }))), h("div", { key: '7862ee167569b8923e1cc1bc9c0b1fb3670ffc29', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '96227152896b85046e56ea5be38266b62c733b56', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '243f29db5f2a48dc45ba1f0d713b3c4958cf1d4c', class: "shell-layout__mobile-header" }, h("slot", { key: 'b648b46f314b7eb3e8cbeaab66b60958df2c33ea', name: "mobile-logo" }), h("div", { key: 'a1806198bacd3b41cefc5ea09317ae5507bacdeb', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '7181e730515ed1e15bd74c81caf7ce387c9a7363', name: "mobile-header-tools" }), h("button", { key: '21181b0d53b86e3318359e9770b6cf37015087fe', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '74f8978dc90e8c2f83e79c5953853fbf6910ba72', size: 20 }), h("swirl-visually-hidden", { key: 'c58d6dabd239c9d23df8a846e658f39ce43ca265' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '38a861f58541e69347f6e6dd054ab98117ee17a6', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'b6e84598aa2edb8f12cb93a23b16bf568794ecba' }, h("span", { key: '02a468263e43ac060e35a362810629312d9f425d', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'aa2ebbb0402ba79ec0b5f00cf1ae6253deae159e', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'b45ccc6603ec0771d5b19cbe8e5a5e30fa4eb217', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'ccd809273f64d4fa635272cecaeabd23347431bc', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '505c9ee9674a6133c90a63f2dfdaceb34687f83a', paddingBlockEnd: "16" }, h("swirl-stack", { key: '38a25b0ee1776ee2499429a7108c9dd7cfcf798a', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '26df85e18020ca33ed1af0da1612623d8b5982ec', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
                 ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
                 : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
                 ? this.secondaryNavExpandLabel
-                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'af2d9529502634a5bae5b976ddb734385e28f5ac', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '16b32d3114b020a7e8c4e0799ce65515d6f07b30', icon: this.secondaryNavView === "grid"
                 ? "<swirl-icon-menu></swirl-icon-menu>"
                 : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
                 ? this.gridNavLayoutToggleLabel
-                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '47a974405dd7dfb09123f819687955b7e1a6d6e1', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '94a44eaff355c8683c1e479b8959108faaa9481e', class: {
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
                     (this.secondaryNavView === "grid" || mainNavCollapsed),
-            } }, h("slot", { key: '634060f2a9f4146ea8326bf80fc6fc5d04d5d588', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'd5685120df65226533a345fc8d38d5110174dd6d', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'cd276d48e69dd5345fcbd78e28d893d7dedbfb7c' })), h("aside", { key: '10ab72b0cc8707896e061e6308cb9c18116277f9', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '61ab2c93e9950c603042be15bc9ff8df7ba9cc0a', class: "shell-layout__sidebar-body" }, h("div", { key: '714aebceee84a239e4adfc3d5978e25497c01b22', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'd0a7cf7dda1f7db1c4c2ca6ee89a0a4b24620dd3', name: "sidebar-app-bar" })), h("div", { key: '1b58d0bc1ae3822d87a2cf8dfb82e035e8bf2204', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: 'a10ec8801978fbb9041472e9a801cb4a203054ec', name: "sidebar" })))))));
+            } }, h("slot", { key: '51f845c7d99621bfd9178f7b0e32b2941ea50dcd', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '6b60332d37ccc92d6d2a23c4a1bd8503df22ce26', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'e52301373ea6373de589f557b9ed10f915357cb6' })), h("aside", { key: 'ae3480231e8bf0745c83b961d4e0c0c4d66ed3e5', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '12b4221c454c5bf6c80c96c2a7a2e8a89ddd8a64', class: "shell-layout__sidebar-body" }, h("div", { key: 'a21c6dec96498f41da1d2345c6674de66a77aff1', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'eb28d3bc28b3b2d042f75d7e7946f1d730572b88', name: "sidebar-app-bar" })), h("div", { key: 'bdd4fafc000dc34ed4b3a0d909495b3b1e398032', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '680a9946a8328bd80b6ccaeddc78095ff29a3017', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-symbol/swirl-symbol.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class SwirlHeading {
     }
     render() {
         const Tag = `swirl-symbol-${this.glyph}`;
-        return (h(Host, { key: '5cfe3c7b0b3438fbe800ed721a1ab37fa2ab3cb1' }, h(Tag, { key: '87443ca99e0bc51dde17dea1b7c1f7d60e865c32', size: this.size })));
+        return (h(Host, { key: '76f9ed6fd5038bd81af429cbf3f311430512b164' }, h(Tag, { key: '4ca949a85329fe3997266f18df39307670dbe5ed', size: this.size })));
     }
     static get is() { return "swirl-symbol"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-account-circle.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class SwirlSymbolAccountCircle {
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: '117b98ce4f4b7102a7559be06f5d26907e81a197', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '37a703c55d5a69456b5453abee68c2329e330322' }, h("path", { key: '3c82b096715fd31c9aef06e932db0935bffdc070', d: "M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 5C12.5933 5 13.1734 5.17595 13.6667 5.50559C14.1601 5.83524 14.5446 6.30377 14.7716 6.85195C14.9987 7.40013 15.0581 8.00333 14.9424 8.58527C14.8266 9.16721 14.5409 9.70176 14.1213 10.1213C13.7018 10.5409 13.1672 10.8266 12.5853 10.9424C12.0033 11.0581 11.4001 10.9987 10.852 10.7716C10.3038 10.5446 9.83524 10.1601 9.5056 9.66671C9.17595 9.17336 9 8.59334 9 8C9 7.20435 9.31607 6.44129 9.87868 5.87868C10.4413 5.31607 11.2044 5 12 5ZM12 19.2C10.8119 19.2 9.64219 18.906 8.59528 18.3441C7.54838 17.7823 6.65678 16.9701 6 15.98C6.03 13.99 10 12.9 12 12.9C14 12.9 17.97 13.99 18 15.98C17.3432 16.9701 16.4516 17.7823 15.4047 18.3441C14.3578 18.906 13.1881 19.2 12 19.2Z", fill: "currentColor" }))));
+        return (h("svg", { key: '263eb7b26031309f3f687952c763dab87a940773', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '9d870a1883a2cde039634e5c58ba45639ccfc616' }, h("path", { key: '2eb07738a5cec3c2438deb527a6df32b3aa37619', d: "M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 5C12.5933 5 13.1734 5.17595 13.6667 5.50559C14.1601 5.83524 14.5446 6.30377 14.7716 6.85195C14.9987 7.40013 15.0581 8.00333 14.9424 8.58527C14.8266 9.16721 14.5409 9.70176 14.1213 10.1213C13.7018 10.5409 13.1672 10.8266 12.5853 10.9424C12.0033 11.0581 11.4001 10.9987 10.852 10.7716C10.3038 10.5446 9.83524 10.1601 9.5056 9.66671C9.17595 9.17336 9 8.59334 9 8C9 7.20435 9.31607 6.44129 9.87868 5.87868C10.4413 5.31607 11.2044 5 12 5ZM12 19.2C10.8119 19.2 9.64219 18.906 8.59528 18.3441C7.54838 17.7823 6.65678 16.9701 6 15.98C6.03 13.99 10 12.9 12 12.9C14 12.9 17.97 13.99 18 15.98C17.3432 16.9701 16.4516 17.7823 15.4047 18.3441C14.3578 18.906 13.1881 19.2 12 19.2Z", fill: "currentColor" }))));
     }
     static get is() { return "swirl-symbol-account-circle"; }
     static get encapsulation() { return "shadow"; }