@getflip/swirl-components 0.252.1 → 0.254.0

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

@@ -29,7 +29,7 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: '1bdbf8e044a66453ee5615824ac754c91fce4c35' }, h("span", { key: '4c51a527eb1702b1a62787515295ea4cdeecbedc', class: className, role: "group" }, h(ImageWrapper, { key: 'a1812bb2b531a0c3db89a9cde8546c148df5eda5', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '8e9de50d0df07c6612f1b18f1c80acbe2eaab27d', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '80d7ef081fed7d046d1c0e73abfac42666596888', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '5ad89f005baeaad484d9fb73c06c29d55b77f1dd', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '255fd4bb4546e285964693ee0ac41f7ff0bf6663', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'a4ed20e9402c8f15cc4dd135704245272d4be562' }, h("swirl-button", { key: '1f933976630e136842a6e993cbc57d1b2e729e94', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '7e05091590d605437b8bf6aeb0eb119dd4c70051' }, h("swirl-button", { key: 'cae4ae3aee2eb1cea01a0c6de1a4d8880d5a1983', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '4bc5300253832a20c3a2fd47b68cc0a0f003a321', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: 'dc17abfe75a0e31a41d47608fa9cc8ac8e5f338a' }, h("span", { key: 'd1c1035b270571bd43f3073fe790654dbf71dc6e', class: className, role: "group" }, h(ImageWrapper, { key: 'b8c87d971c55a14be54e41b2714b2b9275df20fe', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'b64b49d3cd04481531dfa72523d334aa4e79cc4d', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '34e85a96dfeebacc9e1a0ea15d4e37fa9e2c8ee4', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '1e4df833546a26b189eeca4ea5712f2e74614be3', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: 'fd703755dd6ebb5865ab7210797227869cc9f146', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '24d448fa23eb0a2844560b101afad478ff51a5e0' }, h("swirl-button", { key: '7b495487cbb2a9ad7cad96f2bc4224696fde7d3b', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '67d9c76c0aa10c948fbac981be4d8afcf1820d85' }, h("swirl-button", { key: 'd509ead6c53d1b1b28853ac3a885130090588f42', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '6b67c1c8f58b91edf402255d7db5f36a615905ae', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get is() { return "swirl-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,7 +117,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: 'ec1451e38c1ed030832bbd774c438f5294d54c1a' }, h("div", { key: '4006c0b501d263dbd45bb5d4316a195dfe5cabc6', class: className }, h("input", { key: '5713e16c259634accc352ac82cc49c7470752af6', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: '950f25edb2be507a6d0e2546bfc76a50f542d2f1', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'e93f2f9bb828b5d7e38115d959dff8d2fbc84d90', size: this.iconSize })))));
+        return (h(Host, { key: '825c7aefe5770d5d8e28a35531c10e448bf08bb1' }, h("div", { key: '7c1ac3c752e2778b380ca513a90e8e2484e29b7d', class: className }, h("input", { key: 'c9ccc6d7afee9c7b5875ff8eb0809d00cf8ea16c', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: '961180beb8d133377e6fec941b879348b3268b5d', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'fa023c4f00d534935904b471990d48524a3bc961', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -53,7 +53,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: 'aa416865a4d1ec73a1c414e729f1d064dc905b4f' }, h("div", { key: 'b30606dfd61085995f2e75cd6721bf24a3fbf1b5', class: className }, this.icon && (h("span", { key: '225f83723f9bb35e4c40d70377c03970db6d6062', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '77f4acb27ebbd47fbb6e562c61d75f290d4c3e46', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'c9175baa8208dc8c204d919bc7a0bb76afc090e8' })), h("button", { key: '25fa9b5f3b554744fa5b5f0b6f834450922f473c', "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: '9f290ae34e1bbe97f61c7cef4b5455ef99fde3ef', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '1da46b96aef7cec3e3b3711964a2d8083f45131e' }, h("div", { key: '22e1fb9c7bf3314e3aba587f884783baebfd07dd', class: className }, this.icon && (h("span", { key: 'ee45314f8a40d8a72500704c2f2b2f8b895f8f9d', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'a8e12cf94d5f78dc75fa7b3087563020733e75cf', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '93eba2783424f44a5fe4d27ba7ea8d7b177e325a' })), h("button", { key: '794ab47b83f98e9ed36280539ea17a863725daee', "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: 'd3f3ea7b0faf733ac7a0acd01bef775fcd086f56', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,7 +49,7 @@ export class SwirlToastProvider {
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: 'e958e449de2556f3a01440cb34d916522dafd849', role: "status" }, h("swirl-stack", { key: '2ff83044cc6f5f1072d2df3498b49e7f70f38627', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '4ca07c887b78a25c8cfb65f62de4597b1311151d', role: "status" }, h("swirl-stack", { key: '072c718f837a9e2b07b42257171ba04a1ee6ac24', 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/collection/components/swirl-toggle-button/swirl-toggle-button.js

@@ -13,7 +13,7 @@ export class SwirlToggleButton {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: '8687bd6e29b035db9a66d5e5f5026f86327dbeb3', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'd94933863510e6bdc62cbc3b4596377811db72ec', class: "button__label" }, this.label)));
+        return (h("button", { key: 'e3fd405e07b5a94eceb77e42681cbbdd563d1946', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'bff2993c2631e575332a5107d39cd7355f441b12', class: "button__label" }, this.label)));
     }
     static get is() { return "swirl-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class SwirlToggleGroup {
         });
     }
     render() {
-        return (h("swirl-stack", { key: 'c150389754cff2002bb60e9827f625aab3cb9e83', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '0e0f8f134ebb4eadd40280dd90875a536eb804ac', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '5170589489c60e79ea7e8ae00f7c3e3df002a628', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '13c3cc274a5844a430640a8ea2b268dcc9650495', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "swirl-toggle-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: '77eafeb0997b550cbb4ad2e933ac87f0f7b194ab' }, h("swirl-stack", { key: '5ad5d221226ed9ab2148576b3f4b8f0d4c3c8db8', 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: '5a0974bb650224bc0fc771d293ea64b855544afc' }))));
+        return (h(Host, { key: '4088eb0256fc47727edce81af5829f4ebbbbeed1' }, h("swirl-stack", { key: 'b18ad85af85caf9418e498602d387d2bb888e8e6', 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: 'f644ae3de4b776e4822240dc033779a671c4a684' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -110,7 +110,7 @@ export class SwirlTooltip {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: 'e8ed392cf038f8c7dda28d1b0f37f7fff7a99c67', onKeydown: this.onKeydown }, h("span", { key: 'f396b86fa0472dc9a1c30d33a8467c998a611c37', class: className }, h("span", { key: 'cf7e40414997d42d10a9fcb8ee010ed0d1b8f454', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '4b4b954f3235f3b9e796a58c682f609fd7e11cc3' })), h("span", { key: 'b921c1388acc8775530b90fbee13268c7086ee7e', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: 'f3706b57f74c0223d9a0de457ae39737a23a4038', onKeydown: this.onKeydown }, h("span", { key: '27535b77f5b2e1e4adf25e2bce512dd019912e25', class: className }, h("span", { key: '5440bc1e39796bdec1dd1836fbc4e0483ec6a4a6', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '6e30483c1a9ca4d1118c0f785d56a5fef246d7df' })), h("span", { key: 'f7c45dfe92b9ad8192538f7b37cd8f117ac687f8', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -118,7 +118,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '13332b6bd6ab0daabcfb060834d5cb0493d8e827', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '1a8ad1c43a2b86064a141f4d51ef158051974789', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '48fa4b800e6964d9d58301bcf9904f7d9ce5cf79', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: 'e8579729115384e96187814ad455d7a68fdcbe4f', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '2e490d94936c5dfb4fc983d084d7fa629ca51f9a', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '878b49d11caef03cbf0bcdd78e40d492bfc93d03', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

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

@@ -15,7 +15,7 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item--active": this.active,
             "tree-navigation-item--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '667fff329a7d1df17448843b551660a3b57b00d1' }, h(Tag, { key: '641aaec069e941841a2b46a37235a03c823d76cc', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: 'c539f98f02ec6c0a91587947d23fc70851a20789', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '58a1037a0f3e35c4ff1245fa07ead267aa4b41e4', class: "tree-navigation-item__label" }, this.label))));
+        return (h(Host, { key: 'f9bc80e6c911dc7030d180ce5f675f90e84fc80f' }, h(Tag, { key: '2ca99a21c102a2137e61472c654d9c7195ed3d2c', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: 'a657d7199e22b81315780d5264c04269d347df98', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '0d612bf1dbdfa0a4b8979c9dfa438c4821f6d339', class: "tree-navigation-item__label" }, this.label))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -192,7 +192,7 @@ export class SwirlTreeView {
         return nestedSibling ?? undefined;
     }
     render() {
-        return (h(Host, { key: 'b666d321da58d3901f4cbbfe63a24bacdde640cf' }, h("ul", { key: '8ab176b6a697362ea7dbf8c88e83ad7e1c744cd3', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: 'defdbe195aec8654324c608c83382f2a4d233221', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: 'd9265aef73021237709d82d2942014e16f193f8c' }, h("ul", { key: '0c435bad394708adb3a98564d58de09ca435872c', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: 'b48b40863ea888e67246ba7dfd7b1ead648b2c60', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,11 +74,11 @@ export class SwirlTreeViewItem {
             "tree-view-item--has-tags": hasTags,
         });
         const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
-        return (h(Host, { key: '15130b1a24bf5106cfd290b42664d931204a9cf7', id: this.itemId, role: "none" }, h("li", { key: '41f4cd48edd031505c0e67a6f15006ec71cf59ea', class: className, role: "none" }, h("a", { key: '922ef1a373afd9c9345a2f9a6b2b2201144ae8e3', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
+        return (h(Host, { key: '45ddddf9e282ed3afbb4fc6606c4b75e19f45ae3', id: this.itemId, role: "none" }, h("li", { key: '49ad755ce87e8021d159110f14504d977a2ef685', class: className, role: "none" }, h("a", { key: 'c8d9a279b733241173d8c22d69f5aa25e4e7ac7f', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": 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-${this.expandable ? "4" : "8"}))`,
-            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: '3beb6a201aef63c534e9443a7793c677be8be221', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '980561e9867b1eadcdf00f8d55e362470e0d3a8a' }, this.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: '12ab5019112735ec0f5046eebe02f81147f3d4bd' }, h("span", { key: '267ad77c9aef6f6f638c9297293a6989315af8dc', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '6d32708751df76fd938accc329471f7962aedbcd', class: "tree-view-item__label" }, this.label), h("span", { key: '2a12c026e1b213bd195057091c5af752c1b064a7', class: "tree-view-item__tags" }, h("slot", { key: '2e70d4b8d8a320a8e8ba328c88b3ae51d53d6984', name: "tags" }))), h("ul", { key: '02542b147b3b8a017482c9fed1c9836c5aa96007', "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 }, this.expandable && (h("span", { key: '4f2457f90eeb8d5841b5ae82b8214c5b25b05b9b', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '57b52745d6f0d9849b39fbf687168d9f37aebf12' }, this.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: 'cccbc0943a56a8dc1c7d4bef194b14030fa39b6d' }, h("span", { key: '673aa7207123120566de9a95f1f20b1eb99504b9', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '4db5b2da5445dbc39b4ec43028511515833e78a6', class: "tree-view-item__label" }, this.label), h("span", { key: '571d246e294c3a4e654c49868defa16adf576062', class: "tree-view-item__tags" }, h("slot", { key: 'e1c619ee29b232e4653f6edea8549625d96d7544', name: "tags" }))), h("ul", { key: '44bf72064a95bc3504176b00f8656c7f2e2689fa', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
                 display: !this.expanded || !hasChildren ? "none" : undefined,
-            } }, h("slot", { key: '69de62e0d22ca3275ef5d623ce96b51abe235069' })))));
+            } }, h("slot", { key: '8ca6c92b00ffb2af2da537fa79f90548f44ebe03' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,7 +7,7 @@ export class SwirlVideoThumbnail {
         this.src = undefined;
     }
     render() {
-        return (h(Host, { key: '86bd3f7055dc7f6657ebeb4bd622851ddb795bb4' }, h("button", { key: '0e14617879ac71bcf65e9b03e7317a2cccb66022', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '19a3fb9095d4e6c6309b05c124c6f46d3c80af44', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ee25801c68ae932b9c42ffaa767b08ed85b740f9', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '1a2bebc69d6d3f237c31b526dc5e5d2888135cc8' }, this.durationLabel), this.duration)), h("svg", { key: '854b3e0a64de7a2b4108fa94aefa2ee9981b7cf2', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e2ddc41d27f17ede02a511e1b9b0108e768c2f44', 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: 'd67938cbd04fbffc368ad324630bd8622c1e8c5b' }, h("button", { key: '2233218d1d04cca359795a4037e2e475a114a9bc', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '6533b6476b62f35adf46a76a88b946727ceaeb33', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '9afe4e6bcc2080be2e19a7d2f14a661841c1971a', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'f416764dedb92def3f33a1a3ea124425a06cb2a4' }, this.durationLabel), this.duration)), h("svg", { key: '3f9d5bf02620449267629cb325b87a1784f5b8ec', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'aaa31ee0aac6020ef6ca4f611b491bb82d2a032d', 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: '9bfa953d16b7bfa3541731eb02ea52f208ef7aae' }, h("slot", { key: '8bbaf9f607a6d3eaa4eb24c0556e2a19950fa293' })));
+        return (h(Host, { key: '2bc61727b59b308d63a22df3d0e4c1275ff724ea' }, h("slot", { key: '2fbb79aa18b39cdc3361081d460b1ab74f5ca7e0' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

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

@@ -56,7 +56,7 @@ export class FileManager {
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: 'b10b33ed0d11a29f44ec5adf1ecb03f69ba0a56c' }, h("swirl-app-layout", { key: '5ff76261fa1f4b6b7979147c80cf3e7e31e99b79', 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: '293ec511ed760124b2e7f9f2bde5de52f467f41b', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '8f71dfbd37ea1cd5c8dd04d07f2088a49f825626', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '87e2edb961f3ad43af8a5c7cb23b04ebd6f260ce', label: "Sort items" })), h("swirl-stack", { key: '7cb962bde0a5de73fd2c386fca08dd90a40efdbc', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '0579c26627e50d9e5756cd567090dfbea14539cc' }, h("swirl-heading", { key: 'f4c15f445c7d17903f54f20fb2b49e575ae22c58', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'da4cf0236d38d06f45fe7b583793330ea882a236', 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: '4ae29a97fd0a4c1bd3394c5a0a9c9ae7332eb0f1', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '9a72c17147bfd32c3a770b815c53975f763ec0df', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'af463b80409ee20a4a9b4be52bd90f3005fc3652', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '35fe992269f17fd94d3f9240fa221832f8ef0b22', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'dbaa51e978000f29ed0f87407418fdf7a40f10d8', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'd76f81e6f05fede8ca6249c47e989af632abe0d1', value: ["ascending"] }, h("swirl-option-list-item", { key: '76c647333fb7464d01199d2ab648d1cb1869f75b', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '2fc0f977ce6e52b8975e39e0e0733cc2eaae1d2d', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '8d49685bdf33c7c95c33d2fb0941ee6e30e36aea', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '5abcfa3033adc7fc8fbb6b878295c47a67b446cc' }, h("swirl-app-layout", { key: '15d5dee67eff7b0321948b2b94a190255762aeab', 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: 'dc6202d53d29d30cf301d246b690eb80e2602f98', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '9727fe10aeff9bdf5b3b8ce2be4fce4b314446fc', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'e00d9e6a5db9a8ce6c4c6af56466f042b585edfe', label: "Sort items" })), h("swirl-stack", { key: '5f47eae01c2cac3e4d0336f9eb16613b48935431', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'ff2f17e4ee8b7bfeaef76e1d3c6a483c7e40a841' }, h("swirl-heading", { key: '974ee1849a4451a0e576826d9f2e65771d0166a4', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '43faf8febbc4480e286f011b61bc20ae9f7f29fd', 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: '7b9deb6018f9d6df739a906136fe85ff043d1fe8', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '85309a64ac050ad4bc21c77a13675e1de669aa4b', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '9f5f3c1a15b22bfc9523b94ad3578bd709f64d55', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '4d598b0dd927fde15175dfa58bf2748f463df2ed', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '569dba4b00d49f27e4b25767afb5a1323fdad4d1', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'a00f86a4c6d90e00bf3655b0334dbde95e5f797a', value: ["ascending"] }, h("swirl-option-list-item", { key: '836668dd0f91592bbc359a0fc1599417a171f28e', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'b33317cc1b6379d631bc4b4faa37a5a012f2e9f3', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '0362f59ad0dc53c2591825ee0e9c59ea2cb03bc1', 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"; }