@getflip/swirl-components 0.384.0 → 0.386.0

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

@@ -7,7 +7,7 @@ export class SwirlSymbolYoutube {
     }
     render() {
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: '9314fdf11d30cadb8f5fd184244b45e9317028d6', class: className, fill: "none", height: this.size, part: "symbol", viewBox: "0 0 24 24", width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '60adbdcfb552e8c930d2f588d8a5469454cd4e2b' }, h("path", { key: '677622c2bcfea52132c4ddd5bb5b98b8ca243a81', 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: 'eb5a43d2911a301d0e4e7f7b4db3210024d081d1', class: className, fill: "none", height: this.size, part: "symbol", viewBox: "0 0 24 24", width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '8a7f662f7874fa5f47750f60481efb4f5f27d36b' }, h("path", { key: 'da1e867a9d5aea3ac40d9df3c4e197aa312eb1ee', 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: '90c4e6735af6c64d72fe124135be3dc1db15bd01', class: "table-cell", role: "cell" }, h("slot", { key: 'eae94941448dad5e72ef44dd56c03fcb01dd33d4' })));
+        return (h(Host, { key: 'e800acfd900d77d13d01d34758e2b083f45230b6', class: "table-cell", role: "cell" }, h("slot", { key: '3128d5250cdd3d0bcd6712801433ea0efb9d20a0' })));
     }
     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: 'de6d8e69bc3dca0083b57426b6717f36652bd724', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'f98bb13f865dadd4cf2e9426e3aa31f48e8df45f' })));
