@getflip/swirl-components 0.375.0 → 0.377.0

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-youtube.js

@@ -8,7 +8,7 @@ export class SwirlSymbolYoutube {
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: 'eaa9b130ca18086d837837f4ae7ecf36a04b0e88', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: 'f8cfe9f3d13e5290182c6db852773ba4000aa272' }, h("path", { key: 'd62a3ed86a970b723a2bd29513a3fb4f9424af19', d: "M21.582 7.201C21.4691 6.77542 21.2463 6.38698 20.936 6.07459C20.6257 5.76219 20.2388 5.5368 19.814 5.421C18.254 5 12 5 12 5C12 5 5.74599 5 4.18599 5.421C3.76123 5.5369 3.37436 5.76231 3.06408 6.0747C2.7538 6.38708 2.53101 6.77547 2.41799 7.201C2.12953 8.79965 1.9896 10.4216 1.99999 12.046C1.9896 13.6704 2.12953 15.2923 2.41799 16.891C2.53092 17.3166 2.75368 17.705 3.06397 18.0174C3.37426 18.3298 3.76118 18.5552 4.18599 18.671C5.74499 19.092 11.999 19.092 11.999 19.092C11.999 19.092 18.253 19.092 19.813 18.671C20.2378 18.5553 20.6248 18.3299 20.9351 18.0175C21.2454 17.7051 21.4682 17.3166 21.581 16.891C21.8695 15.2923 22.0098 13.6705 22 12.046C22.0104 10.4216 21.8704 8.79965 21.582 7.201ZM9.95399 15.019V9.072L15.181 12.045L9.95399 15.019Z", fill: "currentColor" }))));
+        return (h("svg", { key: '7bf563461712eef0efcecc277a5a64335e77d8a7', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '63addcb2c955e15a652c6f38cded4c5e236c6f98' }, h("path", { key: '0a662e93fdf00b00985a0dcc4f92b6377ea81522', d: "M21.582 7.201C21.4691 6.77542 21.2463 6.38698 20.936 6.07459C20.6257 5.76219 20.2388 5.5368 19.814 5.421C18.254 5 12 5 12 5C12 5 5.74599 5 4.18599 5.421C3.76123 5.5369 3.37436 5.76231 3.06408 6.0747C2.7538 6.38708 2.53101 6.77547 2.41799 7.201C2.12953 8.79965 1.9896 10.4216 1.99999 12.046C1.9896 13.6704 2.12953 15.2923 2.41799 16.891C2.53092 17.3166 2.75368 17.705 3.06397 18.0174C3.37426 18.3298 3.76118 18.5552 4.18599 18.671C5.74499 19.092 11.999 19.092 11.999 19.092C11.999 19.092 18.253 19.092 19.813 18.671C20.2378 18.5553 20.6248 18.3299 20.9351 18.0175C21.2454 17.7051 21.4682 17.3166 21.581 16.891C21.8695 15.2923 22.0098 13.6705 22 12.046C22.0104 10.4216 21.8704 8.79965 21.582 7.201ZM9.95399 15.019V9.072L15.181 12.045L9.95399 15.019Z", fill: "currentColor" }))));
     }
     static get is() { return "swirl-symbol-youtube"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-table-cell/swirl-table-cell.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlTableCell {
     render() {
-        return (h(Host, { key: 'caa6a0ead6554c367126f5073fc5d6f6dd7b81c5', class: "table-cell", role: "cell" }, h("slot", { key: 'a6b3deb661f69bb1ab969684d4c217d76c4ae986' })));
+        return (h(Host, { key: 'da1cb34122da1b3641cdc3a11820d7de7ccee988', class: "table-cell", role: "cell" }, h("slot", { key: '5cf22fb38e1ab2f90db35ed7f839a3346120a11b' })));
     }
     static get is() { return "swirl-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SwirlTableRow {
         const className = classnames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: '88c230f066b64b23b28c8b2cffdd1e530b1fc4ca', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'e8d3f5ff24dd58c0a61b2a133de256b6ec014925' })));
