@getflip/swirl-components 0.233.0 → 0.234.0

package/dist/cjs/swirl-table-row-group.cjs.entry.js

@@ -46,10 +46,10 @@ const SwirlTableRowGroup = class {
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (index.h(index.Host, { key: '597987c95bb750faf577736c70b927bc25bd1ccb', class: "table-row-group", role: "rowgroup" }, index.h("div", { key: '4342db1a4e747d108a2e478f87b9111a49bf7236', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (index.h("swirl-button", { key: '142f1a2584961f44d409061227a8058c5a5ed619', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), index.h("span", { key: '76084b3ba880ca48c0135f20e8ffe20015779838', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { key: '9efccd2d9c9525319794e167dcf427a16e26bd3a', class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { key: '767ec667688699910ee70486266bed284fffe158', content: this.tooltip, position: "top", positioning: "fixed" }, index.h("swirl-icon-info", { key: 'a59609c3d4a36594b49c3b47ccb45de602f961d1', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("div", { key: '581305e6826ffa286268ebcae02c58b1b91d2a66', class: {
+        return (index.h(index.Host, { key: 'aefee4f623f62c57e2d281bce7c3a4980ad77491', class: "table-row-group", role: "rowgroup" }, index.h("div", { key: '7d121f85ab28c6b472354d2f7c0383c8fa4e3e68', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (index.h("swirl-button", { key: '93853b51c1abe556e973c9c9e5bf14d039440246', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), index.h("span", { key: 'd1451156c758f78f785d4707c4880a362defb5f3', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { key: 'b5b731817e323c99c51f008d3f0406e5348b501c', class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { key: '9c00f9f51f08831297e7604a526025f1856b87fd', content: this.tooltip, position: "top", positioning: "fixed" }, index.h("swirl-icon-info", { key: 'cb2d79a7fabc0ac20a68a456575d5b16b79551ee', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("div", { key: 'e4536781ba33e8ad84be82670cca73d44c2b6a08', 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) }, index.h("slot", { key: '0f42555e5b33b4e8548e309547396461f65ec800' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, index.h("slot", { key: '8f092f80b546809a7196bdcc81cd92bdacc715ff' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-table-row.cjs.entry.js

@@ -23,7 +23,7 @@ const SwirlTableRow = class {
         const className = index$1.classnames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (index.h(index.Host, { key: '08c79d4018d8395e4e5250a6ea21de50ac89ce8a', "aria-rowindex": this.index, class: className, role: "row" }, index.h("slot", { key: '32d468ee348c26eb99ffc1ccc5d884f2e1b151cf' })));
+        return (index.h(index.Host, { key: '26728f6f928a2ae6b9fb4b1768bc6bfff7d62a52', "aria-rowindex": this.index, class: className, role: "row" }, index.h("slot", { key: '1e06bdc0a2a19e5a2f92f851a219d9fe87188921' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-table.cjs.entry.js

@@ -326,7 +326,7 @@ const SwirlTable = class {
         this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
     }
     render() {
-        return (index.h(index.Host, { key: '67e025d828d6a48e1e675500b7fdc18eb9456a33' }, index.h("div", { key: 'cb3aa29190eb985a455bd1f7fefe4133e4c85aa9', class: "table" }, index.h("div", { key: '9c84deec304565e819166a82df31593f6885bb57', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: '4f2abc5a754572fef855968963d0fb1473b12aa0', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: 'dea64e5fcb63e11aab79340c0334e58c46525caf' }, index.h("div", { key: 'f832949a1a793400015206923877591bfce1bcbe', id: "caption" }, this.caption))), index.h("div", { key: '4fe8edbfb912809f67b77942eda7e1f09b5fe7f0', role: "rowgroup" }, index.h("div", { key: 'e750439efc145acc3b532345d5a69bb27d11229b', class: "table__header", role: "row" }, index.h("slot", { key: '45e1319bc0960307c6c308d8d36100806c560f93', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: '9bab4084bb11c9edba9e71b8d058c1cda5f48e5f', class: "table__body" }, index.h("slot", { key: '881d28f60a8b18ff09eaf48d33cbc667790ccb6b', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: 'c012480b57833e43d098a17b02332ba39e32386c', class: "table__empty-row", role: "row" }, index.h("div", { key: '28d11bc6641950fb9aaa968ba4436345f2f7c4f0', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: 'ab60e455ec2df26a16344a5afa3075690bbe3bcf', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (index.h(index.Host, { key: 'd574ec214cb26811f61366deeaa74f8d4a1706a3' }, index.h("div", { key: '25e940529e0c62223de86c0a5749182c93995cec', class: "table" }, index.h("div", { key: 'ba6d1d495507896afaf6821fdcb8459d421f27ff', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: 'e56c50269a7ccf352e75e54d9e53b3cfa43bc726', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: '5afd49288506bfa559b6e81bcfa1d8a2911cdc89' }, index.h("div", { key: '0de2c92b0790dbcf44ef0e59c0d9018c41768cb7', id: "caption" }, this.caption))), index.h("div", { key: '73f82611cd7f1cbc7eaf511d7ae173bb8290a36d', role: "rowgroup" }, index.h("div", { key: '18e44677a96f4e509471a4f9d4b1376762665149', class: "table__header", role: "row" }, index.h("slot", { key: '9bd8fde53f7ffdcae1944aced7767c9cb36c8ded', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: 'e51daaa6db8800305de3b2bb589e38b1eb8a2c13', class: "table__body" }, index.h("slot", { key: 'd0673b1ebba35403e0a9805d010770d310d62722', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: 'bd2815fa1ef57638fa95e824c2940ce865e46fcb', class: "table__empty-row", role: "row" }, index.h("div", { key: '289000e0e8c56e3bf9af3bb5dac7b853d37df5c4', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: '325d49fd44fcbb53f732e2150fb65de7056f7273', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-tabs.cjs.entry.js

@@ -84,7 +84,7 @@ const SwirlTabs = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: '92614e06300178c88fa2e9bff02a2a5260b66b82' }, index.h("div", { key: '920d91b0039606967cbf98b41f05a3e3310c91d0', class: "tabs" }, index.h("swirl-tab-bar", { key: 'cc2ccf118eed392694fdd22a0d19e1013e9e4f69', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart })), index.h("slot", { key: '9b116750870351c7d5c15fb51a3cd8c147ccddaf' })));
+        return (index.h(index.Host, { key: '81c8c6b685cd32ed201a5b7303671ae34b6eeab8' }, index.h("div", { key: 'fabae64898e2594e7fdf0f82f3dd8c5a0a9e8191', class: "tabs" }, index.h("swirl-tab-bar", { key: 'c752edb332d621935b76607699bc5a2c0ef296a5', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart })), index.h("slot", { key: 'ec189e2804dc546b44e1a767c72fb5750fc6c244' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-theme-provider.cjs.entry.js

@@ -156,7 +156,7 @@ const SwirlThemeProvider = class {
         this.setDesignTokens = [];
     }
     render() {
-        return (index.h(index.Host, { key: '305af144f0ea0e57e405ec2aa94f1c9bfdd4b1f0' }, index.h("slot", { key: 'fe24bc430d06f67a7f30a05ab7d35b8633358d8c' })));
+        return (index.h(index.Host, { key: '5a9feb54e9602919b5ac1e20a99d0c673603bccc' }, index.h("slot", { key: 'ecbe7e5937673ffb2f26ed9db792b4cf1cdf2e5f' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

package/dist/cjs/swirl-time-input.cjs.entry.js

@@ -129,7 +129,7 @@ const SwirlTimeInput = class {
         const className = index$1.classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: '2bb507836032c0d1dda9204edc739bcac4e9b0ef' }, index.h("div", { key: '2d60afcb5846554b16098e392faf8dbe57923cc4', class: className }, index.h("input", { key: '6e15b219a2e5bbc16d69b319bceb12e31d738ccd', "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 }), index.h("span", { key: '6a133dc058c386b00e131399be73e96e61ca20a9', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: 'fa224e112781bca97588c2713ccf0df8d169adbc', size: this.iconSize })))));
+        return (index.h(index.Host, { key: 'd586b9e1b552b1e28d8930d7e2fe1d2cccabe23a' }, index.h("div", { key: 'f989d8cb8dd3377e866528d5252613186f747957', class: className }, index.h("input", { key: '8e5b3e7e6715ee7f5e14604e552c8f726f8ce39a', "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 }), index.h("span", { key: '3deb73ba9a9473278e1648ad3fc5bce1fea50606', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: 'e90b15d581ac69d16cb324465199df0ccb84a85f', size: this.iconSize })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js

@@ -24,7 +24,7 @@ const SwirlTreeNavigationItem = class {
             "tree-navigation-item--active": this.active,
             "tree-navigation-item--has-icon": Boolean(this.icon),
         });
-        return (index.h(index.Host, { key: 'bc0922a0b7ceeb01a795f1c28b88e3cdf8410a1f' }, index.h(Tag, { key: '548c4dbd78c58c22ea9710ba9bef2ff9f067f8c4', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (index.h("span", { key: '27609a0804b6d329c3baa89a86cdbfa4ab9254ca', class: "tree-navigation-item__icon", innerHTML: this.icon })), index.h("span", { key: '4cd57af75992b13de974b33a7be6b356dbdf5858', class: "tree-navigation-item__label" }, this.label))));
+        return (index.h(index.Host, { key: '16553b2a3d732df9c9f901c7a3a243650302854b' }, index.h(Tag, { key: '92bf1e424b4313951aa9dbfae7954bd388e08577', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (index.h("span", { key: '02051b8f74c2335cc5a94169bd4eb872f6a619e3', class: "tree-navigation-item__icon", innerHTML: this.icon })), index.h("span", { key: '384eea1f7704d9e0d6958eabe2e6d293fafc2504', class: "tree-navigation-item__label" }, this.label))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-tree-view-item.cjs.entry.js

@@ -74,11 +74,11 @@ const SwirlTreeViewItem = class {
             "tree-view-item--active": this.active,
             "tree-view-item--has-tags": hasTags,
         });
-        return (index.h(index.Host, { key: '177446baadd42d3508d8c3fead6b179e26feedde', id: this.itemId, role: "none" }, index.h("li", { key: '72d29bdca3bbb72f398e4d481bdce1f2ce70b0a1', class: className, role: "none" }, index.h("a", { key: '6eb8a17c4b7982dd3445b9c7f24ecbc80a621ec6', "aria-current": this.active ? "page" : undefined, "aria-expanded": !this.hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": this.hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
+        return (index.h(index.Host, { key: '3bef1ae67a6b69390a3b541303d2cb0a5b4b0572', id: this.itemId, role: "none" }, index.h("li", { key: '76f801f429af865e5564d1a6de6beafc8ff091fc', class: className, role: "none" }, index.h("a", { key: '1fddde54d88f7de5e3d940e7a8f6b6df38428de0', "aria-current": this.active ? "page" : undefined, "aria-expanded": !this.hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": this.hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
                 paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-4))`,
-            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, index.h("span", { key: '72ab5ef8765690990f04bb76d7dc610b4ae18f3b', class: "tree-view-item__toggle-icon" }, this.hasChildren && (index.h(index.Fragment, { key: 'b6809cfdd91b53eb4d37c94ce899933daeb85020' }, this.expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 }))))), Boolean(this.icon) && (index.h(index.Fragment, { key: '040fccdd39595e4988b515257cd0a7fdb62a74e1' }, index.h("span", { key: '9a8121ef9e3b7e5a508345259550216ed02e6337', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24 }))))), index.h("span", { key: '113f4b3cd34284bd6c0b022f8ca3d0fc8e28a5a1', class: "tree-view-item__label" }, this.label), index.h("span", { key: 'b3b1efebbaf2b6e254d90570fba4ce61c5bd979b', class: "tree-view-item__tags" }, index.h("slot", { key: 'f27e893394cd489ff21a36651b5cac353fbdf78e', name: "tags" }))), index.h("ul", { key: '3618fcdd7471c7642ed5d1aa566d9ca7615b9a6b', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
+            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, index.h("span", { key: '4dc36fa94d7831a45986440e777a6e2ee9e64558', class: "tree-view-item__toggle-icon" }, this.hasChildren && (index.h(index.Fragment, { key: '0771bc5940d86bb482e71671adef637e52f031e2' }, this.expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 }))))), Boolean(this.icon) && (index.h(index.Fragment, { key: 'fdd19fe265b067318bf6447504474cbfea067a3e' }, index.h("span", { key: '006b75550b8a438a64b920a24cc3a65b1e710574', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24 }))))), index.h("span", { key: '5968fe73fcaeec498a00a08dd809feafc97924dd', class: "tree-view-item__label" }, this.label), index.h("span", { key: 'c5c12f44f3d93fc9f4ac85487454fc900de708ff', class: "tree-view-item__tags" }, index.h("slot", { key: '0731b78236892a2da887153fd58a6ee2386477ca', name: "tags" }))), index.h("ul", { key: '1198cb06161c4667c853dc14df3d5363500d72e7', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
                 display: !this.expanded || !this.hasChildren ? "none" : undefined,
-            } }, index.h("slot", { key: 'caa44b704e4de4d2dbd6a297830d2d3d9453038e' })))));
+            } }, index.h("slot", { key: '8dc659440d40bc01edd389937586d9b02c4ef04a' })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-tree-view.cjs.entry.js

@@ -10,7 +10,7 @@ const SwirlTreeViewStyle0 = swirlTreeViewCss;
 const SwirlTreeView = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.expandedItemsChanged = index.createEvent(this, "expandedItemsChanged", 7);
+        this.itemExpansionChanged = index.createEvent(this, "itemExpansionChanged", 7);
         this.onSlotChange = () => {
             this.init();
         };
@@ -24,7 +24,7 @@ const SwirlTreeView = class {
         this.init();
     }
     async expandItems(itemIds) {
-        const items = this.getItems().filter((item) => itemIds.includes(item.id));
+        const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
         items.forEach((item) => item.expand());
     }
     onKeyDown(event) {
@@ -61,17 +61,13 @@ const SwirlTreeView = class {
         });
     }
     onExpandedChange(event) {
-        const expandedItemIds = this.getItems()
-            .filter((item) => this.isItemExpanded(item))
-            .map((item) => item.id);
-        const changedItemGotExpanded = !Boolean(event.target.querySelector(':scope > li > [aria-expanded="true"]'));
-        if (changedItemGotExpanded) {
-            expandedItemIds.push(event.target.id);
+        const target = event.target;
+        if (target?.tagName === "SWIRL-TREE-VIEW-ITEM") {
+            this.itemExpansionChanged.emit({
+                itemId: target.itemId,
+                expanded: event.detail,
+            });
         }
-        else {
-            expandedItemIds.splice(expandedItemIds.indexOf(event.target.id), 1);
-        }
-        this.expandedItemsChanged.emit(expandedItemIds);
     }
     init() {
         const selectedItem = this.getSelectedItem();
@@ -203,7 +199,7 @@ const SwirlTreeView = class {
         return nestedSibling ?? undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '339267c7110db49dfa92d4e36ea7359666969819' }, index.h("ul", { key: '730cceb516e83f1ef72c8552fc26a510d225f069', "aria-label": this.label, class: "tree-view", role: "tree" }, index.h("slot", { key: 'dcde56962d621cfc40a170b80f9b8137809bf59e', onSlotchange: this.onSlotChange }))));
+        return (index.h(index.Host, { key: '1218818fafaba0a17753a29e6b95b67b9a87a091' }, index.h("ul", { key: '9f6b24777a04f2475c50a4f7890a5d1acabb8eef', "aria-label": this.label, class: "tree-view", role: "tree" }, index.h("slot", { key: '85fe36c7f2fb7f1d259fd0758a6017bc827d958b', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-video-thumbnail.cjs.entry.js

@@ -16,7 +16,7 @@ const SwirlVideoThumbnail = class {
         this.src = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '684edd972d557cc5802faf12d68a39c840d34031' }, index.h("button", { key: '65eb5646d91cd405b87c932b92b00365501c4974', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '08cfb230f06c5ff59e66a0a0889dfc42ebfa7173', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '47e734e3eb8502484ff75b70b40bc898e86a5d0b', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '072d38dae3171d13d3f3659a56bd81c68ca857db' }, this.durationLabel), this.duration)), index.h("svg", { key: 'b2101678bd8ff47ccc11cb807d863599129ff018', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '7d4ad04198b7c65616acd6e89288cc51baa5c99c', 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 (index.h(index.Host, { key: '774f08a914cca7fc87f34bc876f2887f5bc5fa52' }, index.h("button", { key: '5b84fb303196af7d8f05155e3913495a763243d7', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '7a77a017c95a8c7af0690e79e226d024f550c841', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: 'cfa978c28234772dd2faaa1772b44f95c7c6bdad', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '8aa09782ba772ae66898c9a459ae8d34ae553637' }, this.durationLabel), this.duration)), index.h("svg", { key: 'd8bd012d1f7e3a1ad7b718451d03de4f20c18978', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'bd4470ab6ee91cb0add6dc1e975157827edbb82d', 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" })))));
     }
 };
 SwirlVideoThumbnail.style = SwirlVideoThumbnailStyle0;

package/dist/cjs/swirl-visually-hidden.cjs.entry.js

@@ -12,7 +12,7 @@ const SwirlVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '85adc71e753de16a93f0110be0b49a9eb8be1ea6' }, index.h("slot", { key: '491582dfecab0bcf9dbb4821d346db75b9e2f8ca' })));
+        return (index.h(index.Host, { key: '51416ff908d08e75ba9942bf9db62f10da8e74bc' }, index.h("slot", { key: '039436bdcff7bf0c1441ec2e924c82e3bf56f9cd' })));
     }
 };
 SwirlVisuallyHidden.style = SwirlVisuallyHiddenStyle0;