@getflip/swirl-components 0.381.1 → 0.383.0

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css

@@ -10,9 +10,9 @@
 .tab-bar {
   position: relative;
   display: flex;
+  overflow-x: auto;
   width: 100%;
   justify-content: flex-start;
-  overflow-x: auto;
   scrollbar-width: none;
 }
 
@@ -36,21 +36,25 @@
   min-width: -moz-fit-content;
   min-width: fit-content;
   margin: 0;
+  justify-content: center;
   align-items: center;
   border: none;
   font: inherit;
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-lg);
   cursor: pointer;
-  justify-content: center;
 }
 
 .tab-bar__tab.tab-bar__tab--variant-default {
-    background-color: transparent;
-    color: var(--s-interactive-neutral-default);
     padding: var(--s-space-4) var(--s-space-8);
+    color: var(--s-interactive-neutral-default);
+    background-color: transparent;
   }
 
+.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover {
+        color: var(--s-interactive-neutral-hovered);
+      }
+
 .tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover:after {
           position: absolute;
           bottom: 0;
@@ -64,6 +68,18 @@
           pointer-events: none;
         }
 
+.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix {
+          color: var(--s-interactive-neutral-hovered);
+        }
+
+.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):active {
+        color: var(--s-interactive-neutral-pressed);
+      }
+
+.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):active .tab-bar__tab-suffix {
+          color: var(--s-interactive-neutral-pressed);
+        }
+
 .tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active {
       color: var(--s-text-highlight);
     }
@@ -81,6 +97,10 @@
         pointer-events: none;
       }
 
+.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active .tab-bar__tab-suffix {
+        color: var(--s-text-highlight);
+      }
+
 .tab-bar__tab.tab-bar__tab--variant-default:focus {
       outline: none;
     }
@@ -91,10 +111,10 @@
       }
 
 .tab-bar__tab.tab-bar__tab--variant-pill {
+    padding: var(--s-space-8) var(--s-space-16);
     border-radius: var(--s-border-radius-full-round);
-    background: var(--s-action-neutral-default);
     color: var(--s-text-default);
-    padding: var(--s-space-8) var(--s-space-16);
+    background: var(--s-action-neutral-default);
     gap: var(--s-space-8);
   }
 
@@ -107,21 +127,29 @@
     }
 
 .tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active {
-      background: var(--s-action-primary-default);
       color: var(--s-text-on-action-primary);
+      background: var(--s-action-primary-default);
     }
 
+.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active .tab-bar__tab-suffix {
+        color: var(--s-text-on-action-primary);
+      }
+
 .tab-bar__tab.tab-bar__tab--variant-pill:focus-visible {
       outline-color: var(--s-focus-default);
       outline-offset: var(--s-space-2);
     }
 
+.tab-bar__tab.tab-bar__tab--variant-pill .tab-bar__tab-suffix {
+      color: var(--s-text-subdued);
+    }
+
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .tab-bar__tab {
+    padding: calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);
     font-size: var(--s-font-size-sm);
-    line-height: var(--s-line-height-sm);
-    padding: calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8)
+    line-height: var(--s-line-height-sm)
 }
   }
 
@@ -133,8 +161,15 @@
   display: inline-flex;
   padding: var(--s-space-8) var(--s-space-8);
   text-align: center;
+  white-space: nowrap;
+  gap: var(--s-space-4);
 }
 
 .tab-bar__tab-label.tab-bar__tab-label--variant-pill {
     padding: 0;
   }
+
+.tab-bar__tab-suffix {
+  color: var(--s-interactive-neutral-default);
+  font-weight: var(--s-font-weight-normal);
+}

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js

@@ -54,7 +54,7 @@ export class SwirlTabBar {
                 ? `var(--s-space-${this.paddingBlockStart})`
                 : undefined,
         };
-        return (h(Host, { key: 'a74a02669913990d439be0c10a1487a52bf3c423' }, h("div", { key: '380105cfde66b814a86038b66bc87a82dc06e020', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
+        return (h(Host, { key: '76123882365876d2089b8e6562604d781901e35a' }, h("div", { key: 'cc28171b2d54f38956d7cd3ab21d84e9d5d44daf', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
             const className = classnames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
                 "tab-bar__tab--variant-pill": this.variant === "pill",
@@ -69,7 +69,7 @@ export class SwirlTabBar {
                         ? "true"
                         : "false", class: className, id: `tab-${tab.id}`, key: tab.id,
                 // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label)));
+                onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label, tab.suffix && (h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)))));
         }))));
     }
     static get is() { return "swirl-tab-bar"; }

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.stories.js