+        return (h(Host, { key: '4358b4d8d8411d08c7a546b7da134e27070927f3', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '2cd84aabc9a8207bf42ff76d11974960c8ffe86e' })));
     }
     static get is() { return "swirl-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,10 +38,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: '466b29723fe0657d0224e31f41e24e40c8535051', class: "table-row-group", role: "rowgroup" }, h("div", { key: '570577ca2aabac6ec76324234e5493b3af1875f8', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'db19f8f13726fd1d58d7da0b6dd8e5733d090c23', 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: 'eae2332e09e7e500ec47c403edaf3776faab41be', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '90b75405fb2c17a3ebf6debacf26abac0d0387a1', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'abe03bde8fa0a73b93a7fc2524b0fe574941d87c', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: 'f85a9acf6b2cef3090c31b2b5e43160713329495', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '8e3dbaac26a1ddec5f47ba9b298127092e983f32', class: {
+        return (h(Host, { key: 'a6f2f172f99e93a80dfb95f69ed555df58a99301', class: "table-row-group", role: "rowgroup" }, h("div", { key: '9cbceb02e129a925aae8ed28c2e63e79dd2b702d', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '7cdffd02cc7b6fd3d8c8bdceea22fb2688b8c4dc', 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: '256e76e58737240ad41acfb4ff7d528a0958051f', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '3fe8a0aebd32378d4015e9aa38cfba6fdf9ab289', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'e0586874dc4d6f1b0d9867ed8f4f0db19ba0c842', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '7f84cac41ddbb9320d3ff855c595f082d4de425b', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '800aab58988098a909a3c341e9a1b730ff177247', 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: 'fc6272e8d8cb906eb3826a0719905e5ef2a7d936' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '50cc40f91b9d028335394a2eb982cf6c3509aab9' }))));
     }
     static get is() { return "swirl-table-row-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class SwirlTabs {
         }));
     }
     render() {
-        return (h(Host, { key: '1b71ed5ebc8c25ed689c2f007f258903f70f16b0' }, h("div", { key: '43d418a0accc3ff045c125910ec4ac78ccfcb7c3', class: "tabs" }, h("swirl-tab-bar", { key: '6fc41b7e6f1eb12a569aef6d1e43cbfe2fdb69df', 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: '099762d240237856fd73a448bad8b1794f91fed5' })));
+        return (h(Host, { key: '495603d3dbdc65d8d3ddba8e0a75c8f8f0ebd5e2' }, h("div", { key: '32c4956721a9b4f83e96772cee86d0a81a5e5ed6', class: "tabs" }, h("swirl-tab-bar", { key: 'd1f388ed34e95b97fcde230be30daf4b6ff957aa', 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: '8a10f448daff2126e76181d42e5a00cc9fd9e683' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }

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

@@ -144,7 +144,7 @@ export class SwirlThemeProvider {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: '8393a61a05cc2eeb473ee1ef1feaf1e8e269eb4d' }, h("slot", { key: '8cc0185f22946934eac2c3d60ab73066477207d5' })));
+        return (h(Host, { key: '4787f78f70d7421910470f7b16e5a4907cb28a50' }, h("slot", { key: 'dba7075a6774b8c0b88aa44e59a51608eef73b3e' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -136,7 +136,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '981cf171001c3c69d9ca6499bdd7426848810711' }, h("div", { key: '2949f08e0a08ef2e159e59ce2d2fc7fb84dd274b', class: className }, h("input", { key: 'c2be09c877ca4ec6e10e7514cd85e674fc07a57b', "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: 'ae29d4c1ca5d831bfc7a5af272989603c9ce5f86', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '9fdef36886b40de6cafb94c09f0445a1c55da0b3', size: this.iconSize })))));
+        return (h(Host, { key: '34a6a35e78cd7c9ba123c375e54ce5ff40cd0f9e' }, h("div", { key: 'bfb7c6bae8d7e0fe23755a22d720f4ebf37ea805', class: className }, h("input", { key: '01cde52c05de4afd2c7da448b8510784e750c85a', "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: '31232be0e7eb1a0cb429584c0f507512083eed8b', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'd973a12e29dcbcdd90dd4b0c27450258b4d9b918', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,7 +11,7 @@ export class SwirlToggleButton {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: '725fa8f8aecb56f47b055c9e337a23c04594842c', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '28e52ad921ed4660a8767b2a4a2fbe4c09787bc5', class: "button__icon", glyph: this.icon })), h("span", { key: '725200238f3d8bcf14c9795386a4cc07198f881a', class: "button__label" }, this.label)));
+        return (h("button", { key: 'ef046d50c96ef2ffd2b910c63e9b05de2d814c18', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'ef93ab6f17ea1a39d76696daad256397a8099fc5', class: "button__icon", glyph: this.icon })), h("span", { key: 'eeebae27dde48927ad13ed3501e40ad6a028f9ff', 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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlTreeNavigation {
     render() {
-        return (h(Host, { key: '6de0c53c48ee5a11541f3f048da018df9a0d19f9' }, h("ul", { key: 'b9e5bf4dfb6aef8acb2e92421a71fe936d3912e9', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'd2999c3fbebc8629f3662b9536d1da42ec671b2d' }))));
+        return (h(Host, { key: '7e1aab6c70cd283e9cd4473208b7256cf64aa4bf' }, h("ul", { key: '7db94e9f40ac88202a7ad64936d15309ee26c899', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'c8f1e133269cba308ac30e457554ed0a9461d2e0' }))));
     }
     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

@@ -83,12 +83,12 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: 'e5892006f6e0d479a93994f050a9bfc06d358cb9', role: "none" }, h("li", { key: '12fbbd5cf3ca7e97597a6faa1889e665e910becb', class: {
+        return (h(Host, { key: '23de0f3ce6deed0b3c0176c8b03eaddcc3041153', role: "none" }, h("li", { key: '3aac3e31bc283d036f8626e247dace7c38b93679', 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: '44e9017d8b25ad561050666ad2e6c9a35d9fe2a3', 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: '7ec98ce065c42aaf96a8340da27b22888a9fcf49', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '0110d7f713ca0040067bb4cecfe10f3c21140df5', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '321e98259f46f2537daa178b94880af5b654e7cd', class: "tree-navigation-item__label" }, h("span", { key: '03b40b5a27f2ebaabde7dd1eda9389e8a5ae5ab8', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '43bb07c08e0fb5c8e67b8ac2ef5a75e0c89d0f3a', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'e7b0b04613e89576cbd7e9052bf300fbe7936589', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '3c53d1fb965bc60273762fae697161dd07d79b7c', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'c0a534343158a84b62d1f2217020cbd831cf8ee3', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'ffb5c9030cfffa3e2717782678ed37c2edf51cd8', 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: '21353e3fa67cd6f771072b338bae5e5af5ef651d', 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: '3ea99c39f28f1ab7cbe694744b3c2e3befbed9b5', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'be6a0678cd66d3cf774715538427616dd5d857f3', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'a9c9a8f7adfeb35ca328952fea88e0f846eb5eac', class: "tree-navigation-item__label" }, h("span", { key: 'f4fe625bfd2c49513f5d75dd616c2a37104e76bd', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '584d15842f9ad07a486ddc620399c085a6e2b440', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '6cde176f56983545901f0257787fcdbb6a6299cc', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '740308aeccc86ddeddeb38a8307f52f5de68941a', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '00669662efa51eee9e3f7a6cb91da841a35c5b85', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '167614fab7174611abdbf1bbab95fb9c5c506370', 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: '0c6eefee8fbb6fe15702d739807cba7ac2e58231' }))))));
+            } }, h("slot", { key: '26d08861a0c1a0e3bb29410484a285520c2282af' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class SwirlVideoThumbnail {
         this.durationLabel = "Duration";
     }
     render() {
-        return (h(Host, { key: '42f3f85dc459c8d7140d9052f9cf4c6edaa4dd51' }, h("button", { key: '82dd95b54642b3b108fd91dbf1a8f8afeb0fa271', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '278f7980472b30d2611f4b2ea81f680d01f98ce0', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '909ec9ce4fb84fd292047f01bf5b151e2d31d8ad', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'c116caa5cdfce1eaf4c90fc0952435677b7a8f91' }, this.durationLabel), this.duration)), h("svg", { key: 'f3def89bf9321a2bd650ce8da299927841492bd9', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c680681835a6635574865c28eb9c579073b57068', 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: 'f051b15d4c6b4f56e5624156fb6d15e7a318303d' }, h("button", { key: '1533308b5da0a6b3a862e0d1db68df4b364f8d40', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '63390bbaddb238105b51681e77f8d353be43783d', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '828149c48f40a88d8ee36ab65414bdcfd9fedc8e', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '5b1336543670ab03560d915be183883656b5b74d' }, this.durationLabel), this.duration)), h("svg", { key: 'a4d17283a8e014facd18ccb3ea0a2f345e889d8c', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5baccd9400ef4c5457b7af45e854577a98bf8ddd', 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: 'c60b98986bfc4bfe390d3d3e1eef5a54dcc25110' }, h("slot", { key: 'f150f7d98ab83d65e72983aa63ca593b915e2f5d' })));
+        return (h(Host, { key: 'd3bc2f2991e277be2f28c1fecf56a524475f187c' }, h("slot", { key: '8bfd7efbdb9776d324e9018402d0ddaa8991a322' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

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

@@ -53,7 +53,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: 'ab4714e7adcd1a3741d1dcbc7c4de6004ecfc996' }, h("swirl-app-layout", { key: 'e3637d43b4707efdd35e73e60890c8cd2bd5b646', 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: '5388eacaa046de043945038ac2a8b3b816b5fb4d', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'e1297dd14cc51d71ed09ba207cc8df6e7bedae12', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '907fed6b26950cbd86e3991863ec3436e6be7b62', label: "Sort items" })), h("swirl-stack", { key: '29a611316c2d000c8a09e80a9e0f588f51c56b39', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'bddbf7535e6f77469ac27cc0c6ecbd34953148af' }, h("swirl-heading", { key: 'bc18e1ba33ca53bb5f456ce1bc08cdda15de5b93', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'cf4deeeb1b5943511a9b01928f93a679bba0d98b', 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: 'd2821633d911d455bd38e009e528274562d8170e', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '9d8441a51bf38ab03b32919858322693c2a1c9e6', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '444680fd39a768ef18e72b4e8b9c915b1bd80804', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '74025b4637c984103d390183b1f890d8593c7454', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '411fc06cec32bf3558cf0ee8f93fe492ca135eac', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '557323af43223ebf468a8eb76151c8e7ea528b73', value: ["ascending"] }, h("swirl-option-list-item", { key: '95f1a4ea683ea4ac31a25c75a6fece74ebf1cd3a', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'c4624ca713d8f4cefc727093a0fa9cc5358e2a19', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'cd3d0e016af8753032139ade20a6d2b8ac41142f', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '2ff9eff28256cf3e9f31d975c255ba610dfe07a5' }, h("swirl-app-layout", { key: '0b491cde0f63b7ab216f8fe9403f4bc7d5b3f338', 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: '4bdab993cca1f501e3adbd84fe978c21c27d7fd2', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '038116a8941d0ae4ad57543282cd0eb908d8c179', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '0213a165e8ccd1a5e448f7a6ced553f75e44aa1a', label: "Sort items" })), h("swirl-stack", { key: '15ef259a5443b7bfec3d82fb780efbf936307da9', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'f7413c6b4e487071c350f277025c4cbd0dc12547' }, h("swirl-heading", { key: '07c3fb02d34bb8c91bd1a4708bed706bcc8ef967', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '77667b58ed6602005cf552deafce2ff024eb8a3e', 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: '12c80c62cf958b0dcfa9805ecb745e6b1a515e5a', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'daf8a8d1d0b5dbd40b1c85152dc6bd2ecddf967b', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '22a35fd0ab38fc7ab1b3b0b0682c416ca1ce6706', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'ec8532154a9b16d288308e2f07524dde99b443a1', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '2ced9b92b84ca3eabe6f651209d5d948cc750c3c', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '60491ad665bf900a4f748ae162841f0c39bfc95e', value: ["ascending"] }, h("swirl-option-list-item", { key: 'f39d09ad9eea79590d4be096275afb2132bd085f', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'c8e2b13f768b619f402eb30e5619297ae35e24e6', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'e4dde2b08169b71336e62e0e62603b555c11b986', 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"; }