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/components/file-manager.js CHANGED Viewed

@@ -90,7 +90,7 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: '4cfa91917e203a4bd5b72d5d02387ded238e5209' }, h("swirl-app-layout", { key: 'a69b4ddbf9a58bb4f43b8e139600804ec6fd8a34', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: 'fdfb6e32876f75213ec6f0b6b8acc8a14bd48cbf', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'fc6d77ab26d3d8d9841cccf5bb484cb4b0d629bd', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '7624d29647b003f9c70393ba7bbb102d04c998e5', label: "Sort items" })), h("swirl-stack", { key: '9957ef1fe20df91fbf7e22a08052e7cf93ef9861', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '5e39f7f419ae74be10b2ba3a96c79c744b1b28b5' }, h("swirl-heading", { key: 'faf0a911d8c23363e1281d1d8c79e46a0ed52e13', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '28258670d03f246385460f5c86f77e23258fe929', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: 'c71d3ee68839a170b657b9c9f195217f0b758519', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'c9be78fce8b0fd9293497a82dc6d94cf6943d3c4', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '63d5c2f3db306aba48638c55fc82611cdc644dd9', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'a97c29261fa36b8812ebbd89fcbd61ed6c15d890', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '86dad50a80953a3519340742d4bc11078c29b6ce', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '340d8856b8f62bc0b50aa7b738a3b8ceeb9bbd0e', value: ["ascending"] }, h("swirl-option-list-item", { key: 'ffd78b732b9b834995bd142433f2417edcd0fd20', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'dec984555f033dc11ae143f24c643bc5c2cb4362', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '9b18a0ed42b795d12acdfd6d5151bea46cbd0a33', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '238a8b1ca12dee5358024f974c08bfb67bb53235' }, h("swirl-app-layout", { key: '83ef9e1782d2980ad5c8c1db94be6867cda188cf', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '5b7eea7f29077fda0a463290c5ebcc39731209d1', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '9fdbcb39472f30bdfdf7ac827e615c0d364f1066', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '825308df0e54a686a4001f3705e8962291726478', label: "Sort items" })), h("swirl-stack", { key: '5fb0db793fae1fe89bff9a52dbeba056aa71f092', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'ced1a61d813f26d94ef4c2ded31b0db76179bad7' }, h("swirl-heading", { key: '2503922ae628f0eb834f7ae2f56a4d3bfbd4d0ad', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '8b110a022a1b624f281693ea58243c8e8fe00904', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: 'fb4e5660e297d9b46cb37feed4f8378aee7b11dc', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '78a82d30591eb64bc3c26ae0f7e9766d7dd0ee0c', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '11f5916fb37a21d8028448bcd5ab112d966cb829', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'e4b7da0e0142ecc7733a05a93a1120c6cba6ab5f', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'c3672cf255544e65aa7ccd6640f6880dc2726101', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '69daf066aa63085a495c22b5b069a6f848caf912', value: ["ascending"] }, h("swirl-option-list-item", { key: 'c97148ede10e77aac10f40d867c2d3a5d2b394ab', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'aa175a6c338a050724f42875e5833cad5c739f36', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '1a0fec2fdd825af75dbcf279179e5cabce301480', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 }, [1, "file-manager", {
         "selectedDirectory": [32],

package/dist/components/media-query.service.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { t as getDesktopMediaQuery } from './utils.js';
+class DesktopMediaQueryService {
+    constructor() {
+        this.listeners = new Set();
+        this.onChange = (e) => {
+            this.listeners.forEach((callback) => callback(e.matches));
+        };
+        this.mediaQueryList = getDesktopMediaQuery();
+        this.mediaQueryList.addEventListener("change", this.onChange);
+    }
+    subscribe(callback) {
+        this.listeners.add(callback);
+        callback(this.mediaQueryList.matches);
+        return () => {
+            this.listeners.delete(callback);
+        };
+    }
+}
+const DesktopMediaQuery = new DesktopMediaQueryService();
+export { DesktopMediaQuery as D };

package/dist/components/swirl-action-list-item2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { g as getDesktopMediaQuery } from './utils.js';
+import { D as DesktopMediaQuery } from './media-query.service.js';
 const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}";
 const SwirlActionListItemStyle0 = swirlActionListItemCss;
@@ -10,10 +10,7 @@ const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionLi
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.badge = undefined;
         this.disabled = undefined;
         this.description = undefined;
@@ -27,14 +24,12 @@ const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionLi
         this.suffix = undefined;
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
-    }
-    componentDidRender() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         const icon = this.iconEl?.children[0];
@@ -53,7 +48,7 @@ const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionLi
         const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
         const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
         const className = classNames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-        return (h(Host, { key: 'cf72c77a7238b89ac5737fbd26a4f9c5fb8d2aaf' }, h("button", { key: 'b883df9fba48c6f1e3fa18cb2acbddcb1c4f7903', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, h("slot", { key: '2903ffa6a0b97a9d1f30a3ab485a5f4625016893', name: "avatar" }), this.icon && (h("span", { key: '687e8b468e26a239a45829f5448e3f4fae991a18', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'db6fa0aa9ee28b495febd9278f464add1d195295', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: 'd64137da6c8345faf3fb14f6963b267e2bc83f91', class: "action-list-item__label-container" }, h("span", { key: 'a7e623ccfdaef36bd426f4e0121337926a04132c', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: 'eae257be5f0974019afdd7a1517c2efed55d397c', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: 'f6837cf900a859145f4360ec9d407ea51659c0f0', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '4aa5cd117be445a278cefcd6c7ffaea2e72a642e', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: 'c496345eea881fc5d6742710a053aa45cd4d94e6', name: "suffix" }))))));
+        return (h(Host, { key: '6e0ba3475bbabc4b456d23070aada4ad73a7bef7' }, h("button", { key: '568753980452f56f6305573cfacc1540728f8a64', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, h("slot", { key: '90c23d6a829bdb2903ff76eda7852101b174b198', name: "avatar" }), this.icon && (h("span", { key: '1855b294b64760c5399cfb9b371715399ed2e985', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '1db1f001b6a4e9d40d4e11dddb5f2a45c8c81106', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: 'a55df1b640cb5c5109dc632c39dca728fce290da', class: "action-list-item__label-container" }, h("span", { key: 'ae479a05bbfd854b8472d3977d7489df73e611cb', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: '959761897cc5c8d4d2474795460b66bb5d22475b', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: 'cd679c3648c86d6d7f5c9c37f1d02e8b14cd2bfe', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '88754ec73e17680ebdc939f42df996dace73fdce', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: '37b5c4659a5ff5c1e36e9dd47292180e9b9a5dac', name: "suffix" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlActionListItemStyle0; }

package/dist/components/swirl-action-list2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { q as querySelectorAllDeep, k as getActiveElement } from './utils.js';
+import { q as querySelectorAllDeep, j as getActiveElement } from './utils.js';
 const swirlActionListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";
 const SwirlActionListStyle0 = swirlActionListCss;

package/dist/components/swirl-app-layout2.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { g as getDesktopMediaQuery, d as debounce, i as isMobileViewport, o as prefersReducedMotion } from './utils.js';
+import { D as DesktopMediaQuery } from './media-query.service.js';
+import { d as debounce, i as isMobileViewport, n as prefersReducedMotion } from './utils.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 import { d as defineCustomElement$1 } from './swirl-heading2.js';
@@ -18,10 +19,7 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         this.navigationBackButtonClick = createEvent(this, "navigationBackButtonClick", 7);
         this.navigationExpansionStateChange = createEvent(this, "navigationExpansionStateChange", 7);
         this.sidebarToggle = createEvent(this, "sidebarToggle", 7);
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.isDesktop = event.matches;
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onBackToNavigationViewButtonClick = () => {
             this.changeMobileView("navigation");
         };
@@ -113,9 +111,10 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         });
     }
     componentDidLoad() {
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.isDesktop = isDesktop;
+        });
         queueMicrotask(() => {
-            this.isDesktop = this.desktopMediaQuery.matches;
             this.restoreNavExpansionState();
             this.updateContentScrollState();
             this.updateSidebarScrollState();
@@ -123,7 +122,7 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
         this.mutationObserver?.disconnect();
     }
     onDocumentClick(event) {
@@ -349,14 +348,14 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: 'e9ce1a534b9acff55e07b798afb306e07a619a81' }, h("section", { key: '4d328d6707d7dff74ad9c6016af1ada8f1384e28', "aria-labelledby": "app-name", class: className }, h("div", { key: '2b7e59a9abf6c8d1379136e1446ce7e708974f43', class: "app-layout__grid" }, h("header", { key: 'e3e8a94655fa12bc7daa7b9ae984217654d5d8d0', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '4842de5ed8cb9d055f75426f09d4c4221ce3248c', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '24607acca33855b93dba77e0cab7b43cc19dbf6f', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: 'b5e0b5c1ab49c9a77de1e6d8c9157cf907a5d331', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'de84a867b3b81da15a8a1a91feaf3d555b05d830', hideLabel: true, icon: this.navExpansionState !== "expanded"
+        return (h(Host, { key: '0970730a8b11319c50969d6d6e7f217dcf56e2f0' }, h("section", { key: '06d420b7d6bfe12422b52e2cdcb8fa8a2ed0fbac', "aria-labelledby": "app-name", class: className }, h("div", { key: 'b50a9beffae3145861ed4b71705fe673f5d10043', class: "app-layout__grid" }, h("header", { key: '04c3f7e4b7cb227cca2e9a15e262ddc9874032e1', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '67ba8ba5394d42ba1f96ccb3258aefb8acce87c9', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '8795a4b7ac5a63bdd1f838c6ba1d0314cfa33dc9', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: '0a11ae6739ed9863837da26a60a5f524ca2215ea', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'e0670ebab68aaefd7342a31b0a2c139f181c4cf1', hideLabel: true, icon: this.navExpansionState !== "expanded"
                 ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
-                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: '7a146162ce324567d3bd9ac1e94fb4270e841491', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '01e4e8588d68a858b3199883255a4de4a5890bf3', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '89125641f790dfc3134265a212768b6aa8f17f25', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '695f0de46afd902d3d69bd85d74ef9915a5a9c75', class: "app-layout__navigation-controls" }, h("slot", { key: '2f239735632860d0edfe5fb967bac05b21f14452', name: "navigation-controls" })))), h("nav", { key: '3bc5df6af2555a12164b8695f2b1b637ec2d086d', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: 'df74e59b27c2e15ffc532826ac69794df187ece9', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: 'ca4e1610d7566b66ebe6958f8ec6f89d4a84554c', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '7ca7f6ca8a69fead26966a6b224966f4404351da', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '3d1205492f28588558a5e1d1c1948c4da7870c46', class: "app-layout__navigation-controls" }, h("slot", { key: 'f97090b47f524589e4d86e293e92ce2e001503dd', name: "navigation-controls" })))), h("nav", { key: '9b2f944843bcee7c5322b728ea26fcc7d8ed990f', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
                 this.collapsibleNavigation &&
-                this.navExpansionState === "collapsed" }, h("slot", { key: 'd5e1ac3dc3187e1b4761b83d66d4fa98c7c4e3b4', name: "navigation" })), h("section", { key: '422313cc9de344ef4b66a37f0f69b709b6f71687', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '46ea9b5669da12d8e78151977dc55b1e197e8dcb', class: "app-layout__app-bar" }, h("span", { key: 'b35d5938aadcdffa64b8927c096bb3f5b87fa349', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '2be2762f6d1cfdf8f569006557b5c51b8fc28b36', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'edfb91e719c8b77c73e945ca138f334fca56540b', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'e8cc48db20975a04dd63a8dc86c39b86bbb5630f', hideLabel: true, icon: this.transitionStyle === "dialog"
+                this.navExpansionState === "collapsed" }, h("slot", { key: 'a3fa785458acf70951cf209062e9f91bfec49db4', name: "navigation" })), h("section", { key: '3649f14cce3bdf275bc7325680b4c193085272f7', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '401b6adeda9ed569d8a6c37f381fed0623a34701', class: "app-layout__app-bar" }, h("span", { key: '7b60e9abca35a3c6ab900e8d882116e8b22ce730', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '44c01881cb2c4799942609ca43f2ead4de855859', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '63a89ec584fa6a21a5cf4be3fdf15e84df01b03a', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '5d05136bb74adcc5a404bdb74533636777f3b598', hideLabel: true, icon: this.transitionStyle === "dialog"
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
-            this.navExpansionState !== "expanded" && (h("span", { key: '8c96a9e2f67470bd86c72d66272306901585d81e', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '36b26a023643f6fc3f43d2df344583004ee60b78', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'b005af6a600db164a8251478d8d6f0b63dad6d48', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '829e1e1145543dbb9658566051e69d28095ed4ee', name: "custom-app-bar-back-button" })), h("div", { key: 'e25d3fe097657c6ce637d075d7f886faebb8dcde', class: "app-layout__app-bar-content" }, h("slot", { key: '7913c7ce6ca420a4ea5c6640e57e8718c5b8cdc5', name: "app-bar" })), h("div", { key: '5f6df0102cebfcaaa4e2bde25e218e6a506c81ca', class: "app-layout__app-bar-controls" }, h("slot", { key: 'b4b19bf2bb4a51732f9ea647758b42721169aa5e', name: "app-bar-controls" })))), h("div", { key: 'a1cbbdffab4675813ee104abcdcf5722ad33242e', class: "app-layout__banner" }, h("slot", { key: '0fc317305b8d94dc2670f2731ab7ac841ddad69e', name: "banner" })), h("div", { key: '6c434829a6c78aeaea9f084735122d685b1ca636', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '5ab35d69d738ac114725661f296f89624ce5aa21', name: "content" })), h("div", { key: '14a299ef135a30d6f8975db14bdb668e79c39b7b', class: "app-layout__bottom-bar" }, h("slot", { key: 'b6f039e3ca95a896c38bfa97943b46f21d0688e4', name: "bottom-bar" }))), h("aside", { key: '403077f3384c185e97eb0205f11a932e4c1ad76c', class: "app-layout__sidebar" }, h("header", { key: 'a951e471e8363a025b4ba1ce377e7e1ef17d7e79', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'f6e9ca768e57b30b3faa072250fe9c0cba196b5c', name: "custom-sidebar-header" })), h("header", { key: '1ff00d0311949b3bdacb38ebef268a5b6e3aa00d', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'cc5a33cb40af30a16fdd9442fc34de516022c15d', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '96241a517463e025991a2c376e450e5128086209', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'a0f11ec60312ab95b56ae4465f23cd0e60f8c3e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'ed6139ae751d7701098e441d9bde7faa10d6ea1c', name: "sidebar" }))), h("span", { key: 'ea00d4875343af4d76c96c3591931b342098c0e4', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: 'd29b393a6ac566bf7b3eac1b6080f7da67e25b7f', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '7952de1a32de0b06d50911abcd9267ccb323e819', name: "floating-action-button" }))))));
+            this.navExpansionState !== "expanded" && (h("span", { key: '0426043d85f25bd9581b2046215dba5cc50ee24c', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '5b64b49937d180b23de6435351a0b7498562b2f7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'eaa0172b442211086532a15fae6bb99b70dafab6', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '86177f0040e21c020b2d88a2e11cc1f2045d9bcf', name: "custom-app-bar-back-button" })), h("div", { key: 'ff317fc8d6a4f75b81db2f4c6867d1259a9e2cc6', class: "app-layout__app-bar-content" }, h("slot", { key: '59a8e892b40e1b56acc3f33cb956d1a588670a5e', name: "app-bar" })), h("div", { key: '2244b236929f9de30d18f886b2992187b1f9baf8', class: "app-layout__app-bar-controls" }, h("slot", { key: 'c5fae8b152e14275cb09b7db637ea8ca64932648', name: "app-bar-controls" })))), h("div", { key: '85a6875e28ec691f659cbee27e299bca2048ff67', class: "app-layout__banner" }, h("slot", { key: '9790312e956f47faca3c1c4b04a6b1422a889498', name: "banner" })), h("div", { key: 'd33ae32d0644d24027423eb9dc9ba94c54b0070b', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '9e615a708ac9ae2817a680e868c70d4a9ec3d075', name: "content" })), h("div", { key: 'd173a40d98a1d8cd6b93135d9a6984afc6487813', class: "app-layout__bottom-bar" }, h("slot", { key: '10a8422834710d9b15dea188d0f8b24dab14887e', name: "bottom-bar" }))), h("aside", { key: '0da3e8a8bf7be2c6ae12ebf89b6fc91f4d9a27a2', class: "app-layout__sidebar" }, h("header", { key: 'da7303d27a7c9d65a3d3dd7ec9799f7ea8b63dd8', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'fd8fc8403066c85dd26ed414afded579928da657', name: "custom-sidebar-header" })), h("header", { key: 'addfa87cef788f272e586e3a02b0f47be414cc58', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '7daf54726d77b5a9656dd888d32d4c111746e59e', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: 'c743c2b1049f87a5c81b99ddc836f4a2b9b08561', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '9443e3843d55af79d62c949b8df53a6a1f27a4e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: '0b5eff0be0d4e98ed2755b412d8783fe25d8d809', name: "sidebar" }))), h("span", { key: 'a1487ea686f593c4b117a9eb74fe61fe8b516336', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '02d61ee5b96263295218ed0b99cb8b93d1e06df0', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '7f1e9ae5a5cbf12e28b12d8e7227fee017f6f532', name: "floating-action-button" }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-banner.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { g as getDesktopMediaQuery } from './utils.js';
+import { D as DesktopMediaQuery } from './media-query.service.js';
 import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
 const swirlBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;align-items:flex-start;gap:var(--s-space-16);max-width:100%;min-height:3.5rem;padding:var(--s-space-16)}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner{padding:var(--s-space-16);min-height:3.25rem}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-left:0}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}.banner__content{display:flex;align-items:flex-start;min-height:1.5rem;flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-height:1.25rem}}.banner__icon{display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__text{min-height:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__text{min-height:1.25rem}}.banner__controls{display:inline-flex;flex-shrink:0;align-items:flex-start;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);height:1.25rem}}";
@@ -20,10 +20,7 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         this.__attachShadow();
         this.action = createEvent(this, "action", 7);
         this.dismiss = createEvent(this, "dismiss", 7);
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onAction = (event) => {
             this.action.emit(event);
         };
@@ -41,11 +38,12 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         this.size = "m";
     }
     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) {
         const icon = this.iconEl?.children[0];
@@ -63,7 +61,7 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         const className = classNames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
-        return (h(Host, { key: '99250db7c15c3766f334835f30ffd56f0324a376' }, h("div", { key: 'd375cfcf81f60a07d9c2fea7723ba39485a53606', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '19d3d110506ed8937b427bc33345b33a07ba9947', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: 'b5e388649193c97484dc10454e42996eaf4ac8e5', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '0a4471d71e533825f9f4956342a0e0e0e551db60', class: "banner__text" }, this.content)), showControls && (h("div", { key: '0065a44d9a2cc0eebd09c69a410c8eaa13a43c6c', class: "banner__controls" }, this.actionLabel && (h("button", { key: '9ddd441512126904853025979a7128ec1a8de0be', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '7bcafc0d0a32b34c00e012bad3dcfcbb01254cab', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: '3d21dac0ac18b5f99c9426233d46664dda149f72' }))))))));
+        return (h(Host, { key: '52901533a924083e7080527d05c024dfeca4cfd8' }, h("div", { key: '3f9b2e12dae3fd6ac3320f1f207c3f80163b4895', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '210dfff43e7867341485e8a08ca9f646d8f788f6', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '4f52c17e778ad0a097b15df1bb957c00108f5f40', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '388cac66f35b9d5230e83edfa6b4ee1f83343c95', class: "banner__text" }, this.content)), showControls && (h("div", { key: 'dd2c85861e304e20b7413d8543b7d44b2403e2ce', class: "banner__controls" }, this.actionLabel && (h("button", { key: '60020c45f5b232742c5dfae378fac62bb1b552a0', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '0fd55fb8949212dcb7e21a3c47806acdfa00fa6b', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: 'a1f408e4beaef07ff7379ea7625f590dd943a87f' }))))))));
     }
     get element() { return this; }
     static get style() { return SwirlBannerStyle0; }

package/dist/components/swirl-button2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { g as getDesktopMediaQuery } from './utils.js';
+import { D as DesktopMediaQuery } from './media-query.service.js';
 const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-disabled);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus:where(:not(:focus-visible)){outline:none}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n      --swirl-icon-button-border-bottom-right-radius\n    );border-bottom-left-radius:var(\n      --swirl-icon-button-border-bottom-left-radius\n    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
 const SwirlButtonStyle0 = swirlButtonCss;
@@ -9,10 +9,7 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
     constructor() {
         super();
         this.__registerHost();
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.elevated = undefined;
         this.disabled = undefined;
         this.download = undefined;
@@ -41,16 +38,16 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
         this.inheritFontSize = undefined;
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
         this.updateFormAttribute();
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     componentDidRender() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
         this.updateFormAttribute();
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -99,9 +96,9 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: 'd6d3ce3dc37e1baae931a9889310d2b95d1e2a1c', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'ddf5437dfcd007cd797e8c02b1755faaca0af7cb', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: this.inheritFontSize
+        return (h(Host, { key: 'dec5cc1badcf88a9b3f57a647c59fea4388a0e00', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '7b4a851e0c7f3699002095cf777c040a5c97194e', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: this.inheritFontSize
                 ? { fontSize: "inherit", lineHeight: "inherit" }
-                : {} }, Boolean(this.icon) && (h("span", { key: 'db012c0296c21362c90ba800a16f96292b745717', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'f62b2479f0a236cc3bd49e636436c9b8ac86d59f', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'c0e02250891e12f1f61fe6838da9d398f1d51119', name: "icon" }))), !hideLabel && h("span", { key: '6d08f04545e0227873c57731bfe5c62726a28ee2', class: "button__label" }, this.label), hasTag && (h("span", { key: 'dba345465a93e5bba27c72878db5830316ddb84b', class: "button__tag" }, h("slot", { key: '267c787320f98ffc06a1393660c0a6dd4bc75c74', name: "tag" }))))));
+                : {} }, Boolean(this.icon) && (h("span", { key: '371fbdd6575181f62250eef491b6e4ed56b5b0e1', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'e3af04a049701785eddba2142ca9c3d9f376eda8', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'e9a101f204201023c4c62539578cb408adccde85', name: "icon" }))), !hideLabel && h("span", { key: 'e08c03769f2981aac46e02c8519d06bb1b88c801', class: "button__label" }, this.label), hasTag && (h("span", { key: '5fa04e35b9980d2f6684ba3bf40006053d204949', class: "button__tag" }, h("slot", { key: 'b9cab88a1ab1e53f3f1240d1bd32cb0175cc261f', name: "tag" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlButtonStyle0; }

package/dist/components/swirl-chip.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { g as getDesktopMediaQuery } from './utils.js';
+import { D as DesktopMediaQuery } from './media-query.service.js';
 import { d as defineCustomElement$3 } from './swirl-icon-close2.js';
 import { d as defineCustomElement$2 } from './swirl-progress-indicator2.js';
@@ -13,10 +13,7 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
         this.__registerHost();
         this.chipClick = createEvent(this, "chipClick", 7);
         this.removeChip = createEvent(this, "remove", 7);
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.borderRadius = "pill";
         this.icon = undefined;
         this.iconColor = "default";
@@ -32,11 +29,12 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
         this.variant = "outline";
     }
     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)) {
@@ -56,7 +54,7 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: '67ed7962107673d2b27886cbc6b22c451335ba4b' }, h(Tag, { key: 'ee65c5950ec0eb61037282966e60c47d113ecd4f', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '7a2fea34626f32eb01f09424ee77e663e03a4815', class: "chip__inner" }, showAvatar && (h("span", { key: 'ceacda3a0a82ab42a0eeb9016eef8d50fed975d5', class: "chip__avatar" }, h("slot", { key: 'f16326da71143e85dd6601038f6c22eaefab8e8b', name: "avatar" }))), showIcon && (h("span", { key: '9e2b3f42b74c210d2a6a4485f7ea2e4e81b9b442', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '7c51f843fabc323d4564f1af9baf978c262fec5d', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: 'c1a1eb80d19f17af33532025e5130d624defba32', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'aac475d0b313f0844511d6eb0b718e135013450e', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'f5da3e24bdc9b3c05ad2385250dea4472125765c', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'ed9878871eb6aa8755ee47fe7a44d06a55e39929', size: 20 })))));
+        return (h(Host, { key: 'aacfe2b81480beb943d294ac98858014b53e7d9c' }, h(Tag, { key: 'fe3ed0c535267aaf8d5add2ba73b1ab017202a5a', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '0e55458a8c3841ed02994ba7c105036424923018', class: "chip__inner" }, showAvatar && (h("span", { key: '6065e1ebed3ec0f236195b682ba12e85684de876', class: "chip__avatar" }, h("slot", { key: '950dd5ad2213171c4eae631c1e95c75647ec5ee2', name: "avatar" }))), showIcon && (h("span", { key: '118532298ad5ada83f2cfb15f571cc2ee857d3bd', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '22fa5011815883c566d59b59008a8af87077fc30', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '623b2f0fcc739776ef0eb46ac0cf91a3912a24f3', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'dcb29d9a57a76190704b63917d443c23f3892224', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '722397ffd1828842a1f5848d65c2c6c18a9b7893', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'd96fea1d3acd2b549197808c6563d574836a278b', size: 20 })))));
     }
     get el() { return this; }
     static get style() { return SwirlChipStyle0; }