@@ -20,19 +20,21 @@ SwirlTabBar.args = {
         {
             active: false,
             id: "tab1",
-            label: "Tab #1",
+            label: "A Tab",
+            suffix: "2",
         },
         {
             active: true,
             icon: '<swirl-icon glyph="emoji-mood" size="20"></swirl-icon>',
             id: "tab2",
-            label: "Tab #2",
+            label: "Another Tab",
+            suffix: "12",
         },
         {
             active: false,
             icon: '<swirl-icon glyph="emoji-satisfied" size="20"></swirl-icon>',
             id: "tab3",
-            label: "Tab #3",
+            label: "Yet Another Tab",
         },
     ],
 };

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

@@ -495,7 +495,7 @@ export class SwirlTable {
             "table--show-empty-state": this.empty && !this.loading,
             "table--keyboard-move": this.movingViaKeyboard,
         });
-        return (h(Host, { key: '71acbcbdc039e7b08d567ae733cfccccd025227a' }, h("div", { key: '0c2a4dca278dfaabffd7865e7e6ed0e9fc4ac55a', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '007050bbe785b97dab2fcbd81512aac698f7dcd4' }, h("span", { key: 'f3065cc5b3b553c130a83b827dacbbe72a2ca9a5', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '791e05da9f511fdb1a4439a3e879ef4b9756c258', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: '00f4c7bed1f953e507896a3558bb30a6ffdf7184', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '8369efdbe24e28f212cb06bd78f40fa1a4b4a5f2' }, h("div", { key: '7a7aac1376a41ae68f831f15a19db9f8d662fb59', id: "caption" }, this.caption))), h("div", { key: '86abf9d783dbd7b353f3b40efb13b37c7d4cbece', role: "rowgroup" }, h("div", { key: '5651f12df3e10571a18c48ff8b27641b4674ef40', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: 'd5f36a58148734d80899e0986cd0726546079720', name: "columns" }))), h("div", { key: 'd80ad2723f76f0695f83012c0af664f660bc0467', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: 'c9d2d172591f765912f165e412bd51dd3e05b52c', name: "rows" }), h("div", { key: '68fc4436378546379402064debc6778beefa8847', class: "table__empty-row", role: "row" }, h("div", { key: 'a8b84493ab57f740224c806bee61aac9a67be64a', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: 'fc2377b95667af8932a2c5cf9af734c3512911b1', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: 'bfa4152124785e30d50d1d52a10b0f07f7f57a26', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (h(Host, { key: '16d0611e24b24ee9f79cc38e0095a67672d74c2e' }, h("div", { key: 'aec12bf6d94bef63f68acfaf028658254d01f181', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '0af23c204985e8578aee552beff188f5e599275f' }, h("span", { key: '0f4bcc195d7bd265c028b70604ba74b1531e3c25', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '77e6c52ecbf5e81d268b9c49364cbe166e8ba45e', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: '21156e4f5d0a98c1c11cdab2c8d812833d1af031', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'deea452f4a44ffaf0f8472e0ba07446f555de0c2' }, h("div", { key: 'e0f7da4bf4009659451e3890827861a64045d740', id: "caption" }, this.caption))), h("div", { key: 'ce3b91d7709fb0b607cf3b4fa48f5d118d04ac4f', role: "rowgroup" }, h("div", { key: '15c9d000b9d69eedc6ca1285a9dcfa20ca2bec02', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: '31f61474ba47292819e5fbaf655817ed28a03434', name: "columns" }))), h("div", { key: '2d5e8fab1af067c1eb59ad84db517113cc6935e3', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: '47f0b034e0412de19194c87bf2dd1eea524af173', name: "rows" }), h("div", { key: '4b97574c5c5919c35fd5a9ce48a4b4dbb24d9518', class: "table__empty-row", role: "row" }, h("div", { key: 'e8d44d595d30450512ad57defb3c61fd77f2040a', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: '6551e8e625520b44e608a41e67d58e65a06c20d2', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: '7689d667f7574ddd4dfa3ad54d05906e1822c035', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     static get is() { return "swirl-table"; }
     static get encapsulation() { return "scoped"; }

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: '9b856a0f919e6d397d0d12f7644c380c057f9b7b', class: "table-cell", role: "cell" }, h("slot", { key: '43cf03380187df8fd4b36eaf5bb776a6199a015c' })));
+        return (h(Host, { key: '90c4e6735af6c64d72fe124135be3dc1db15bd01', class: "table-cell", role: "cell" }, h("slot", { key: 'eae94941448dad5e72ef44dd56c03fcb01dd33d4' })));
     }
     static get is() { return "swirl-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class SwirlTableColumn {
             maxWidth: this.maxWidth || "",
             minWidth: this.minWidth || "",
         };
-        return (h(Host, { key: '0ceb9e1b67fbcb763a8d3446db99d3d47b2e2a43', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: 'a3f4fa610ab800fdf752f46e4c7b417420e33ed4' }, h("slot", { key: 'c153cfe00ed563198b3144a6b89d472fcb73255d' })), this.sortable && (h("span", { key: 'ec8e81a31ea987dea4608a33a856c0282c42c3c3', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'd95dcdaa0521d80c10c3bdaf094336be7400d0c1', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: 'd713dfc81296cdae7ae48164ca4bf645480becbe', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (h(Host, { key: 'dcfa2bc190ab31a106daf5a5a85ca617a223a841', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '67099120ca804e67c1a6e031753d3175cd6b179d' }, h("slot", { key: '87cbf2898ee233de90f06866cf021c3dfdee95ab' })), this.sortable && (h("span", { key: '2c65774feeb2930f5a2313fa573de81f03f68ede', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'e9180c4547e35e0bebee2d98c9b4fdfa58a4c5e2', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '43244f71e91bb8f32b89c8c5d4ef4daaee298ff2', "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

@@ -13,7 +13,7 @@ export class SwirlTableRow {
         const className = classnames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: 'ce5ffef9a003bbadc091c4f07e1c8f435034b30f', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '9a82d23792cd6c5a383865578ba0ea752b44070a' })));
+        return (h(Host, { key: 'de6d8e69bc3dca0083b57426b6717f36652bd724', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'f98bb13f865dadd4cf2e9426e3aa31f48e8df45f' })));
     }
     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: '7d5351138078da704f6b27bae3800436a5ebf43b', class: "table-row-group", role: "rowgroup" }, h("div", { key: '20b8a431389b4e688f08a0b2b9caed02fdd4f4d0', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '13d500a7220c8ff1c526f15fb784671a60cdb6bb', 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: '0fc9eac7abdfee0c920655a610321d1b148224a5', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '9f4f491587ef67f8006eae6e67ee0d4340cecb95', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '25650596b4f3d1f5b4f074c448242030dd88be73', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '30c6b92810c6146a14489f2067fb06d3ec83849e', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'c009ad8aff896fe31251f793f4cdd66746f4b93a', class: {
+        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: {
                 "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: 'fbe32bbc5fe2d2e3ba4cf2b5d59832602d4ab73b' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'c29f8646b19d065077752896135a6185e9452fc5' }))));
     }
     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: 'b874315686e1879e67bbb083cbba1eba80bd2188' }, h("div", { key: '4a09d26d900a0518deae3c93461a6b1c5f323012', class: "tabs" }, h("swirl-tab-bar", { key: 'f01c49f14380823f754d6aa5ecaa3a0fbe55b432', 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: 'd4983d32686b88ada717787209095b6820657228' })));
+        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' })));
     }
     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--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-        return (h(Host, { key: '83447a0e4d7aebe61c8d0d15d57d3612fd6c599d' }, h("span", { key: 'b7dbb33d1a909b51d613eb7e39aad36c45a195dd', class: className, part: "tag" }, this.icon && (h("span", { key: 'f195677ee4985aaa1aac2e42567ffee9c85ee937', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '960fe967ca4d42e99be50a722f939a5ee6c09397', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'c569b75bf380c341ba7bcd9880eabfc0fcc0cd23', "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: '16df050a039118f311645a21d0542e6d8b74adff', size: 16 }))))));
+        return (h(Host, { key: '67c7207ee6d70299b7499c96ce3c604c73a8d7a6' }, h("span", { key: '7f0ba14caf885ca217fe98215335479f84edd3d7', class: className, part: "tag" }, this.icon && (h("span", { key: '8cddbdb1d526ecebc9e9eac2b4bef4035741f465', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '35cb9662720e3237a438ec27b225912667765f3b', class: "tag__label" }, this.label), this.removable && (h("button", { key: '279fe9066c3c3842097a32252ab15a5e575e2a8b', "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: '8428572b3b1d0542b658c0d688facba4db0d2842', size: 16 }))))));
     }
     static get is() { return "swirl-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class SwirlText {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: 'a635ca2f4d4b7afc4e4d4fceb0e995823e6cebdd' }, h(Tag, { key: 'e9cb49646443c597aa220a12ad0ce008aef9617e', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '33a7c292355d29886765808a120f1ead1dd43ab7' }))));
+        return (h(Host, { key: 'd0d12ca4d1097f8d177f030e566bfd4b45c1a9fa' }, h(Tag, { key: '7df0d7714d2926308580cbca4063fc92aa754217', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '3babc4ff0c7ec56ee5d01af5315250be65c83257' }))));
     }
     static get is() { return "swirl-text"; }
     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: 'ab4d04c2ea8925fe498eb53f3ed35008365a29dc' }, h("slot", { key: 'e2fd278d80d9303982829547c17982f68fd2d6dc' })));
+        return (h(Host, { key: '2d83efca2b56df1a8740107d1441e30b9ac8fc1f' }, h("slot", { key: '5d5df1ce8558f18d27738f6e30a05992441ce4d8' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -22,7 +22,7 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: '36e44781341fedd1722aa3d032dc25a7bf4fe55c' }, h("span", { key: '76d3f07fc84075b9e30afb518b36377a9da1aae9', class: className, role: "group" }, h(ImageWrapper, { key: '3b9c70936d55d54ec47f0f5cca578f48cf583b95', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '9ce4889de7da525f1bed55b6329f8453b581d134', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '44fd41e3e630f5bf27f86a888f71814aa54b3bbf', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '4a4d06672c2e872e321732a049a369dec1895870', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '7c2d4050019b6f16ac14ecf991fae48609b17fa8', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'f451a0594a18af47f903f63031dfeda18728e864' }, h("swirl-button", { key: '4f53f3eef32bcd2091fde65177fff69383f71c49', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'd41e2a3fd6eb781d18ee581f51d1937a7cb3f90c' }, h("swirl-button", { key: 'f1147179e6838127d1120bd2b8ecd297982549df', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '884dcdd938b46f619b1ac51e9239c5d8d6ebe682', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: '3a03a8d63d4f07e3a81680a7749dcb4949ad0d6a' }, h("span", { key: '128c2fb11e09cd22e0e7fc13a13397a2e68e3e26', class: className, role: "group" }, h(ImageWrapper, { key: '5e4705d90d3837741e291b9731b92dd3598b0649', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'bc7663a2eda0af5b92a0f5ecb753fca2618f2243', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'a0cd9ec911923dde262f8a764864057d304d8676', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: 'f6bb6772aa76a224135d9b67cca47726cb2952e3', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '0b272acf730c203d92e67bcb78a3d485431a9fe9', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'ef9a56d1a681b83aadee9e26efee13ff38be9f7b' }, h("swirl-button", { key: 'd39e922153c9a7a3eac822abbd9a567ece5a7885', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'd40b39263a85a7cd5decb0dc39bdacd127333449' }, h("swirl-button", { key: '9b153da5fd7998351f8111818b7678fb6e99089c', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '1cc05b8a3d582d8930ea57c552f9a85b849c0c4a', 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

@@ -136,7 +136,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '0a929f7d75b062e56291bb05a1cbe29bed9766d8' }, h("div", { key: 'cabdcf8f69f8a1d975fb58a8f4f3e98ba7260a7a', class: className }, h("input", { key: 'c812f2b8b1c62fefe7f61b131a2cc8a6b6d8349d', "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: '11ea0081a7e5cae9678ce1370832e84d50bd7255', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'd72261e96a591e188438a16fc07e455817a5802c', size: this.iconSize })))));
+        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 })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -46,7 +46,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '43cb34a2df0fd98c1651a6a7a8921bd72917d820' }, h("div", { key: '2794719db1ae270a1dbfdd7cd667c7892778586c', class: className }, this.icon && (h("span", { key: '00106bb7daccabb75387507a6da93909905cfc66', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '4f14111240b148854ece64826319d11e57c93a8a', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '6ba35843c580885b83231901a746a1ceacefc2a6' })), h("button", { key: '145bd18d8822373d0ea2103e88a1c189228e47a8', "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: '80b7c90525bfb27844c789e1816e8f0d0175bd97', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: 'b2709e8fb769a641783d827a25579482968092e1' }, h("div", { key: '0bbff552294a5bd793172ac396796e58eb42e4df', class: className }, this.icon && (h("span", { key: '87fa4e5c1762e3ab6c08ceb8d58593dff6e711a1', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '46c9a7cb427dc14e84907dfbaabb3a9a2c76405d', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'e5e2aa1efbeace583f3a0c2f734eb6278437c95f' })), h("button", { key: 'f4b97a2dd5d2c57eec86f0ef373dcbbeb9538ab6', "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: 'ff9be404ad01c6264f089e9c8e212c083c60f8e8', 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

@@ -41,7 +41,7 @@ export class SwirlToastProvider {
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: 'd77ac2c1540cb1caea02cdd512ffb542689297a8', role: "status" }, h("swirl-stack", { key: '6b25556338ddf73c30f0307fee0598fa41f0bcdf', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: 'dd0a45619c4cb022f8f11a830acca3eafacb2628', role: "status" }, h("swirl-stack", { key: '1a499d109072a863f3704edbcca17f203468765a', 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

@@ -11,7 +11,7 @@ export class SwirlToggleButton {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: 'cb46f2d43a540469a1fd0d8f815a5b197e114323', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '87f0a543460fab38902f791c9ebe8d2b45662c04', class: "button__icon", glyph: this.icon })), h("span", { key: '1d24443aa1664513cea122fcdebbd9448da49d47', class: "button__label" }, this.label)));
+        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)));
     }
     static get is() { return "swirl-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,7 +55,7 @@ export class SwirlToggleGroup {
         const className = classnames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (h("swirl-stack", { key: '592281557bdff4eb63d73e2d5f7371726be6a160', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '08fb51474cd7e1357891139b35c20a3279d9b5e2', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '61e816188b9e828648b9d10783b383a9d3b58c98', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'ef8806d88bd4833082545c9a0852a06fbc123935', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "swirl-toggle-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: '9369f6a0113fb50ba750b4f16c25c544b1766154' }, h("swirl-stack", { key: 'f2c667c134c39c55ceafb36ba4b6e23b654a34f4', 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: '138163699ddb35e2032885fc5b0a0bcd4cc26d62' }))));
+        return (h(Host, { key: 'ad6c20b8f56f68a4eec035587b6797980bf2d6cc' }, h("swirl-stack", { key: 'bdcd17216cf16045cd49417de774b4993b492280', 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: '8f984329ea27c975220b846da6a3bc45ad3d6d6a' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,7 @@ export class SwirlTooltip {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '2ca3d60bb8b64efb2616d859a793a274cce6f42c', onKeydown: this.onKeydown }, h("span", { key: '1f490a1aa3a4026896fd25cd5c4126ad3786d5d0', class: className }, h("span", { key: 'e58ca5aaa6ade677a6021a2ef3397e4e60d526b1', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: 'c6938ab1e9c356fe0d965563013d69ed75efe664' })), h("span", { key: '7f834ec818452df9a3310a7ffd89b47dc4661374', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '7d75b9d6c223d29e88edff512c881d5c7689e287', onKeydown: this.onKeydown }, h("span", { key: '3abb23525fee5aa69bf2bf67ea1d7f72601b5328', class: className }, h("span", { key: 'b79893b8952d4258edea494bc008a7b416a179af', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '710c29070174874d6a6be6a08ed5a5dd97bb1230' })), h("span", { key: '4003d8b277fc55de2460ec8c63f51535f9f64760', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -115,7 +115,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '6a05638c206240fd899a23e93ac1bb25adc1ea42', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'ebb451de62981317c047e6bd9497008672bc305b', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '15746cb89438888ee93bd4166af25ee62fc5240b', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '82c207a7951483894494abf1d7e46a1a997f1ff8', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '178678dc65ebe2d4232437b7f12564444c687510', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '0f97538a405da7b5fdf1b39cee2a7a4db82ece2f', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

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: 'd5c52dad607b47023a7367c601b1af4506ead148' }, h("ul", { key: 'f2d9099cdce4aa9a80b88dcc1aa7a92ce10e5764', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'e38c92f627da85cb754ec3d3a8a0a3daa0be5529' }))));
+        return (h(Host, { key: '19bced9c4bd5a9f19ac371ad471b28147e825d6c' }, h("ul", { key: '542e63ca38881d301cb865af8a9cd51098c74ccc', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'dc52323cca1a13690996da5e92c85995c3eee19e' }))));
     }
     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: 'bf2eae39440134d0d6c4d13e12ab676130a77a1c', role: "none" }, h("li", { key: 'dec119860702093ee238ea6186a0b63b1f1439d4', class: {
+        return (h(Host, { key: '5807e28ecfa2049fe32bc94fda18b8d9230a988f', role: "none" }, h("li", { key: 'b246a85880c51160ca199f241b9e281762223cf1', 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: 'fa3e17e061f95ced9d9ef9c7cead351c9dc2b5cc', 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: '31b063ee88fccb182674f77105fbf7d45bedc844', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'd9434ae2ed7f066df243b1550ccebf27a1543a6c', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'c2c7ac76458f2c6e114aa64b1fe8dad7fcf477ba', class: "tree-navigation-item__label" }, h("span", { key: '8778648e9d1de6511de9915b955b8fdbe7112c34', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '400b94bf79bb5d89660614e62b9d175fedebe05c', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'a169fde08ec0b63c349893e2b3ec93078878e1bb', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '8c8d4135278e6e61f12df2149437c0140b6c31e3', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'f136c165c7a0bc2ffe2b0d6b033c3309b284d37d', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'e3f29e18891bf3941148a331b2bd8fd1e64f5eae', 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: '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: {
                 height: this.childrenHeight,
-            } }, h("slot", { key: '4df3ef1c2e2b2ba73a945e217d0157603a70cca2' }))))));
+            } }, h("slot", { key: '616050af4701a7082e8f9f93279b3dbf0aef197f' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -327,7 +327,7 @@ export class SwirlTreeView {
         }
     }
     render() {
-        return (h(Host, { key: 'b997026b01a6f01571f5dd435192a9568ee399e8' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '2a12eed1bcbb1be9ca09e6494cfcecbc6ebcd9cd' }, h("span", { key: '12297618e8e047ed6df71b906f0be8960adb6027', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'ee8d26c52e1c76f908f7ed981131a615086518f6', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: 'cc848e39bcbaa19e89d74ffd3edfa92fc934e278', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: 'b76dd7b1be10f6a299ddff5ec95bd4bf78dc8557' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'a65f276e109ad467e6cec5fce4cd58886b3f6550' }, h("span", { key: 'cc228586d4a7197b77d6a555a91d4b16567186ed', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'f095b5911052c09f325fa13b9ef53b2031ddd066', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: 'e54b87e40415442a63d5f4ad23800f651e698ff1', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get originalStyleUrls() {

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

@@ -329,17 +329,17 @@ export class SwirlTreeViewItem {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: '92a6fc72ba951551fc8bcc6fd5ddaa3ff1b44f5d', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '4ce0aad69e8863aea1efd79497f39147461f4c77', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: 'aee6e4e236b9da37d794e1cf53970be78a7a42f5', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (h(Host, { key: '7b577a6fcf687903abce1fe1e334e1fdca4a8e39', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: 'e7825c463c72c09d9d60bbd172b5400782aa12ba', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '0b1531bc9fcd4a6541f959503cf05f7102db428f', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '12067d39e01689715463586763bcf57b3792f6fe', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '587163d893c82db81ac14043387aeaf9fae01f28', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '8e296cbbee0496269ae851e932d757872e48f414', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '69ab051f3055d7a67d39d2c3e84a6ecfc17ff6e7' }, 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: '1cd32216980f812b5990c23b723428dfe50fa265' }, h("span", { key: '2ef9a931552385408c773d1002175b259e8ff20f', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '7de30e721f49840b8e9343d9643e4b04d2f111f5', class: "tree-view-item__label" }, this.label), h("span", { key: 'cc03525b5dc4f9ca2d8e8e6055b4bb5a2e8f1d62', class: "tree-view-item__tags" }, h("slot", { key: 'bd6f7235df3e6e7d7c317ae7402eedadb66029af', name: "tags" }))), h("ul", { key: 'a8bde6803502059aa11da1b78cfad862ddb6da1d', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: 'ba5a1155da81061b986dc6e1de25bce41c55b08b', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '9a2732f2b7067b7cbece6ad8d91c608db21f28ef', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '7a1c577285a5f01ddbc66e4b03fd2001f792d776', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '1633a0c318463da5e8808d3d98cc1f5f5c63ee3c' }, 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: 'be6d89d04a9f415b9463c021a72de06cbfda2d6b' }, h("span", { key: '6b55c715e0e6a44c5d4eb7056936aa791b5c23ad', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '6a11499dcf1a1fc3da5c67112178297b138750bc', class: "tree-view-item__label" }, this.label), h("span", { key: '42c6773ea2682e6b0d07d6b29f016c4fba0efc6b', class: "tree-view-item__tags" }, h("slot", { key: 'a62b2e6948e3dd00186173dc01485b2a83f45da4', name: "tags" }))), h("ul", { key: '3fb3432cd4378b5d1359af5176c7235fbeb3a177', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
                 display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: '5eacda6fce923483bb832e7ef43659eb8296b9b5' })))));
+            } }, h("slot", { key: '65991009c10eae24df30e05c9655291bd180b7a9' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get originalStyleUrls() {

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: '66c488984003b2c7afe7a7388a4b8465463793eb' }, h("button", { key: '5581bd7774de0032764e149c6e5fa4ad7418cab1', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '874ace18ced79d8a121f2fecfaa21e161561c3d5', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ad3b4f4a8dce132449195ac1db618514d9c658d5', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '39c0123fe3106b5257a4933430bcff149994823b' }, this.durationLabel), this.duration)), h("svg", { key: 'f3ac843cf35f79b014b26d1d5a54d65674eeebfb', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '745ef265c59e183a60d7853f5a992fce029defca', 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: '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" })))));
     }
     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: '3f001fa0d55275db749a4a2125b9b28bb88f434a' }, h("slot", { key: 'e162e2eea285c9fa37b5391dbee7d2ecf1caa421' })));
+        return (h(Host, { key: '91d5a3662bf66576c8b9cc3ae6218bb8bf3cbaef' }, h("slot", { key: '54e3c15793d79b66928746d88ea630d66dd23c25' })));
     }
     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: 'c6c00746cf51336a5a432f48d5813d02247a501c' }, h("swirl-app-layout", { key: 'a68db9268d1743a3da4bdd1e29a8a90d33d8e099', 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: '7f1c4fc04c94cddc2e57e555a4547c5751d28af2', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'ba6a91da9132c74c9c2e65fe56c5e744481ccc0e', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'f349e20782912bb443c253c0e310620bd414ccf1', label: "Sort items" })), h("swirl-stack", { key: '419b98200a8ad65999c545bbfb97a4daa9033a8e', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '1fc019553ef530398eaf4a882febb948a094a31f' }, h("swirl-heading", { key: '69ac18be7ee4e880f1f18646730a9b243dc78a7f', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '670cb38adb67511e50f0796ed0ab7fa81854ddc3', 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: '83e140f0e1a3389e47678131d0086a7b150ba187', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'b7e3523fe29da2fa06c90752380fae47fb4ab8d5', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '757111da2fbe32366b035f76161b0ef0ae421e45', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '0a9376db56a385a0a34bccca823b0bb208ee1b7a', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'af0dd15488adf02e6d82df07e4ab59b0073b6549', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '1cfbfc9c2635cb5f158940a624f2a1d796d47a5d', value: ["ascending"] }, h("swirl-option-list-item", { key: '4e06badebd7f793c9b0c7dad51871726a68faf44', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '687b37e01845b112917406b3b0aa1d4ad5304fd5', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '1d77cb6477009a6ad07c29dea4c9b4a91ed31633', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        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" })))));
     }
     static get is() { return "file-manager"; }
     static get encapsulation() { return "shadow"; }