@getflip/swirl-components 0.332.0 → 0.334.0

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js

@@ -40,10 +40,10 @@ export class SwirlTableRowGroup {
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (h(Host, { key: 'ee16166694be3c06f538ecb90dedca307107842a', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'ad6dc4ddcd62539ab7e6c64026f76ffd26166230', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '1b7da177013fdb86d061a1a089435d4972e8721d', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'b59e55983de4a28d929efd4b1589b4680e1427ea', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '9959e8ed7f96042a4dba0c1b26e3b40d5abb6dd4', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '86561b3b3bc887202a576d3a1065a2ae29565c19', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '2d8c242057b3fbb696a065a48091d3128f786416', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '75968c7b19a3b2684dc2f49772a0235f8bed836b', class: {
+        return (h(Host, { key: '4009aea2ffaa36d62941696b04952575286fb05f', class: "table-row-group", role: "rowgroup" }, h("div", { key: '2fa18e348aa557a14401884487e126320ad63b69', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '4631e86ca19f00e110acd68c20497c25c010f403', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: '3cbd286ed384e85fa991c416ed5e218c5f68c3fc', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '8b84253ffbbed0bcf0c94a7207a182676982c764', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'a9cde02dd13134e8eb1b21ff40f010d242b67b9c', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '8a5ba525c452d181a4fcab6446e68a8fd1594b7d', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '9e934280ecb0c2b42cd4b8ac06996954f6696a5c', class: {
                 "table-row-group__rows-container": true,
                 "table-row-group__rows-container--is-hidden": this.isVisible,
-            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '0d0cfdf602d05703da794319b078e70be6dc3165' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'fbf66c2989fe8435abdddbccc8ace3370ccf4d73' }))));
     }
     static get is() { return "swirl-table-row-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,7 @@ export class SwirlTabs {
         }));
     }
     render() {
-        return (h(Host, { key: 'e4af21164799fd674059b229c5eb7fcb612adb3d' }, h("div", { key: '771fd61781005001193ecf7e2ed05a3028145aae', class: "tabs" }, h("swirl-tab-bar", { key: '2062961b999c8ad46351d00f9855e673acae50e6', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'ad812c1fdf0ba625c4398d021d2e2996a93005d5' })));
+        return (h(Host, { key: 'f6c7e919c923385cb2cefa4d548e18749cdb182c' }, h("div", { key: '6d8e151e679466baba735e5bc722f3336bcfd261', class: "tabs" }, h("swirl-tab-bar", { key: 'aa62560690f8b032261073d2594da95bf3b45a35', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: '7177ca6acef4f9243e06b22ec9109fa46b16b917' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -1,12 +1,9 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlTextInput {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.clear = () => {
             this.inputEl.value = "";
             this.value = "";
@@ -102,8 +99,9 @@ export class SwirlTextInput {
         this.showPassword = false;
     }
     componentDidLoad() {
-        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) {
             setTimeout(() => {
@@ -115,7 +113,7 @@ export class SwirlTextInput {
         this.adjustInputSize();
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     async blurInput() {
         this.inputEl.blur();
@@ -179,7 +177,7 @@ export class SwirlTextInput {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (h(Host, { key: 'c88e6bd426c87abc2e5aa4a6a67b92a33705c737' }, h("div", { key: '88e1c2cdf842a603bb81ca75abe0869c6b321e95', class: className }, this.prefixLabel && (h("span", { key: '6bc23160f6d688b9cb245d6089e129cf350f9533', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '880004143dd812f6af0f74fe9a7fa0d4ccd231fd', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: 'e4bece6d11b65ccddb4e73b330bb7a98203553ad', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '209d064d58f71f255181a8b4c8277e94d7fc6840', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '2c10978eb66b7c9e05b194d51ff540b1774cdde7', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '7d14538e3f4816f0230de3178fe8d5857b541cd2', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'dfcabad170b5312132722cd18e3894bdda4dabee', class: "text-input__stepper" }, h("button", { key: '29fe802c07d61744a0a2411dde31ace11332c90c', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '629dbfef2caf408b3b34ddcfe3beb8305ff14dd8', size: this.iconSize })), h("button", { key: '41f995a4aff79d37d77bc67ceab02da7acbf2841', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: '57101c11f11133c49f1bb422e0d78fd0701e92dd', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: 'e0e9b2a54e8d264529c213e5fe5cc225d7829353', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '21f37a30db4fdc8ffd032e8fee392a2e90f41cc4' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (h(Host, { key: '118c43993df15e8a56132135bd6e5bd7b20c7fa5' }, h("div", { key: 'b32019d666499025e823f65c84107090b3e0bdde', class: className }, this.prefixLabel && (h("span", { key: 'e92f359d218821987e795d91ba09de0a5ac83787', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '311c606dc2c9b78965d35543c79c828bbf04939d', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2e2987f816f1a26b074ca67fc67d2b88031af88e', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '82218c372d0374651f5cb3a07a679c5f045dabfc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '9c42c315b34e9a614a145d2e8a00da2b28fcc21e', size: this.iconSize }))), showPasswordToggle && (h("button", { key: 'd78dcd286ba441a8d5df0a9d9e8b02c466dab617', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'e29c6cb14c6bb8ff7ebf67800b2b267ca0208df9', class: "text-input__stepper" }, h("button", { key: '6218def82164fd3b57015d3fb8c40391cefcf84d', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '9b338df89a94563b9f9fde0ba16cb1fae537c203', size: this.iconSize })), h("button", { key: '6d31cb2c37f9a2887c57f2350afe184a76dd09f8', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'f2b7974999012a8ad29d84dd5df8a908605f57b4', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: '4dae89e8b35db216b513bbca04dff56c48b64696', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'c48b6c6017b6b2a8524a2f3f5e9d2d8869026b3f' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get is() { return "swirl-text-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-theme-provider/swirl-theme-provider.js

@@ -145,7 +145,7 @@ export class SwirlThemeProvider {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: '2158e52f77e376f8ed1789b66233b2bd0216461f' }, h("slot", { key: '97f07e9f83e3bb6e4d466809bc86609619912fa7' })));
+        return (h(Host, { key: '9d06e2e5a70a4580437870ed30e0809085c40aa5' }, h("slot", { key: '8276d2bd57d69e801b0365906455b27e467f6e65' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -2,14 +2,11 @@ import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { format, isValid, parse } from "date-fns";
 import { create as createMask } from "maska/dist/es6/maska";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 const internalTimeFormat = "HH:mm:ss";
 export class SwirlTimeInput {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onChange = (event) => {
             const value = event.target.value;
             let newValue;
@@ -73,8 +70,9 @@ export class SwirlTimeInput {
     }
     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) {
             setTimeout(() => {
@@ -84,7 +82,7 @@ export class SwirlTimeInput {
     }
     disconnectedCallback() {
         this.mask?.destroy();
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     watchFormat() {
         this.setupMask();
@@ -117,7 +115,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: 'a9234fb9c6e523f504a3e48840cd2cf01ead9189' }, h("div", { key: '2fe19808f9ece7f7a8a66b6014e97b77ebebf420', class: className }, h("input", { key: '6b487f1911b5d14cf40f9faac4f5b285fc02f727', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: 'c2ada67a2a0cfe569be80378c6500204387134ae', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '8a10ae188281f3016b0b7cbc0677d90f28559f9f', size: this.iconSize })))));
+        return (h(Host, { key: '692360011fce6580effdb30f7d1e37a06695fa36' }, h("div", { key: 'e9c714e6eb7f6fc51c959750d07815a821700426', class: className }, h("input", { key: 'f83b3deb648f9db7a1c66cb57428de35745e9966', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: 'ec00194927dc1a4bf9d86bddbc8fe12b033d83c2', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '3af25e6093d5d35ae3ed95a94ac72345e201b6c5', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,12 +1,9 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlToast {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onDismiss = () => {
             this.dismiss.emit(this.toastId);
         };
@@ -23,11 +20,12 @@ export class SwirlToast {
     }
     componentDidLoad() {
         this.startTimer();
-        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];
@@ -53,7 +51,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '63b2524f2a2d1190684086bde48c934d32566c70' }, h("div", { key: '21920f98742a4ad51ba8d303d5ba4d3472cab259', class: className }, this.icon && (h("span", { key: 'da3bd02686663fc0793bc69b6d4fdd86f25f8bb4', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '64e558f31a9a03ea39dc3a28b16a62096dba3cf5', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '9046dd7e88bca0a6de43ed367bf78455a240e208' })), h("button", { key: 'df8bd60a80ca63e77ec1e5b1e8f70e9b9c813f5a', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'e0de40c23452b0b9725947021a4e5316a92ea84f', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '92d6a7d7907fedd324c251dbf69cb465d01a2d91' }, h("div", { key: '48955f3012dbf46e0590b22a9af259fd976a9586', class: className }, this.icon && (h("span", { key: '489f5e15ae9614b20f9706f395f01ad4e0fb2261', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '81fc11661e29fc37185288333fcddcd8febbf402', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '388c8073d0db9d6858e2e2564b2904b5af7a5d4b' })), h("button", { key: 'e1351b4e40943e0dd729bebbbe9767b4e55de444', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'f92c2010b23232ea98a9c3d22c5e073ccfd1a1d3', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toggle-button/swirl-toggle-button.js

@@ -14,7 +14,7 @@ export class SwirlToggleButton {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: '49d433c15e41facdc7a00358749f89b9dc8e8252', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '934b55e2074751215308837caba5505ebb561d49', class: "button__icon", glyph: this.icon })), h("span", { key: 'cff0b13bc70b3d7cea3d31b7b6500aeca57dc5df', class: "button__label" }, this.label)));
+        return (h("button", { key: '8c47dae5d33babf77dd549dce9acdac2a2eb50aa', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '6c85625a9427b0b40c203a4de3e3bce6b51c755b', class: "button__icon", glyph: this.icon })), h("span", { key: 'e6bcb8594de5691a6e5d4bbee310c6c5d03eb527', class: "button__label" }, this.label)));
     }
     static get is() { return "swirl-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tree-navigation/swirl-tree-navigation.js

@@ -4,7 +4,7 @@ export class SwirlTreeNavigation {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: 'eb8c6f04d46d5c117ef13236b18e0a1761df0b3d' }, h("ul", { key: '1f73e96d9df8afe11f8b9d21a7b54736549a797c', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '935da44bfca94e55a42514faf01368527ff32cc7' }))));
+        return (h(Host, { key: 'e91fed4b69b532f41f66edb02dcb663b404019a0' }, h("ul", { key: '7e02d2fdb8da13df1b4b9a1f7f0f1900fb21bc93', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '6d534e92e54ce31dfbc4813e636468e99dfe3be0' }))));
     }
     static get is() { return "swirl-tree-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.js

@@ -89,12 +89,12 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: 'fa176dc7ce64b7c208ba5fb4085f4994de681ea2', role: "none" }, h("li", { key: 'c55f11c0743b699f3c2cc9d49cb522ca76cfe967', class: {
+        return (h(Host, { key: 'eb4a04f23205f1f56ccc5cb3f2003af5a5d0e4e7', role: "none" }, h("li", { key: '610acefd71f18340dd8fc49d311a8d0f3e836b42', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: 'fef37d7819f573f3c37a98121c975f93576a2a8f', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: 'dbd7dc720c1bc855bdbd4082efe4a1e7ca0d8429', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '7949682f070cc38c9b61ae3cc1bf702224dbd5d6', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '4958c35e3b4f042b6bbf273f63676ec0bdd5a9c7', class: "tree-navigation-item__label" }, h("span", { key: '3ef37a17826e98bd767e09ca4c2d588fcc185b10', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '5ef5e84f989d9282f447407dbe8c70a1002d5a84', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'd066448b9da7ae8a7ee7ed975c8f2fee3358b816', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '8d02cb836b808589fcd5259150058fd7f39e7c43', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '4fab2f5102f71223e79a763312f408ac6b8ef8d8', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '2e60f831cd223863ae748f46d933ed60af9df887', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
+            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: 'dc7ef95edf24048c6fa05b177a314cb3e815259e', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: '88df6dfedf5672b9ae63007d77333a0625a5c212', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'd08e58ac750735027d436880aa219852625f19ef', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'b3af00057ed207fcecc66a0050dcc2ac6a2f7fc8', class: "tree-navigation-item__label" }, h("span", { key: '21c0ec85d6bbb9a581436b155f762e9d03a81686', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'f0cdf777a64086dd9f6135610770fbf45c334992', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'ccceaed3dae45a1f1ab21e3635a33ddbd1873e4a', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '6dbabb5cc6c6cde16f96fa0851268f8bebc972da', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '493908e10b95e39e9d49b04cdbcdddd7fae9fc93', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'efee536b8d7dbbf9e36c29c6eda5967b8d64c46f', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, h("slot", { key: 'f5019e5a3dd8304c6d0036908b8067172104bf38' }))))));
+            } }, h("slot", { key: '2784a6e0abf70e304a5e0594d6de0ec376cc86e2' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-video-thumbnail/swirl-video-thumbnail.js

@@ -7,7 +7,7 @@ export class SwirlVideoThumbnail {
         this.src = undefined;
     }
     render() {
-        return (h(Host, { key: '99dd1e1ae0d710356ced0407af4cf79532aea691' }, h("button", { key: '3bd122d05fd66ab86126117c5cf51251118b4981', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '7903f17823ba7d34664308c7a0642df1dc010306', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'b94ebc5ccb1441eb22e2ab1cba3a255f681c47f0', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '2204ec67949fc4a66d407a3fa0584d7805661226' }, this.durationLabel), this.duration)), h("svg", { key: 'efd88753ed2d108b510a02838ff4d9ded34c5f9e', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bdf75e2c1e4df70998c1bff5a2f14d2ce0eef30f', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (h(Host, { key: 'e2f655f2cfb996e6ad6855a199209e27931a8a3d' }, h("button", { key: '9619b3db17dc13f3aec0e2ce705da9cbe1d9ff5d', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '1427db1809c03e0a413d5d9c8ccb5e26354edbb5', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '9e5d359809046cbfdaa7e53d1e985fae80d24ea0', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '50415a24aef90abb82408401e7dfbc45bb2afacd' }, this.durationLabel), this.duration)), h("svg", { key: 'd4f926340191c8782e285b4b31778c1a7e0f9d6c', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6f0ba3a99fd6b32587e8ff39de9179bf4314ff5a', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
     static get is() { return "swirl-video-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlVisuallyHidden {
     render() {
-        return (h(Host, { key: '4bb7348e44f93ebfeee13365bd7a10ddcfc65477' }, h("slot", { key: '51deef99bfa615b7c28e4345349c21d54ba855bc' })));
+        return (h(Host, { key: '072c59d0d444b121d115a1502af1834f0541d994' }, h("slot", { key: 'afbeda3b3067afab5193219ed9aa63d68de82fdb' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/prototypes/file-manager/file-manager.js

@@ -56,7 +56,7 @@ export class FileManager {
             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" })))));
     }
     static get is() { return "file-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/services/media-query.service.js

@@ -0,0 +1,19 @@
+import { getDesktopMediaQuery } from "../utils";
+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);
+        };
+    }
+}
+export const DesktopMediaQuery = new DesktopMediaQueryService();