package/dist/components/swirl-date-input.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
 import { p as parse, i as isValid, f as format, m as maska } from './maska.js';
-import { g as getDesktopMediaQuery, i as isMobileViewport } from './utils.js';
+import { D as DesktopMediaQuery } from './media-query.service.js';
+import { i as isMobileViewport } from './utils.js';
 import { d as defineCustomElement$6 } from './swirl-date-picker2.js';
 import { d as defineCustomElement$5 } from './swirl-icon-today2.js';
 import { d as defineCustomElement$4 } from './swirl-popover2.js';
@@ -18,10 +19,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
         this.__registerHost();
         this.invalidInput = createEvent(this, "invalidInput", 7);
         this.valueChange = createEvent(this, "valueChange", 7);
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onChange = (event) => {
             const value = event.target.value;
             if (value === "") {
@@ -100,8 +98,9 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
     }
     componentDidLoad() {
         this.setupMask();
-        this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.updateIconSize(isDesktop);
+        });
         // see https://stackoverflow.com/a/27314017
         if (this.autoFocus) {
             this.focus();
@@ -109,7 +108,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
     }
     disconnectedCallback() {
         this.mask?.destroy();
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     watchFormat() {
         this.setupMask();
@@ -160,7 +159,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
         const className = classNames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: 'b6ddc22bcdc331f61fca4b108b4d34f4d7f4eccd' }, h("div", { key: 'd92b1daa42c5e2fb64c378621bf50b0440813252', class: className }, h("input", { key: 'a775ec1989a9e35f3dbe380e5f7f83170bb5d1fe', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '1fd79df32d35be0951b49a2ce141309b2938d4c3', swirlPopover: `popover-${this.id}` }, h("button", { key: '11680b4c3bfee66566fd895c5399b5c860f7b771', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '91563a1eb521b7beceb4f967b091c44445d04b60', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '7b7534da460943832ed5cc8d786dd316a4e442c3', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '74b13475c333443ae34d68fa7ac78e63c79c1c1e', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: 'b08bf17f0edd807a419199a88ba2ca14b0a2e4b6' }, h("div", { key: '5543669cbc75241146e2808293631e007914e258', class: className }, h("input", { key: '85836403ef82b583fad6a4118dc4532aa482e01b', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '2054f02531393bbb345c78ed79dc620ce491e90a', swirlPopover: `popover-${this.id}` }, h("button", { key: '6aa6a53cd62693a74be31f1e2c1ed6f42d8dccec', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '87745196a9f9a67938410acf56ca36b6d7396711', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '29e15ada59823318ef9c05aae7813eeda1e8ecbb', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '65b8374a92785362f5b9060d4ddd83c5d518c5bd', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-date-picker2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as removeTimezoneOffset, s as getISODateString } from './utils.js';
+import { r as removeTimezoneOffset, o as getISODateString } from './utils.js';
 import { d as defineCustomElement$1 } from './wc-datepicker2.js';
 const swirlDatePickerCss = ":host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:var(--s-surface-overlay-default);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker{max-width:17.5rem}}.date-picker__header{display:flex;margin-bottom:var(--s-space-8);align-items:center}.date-picker__current-month{display:flex;padding:var(--s-space-8);flex-grow:1;align-items:center;order:1;gap:var(--s-space-4)}.date-picker__next-month-button,.date-picker__previous-month-button{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;margin:0;padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-highlight);background-color:transparent;cursor:pointer}.date-picker__next-month-button:after,.date-picker__previous-month-button:after{position:absolute;background-color:currentColor;content:\"\";inset:0;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.date-picker__next-month-button:hover,.date-picker__previous-month-button:hover{background-color:var(--s-surface-overlay-hovered)}.date-picker__next-month-button:focus:not(:focus-visible),.date-picker__previous-month-button:focus:not(:focus-visible){outline:none}.date-picker__next-month-button:focus-visible,.date-picker__previous-month-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__next-month-button>svg,.date-picker__previous-month-button>svg{display:none}.date-picker__next-month-button{order:3}.date-picker__next-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__previous-month-button{order:2}.date-picker__previous-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__month-select,.date-picker__year-select{margin:0;padding:0;border:none;background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer}.date-picker__month-select:focus:not(:focus-visible),.date-picker__year-select:focus:not(:focus-visible){outline:none}.date-picker__month-select:focus-visible,.date-picker__year-select:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-picker__month-select,.date-picker__year-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-picker__month-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-picker__year-select{max-width:4rem}.date-picker__calendar{display:block;width:100%}.date-picker__calendar tbody{display:block}.date-picker__calendar-header{display:block}.date-picker__weekday-row,.date-picker__calendar-row{display:flex}.date-picker__weekday-row{margin-bottom:var(--s-space-8)}.date-picker__weekday{display:inline-flex;min-width:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);font-weight:var(--s-font-weight-regular);aspect-ratio:1}.date-picker__date{position:relative;z-index:1;display:inline-flex;min-width:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer;aspect-ratio:1}.date-picker__date:before{position:absolute;z-index:-1;border-radius:50%;background-color:transparent;content:\"\";inset:0}.date-picker__date:hover:before{background-color:var(--s-surface-overlay-hovered)}.date-picker__date--current:before{background-color:var(--s-surface-overlay-hovered)}.date-picker__date--current:focus:not(:focus-visible){outline:none}.date-picker__date--current:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__date--overflowing{color:var(--s-text-subdued)}.date-picker__date--selected{color:var(--s-text-on-action-primary)}.date-picker__date--selected:before{background-color:var(--s-action-primary-default)}.date-picker__date--selected:hover{color:var(--s-text-on-action-primary)}.date-picker__date--selected:hover:before{background-color:var(--s-action-primary-hovered)}.date-picker__date--selected>strong{font-weight:var(--s-font-weight-medium)}.date-picker__date--in-range:not(.date-picker__date--selected):after{position:absolute;border-radius:0px;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0px}.date-picker__date--start:not(.date-picker__date--end){color:var(--s-text-on-action-primary)}.date-picker__date--start:not(.date-picker__date--end):before{background-color:var(--s-action-primary-default)}.date-picker__date--start:not(.date-picker__date--end):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0 0.0625rem 50%}.date-picker__date--end:not(.date-picker__date--start){color:var(--s-text-on-action-primary)}.date-picker__date--end:not(.date-picker__date--start):before{background-color:var(--s-action-primary-default)}.date-picker__date--end:not(.date-picker__date--start):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 50% 0.0625rem 0}.date-picker__date--today:before{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-highlight)}.date-picker__date--today>em{font-style:normal}.date-picker__date--disabled{color:var(--s-text-disabled);cursor:default;pointer-events:none}.date-picker__date--disabled:before{background-color:transparent}.date-picker__date--disabled:hover{color:var(--s-text-disabled)}.date-picker__date--disabled:hover:before{background-color:transparent}";

package/dist/components/swirl-file-chip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { F as FileSaver_min } from './FileSaver.min.js';
 import { c as classNames } from './index2.js';
-import { a as isImageMimeType, b as isVideoMimeType, c as isAudioMimeType, e as isPdfMimeType, f as isCompressedArchiveMimeType, h as isDocumentMimeType } from './utils.js';
+import { a as isImageMimeType, b as isVideoMimeType, c as isAudioMimeType, e as isPdfMimeType, f as isCompressedArchiveMimeType, g as isDocumentMimeType } from './utils.js';
 import { d as defineCustomElement$d } from './swirl-button2.js';
 import { d as defineCustomElement$c } from './swirl-button-group2.js';
 import { d as defineCustomElement$b } from './swirl-icon-attachment2.js';
@@ -15,7 +15,7 @@ import { d as defineCustomElement$4 } from './swirl-spinner2.js';
 import { d as defineCustomElement$3 } from './swirl-stack2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-const swirlFileChipCss = ":host{display:inline-block;max-width:100%}.file-chip{display:flex;position:relative;max-width:100%;min-width:15rem;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);background:var(--s-surface-default);border-radius:var(--s-border-radius-sm);outline:1px solid var(--s-border-strong);outline-offset:-1px;padding-right:var(--s-space-16);gap:var(--s-space-12)}.file-chip:hover.file-chip--one-action .file-chip__info>*{width:calc(100% - 44px - var(--s-space-12))}.file-chip:hover.file-chip--two-actions .file-chip__info>*{width:calc(100% - 88px - var(--s-space-12))}.file-chip:hover .file-chip__actions{opacity:1}.file-chip__icon{display:flex;flex-shrink:0;padding:var(--s-space-16);background:var(--s-surface-sunken-hovered);border-radius:var(--s-border-radius-sm) 0 0 var(--s-border-radius-sm);color:var(--s-icon-default)}.file-chip__info{display:flex;flex-direction:column;justify-content:center;min-width:0;flex-grow:1}.file-chip__name{font-weight:var(--s-font-weight-semibold)}.file-chip__description{color:var(--s-text-subdued)}.file-chip__name,.file-chip__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-chip__actions{display:flex;align-items:center;position:absolute;right:var(--s-space-16);top:0;bottom:0;opacity:0}";
+const swirlFileChipCss = ":host{display:inline-block;max-width:100%}.file-chip{display:flex;position:relative;max-width:100%;min-width:15rem;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);background:var(--s-surface-default);border-radius:var(--s-border-radius-sm);outline:1px solid var(--s-border-strong);outline-offset:-1px;padding-right:var(--s-space-16);gap:var(--s-space-12)}.file-chip:hover.file-chip--one-action .file-chip__info>*,.file-chip:focus-within.file-chip--one-action .file-chip__info>*{width:calc(100% - 44px - var(--s-space-12))}.file-chip:hover.file-chip--two-actions .file-chip__info>*,.file-chip:focus-within.file-chip--two-actions .file-chip__info>*{width:calc(100% - 88px - var(--s-space-12))}.file-chip:hover .file-chip__actions,.file-chip:focus-within .file-chip__actions{opacity:1}.file-chip__icon{display:flex;flex-shrink:0;padding:var(--s-space-16);background:var(--s-surface-sunken-hovered);border-radius:var(--s-border-radius-sm) 0 0 var(--s-border-radius-sm);color:var(--s-icon-default)}.file-chip__info{display:flex;flex-direction:column;justify-content:center;min-width:0;flex-grow:1}.file-chip__name{font-weight:var(--s-font-weight-semibold)}.file-chip__description{color:var(--s-text-subdued)}.file-chip__name,.file-chip__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-chip__actions{display:flex;align-items:center;position:absolute;right:var(--s-space-16);top:0;bottom:0;opacity:0}";
 const SwirlFileChipStyle0 = swirlFileChipCss;
 const SwirlFileChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFileChip extends HTMLElement {

package/dist/components/swirl-file-viewer-fallback2.js CHANGED Viewed

@@ -27,7 +27,7 @@ const SwirlFileViewerFallback = /*@__PURE__*/ proxyCustomElement(class SwirlFile
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: 'dcbd3e7364c233ee38b1a3f7f1bfde1d8ca7bd7a', class: "file-viewer-fallback" }, h("swirl-stack", { key: '32fec35e92cee6a1675e89217d79f0a7552adb6d', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: 'd4ddfa9e62b222d415851cfc6b5431e5e1f00fe4', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '7a8eecdb32080027482b9562409ba9bf1228f3a7', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: 'fac69eca8912fd60d0eb0a80a19490fca99f0c60', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
+        return (h(Host, { key: '977b923e0c5cbee96a927a2ab7dcc7a3defb3eda', class: "file-viewer-fallback" }, h("swirl-stack", { key: '4a51cb38f0e414833c10a804583087a824915285', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '8de42341c5285dd54ed4bd745f449705f4975b4e', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '5462a43220bd9f91146fc2eab3ac1aa6924c1d82', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '372e789dab140065b1b3d1017043021c222c07fd', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
     }
     get el() { return this; }
     static get style() { return SwirlFileViewerFallbackStyle0; }

package/dist/components/swirl-file-viewer-image2.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './swirl-inline-error2.js';
 import { d as defineCustomElement$2 } from './swirl-spinner2.js';
 import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
-const swirlFileViewerImageCss = ":host{position:relative;display:inline-flex;max-height:100%;pointer-events:auto}:host *{box-sizing:border-box}.file-viewer-image__image{max-width:100%;-o-object-fit:contain;object-fit:contain}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
+const swirlFileViewerImageCss = ":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;justify-content:center;margin:0}.file-viewer-image__image{pointer-events:auto;max-width:100%;-o-object-fit:contain;object-fit:contain}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
 const SwirlFileViewerImageStyle0 = swirlFileViewerImageCss;
 const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewerImage extends HTMLElement {
@@ -202,7 +202,7 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         return this.updateZoomAndPan(1);
     }
     render() {
-        return (h(Host, { key: '1995b7735f94edde91e880850a52e3f33a759a40', class: "file-viewer-image", onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: '94df069d21c45952c190f1d74b885d3f60b64312', class: "file-viewer-image__error", message: this.errorMessage })), h("img", { key: '032b0a1ecd0209694144bd62fb1e49ffba099cc1', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: 'f01719f4f4ba91376ddcfb068440d1ac4280fdea', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '14b85bc1bb555e3ac8d1bb3e2f96fa9fd437d80c' })))));
+        return (h(Host, { key: 'b41e0541d690febffc91e81a7048a4989365df5c', onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: 'f419967c5de68f3bceda270103ddf342b47a405f', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: '826e0ce3d7f019cafeaf3f3f445ee11e6ddd9c0a', class: "file-viewer-image" }, h("img", { key: '5c25427fc15bf6779db98462615a4f1bbe4a2cae', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: 'edc880f9432e884c8acc39b7b1a72dd66f57bbca', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '8f1b0c6727ce74ef6ef3980b84c363e0a64566c2' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-file-viewer-pdf2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
 import { c as commonjsGlobal, g as getAugmentedNamespace, a as getDefaultExportFromCjs, b as commonjsRequire } from './_commonjsHelpers.js';
-import { d as debounce, t as getVisibleHeight, i as isMobileViewport } from './utils.js';
+import { d as debounce, s as getVisibleHeight, i as isMobileViewport } from './utils.js';
 import { d as defineCustomElement$4 } from './swirl-icon-error2.js';
 import { d as defineCustomElement$3 } from './swirl-inline-error2.js';
 import { d as defineCustomElement$2 } from './swirl-spinner2.js';

package/dist/components/swirl-file-viewer-text2.js CHANGED Viewed

@@ -39,7 +39,7 @@ const SwirlFileViewerText = /*@__PURE__*/ proxyCustomElement(class SwirlFileView
         }
     }
     render() {
-        return (h(Host, { key: '22b60f97174607c5853ba79541de7c185a13cad1', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: 'c3d2849114555116182614ec9ff8fa2ab3b28aa6', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: '0e7a35519157f89057e6959c6eb0e2f5c9a602ac', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: 'b3d9c9bb31c892f176e26aaecb9821adc1f1306a', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '5dac2748fc083f5bfde7f5233c3033c352cfcb81' })))));
+        return (h(Host, { key: '66fd9b26971ab145680682eab04c28c36f23b732', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: 'dead9b558461dce7809e5c0fa86d059de44ee59e', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: 'e6418d4c9fb431cf7cd89a77252080a89d5c4edc', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: 'b298bbff480abd3ee3b98610f925e826424bfd52', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '7536c1df160e726236a1c760a12e23a3a810142c' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-file-viewer-video2.js CHANGED Viewed

@@ -29,7 +29,7 @@ const SwirlFileViewerVideo = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         }
     }
     render() {
-        return (h(Host, { key: '15e83ff936163159f1c8416be0d4862e7511144b', class: "file-viewer-video" }, h("video", { key: 'cb43eecf0610b77c022cb4734d9a9ef2fa5d1e7a', autoplay: this.autoplay, class: "file-viewer-video__video", controls: true, ref: (el) => (this.videoEl = el) }, h("source", { key: '3f29e32b75b98f913c9844eedc9d00266c6e1b6c', src: this.file, type: this.type }))));
+        return (h(Host, { key: '41dddd386f91bd1911c100d3b1261d969b8b2a27', class: "file-viewer-video" }, h("video", { key: '37379c9c47e89a8f559a841f5e57c6a73fa7652a', autoplay: this.autoplay, class: "file-viewer-video__video", controls: true, ref: (el) => (this.videoEl = el) }, h("source", { key: '95247c35768e6f5ea4dc3f793b2b2541d702ff91', src: this.file, type: this.type }))));
     }
     get el() { return this; }
     static get watchers() { return {