@getflip/swirl-components 0.252.0 → 0.253.0

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

@@ -251,7 +251,7 @@ export class SwirlTable {
         this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
     }
     render() {
-        return (h(Host, { key: '24f2a6738264e8091386981013eb792ad020ac86' }, h("div", { key: 'f97676899c0cceddc878b1cf7b795968d792b1d0', class: "table" }, h("div", { key: '72ef16c858fcb313244e13fd15d6191eec3a0cca', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: 'e2cc2d5ed3fafc5a30eb48a3469d1ad137099506', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'b5708c2dd48deb4bfc2c569dd0a249301578641a' }, h("div", { key: '4e016885e8bfba638b6e05eb0fa15024f5099dc5', id: "caption" }, this.caption))), h("div", { key: 'cbde00b59313c31e0fd7620baf4e08ee699b6209', role: "rowgroup" }, h("div", { key: '4aa832ba26f60d3ef5e97996d207939aee97aff5', class: "table__header", role: "row" }, h("slot", { key: 'd9a69f765ddc2d2faaccdfe51031d78613741693', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: 'a090d330a831c6b7aa63e1c1e7db1ab1722bd9fa', class: "table__body" }, h("slot", { key: '42d70543808550a115f7451744e2d21b03606bd4', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: 'db9ec3facf6ffc31f9e5e9b6b966f655dfdf57f8', class: "table__empty-row", role: "row" }, h("div", { key: '5176984f0202af1dba88810a6ea974556add854c', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: 'fd9eafe81d31876a2b37deafd2d9180c934f1d4c', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (h(Host, { key: '2b321f21a866f788df236a1d1f985f5d54122390' }, h("div", { key: '3a1e470b4bb53fa0af74e333607d7ae8ea5d449c', class: "table" }, h("div", { key: '743362e4d3a22f7bdec7c25899634d3e66af3577', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: '2c66f5d5bbb0b089028005c14ecd26bd7586aabc', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '57e7f5ad13c321e11d97e977327f0f74ce5d57dd' }, h("div", { key: 'a92628e3c47c10c456e0ee8659080cef2453bc6e', id: "caption" }, this.caption))), h("div", { key: '971755190149344ebd1cd47838a5b293491024b4', role: "rowgroup" }, h("div", { key: '64a087553472b7abd257a43101c1db84f2abbc4b', class: "table__header", role: "row" }, h("slot", { key: 'e77d259def332f5a2a1c6d040cbe5fa42ddd2d86', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '5b40d3457513a8a5d00642c850b0a07feaa4a066', class: "table__body" }, h("slot", { key: 'ecbed0283a6bd33fc345b52760bd8bd7ccb1c7a7', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: '7eaff1a51925a4d5393d059fa9e80dd16f231c69', class: "table__empty-row", role: "row" }, h("div", { key: 'aa6efd6024e3589c91b76ba9dc0e88b84632cff6', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: 'c73b8493bc64a686deb3eb297eae0fb5b9575989', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     static get is() { return "swirl-table"; }
     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: 'e385e48abb9a9d6c8ca893faf94c04663b6a04b2', class: "table-cell", role: "cell" }, h("slot", { key: '7fc6b13b190f8d0354dd237692d4c400d668fddf' })));
+        return (h(Host, { key: '50f69ee95221e612273cae5e980785bda3f1d8b5', class: "table-cell", role: "cell" }, h("slot", { key: 'e765a79858bdabd0232c07eb90aae29a87fa991a' })));
     }
     static get is() { return "swirl-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ export class SwirlTableColumn {
             maxWidth: this.maxWidth || "",
             minWidth: this.minWidth || "",
         };
-        return (h(Host, { key: 'e0bcfbe22bb43085840659c7b1adda74201cb73d', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '2ce347c683a9aef70016be71b4356acc5b0bb569' }, h("slot", { key: '1d10da6f2ad240fdf82e32c7d5cf1de61b4f90a4' })), this.sortable && (h("span", { key: '455f62cd7abeada63643452dba8640acffd29bf5', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'f5777bbe4c8621ffd82577a83289e3f958152f51', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '19590f02f9e9dfd4d9f1b5e14670c68f3b2f6e5f', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (h(Host, { key: '3ef51d91324cc58e9f9856e11d6c467d421ed918', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '501f6ac5dda103f2f1a17104e434846343d29d88' }, h("slot", { key: 'ba564c3a624e722ac105468e75a7adbdf348d26e' })), this.sortable && (h("span", { key: 'b2fd6abcb0da3a62e1419613f5e8313a8928a1d2', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'd048668ba5f3ff03c8c61957c18cc36809cbb093', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '509bd1f9ce6c5ec6c2184eb35d9bc5a8258413ab', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
     }
     static get is() { return "swirl-table-column"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class SwirlTableRow {
         const className = classnames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: '51cd81a5b7a2759b698bed63b82cf07bc8ede623', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '33dea8245ef23ef5660fb8073944000039f58438' })));
+        return (h(Host, { key: '21b14deeb2db0acf8190bbf2ba3bf690fa234a23', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '15eb9408c23088a3384b93a79a17d683ea8ed6fe' })));
     }
     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

@@ -40,10 +40,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: '1d0bdf4f677cca0eeca34a2fea15bac8db8ea4cb', class: "table-row-group", role: "rowgroup" }, h("div", { key: '157df55eddceaa4ceccccc9f264d6561040d087c', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'c3fe7164c8b1de3a9079861d031d3d4de28f6353', 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: '18f467314272c8617e65f74e4ad90e38b30e0c33', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'de6d11fda4ad33efca885bf05b1a5cfbd79a1b01', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'cc9116a107dac532538fa719bb67faa949bf00ae', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '07160d507cabc38cdba60add786c71dbf9b08f3d', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '1100ceb304ad064dc0d15b1c28573ec63af7fd53', class: {
+        return (h(Host, { key: 'd2dbd9bd9bbe9d984178231afe5dfd9c7a244737', class: "table-row-group", role: "rowgroup" }, h("div", { key: '17a229aa0ad591c9313e09106146c10087a6914e', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'e9086b39bbad12867d24caab4c11c46fc0aea842', 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: 'bb5f9dc9df86532c3cbfe0f34038f4dcf2cdb64c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '93ccdf199a8bbf8b280f7c9faa104aa07c072b95', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '4148270f69105805fdcfdad98e7f38d519ef3725', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '047c478df2946b81123f8b386ed54e8b91d984d2', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'd2bb33b6e0fd881559e273515d7bfa3955ac86cf', 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: 'eecee4654e7847431e27df0605378632700d186f' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'a11581d6d42e0098d735c283347148d6ba87c214' }))));
     }
     static get is() { return "swirl-table-row-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,7 +74,7 @@ export class SwirlTabs {
         }));
     }
     render() {
-        return (h(Host, { key: 'b3117933df19f31baa5ff7d8f634113a80e49ad7' }, h("div", { key: '8f6b49a077ae6494063c32035d87b7c8e97920fc', class: "tabs" }, h("swirl-tab-bar", { key: '34cdbc9c318567a665ef0b76400a686049344f12', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart })), h("slot", { key: 'd2d82108c3cfcfd6692bb4d27231fbfbf96ab801' })));
+        return (h(Host, { key: '5bef88b2dbeabcb96880f382f838e8a1e1f3a7f8' }, h("div", { key: 'acf15728d260bcafe97b28f946a1e7e21677fd48', class: "tabs" }, h("swirl-tab-bar", { key: '82cfc97c435c068db77db886fed24f42de025785', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart })), h("slot", { key: '597188da5233ef491516fa923eea91eb65bb5de8' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }

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

@@ -32,7 +32,7 @@ export class SwirlTag {
     }
     render() {
         const className = classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-        return (h(Host, { key: '0f24f803283d0ae31836832248631c31c3868052' }, h("span", { key: 'a45e560b24f3cef29e7e6b483a4e21cba145c28b', class: className, part: "tag" }, this.icon && (h("span", { key: 'd94c11147ca629d61ec1abc59b08dfaf7d2c4a62', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '08be192bc7291eee2e544471e8cc8d10275ac092', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'a1951eec41ca1e82228f5c95b330714b983d491b', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: 'bc678f5de89bf5b7df6d2247d5cf127b072a0b30', size: 16 }))))));
+        return (h(Host, { key: 'e3c0b221de0a1f8cd317d14bad52e9f939e51d4d' }, h("span", { key: '95aceb1610dbf977510a16f8b8065aeda2645717', class: className, part: "tag" }, this.icon && (h("span", { key: 'be04cfcb7c44b5356c89fb27596a2ea6ebb85fe1', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '0653116f331776225b83858fcd8b9c14299c57e2', class: "tag__label" }, this.label), this.removable && (h("button", { key: '58d497c1479fac5f69c9f5d16317d60d6b4783b9', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '2563d048adf0d679aa321278934532ecf0b51744', size: 16 }))))));
     }
     static get is() { return "swirl-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class SwirlText {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: '3b14704a4e3913a8fc257bf5d92b300f13e8c0dc' }, h(Tag, { key: '41e876d7809f3a8a060358f8c126bd93a09ac0bd', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'b2502f17709ccca445a18dfd279d52e73897ab41' }))));
+        return (h(Host, { key: '1c70325988126cc54a9c8942ba337f2615caa5f9' }, h(Tag, { key: '719cde01bef1a2baae91eaa7d1f25e069706cb45', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'bee24f184bdaf8da03c7b3c3a09adbbc000e55df' }))));
     }
     static get is() { return "swirl-text"; }
     static get encapsulation() { return "scoped"; }

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

@@ -145,7 +145,7 @@ export class SwirlThemeProvider {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: 'f213ee10357d56715a9a3de89b943ada5b6055bc' }, h("slot", { key: '645627f1a8fefdec0703b1523cf44d0c6992df59' })));
+        return (h(Host, { key: '05ace43bdbafec63474444408c594932cf5524da' }, h("slot", { key: '2a30869438c44d32b5dec30713d2161607b2f990' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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: '8c719c4c8dd7bdefc76003675b54b92c1d17b6fa' }, h("div", { key: '12ec0adedb863d2542618dd711b76fd276a27a41', class: className }, h("input", { key: 'ef8bc50d6269ec41a830598a805c77b9b0649c35', "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: '1126a35720ab9b57697e3b7e9d52cef9e38dd788', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'a04264b0f29eedb25356f95444490b224eb30c1d', 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: 'f8769cbd60e01023b18b61c7a726af4a2678a5a4', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'af341a373bc46b4ebdcf133a354b6c276db03ecd', 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: '603fc6844c752c52e695547eb27bb7d7f91c7edf', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '1f0f00a7716cd7c61fe7cce95b9a4c667a7cd8ae', 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: 'dc36eb485f7d73a283e54ef29491a2c07bd948b4' }, h(Tag, { key: 'b67a32c2180cddddd793013fb4e57d14476c1823', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: 'c4819a88406972aa14e7788f69d692807a031669', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '6cb989d0db9a071e6efdede365b5fd8eefdffe7c', 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: '983c1378e440dd76a8b1ac619dfc899dbd5ce254' }, h("ul", { key: 'de7c1d950b71d53197063fd76eee1305b94f1c2f', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: 'ad15821805be331e7869392c9fc468d11b574b22', 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: '5523ffce5b55936f94ea0b0158ef6901a39b158b', id: this.itemId, role: "none" }, h("li", { key: '2f5851ef66399d968e38b37088645bff77d9ee2c', class: className, role: "none" }, h("a", { key: 'a058fdc8c9a5ad2faac6a28795de948f919ecde9', "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: '3c132a9ecf02a99f4913d8051c8755ae86134cd3', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '429830528f63d69130aa1ca1a8d01eed7ad4a777' }, 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: 'a7b5853d3d637399e1fd9c4ba3177ed054517285' }, h("span", { key: 'd61c0a7e8bad4ff13b8a520827720ca8681bff3e', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: 'd9fc1a660c54e4150590094f1635c003431f1a0b', class: "tree-view-item__label" }, this.label), h("span", { key: '800f963f60b44717003587b720c7e641cf87fd75', class: "tree-view-item__tags" }, h("slot", { key: 'e077cbf65b801452f610c877b429338844167852', name: "tags" }))), h("ul", { key: '57d807f643c5af6f21dfe70cab53cc1c8138efdf', "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: '0af28bc00958af3c3f5e7f51ca288bdab7cdffe0' })))));
     }
     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: 'b39b5077f4ee33414ea1578d08d6f1bc18233fc3' }, h("button", { key: 'a29fca80b41e1e09973a06d95365aca8791fdca2', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '15212cf7444da3d2f2e51cae794f8bfdac0ece94', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '7365a0f2e0b39838396d3bd201b7f7dd04ca4b6b', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '4c18c45d28b86a9eac40b6283adc7fba79ece9ee' }, this.durationLabel), this.duration)), h("svg", { key: '60a4a37549d03423f627747fa43db6cd8f1d0f0c', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f41a876c132b3ab48948f58dfff99c50fdd8e72d', 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: '5c94a9fa9143a7a1ce00ec2a4cd1480c3f18c959' }, h("slot", { key: '7a2434d81b5c7aa2f2a5190d49a6c4722b358435' })));
     }
     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: '9781539d3c89e7440903b59a7b9ff49303be24b2' }, h("swirl-app-layout", { key: '3aaacbea9133c4e8b630896d6ab9bff5c96d93dc', 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: 'd4842228bde6a8a43633149ee5c6f32e443eeb6b', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'c066b36b82c97b07a6ff7548693af2f23c1f5ba9', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'b4f9d4e25fc99dfe5d05b422d91fe28a674f5395', label: "Sort items" })), h("swirl-stack", { key: 'b9f5326d53e2b4c656f66e1b4bfecb8406fb61d9', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '3cc24b13adb85f3f3b0fb20e22b3f857fd292c44' }, h("swirl-heading", { key: 'cc54f29cb94e9e88a94fcac8545f691d80cd05a6', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '22601bc563ff515fab2ca63a13cd15c349188e18', 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: 'bd369508dbc646c600200edacc723749f3aeb3bc', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '64dd2f77c1a0d1ed45e095ef3583f6ae9ae0ecde', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '800883bf06d0ce3f679f5c22578ab60b7be98456', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'cdc6e075759116c13fc94d218963b6109a640c79', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '408fa4efc7185c19b5fe7b1972857614951129a1', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '7a412d9790ca2858973f9e5860b418bf9f32bdf3', value: ["ascending"] }, h("swirl-option-list-item", { key: '006fc1885f6e7368b120534328dc3a54a2ee4d5f', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'e760a18f876b7ec7f4af7b320fc9bbe42d31f72e', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'b6b96f04ecc4ab08a2034f744ced8cf5b94e3c93', 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"; }