+        return (h(Host, { key: 'd7d696868ec0d9c2fa9afef7e3c2caa521529ebf', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '491b4607b36a16ab1284970498963452024f0e60' })));
     }
     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: '1b04d2992ca58ed44340e7aec3820f0b93177a56', class: "table-row-group", role: "rowgroup" }, h("div", { key: '0d282f7ce6c39a952ef96f9812b7dc17f8aa819d', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '5d1f695ff0ceca728f319c23933e7e6678e2ae6b', 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: '5b65eb9091252005029e799b63d31492ffbf04cf', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '21408c1bac4a276f065b68bc7f9429d5daa5ed41', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '98f7da861584f6442aa3fc761205160ddc9ec060', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '467bc53bc32bef6da529faa24f03c21141eb608a', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '849ede732ab8ec47d396fcfb4cc44c39e07be719', class: {
+        return (h(Host, { key: 'adad7412dad236d8bb56639a1acc4690a3760700', class: "table-row-group", role: "rowgroup" }, h("div", { key: '29c9bd2bc56af09e3cac07fefa9bdad17730dbec', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'b53e018d80aba0f389930b825977d27982ba400f', 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: '958ed87c78afada9e4488e0838f9d586786b398c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '338a566a8d861684eed10c8a7beeaeff5c424ad5', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'b0aee30f5c358b18f9e83edd188d1988a0772ff2', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '01ac364034bf562bddd266bc2f3f2185ae99d918', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '930bc31f0478fa4c7cab4e7e38d9bf31168f82f8', 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: 'c29f8646b19d065077752896135a6185e9452fc5' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '900d8486d712e304a08a7760e07a82f7fb0158db' }))));
     }
     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: 'b0424db2bbb3e9d2eb6b1360393f50266c160a07' }, h("div", { key: '4ed83a8b0bc569d8e5fadfb465d76be22b61d6c3', class: "tabs" }, h("swirl-tab-bar", { key: 'b21a0e3abdf73844c7d458c52cea6394735a001e', 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: 'de2271db34b10132a5058da11c66bbd9e1af8b9e' })));
+        return (h(Host, { key: '6f51599988056556afb4325ad2a918efb801a690' }, h("div", { key: 'dffa8a80445febed2cece6572d37efbb620291d6', class: "tabs" }, h("swirl-tab-bar", { key: 'fac111812a85c0bcca67bd2d4a1fdf36613c562c', 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: 'e7e646ffc04e6e4326c9ea1d0721c2755ff4e99b' })));
     }
     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: '2d83efca2b56df1a8740107d1441e30b9ac8fc1f' }, h("slot", { key: '5d5df1ce8558f18d27738f6e30a05992441ce4d8' })));
+        return (h(Host, { key: '4d298f7fdb7eb70b57bcccff39755956847ee51b' }, h("slot", { key: 'b3dace729e21553518628b6f733cd3364a23eac5' })));
     }
     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: '327b4c5164978cc974a22a9cc33e216cd14a7fbc' }, h("div", { key: '66b3618a644c204843d738f11091c8a8f8f8e521', class: className }, h("input", { key: '502590cc5c3938ba9e16a5ba91973ad8a80ac46f', "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: 'ce5b5c97b9f063a5005e7aa19bee9a09257ed877', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'c89b6d86fa3a71be6f173785691a9273b268402d', size: this.iconSize })))));
+        return (h(Host, { key: 'ae938e34b6749f2d8769188b03ba397f48053c7c' }, h("div", { key: '820bb9a8af14ec2e0566610cdc7acf685ebaab49', class: className }, h("input", { key: '01f30edbb831a35124af67a6a9632b8177f30d17', "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: '8e239ac224665ffcd26ec4f2ef3786394ae21bbb', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'a23c7d2781e37cd572778bab9bca884d7800fbf6', 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: '07eabe5e55cf9ff2f4843570051b42649ba3bfd4', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'bccadb01dca4d85e2f3cf83972a3648e4138b96f', class: "button__icon", glyph: this.icon })), h("span", { key: '5af64542d123b9bd3367e13211ef1ddcd3b4922a', class: "button__label" }, this.label)));
+        return (h("button", { key: '2b9620d5152ba227e725f3b2308b96f49d0d79a0', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'f2504f9c4e4ec6f85fbd3d356f71470a5a133a4b', class: "button__icon", glyph: this.icon })), h("span", { key: '5ca11b4cebdc080a2ef08761344e349ff2248c16', 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: '19bced9c4bd5a9f19ac371ad471b28147e825d6c' }, h("ul", { key: '542e63ca38881d301cb865af8a9cd51098c74ccc', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'dc52323cca1a13690996da5e92c85995c3eee19e' }))));
+        return (h(Host, { key: '86870308bca066293786f8864ca39377e922f765' }, h("ul", { key: '3ebec851bb00a9d406d9bcc58df306c66b7f3724', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '3a9cf1a0069dd30b73b49ce295896ab5226f05e1' }))));
     }
     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: '5807e28ecfa2049fe32bc94fda18b8d9230a988f', role: "none" }, h("li", { key: 'b246a85880c51160ca199f241b9e281762223cf1', class: {
+        return (h(Host, { key: '1d750b175e5715e6ce44f427be7164cbf208c992', role: "none" }, h("li", { key: 'df354e4bb8486eb1b59cdc18ab76319fa6a54d8d', 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: '70004fffe6eda61c3f2c9be9ff3ab850fe9c42cd', 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: '20b218f732c0741c64b16799d5d3873257012b01', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '455ce0d5c45d75e1ee91161147ec914bb2584294', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '90a68210dd7cde42d7ccfb5d6646393736592a5a', class: "tree-navigation-item__label" }, h("span", { key: 'bb3f5b16db68637a123012c099ccff77d7ea0d0c', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '7c806bd1ea85c5e166df3c16d620095a91d3e359', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'f12c9ad593c14cd4a44608f5d5ec46abd1131ae8', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '3e44fd9995acccb5de2830125182a5cc8ac76b0a', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'ba905b5453a9c06ddf5c5c2f725fa6b7abf73592', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'bd9eb74a23b050007eecb52ba6d862c0505a8abc', 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: '072c1e016ca496beb24b1066d9ae29322fd70418', 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: 'df801a9a7bcaff5da25905dfec39b460ed055096', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '4c11dc3049f488e4a729f548bddffcea8f4a4dc0', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'ba8d1fbbc813568617c4e19cbbf4b6b0676acfd1', class: "tree-navigation-item__label" }, h("span", { key: 'df1fe9cda6ff97d638c9a1ea431b61275f44c8b0', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '2fefe3aa3a88bbd5041d16e629fc9089b859075e', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '3f3bf81b0c92954ef16dd9b5e1f12ef03e50f41d', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'd27a45e3ed535832a86e1e9630c4225d9ee95ab7', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '66b459c55c22945c6fa47278fb89e54ce12a2d8b', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '0147cef7a24a5266e6214aee2b5e0fae5f4d82c2', 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: '616050af4701a7082e8f9f93279b3dbf0aef197f' }))))));
+            } }, h("slot", { key: '128b8af2ea1e0b39da09de3cc8ad3329fa1bc50a' }))))));
     }
     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: '833e04a9e055d0e0355a60f9abfd30bd019d04df' }, h("button", { key: 'd9b8c02a1cca44ea00c9da0aba52a3fe9596acb7', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'a3a831e1f6e776c68995d43a534a7788adbe14d6', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '2a1ba31928c1a61f84e10ea7d5c012068c2d7760', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '372dff81b2cd3b8e9860e4a4fa0e22276ccfa6e7' }, this.durationLabel), this.duration)), h("svg", { key: 'd355c2df8ba6666534472e532b7934315c7f9664', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'dd061c208f99123993bf97748ec32220555c20a0', 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: '89dac32f65bef0a46b67703fe29f712d8177ad26' }, h("button", { key: '5f8bebb67d9dd7de8e5313c45869f5a5e0ae6398', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'e250188befd06bacf95cceb642b6a3f99d4339a5', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'd7223f77200e3ae6385de7533faba1df176a6fd4', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '5fa5a326db2af07b947a788f5f732bd171a8ca02' }, this.durationLabel), this.duration)), h("svg", { key: 'a5036ced8bff84f95bc39135b1fe2758ac194c85', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '27ff5a6714f1c3ec692f1bed311ff0607d07b10c', 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: '91d5a3662bf66576c8b9cc3ae6218bb8bf3cbaef' }, h("slot", { key: '54e3c15793d79b66928746d88ea630d66dd23c25' })));
