@getflip/swirl-components 0.353.1 → 0.355.0

package/dist/components/swirl-table.js

@@ -122,11 +122,6 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         this.onScroll = () => {
             this.updateScrolledState();
         };
-        this.onSlotChange = async () => {
-            await this.updateLayout();
-            this.updateEmptyState();
-            this.setupDragDrop();
-        };
         this.onFocus = (event) => {
             if (this.movingViaKeyboard) {
                 const movingRow = this.el.querySelector(".table-row--moving");
@@ -182,12 +177,15 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
     }
     async componentDidLoad() {
         this.setupIntersectionObserver();
+        this.setupMutationObservers();
         queueMicrotask(() => {
             this.setupDragDrop();
         });
     }
     disconnectedCallback() {
         this.intersectionObserver?.disconnect();
+        this.columnMutationObserver?.disconnect();
+        this.rowMutationObserver?.disconnect();
         this.sortable?.destroy();
     }
     handleEnableDragDropChange() {
@@ -206,6 +204,33 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         });
         this.intersectionObserver.observe(this.container);
     }
+    /**
+     * We are not using shadow DOM for the table, so we cannot use the
+     * `slotchange` event to detect changes in the slotted content. Instead, we
+     * use a MutationObserver to watch for changes of rows.
+     */
+    setupMutationObservers() {
+        this.columnMutationObserver = new MutationObserver((mutations) => {
+            const columnWasAddedOrRemoved = mutations.some((mutation) => mutation.addedNodes.length || mutation.removedNodes.length);
+            if (columnWasAddedOrRemoved) {
+                this.updateLayout();
+            }
+        });
+        this.columnMutationObserver.observe(this.headerEl, {
+            childList: true,
+            subtree: true,
+        });
+        this.rowMutationObserver = new MutationObserver((mutations) => {
+            const rowWasAddedOrRemoved = mutations.some((mutation) => mutation.addedNodes.length || mutation.removedNodes.length);
+            if (rowWasAddedOrRemoved) {
+                this.updateEmptyState();
+                this.setupDragDrop();
+            }
+        });
+        this.rowMutationObserver.observe(this.bodyEl, {
+            childList: true,
+        });
+    }
     setupDragDrop() {
         if (this.sortable) {
             this.sortable.destroy();
@@ -540,10 +565,11 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         }
     }
     render() {
+        const hasEmptyStateSlotAssignment = Boolean(this.el.querySelector('[slot="empty"]'));
         const className = classNames("table", {
             "table--keyboard-move": this.movingViaKeyboard,
         });
-        return (h(Host, { key: '21e04abde388d147ed56c1445b16047f955b03ea' }, h("div", { key: '42d6c1de4e2ea4526f0de3ca7273fffcbee69275', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '3ac89e7a8acf5b018eb04daa9ebf954650c35bfe' }, h("span", { key: 'df86027ddeb2bff6ea14d3dc79d18b5b8e9a6141', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '0cc22d0353fde2904244ea9e68e936c756774a7a', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: 'cbffaa62993ef94c81c4851ed0c9ffd0cbd07828', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '0badaa89abb5152555ac6a268141172bc4f0005f' }, h("div", { key: '63af3e64092ced0cb51f351ba21cd4989e29de2b', id: "caption" }, this.caption))), h("div", { key: '2aee2dcf8961f97efa0a5786c0a4c089c3baf316', role: "rowgroup" }, h("div", { key: 'f09bda45e11e1cd5b012b464cc42a14e88494ca2', class: "table__header", role: "row" }, h("slot", { key: 'ae7557ed4b154e13277d0e800a8768e7cf851596', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '40d9fc785daffde2da8fd4a32a91bbe05015b4a8', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: 'db7f66365097ef5d3fbe08154eb00a99783bc93f', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: 'bf421c60cbf33505c97cc012cbc3562834b553a0', class: "table__empty-row", role: "row" }, h("div", { key: 'a011ebbb267c805808f0d0b7369bdb484d34212f', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: '566369471b3b38bb687c7972e43b7b2f74b21a54', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (h(Host, { key: '71798732e8e937a5a808cef5f867eef1b2adaecb' }, h("div", { key: '95a8ad30cb5b0c0bdea6e13729d638020fbda51b', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '65419c2fb9a489b70f863a2c421f923a60768476' }, h("span", { key: 'ca398aaaa789a7c719a12527aba651f3736cf4eb', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '8cd332bb331b31060fe839140b3704275739b70b', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: '68fa8e690620d48c2f14a4967857c67f94158a22', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'b93d4712fa44c52126c2609da1b1b60fa0d5fba6' }, h("div", { key: 'd8d72ae82bed714eeb07e658dd3ac1aad9a549fd', id: "caption" }, this.caption))), h("div", { key: 'e2f1f3d19401d1f44c8536a9efc0b8a909320b75', role: "rowgroup" }, h("div", { key: '1882aec17470e8dd8d12c90254aa1a9c1542d348', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: 'b570c8ff4b54ae8d69980c81cf375fe828b1d063', name: "columns" }))), h("div", { key: '64de0ca255ee47f77f62eb86fc72d0e8a26c0bd4', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: 'c452844b1903346f40720d45df7871b7d0dfa0ba', name: "rows" }), this.empty && (h("div", { key: '0f4f29a0bbcb119d9e7593c94f4e4f14ff9ab6e7', class: "table__empty-row", role: "row" }, h("div", { key: 'b5bdcaa4375e6f40bb0c1aae6e4c78bc7bc7cdc1', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: 'd7e9b0ffd6bef6146556b36e23bb37dbe5b9dde8', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: 'a010b37117f401b565be6e5e3c0290cea5bfbe8f', align: "center", size: "sm" }, this.emptyStateLabel)))))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-tabs.js

@@ -77,7 +77,7 @@ const SwirlTabs$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTabs extends HTM
         }));
     }
     render() {
-        return (h(Host, { key: '255ba4585d6ab871e4e01ebe6fe426ca6f981e6e' }, h("div", { key: 'b3707188eb884c687821dbbe1a64e59c36e36192', class: "tabs" }, h("swirl-tab-bar", { key: '012bf6d714af20ebde2c7b8f55ca9d3c9406953f', 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: '5d1dc07e6f83d565f99e053310bdea8754b56389' })));
+        return (h(Host, { key: '1c0747c30868d370d0815d1c3c1f2bc5b153f403' }, h("div", { key: '1baee7ca4beb5ec7cf369ddb1d28f213ebb8f136', class: "tabs" }, h("swirl-tab-bar", { key: 'c512daa17ef79321e5101c8183e71749bc4086e2', 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: 'd70c67d563f614918000ad2a35ce880a9bb9b096' })));
     }
     get el() { return this; }
     static get style() { return swirlTabsCss; }

package/dist/components/swirl-tag2.js

@@ -40,7 +40,7 @@ const SwirlTag = /*@__PURE__*/ proxyCustomElement(class SwirlTag extends HTMLEle
     }
     render() {
         const className = classNames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-        return (h(Host, { key: '9b57bbbdbe8a4cb1592214b1f9e2d585f6b3b81f' }, h("span", { key: '6c1673b6124ca2600655e47d8949bc168255a9fc', class: className, part: "tag" }, this.icon && (h("span", { key: '24b95d49382f0d02a8111f5cca543f7b9a087c12', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '9e2287824b70677ca1abe1276bc080a1c2ec8789', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'ccd1f906738257aac0d90d1d19ecfed5fa9f7329', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '2db698d8a8eadf031ac4f6eaf12d8ff09dee3143', size: 16 }))))));
+        return (h(Host, { key: '9adef891e6a3c9e4828aaeeb81b78f03d82d8249' }, h("span", { key: '1ff7716b71b685c24e5879d362769f97137ed612', class: className, part: "tag" }, this.icon && (h("span", { key: 'ce835439476db27a25bc62edf7bd5bf48126f515', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '79eeb3d0b2e083cc21a5d39a3740ad66e55739c8', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'b63cbe0f7b37390d64e90209cfc2ac5082437814', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '3c67c1364f03e75bf057aac9b9efac9f04ddfcb9', size: 16 }))))));
     }
     get el() { return this; }
     static get style() { return swirlTagCss; }

package/dist/components/swirl-text2.js

@@ -987,7 +987,7 @@ const SwirlText = /*@__PURE__*/ proxyCustomElement(class SwirlText extends HTMLE
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: '276b21dc5eb8e517fd3d4afef881762df9f87347' }, h(Tag, { key: '198d07976dbfe3a6f19eb80d733d7fc0dfad9073', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'cc2b27ae768a9ece64a4e3426b9b461b94dbdab8' }))));
+        return (h(Host, { key: '6c6919a45a6c4b1e26bb5dd8dbe683ffe3e6d0f4' }, h(Tag, { key: 'e859c0d25b65141ca90cb22043e079cfd6870590', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '44ee5c0ccec836aa24d4a12efa1484b24b98a1ad' }))));
     }
     get el() { return this; }
     static get style() { return swirlTextCss; }

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