+        return (h(Host, { key: '09b1aec3ccdba045e8ebc6d830d708ab7831f74c' }, h("slot", { key: '08988756ba69ebcefe7e71f588a433c286c5adbf' })));
     }
     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: '84e9fed9de1b598202d9ee5a5230b59cf6073e73' }, h("swirl-app-layout", { key: 'a67f6845acbc94c4a6d3dadae989b2eed1e0e66d', 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: '28b552c84df4b09377e50cb5e6916fce949c86ea', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'd33bcaada49af52a761356e378d9e98eb06b951e', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'ab9d530d6231a3e3b5d036a330cb2558f4f6a7e8', label: "Sort items" })), h("swirl-stack", { key: '472ba890a3d80807231f2f987cb565109c95a9ad', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'db658ca983ba251a28c0ac11c90117207d58be5a' }, h("swirl-heading", { key: 'c95f8eda1334fac2defbee6bf86535361e6a39bf', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '61d364dc9ac46cae875ac87b5a36d989e856ca72', 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: '3c6d814fe53126325c9abdf1bbe93d35b0ff565d', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '8ac58634a3347a9991d3afcd5d880e6e40529a1c', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'b03a4bb981e39e4716adeaa694d7cea9f0b44d23', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '6f24ee99cdb82b04d9a9573c452c7481ea4782aa', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'a1519fce67a73462b81acbab3b4f144d16a28077', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '3f0f9c6f82dbfd2bd8e68e290b1db84a53796a5f', value: ["ascending"] }, h("swirl-option-list-item", { key: '75bcc34fe9353b2db24f0d983c563e461a23243c', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '6a09a96202c1df6eafbf254f0b224dad475399da', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'f928aac8c504ea14550f54e1e8e7d6f0b317f0cb', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '14083c93c9141df0ab609647a390593b71d4c22e' }, h("swirl-app-layout", { key: 'b37221b75a21db26c333a556b91dffc66f0f6e8c', 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: '4861921bbe71766f2b8c05ebad59af0ade0fdd43', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'c6cca65267d4ee5d7b851526311eca602d919b07', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'cc6f70b78dfdc12edf541e41fc8bfc15981d3ebf', label: "Sort items" })), h("swirl-stack", { key: '09c69a17c5bdac668bfa3a5938eeb094e493c15e', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'b05439a6c50fc72ed89df65873919351a6711fd3' }, h("swirl-heading", { key: '37ecbf0cdbd0e803c6f79f3adca1ceb37bf347f0', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '297447a670515ca3a88a8a7ccea466038f92f476', 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: '8240220a1322361d3f2fec3fad59c5c26572fab8', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '42c52c5c8e177328cc574f9de32793854236beb9', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'bf1986bbb921c29644e329bb47aeef3128a68412', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '39480bd58bc6c28a65823ee9e341e142fbb8389b', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '323f9a781a1b12254d8e1b41ff21938ba6c8e372', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '7156996dd05db60fca86169c2740052fdacf9eed', value: ["ascending"] }, h("swirl-option-list-item", { key: 'e5534f804442f5dd2583348454dac9f19e73e8e7', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'b6f8a821b576baf0f4e0be6592cbb679c66d0eb0', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '99e497bc9b4771d75417a7320260c1c2592edc23', 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"; }