@@ -151,7 +151,7 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: 'bc76df1e9caa6c53a9cb599e3a3334a7ff5a6fe0' }, h("slot", { key: '4ea2e9a313907dde72db77074c28d0d6758257f7' })));
+        return (h(Host, { key: '43dbba5e1a68a2da91b331ed75fb3fe6c365db0c' }, h("slot", { key: '734d4489e5f188684dc0d50c4ed7cff14e3459b9' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

package/dist/components/swirl-thumbnail2.js

@@ -35,7 +35,7 @@ const SwirlThumbnail = /*@__PURE__*/ proxyCustomElement(class SwirlThumbnail ext
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: '2dac4bcf25dd965fbf7f1c98251ea858fa10506e' }, h("span", { key: 'fa9c096a805da8ca5e4ec899811dc052a207d0e5', class: className, role: "group" }, h(ImageWrapper, { key: '8e6544c4065ca73879beb8491125ed744b8a28fc', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'a675a8b5e2aa745f870e6bfa5f049850af971daf', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '739dc75669fc17e302c3b0a14af94593c3ab2431', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: 'efb07ec6870729c99b42f093499c6dc6910e3bb1', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '64767b51328f94cc7bf0fab490f3d022c457df78', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'fc25fbc72d346601040056f154ec118488ad98c3' }, h("swirl-button", { key: '620ad82ab8baac110b894b7264067b2357e4c962', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'fd3bb615614df0b875003a27a289808590f85a3e' }, h("swirl-button", { key: '4a0d1d6871ea19a2bca7408805ed2cf0c1fb06a7', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: 'f6d77eaa804f33119ce444c186c3b147246b425b', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: 'de49d448560bd869ab182ea5f39c140b45cb012b' }, h("span", { key: '32600e6d1116a24cacb4d1061f71df73380d8ab5', class: className, role: "group" }, h(ImageWrapper, { key: 'a814946c23e17fa5abd58273b158504442632a29', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '0d87bc0f7e6beb59ebfc221c400ffcd6b75f2214', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '490916256fec949629c940666f0a94616a32c633', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '161b8d45851ebd7a2b2dbcd3a6ac1c1cb766a88e', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: 'b8c572d6f6f44b43acbf6a94bb4b01c3ee57fee0', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'e66d449572a28768ff015c6ccbff7031996f42b5' }, h("swirl-button", { key: '8a355c0cdcf6d3e1a16e68e8eb3b7a216f833136', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'd71c41a4281b01137991b1e51c194ea9b1cfd8fc' }, h("swirl-button", { key: '7646a50cde12b19e6726de2bd40d455b89c2806d', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '2fe10836ba902ab7522bdc8cc457fd7ed3803a50', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get style() { return swirlThumbnailCss; }
 }, [1, "swirl-thumbnail", {

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

@@ -142,7 +142,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
         const className = classNames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: 'e00f1ea9272d42fddb3e330306614c7c9e2ad35e' }, h("div", { key: 'c303809cf350d0c9b2b476cde34927b1e287c7b4', class: className }, h("input", { key: '433c12a413b6cd3688249a8154b86dff0728a672', "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, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("span", { key: '48a0f974465430f70009d0465f983f780330a398', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '74659f60da754d205378dd33beaa1f8962d5790d', size: this.iconSize })))));
+        return (h(Host, { key: '63fe32b4243c58bf9976db89a2946ada3930e27e' }, h("div", { key: 'c67c974f9ea440be082eb481d6c4fbfd5a41af57', class: className }, h("input", { key: 'e6f3ec79e7261dd56bb2a904f4940f887b500f46', "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, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("span", { key: '617eae052d3c7291fd3401ca7daa1886cfdb95cf', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '27adc8c216ee8f78e0231eca73d1478fda2214c2', size: this.iconSize })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -48,7 +48,7 @@ const SwirlToastProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToastPr
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: '48299c971f9564f232cdddd96eadb9e257fe7aa5', role: "status" }, h("swirl-stack", { key: 'f77110faeafa1f2ad227ec7d61c159631c9db12c', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '0de522d0575f6023484863d9b1cad338b3bf3bcd', role: "status" }, h("swirl-stack", { key: '6833c4a10998d5a9edec3cac5add223ecb296dda', spacing: "12" }, this.toasts.map((toast) => {
             const props = { ...toast, content: undefined };
             return (h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
         }))));

package/dist/components/swirl-toast2.js

@@ -54,7 +54,7 @@ const SwirlToast = /*@__PURE__*/ proxyCustomElement(class SwirlToast extends HTM
     }
     render() {
         const className = classNames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '4c5034f5eecff5a7193a3578b376c7be27ce53fc' }, h("div", { key: '0748f69fcdd6d1890e04e296ea7bfc7e8ce1e70e', class: className }, this.icon && (h("span", { key: '74b9864ed23e7faa4f5aa874798bbc2ede631f88', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'f5f4cbc4a58cd7ec19412d284033ea24a6da419d', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'c873fa45a42b1af610aa61c672b187ce4e3c1038' })), h("button", { key: '2c6608afc754da275ab5029feca800ec5acd51f3', "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: 'e5a6fb1ae4380d977af18299869cd729b1c5e326', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: 'e9cca93020ec6d094231fe3d460aad88daf79809' }, h("div", { key: 'f4596be9c122d15af428ee15a625f366dbaf59b2', class: className }, this.icon && (h("span", { key: '600246de21c1784f1baec655517defbc9ea5e2ff', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '4f6bc65e3292cb7f56a01a762d7ce015dc545772', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'ae02f27a9f683d98e44a876df6b5b7700ef1c68f' })), h("button", { key: '1dce24dffb6e7ccf30cb9f92a67dca3df20ebf8b', "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: '1d4478a02a772ae225e487bfdc8039502a1dcf41', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get watchers() { return {
         "duration": ["watchDuration"]

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

@@ -18,7 +18,7 @@ const SwirlToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleBu
         const classNames$1 = classNames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: 'a876586cc9326945b8b4c9cfd14e5781311c23b3', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '8b6549a8f6b61c1c3f481e3bed211c6c1e0baef5', class: "button__icon", glyph: this.icon })), h("span", { key: '17d635182a63c0600591c77e2e32ab888aa9d222', class: "button__label" }, this.label)));
+        return (h("button", { key: 'ea79fcf895b9011cd51f9a6140d517171b7b951a', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'a62236e31301b497d621c14760faac09b9eb605f', class: "button__icon", glyph: this.icon })), h("span", { key: 'b8f9ae7f94850c1ab82fd83717cf915d01507b04', class: "button__label" }, this.label)));
     }
     static get style() { return swirlToggleButtonCss; }
 }, [1, "swirl-toggle-button", {

package/dist/components/swirl-toggle-group.js

@@ -63,7 +63,7 @@ const SwirlToggleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleGro
         const className = classNames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (h("swirl-stack", { key: '1336e6afe326855117371796717b192b6feae03c', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '06a8f3227d4ceaced08dce8833060f8884e8f3ed', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '8f9966117b896681d452c4a3fdd0bcd45484ef9b', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'f386dbde3ee531e00515aac62771d50b2f8997c1', onSlotchange: this.onSlotChange })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-toolbar.js

@@ -72,7 +72,7 @@ const SwirlToolbar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToolbar exten
         });
     }
     render() {
-        return (h(Host, { key: 'f32d5adcf9bdee0346d94c9750c83f337319cb5f' }, h("swirl-stack", { key: 'c869e7574e4b7f52aed15a216e03683c734cc5b8', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '45b024a3963d2d473b2a859c1cf035457d5800b2' }))));
+        return (h(Host, { key: '719236ca8a1f3fef172578d0d7d6932cabc763bb' }, h("swirl-stack", { key: '8fee5af69f1961c130ca87bd55ef3fb3977d8a78', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '05df1964caede7ca58827d90fdcfc60660c72eb3' }))));
     }
     get el() { return this; }
     static get style() { return swirlToolbarCss; }

package/dist/components/swirl-tooltip2.js

@@ -113,7 +113,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '5b565c574e408811ac5da51851f490cac98e94b7', onKeydown: this.onKeydown }, h("span", { key: '3344e1c1283e902fc1ff26b7a66ee72eae47321a', class: className }, h("span", { key: '7ede905a8cf59b8b1d1e649aa285edc843052672', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '3b224e30be526d1c6ebcefb536662bdba3a60f6b' })), h("span", { key: '4b3567ba85d51a75d654339c83d3c8a2b3a27dae', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: 'd4f44ac10eae2b884b38de92c267e4fb28957d42', onKeydown: this.onKeydown }, h("span", { key: 'cd2e654187abaff40e055d5678d36f85573f1389', class: className }, h("span", { key: '01007180fc69b2ea7562aad8a914aab9f6a0559d', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '979270ff10a2af5f2900f101584bfe70da274c34' })), h("span", { key: '4d62c0967d26521147ca7daddfffa8686d752b80', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -121,7 +121,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '1ee77407f48ca1fbb5e327cde6fe60a375b77fdf', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '93a6acbe39a95f1452ae65ade40b769c7c55dc93', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'a861ada0df72838460e1e831e7a404d176f0a5e3', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: 'c88d48b37dda6994960a59aa6dd0e6afa9e335d1', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '3adf4b87fbc1e5613d4eaa6c6c7fa4b958353d68', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '57397e5de9752c0e394be9cfb690cd9747b25c88', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

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

@@ -93,12 +93,12 @@ const SwirlTreeNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTr
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '893b54be30e1faa7030ec7e356b0bbced56216d4', role: "none" }, h("li", { key: '516f2c19b3cf02f6e2c97ccd9b6d388a7a0e190f', class: {
+        return (h(Host, { key: '39c9d830252adec9be51e6cd5a0fae6f50ff51d9', role: "none" }, h("li", { key: '6f5236d05c45425393d3371e305189face53dbd6', 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: 'c793fe41d80841e99aa746998c11c253f5047de1', 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: '141c9bcdf37fc3b956973d6460173d7312eeeff6', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'db7c5592139efdf674146fa7a41dd2a9e4ea1f37', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '1af04e24bcf090966722fa2c6d4d332cba8a5cf1', class: "tree-navigation-item__label" }, h("span", { key: 'd27d8550945374f685233d6566dcaf9fa0d92c52', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '013eb6c562feb132ea2f099cda00d6df549a8068', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '3f39faedc52b899eb7d8fd874b4dbb3ad29be4e5', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'df868d68693afab41f63931fa266990e70e32d33', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '0be9731e3e4cd2506b2739973c3f40c94cf6981f', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '807017fd7a40ca1a3368a8b295b22fcbcb83ee01', 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: '8ae91cf369108cade1e27a0b12a65c867657d816', 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: '6cf2ae2af4221eeedbcaf729be206125f8e38a83', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'f8bc6f3cadceb6c8ad0257ed7dfa59684c9f2131', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '28ce59d45b0d0f0540e239a19aca1b269748a692', class: "tree-navigation-item__label" }, h("span", { key: '29706b9fabca1188562e988cd557fed7e6d26453', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'eb6880d400f19b1f51f2fe1c6dadc0fa72063492', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '5d1382aa660613faa1ee4f31bcf3ab0d835e6b26', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'b393d466390c9890a1398c7609a4fec65bc6a947', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '80b5de2a73045b8387bfdf91be4fb5e37e7b54a7', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'a38548095cd8a83327dcf13f3fa05bae58117ec8', 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: '4ffef76bfcdb763630df1cc2f27df700767dfe32' }))))));
+            } }, h("slot", { key: 'ae6e41bf6226ed66f7a030448df18d8e5f77730c' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -9,7 +9,7 @@ const SwirlTreeNavigation$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeNa
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'eeadd961fff76ef3fabf02b9a3e7b6506c5ef05e' }, h("ul", { key: '8b03207b5172d5131293e4007687e75946b454de', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '710569389f1ac4cf95cff4d8b5c887cf22757aa8' }))));
+        return (h(Host, { key: 'cb38614c23f0094033ec98a3baa74c78f6c442a2' }, h("ul", { key: '98ae37462a1aa9f4463d59eeab9fb273d2b8b6d8', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '3f79b9c2ff0f4124b8f75b3cf58f021b6765abb5' }))));
     }
     static get style() { return swirlTreeNavigationCss; }
 }, [1, "swirl-tree-navigation", {

package/dist/components/swirl-tree-view-item.js

@@ -340,17 +340,17 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: 'b69e0f608416e28e933f600068bc9781b8a7e67a', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '59debc40e5914cf0861f77d839b8e1fb5048185f', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '537cf90ebc08a8a1f852a2ebb44a7f6cd9487b9d', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (h(Host, { key: '9c15110c17c0e525e9d795a56fe3c9e6027066e8', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: 'b4d4501bba0bc9ce223de8b4db9430bc42197bc1', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '32fa772b5646f0b6140a4bbb9365a8e818578bea', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '8964954fbe3bf1d76f002cad14103a6490e46e41', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '543ea8186b5fff51002487f4d1efd2157f579de2', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '16ddb005d1a629694d074823171d84add485c60a', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '736eb2a5bd66e82af18a65870f48d8f9bec05ea4' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '1b9889c672bfed46bdfa65ff2d5cab61de2e37cf' }, h("span", { key: 'c2e6b715bc17b468b7656de8750db4ba06cd41db', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '300e38e84a87b1f70408d5d710eb0b350a4b3e41', class: "tree-view-item__label" }, this.label), h("span", { key: 'ea9b1b1e29f7a770d123ed9aba08f15d2002f722', class: "tree-view-item__tags" }, h("slot", { key: 'd27ac7d0acb0da444304979cc21d6be4bf73ff68', name: "tags" }))), h("ul", { key: 'cb8ba76c9ceca5e94c9fb85005963b03f58ceb40', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '5d0cdeb21ee8c7549e797b6dad33c2caeacbbcd8', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '1073ab90768adcce824848016a58bda4a7d78856', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '1a65e9c5055e0222782a6fc0fd9a054cf6dda870', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '9e8fd067a2f8cf6b6c2e4f34cb06e24b0071690e' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'a4b24adfbfe9d5a07c0004a3d621cf5d38542ace' }, h("span", { key: 'bda81f006ed0cc4d04a7c0e68eda2c75bfe3ef78', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '522285b44bae82edd1ddafcbb1070b433cae1f35', class: "tree-view-item__label" }, this.label), h("span", { key: '3c5adab020bcb559b88124e91c49073580edb219', class: "tree-view-item__tags" }, h("slot", { key: 'd73e04abccdf715067af3f2f420247996621da40', name: "tags" }))), h("ul", { key: 'c4174b53e35864d3168a72d0734f5ce3e2ef89c7', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
                 display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: '712ac39576c65889812fab90246284afefc79ca0' })))));
+            } }, h("slot", { key: '3ea98ba83f784ed98896977156f15ee37483dc05' })))));
     }
     get el() { return this; }
     static get style() { return swirlTreeViewItemCss; }

package/dist/components/swirl-tree-view.js

@@ -332,7 +332,7 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
         }
     }
     render() {
-        return (h(Host, { key: '7177dd9e2f74be230521a2f9a139ad1277d11556' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'd39aa04b285432925acd615b96cf33c6939d6902' }, h("span", { key: '2b6a48e97c71dd795d1fe2a4cd74a5330b3ede4e', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'fb057f182e27709fb30d8ee9c460984d3f962be1', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '164cb029c89c6124b6c3c91a951f8ceca4b3af04', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: 'd70ad5db06afd4a8d6d83ad591d09994f59c0325' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '2acc3e4542fb2687575500a6f603dca34ff310d8' }, h("span", { key: 'f3ae5aa66ff53b19db1b888eb03234709a264fe6', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'ec7454804f6b5d93cbffd699f17a1bf9dcf15859', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '836eead8ff82f16ea9ee81354bedb6c6c7e8d52b', onSlotchange: this.onSlotChange }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -11,7 +11,7 @@ const SwirlVideoThumbnail$1 = /*@__PURE__*/ proxyCustomElement(class SwirlVideoT
         this.durationLabel = "Duration";
     }
     render() {
-        return (h(Host, { key: '355ed4db7663ad37bcbfb465312452bafd05017e' }, h("button", { key: 'ba7972ee44af46db84ecea028ed84044954365ce', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '8ffbb8ddcbffb133c5ea82e2b937a6829ee7bdac', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '4d1237e85fd6826507d3115559dba0baba59dec5', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'e54cc30914cd9dc43d9a9f9fd326eb1a0119936a' }, this.durationLabel), this.duration)), h("svg", { key: '317ed2c0b033bed73d2387ed734ac311ad8852f9', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b5334eb233fd57a73769c7ba43ac632e415fa8bd', 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: 'ebf4104933fe996a1b5bf75429860ca35af45873' }, h("button", { key: '560064ca78b5bac9f9f557d669b0943781d2979b', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'c5e0d43b0fadc2dddc8064adfbf5e81a43248e58', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ea42f74167078cac846c3d2ed8abc8daac091a6f', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '88f0ea33a732fc930136499d3487290097aae01e' }, this.durationLabel), this.duration)), h("svg", { key: '3985277d983a2528959ecee9ba80037c3037e90c', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '00639d70e38416d5479e79f7657e226b42629e07', 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 style() { return swirlVideoThumbnailCss; }
 }, [1, "swirl-video-thumbnail", {

package/dist/components/swirl-visually-hidden2.js

@@ -8,7 +8,7 @@ const SwirlVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class SwirlVisually
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'fd72954ca700da002aebcfe4b1ed66896c8c0478' }, h("slot", { key: '9263cd6117cb6171c664e75ca74f4945bcec3e49' })));
+        return (h(Host, { key: '555af564691d195bb1ff8c8ae17adfbaff274da4' }, h("slot", { key: 'dccd2bc55134f02e7b5e20dd38bc356e2a50dd82' })));
     }
     static get style() { return swirlVisuallyHiddenCss; }
 }, [6, "swirl-visually-hidden"]);

package/dist/esm/file-manager.entry.js

@@ -55,7 +55,7 @@ const FileManager = class {
             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: '5e9665e8183d7f980d4c72b66adcb01205002902' }, h("swirl-app-layout", { key: 'e4036d1fe23a895f6a9bbd5259852301c67bb70f', 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: '8ca394553f601d329af5e2ce16ea12133fdf26a1', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '8d0f3a7d5d27b42efbed09fe3ef912c14ae1ebfc', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '35f17b3e19d44586158d90538a4382032f5d159d', label: "Sort items" })), h("swirl-stack", { key: '77ff989d33ef7db97d1c47d8efe2882281768eef', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'c17535a1015096aca3c148badb986179ddec2f30' }, h("swirl-heading", { key: '8e77c435eef649b5536e61ed731355f903c1287e', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '35cdcada4574aa8790399a6cbbc4989ec84233c3', 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: '6b92efffd244188e8844a811563e158af44b7a1d', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '55354ea1d99dd3863397d7c46fd6ba085a9f16b1', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'a77de102d55f0a7f34f0fa229340cf1a2e742fa1', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '3333469779d937f6f99414feabcb4a8061a78681', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '944501c33d5996488c7ecc52779cc3a26d21f80a', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '3b4e66dc5b77703115faefe0495f875034881602', value: ["ascending"] }, h("swirl-option-list-item", { key: '32601adeed065ecd6a99930b25a762f8fd624014', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'a0763d9dc306ae0bd210dcf5017306bd0bac22e6', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'f3c4909b83a33627037c1ce5b3a8bacb8b125235', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: 'dca35dfb9ec612b23ebd8266f396d60b6b0f98d5' }, h("swirl-app-layout", { key: '8ced6ef7794dab649ddd30302b03a22f8c84cc8e', 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: 'bdfdb4596bc0be89198aacea37aec8469f9bb469', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '13862793046c0f14cf0234d77dcfe6de1d24f2dd', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '04ced670305a5831ec1cd7eac1ff06c31a208eb6', label: "Sort items" })), h("swirl-stack", { key: 'b57ca426d7119671bd1b79359767f2ef689fb762', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'ce6b50fdee3285b1c7f5512debe72fb545168da7' }, h("swirl-heading", { key: '69da45b9ec5928f04291e6d6f699acd2d20d9835', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '18c47f53f1c980b666e140f3975764bda57d396a', 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: '72c96fe00f73cfc698c30c67c9abba0ae76ebbe7', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '53cf2649674edc56fe67a5f80680d8eacdd6bd93', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '7b54cc22d4cee06d7088b37bc761a05489a7db7b', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'e23c68c70e3efa91a9e4e74d6e0e525f2ad5e672', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '42cee673c791856d84bc924033ce6fcbda7ca9e2', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '0ef4ec2f94f5c98303b81e0e106c0a72404202dd', value: ["ascending"] }, h("swirl-option-list-item", { key: '60898a5ceaae08799f8c002cc303946a3d7b532f', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'f2a8448ae79ffdbcb8983308485de308bd0179e6', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'be78ef3c98ee560ec6b7082d709d954e94221cdc', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 };