@getflip/swirl-components 0.523.1 → 0.525.0

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: '40ef101efe22ea9a52c210a3b428cb218aeb95ae', class: "table-cell", role: "cell" }, h("slot", { key: '3009ad0d34d6617648fbf9dedffb41cc61ab2a6b' })));
+        return (h(Host, { key: '376aa5537bac87759a7dad7af262765cfa4752ac', class: "table-cell", role: "cell" }, h("slot", { key: '38c526ad9e884eeddf125c4c56938fe688086458' })));
     }
     static get is() { return "swirl-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class SwirlTableColumn {
             "table-column--sunken": variant === "sunken",
             "table-column--raised": variant === "raised",
         });
-        return (h(Host, { key: '1a5bba7744e8f83baf31b78ad402a3118ce37dda', "aria-sort": this.sort, class: className, role: "columnheader", style: styles }, h("span", { key: 'a48076c1dd3cbab8106b9e5a21627a4ab6c609ca' }, h("slot", { key: '56b3e4c7d18f9297fc64f90d0242ec4503230ebd' })), this.sortable && (h("span", { key: 'e1285f97cd662bd566c40ee68a068fe27afb5271', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: '2e031db5854c3d6135a31d3edd58225609333e75', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '425a41db968a77e8ddfb9146887d33a368f8fe04', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (h(Host, { key: '56a69546db8dbd5233fff55c16a7f56c27c6322d', "aria-sort": this.sort, class: className, role: "columnheader", style: styles }, h("span", { key: '53af8c45f85e1ab805f95c77022483850ca4dfeb' }, h("slot", { key: '8817e0f568482f3b5c8ce027149a082c25097a70' })), this.sortable && (h("span", { key: '100e907905c4df26c1eec5300d8cbbe6ddf5e888', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: '3c0b6ef134b06d4add186e5c761759aa64c9ea8d', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '441cacfb5b3c1e9f58f2820f3aa2d17332a9c6e2', "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: 'c7c64c99f7b863678ce2b6a3022e177a8095c5a4', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'c396f64005b2a18b177b7ada1c2b6faf7211b13a' })));
+        return (h(Host, { key: '8df34c7d4a408b374af773e56cf352edd90283f9', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'b81af0f6b1e61c19b3105718537f1cf4d4465c49' })));
     }
     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: 'f5e157f3e8c7eb70a8c58f72fe9a1f675dadf0c7', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'e2468b3d380c61183daa748546f753674189662e', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'aa0e5f51a93488c549ddcc039ce4a64ef4e43f15', 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: '2395f8150bdf6f8c45b10309e7c9330b8f9323b9', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'f2145520bc126c1c2e6aac135bf01f7b53252460', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'b01c3d58ab3e5f8a52be28477ce92f6695ab9788', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: 'eab285fbcf56348262cec6def5ff05c62086e846', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'c52c15078a0c674005af31aa914ee5ae884b315f', class: {
+        return (h(Host, { key: '2543cc89da2d65c1d93d0972b9af5dbd693d14c2', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'a401729393978ea625a83b8b21bfa69e98732392', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '6572cf49979be8a263d7a495ac01e1f9b34a30fe', 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: '8b9860004e7a0cc30133520968efa4d27fd218bc', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '30dd307a1c5e7989c105c535f208efe3769c7a81', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'f60193f010f0329775a4378868b60ed98d518f9c', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: '9e05a508e7abde495145cd05d16dea83c4119966', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'c5a71149ed8b7da4e3809c1ced58cad56ceea7a5', 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: '0ea086ec86201564de328a966b5000b2f3f87399' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '675823a60feb4e7c147c679a4ea644971bd4c49f' }))));
     }
     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: '4d7f710d18d9d1b58fc658dbf8e6922a46a19cb0' }, h("div", { key: 'ada4ac17bf87a77bf63b5459b8c7a20560913b59', class: "tabs" }, h("swirl-tab-bar", { key: '53f3aaaab6a55e2f907e6db2d94a11db3b1100fa', 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: '524a105bd28721d506d0e6a067f1a054c272dc52' })));
+        return (h(Host, { key: '5106b9ffa7cf3f624e41ef1ab6a0399f9b5038d4' }, h("div", { key: '991b692064949e04cec4484baad7d9f30d1c2f89', class: "tabs" }, h("swirl-tab-bar", { key: 'aac17d88f1ecce6e86176d67642bf4c2e5ff0064', 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: '0dae860036fa83febc712e2d833f0dfc793124cd' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }

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

@@ -196,6 +196,36 @@
     border-color: var(--s-text-on-image);
   }
 
+.tag--interactive {
+  position: relative;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.tag--interactive::after {
+    position: absolute;
+    border-radius: inherit;
+    content: "";
+    inset: calc(-1 * var(--s-border-width-default));
+    pointer-events: none;
+  }
+
+.tag--interactive:hover::after {
+    background-color: var(--s-state-hovered);
+  }
+
+.tag--interactive:active::after {
+    background-color: var(--s-state-pressed);
+  }
+
+.tag--interactive:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.tag--interactive:focus-visible {
+    outline-color: var(--s-focus-default);
+  }
+
 .tag__icon {
   display: inline-flex;
   margin-right: var(--s-space-4);

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

@@ -4,12 +4,16 @@ export class SwirlTag {
     constructor() {
         this.iconPosition = "start";
         this.intent = "default";
+        this.interactive = false;
         this.size = "m";
         this.removalButtonLabel = "Remove";
         this.variant = "default";
         this.onRemove = (event) => {
             this.removeTag?.emit(event);
         };
+        this.onClick = (event) => {
+            this.tagClick.emit(event);
+        };
     }
     componentDidLoad() {
         this.forceIconProps();
@@ -31,8 +35,12 @@ 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}`, { "tag--hide-label": this.hideLabel });
-        return (h(Host, { key: 'd5fbc756df9d37244838e5686f3058cea6a20244' }, h("span", { key: 'bc44813d89c8882ea2a34e9f9e90f0e6335b5959', class: className, part: "tag" }, this.icon && (h("span", { key: '0c4d3eb3b007556ee463ef02c41782f98987835d', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '3ad90d1cdab7daf64689d8c135b7a42632c096b6', "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: '93234397e1136aca9664fd31bb4be18275180e88', size: 16 }))))));
+        const Tag = this.interactive ? "button" : "span";
+        const className = classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, {
+            "tag--hide-label": this.hideLabel,
+            "tag--interactive": this.interactive,
+        });
+        return (h(Host, { key: '9637cdd4b1ad7b0dccb5c04a0ddefd8ee2325f7a' }, h(Tag, { key: '99dc3fb14fd345e4275bb8442be97fd254080c30', class: className, onClick: this.interactive ? this.onClick : undefined, part: "tag", tabIndex: this.interactive && this.el.ariaHidden === "true" ? -1 : undefined, type: this.interactive ? "button" : undefined }, this.icon && (h("span", { key: 'ee15018f6a8aa37397f235e7e10c32a567cc63d7', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '63fe4e28921608f31474a7a2698193b83cd065e9', "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: '51d9a82d4a1632c4b990e14ff170d14eeb3c2b45', size: 16 }))))));
     }
     static get is() { return "swirl-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -138,6 +146,26 @@ export class SwirlTag {
                 "attribute": "intent",
                 "defaultValue": "\"default\""
             },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -290,6 +318,26 @@ export class SwirlTag {
                         }
                     }
                 }
+            }, {
+                "method": "tagClick",
+                "name": "tagClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "el"; }

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: '2b6f5db4f48a601f66b241e714f8a5e8938fee42' }, h(Tag, { key: '0bd1fef23f9ead1e77ff085714e471b954614fdd', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '4ed8380bbdc1f95e5133414395a07478582bbff4' }))));
+        return (h(Host, { key: '8c79f4a91d37994ec7688132382e020621f584ca' }, h(Tag, { key: '7bac3b2004139bdc062db6e516bddf988aa176d4', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'cec08d6960f5e0acbceff329d3dba01b08f3eeff' }))));
     }
     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: '622492cf31a6e6a99a59f2a0fc5481e22ff1e6dd' }, h("slot", { key: 'a5453acc85abf19fcb7d80cb83e50e3d3d5265cc' })));
+        return (h(Host, { key: 'c387cacc7ca580b2aa53a16002b42f163f06c640' }, h("slot", { key: '186dbdd4bb1edb766ff23234b87843cea2af4e39' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -71,16 +71,16 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--uploading-bar": isUploading && !isCompact,
         });
-        const imageWrapper = (h(ImageWrapper, { key: '01300a7dab3090876bee672231f722d7e9b1b3ea', class: "thumbnail__image-wrapper", onClick: useThumbnailAsPopoverTrigger ? undefined : this.thumbnailClick.emit, style: isImageWrapperButton && this.cursor !== "pointer"
+        const imageWrapper = (h(ImageWrapper, { key: 'd50b4e0b417c12a91785081aa4f1bc352a7fbdbb', class: "thumbnail__image-wrapper", onClick: useThumbnailAsPopoverTrigger ? undefined : this.thumbnailClick.emit, style: isImageWrapperButton && this.cursor !== "pointer"
                 ? { cursor: this.cursor }
-                : undefined, type: isImageWrapperButton ? "button" : undefined }, h("img", { key: '6b4181803f0958fbd80f44b11520f4e27ef842e9', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })));
-        return (h(Host, { key: 'b3ddac691ef8dbd2eea6d1b1d99d9bacfb0e8032' }, h("span", { key: '21ba583a3360c4b205c63c6ff2cc3499b6f15a85', class: className, role: "group" }, useThumbnailAsPopoverTrigger ? (h("swirl-popover-trigger", { ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, imageWrapper)) : (imageWrapper), showUploadingOverlay && (h("span", { key: '8402db4a6f89d962e9da18321bd26e298d96751c', class: isCompact
+                : undefined, type: isImageWrapperButton ? "button" : undefined }, h("img", { key: 'd350d5d2d8cfe9b5f1ab6278841729442a87c243', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })));
+        return (h(Host, { key: '54f03d81a80c38e07c937b9b40785e28cb71dbf4' }, h("span", { key: '32dfe5c663c42aa077640ef489aa817e234b4dc9', class: className, role: "group" }, useThumbnailAsPopoverTrigger ? (h("swirl-popover-trigger", { ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, imageWrapper)) : (imageWrapper), showUploadingOverlay && (h("span", { key: '0586adab6fc12da2602934d75b4c4d23415a76b5', class: isCompact
                 ? "thumbnail__uploading-overlay"
-                : "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '8e66f5cfd1e71d070fdaaa0882999cd4cce72e26', label: this.progressLabel, size: isCompact ? "s" : undefined, value: this.progress, variant: isCompact ? "circle" : undefined }))), showError && (h("span", { key: '29765f437b57a321beb597c88445382679186486', class: "thumbnail__error" }, h("swirl-icon-error", { key: '4bab56d009a9e192df7a9fc4c37cabdf57bd1a53', color: "critical" }))), showSegmentedGroup && (h("swirl-button-group", { key: '5232ae4ec09a2fce64c8cc6f65a4540dcf3c3a0f', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '9cac7eb2ba4789e43236183a92ebfd85f07c66c6' }, h("swirl-button", { key: '21978ab2b2e9e8a0f552f59a60aa89db391edb5f', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, variant: "on-image" }))), showRemoveButton && (h("span", { key: 'cfe5189519759bc20c83b331869155ad8e97fad7' }, h("swirl-button", { key: 'a1f8e373c9b3deed4f04594308154556c77ca0cd', hideLabel: true, icon: this.removeButtonIcon, label: this.removeButtonLabel, onClick: this.removeThumbnail.emit, variant: "on-image" }))))), (showCompactEditButton || showCompactRemoveButton) && (h("span", { key: '7df1c011850f4cd502e988af1615d600e2a05de2', class: "thumbnail__compact-action" }, h("button", { key: 'ca867c822aa979f348a5a00d6eb929e9ea0d3e9c', "aria-label": showCompactEditButton
+                : "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '7b1835785ff99555249f39d15871b64579ed6e89', label: this.progressLabel, size: isCompact ? "s" : undefined, value: this.progress, variant: isCompact ? "circle" : undefined }))), showError && (h("span", { key: '8ca48915a313d0df60dcba89f01ea4d6af22f21b', class: "thumbnail__error" }, h("swirl-icon-error", { key: '09fc738d4235cbb592944d6af402aee514d44a6d', color: "critical" }))), showSegmentedGroup && (h("swirl-button-group", { key: '9d445d293dcda14f627afc905120849487400008', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '38bca3e45a6236e8e9dbb9e4a4b1d3d1a627e2ca' }, h("swirl-button", { key: 'a2de3116c2521ce02957a93eecb7f0551ead16ac', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, variant: "on-image" }))), showRemoveButton && (h("span", { key: '9f8ecc729770e0adf0d83280a1548b01a15bef02' }, h("swirl-button", { key: 'eee5fcf95f6c8e26c70dc320d44287fc44d6d45f', hideLabel: true, icon: this.removeButtonIcon, label: this.removeButtonLabel, onClick: this.removeThumbnail.emit, variant: "on-image" }))))), (showCompactEditButton || showCompactRemoveButton) && (h("span", { key: '1d4d9b1e99af884fdf526da7431f546c9aa827f8', class: "thumbnail__compact-action" }, h("button", { key: '66c6a07bef62f0c4cd3e865b364f768328e22f28', "aria-label": showCompactEditButton
                 ? this.editButtonLabel
-                : this.removeButtonLabel, class: "thumbnail__compact-button", onClick: showCompactEditButton ? this.edit.emit : this.removeThumbnail.emit, type: "button" }, h("span", { key: 'b0faacbf2b267f78b6684ffe69f73232df6718fd', innerHTML: showCompactEditButton
+                : this.removeButtonLabel, class: "thumbnail__compact-button", onClick: showCompactEditButton ? this.edit.emit : this.removeThumbnail.emit, type: "button" }, h("span", { key: '2e838262052add7aabb11362818cd66a4f8bd535', innerHTML: showCompactEditButton
                 ? this.editButtonIcon
-                : this.removeButtonIcon, ref: (el) => el?.children[0]?.setAttribute("size", "20") })))), showCompactMenu && (h("span", { key: 'fe3e641df9331979c4b742b985eaed98ed905f91', class: "thumbnail__compact-action" }, h("swirl-popover-trigger", { key: '1c347a617d503f5253820978eb875d8d61213cab', ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, h("button", { key: '023915f997d4e9e8d4ff69d27ed1146a91b4cfcf', "aria-label": this.menuButtonLabel, class: "thumbnail__compact-button", type: "button" }, h("swirl-icon-more-horizontal", { key: 'de1176743b67835b8278cc82855ecf79dccdcb15', size: 20 }))))), showPopover && (h("swirl-popover", { key: '47e0206303004b9668a9586a340f21fc7a91bd95', label: this.menuButtonLabel, placement: "bottom-end", padded: false, ref: (el) => (this.popoverEl = el) }, h("swirl-action-list", { key: '22262f8cc0faa658cf41900bf7f803529e65ab79' }, showOpenAction && (h("swirl-action-list-item", { key: '28719bf6e95762427d7b8faa09759716ba52d28b', icon: this.openButtonIcon, label: this.openButtonLabel, onClick: this.onOpenClick })), showEditButton && (h("swirl-action-list-item", { key: 'da5a2f1d5c6293c34d4903225feced40ebe4eea4', icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.onEditClick })), showRemoveButton && (h("swirl-action-list-item", { key: 'e2827be07d0e583662eb643bc6723340771eded4', icon: this.removeButtonIcon, intent: "critical", label: this.removeButtonLabel, onClick: this.onRemoveClick }))))), showTimestamp && !hideTimestampForUploading && (h("span", { key: '78e6053fc433384c519f8c655682417f74292196', class: "thumbnail__timestamp" }, this.timestamp)))));
+                : this.removeButtonIcon, ref: (el) => el?.children[0]?.setAttribute("size", "20") })))), showCompactMenu && (h("span", { key: 'b7e45d53381fe810725277da63bcb647551cb40c', class: "thumbnail__compact-action" }, h("swirl-popover-trigger", { key: '23cd2ab225e6fe94d803b700740727ea120274eb', ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, h("button", { key: 'f8a3ce47abf0a45d07cfc7303b015524f4512ed4', "aria-label": this.menuButtonLabel, class: "thumbnail__compact-button", type: "button" }, h("swirl-icon-more-horizontal", { key: '44a5108bc4afaec1c8e7e16271962d38e2cfbd4e', size: 20 }))))), showPopover && (h("swirl-popover", { key: '3b788c0311598d6c1c12fba4337917f547b69e96', label: this.menuButtonLabel, placement: "bottom-end", padded: false, ref: (el) => (this.popoverEl = el) }, h("swirl-action-list", { key: 'dd4943d4efd8e4fc4ed8b78317660958e2d83429' }, showOpenAction && (h("swirl-action-list-item", { key: '6f57197aa0f150bda2991874d59988a6778cb900', icon: this.openButtonIcon, label: this.openButtonLabel, onClick: this.onOpenClick })), showEditButton && (h("swirl-action-list-item", { key: '528938dd6f5f652aa41cc1f8390dcc00c36f0df6', icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.onEditClick })), showRemoveButton && (h("swirl-action-list-item", { key: '6f09fc77ec6b9f5a16e67c829c637db3369621c6', icon: this.removeButtonIcon, intent: "critical", label: this.removeButtonLabel, onClick: this.onRemoveClick }))))), showTimestamp && !hideTimestampForUploading && (h("span", { key: '8197352041a662f49fa290cbe3455d6ab13769fa', 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

@@ -161,7 +161,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '1d0d7d978475ff900c5a174edec158e0024cdaef' }, h("div", { key: '0adb23dc70246e3478982d2fb5b4dcf14075151f', class: className }, h("input", { key: 'c65b160afedcf049c9e3fd28ceb765b9a228d9ad', "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", readonly: this.readonly }), h("span", { key: '142af64853c99b63accf7dafabc3b8d4aaef9fb3', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'b290ceb3de1338a86d842953da53d97983c4ffdc', size: this.iconSize })))));
+        return (h(Host, { key: 'd1cc36a177a7d1a13d568e33399f6cdb7cc18ab6' }, h("div", { key: 'af03135976e9447b1124d96bbfd77e39a89ba5f4', class: className }, h("input", { key: 'ea008e9cec090d08a1903ba83e7a1a2a4bc79859', "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", readonly: this.readonly }), h("span", { key: '0f7a80e78293b62ccf7ab832eba62503f26661ff', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'b60097a2a20cf5aa045994529f13afb06263da2b', 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}`, `toast--action-position-${this.actionPosition}`);
-        return (h(Host, { key: 'd9c283fbb65d4e4852c451f6e01f72a1e370d7cf' }, h("div", { key: 'ebc4bf4ea9b9a045d8ffae9f7dd6658162850808', class: className }, this.icon && (h("span", { key: '19ebc82f03ead03209c717009f66591bf5fb339e', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '7489dafdb528c4ab87b243f832329dde8ef7ecb2', class: "toast__content-container" }, h("span", { key: '640b13aa3e74e83874dffe7a58ed584550dad8ea', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '78b80407aee882dcb151c00328de12fcbda5f4ed' })), this.actionLabel && (h("swirl-button", { key: '3617efa9ce0b7df94cd00d1033bc768c52c64747', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), h("button", { key: '9f5f5988ae22a493c019ab66956cf7eb1ebbbbe3', "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: '51993ab3017f1163c2dff4afec196b9d7d025450', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '3bbeac633acfcf8ea9b34e6c5f382a2d5d167028' }, h("div", { key: '0d226caf4d8480b5e18a7a68909978038eb1599b', class: className }, this.icon && (h("span", { key: 'c023f0441a86a60f96e3246cff2f975c2d66341f', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'b37440cbb7031cdb39c5ab7ae70b3cc12f25cfef', class: "toast__content-container" }, h("span", { key: '65b785499a57274ac73205a88dcae45d0d30e89c', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'ccdef3c6f38cb2bd88bd9876710594b5e009b8f8' })), this.actionLabel && (h("swirl-button", { key: '05ea1a525aafdd29bc8174ef9f590e48ce92ef2a', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), h("button", { key: '71ff41b6b3715cf7b0c1bb3947120414094f8a87', "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: '67e4c3b781bd29ccc031a9019de8d4774713a0de', 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

@@ -115,7 +115,7 @@ export class SwirlToastProvider {
         this.popoverEl.showPopover();
     }
     render() {
-        return (h(Host, { key: '034a80fe22c0d2838210c971851b86d00b55f46b', role: "status" }, h("swirl-stack", { key: 'c287c9e9d907e2b836fd13186f319f67b28f158b', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
+        return (h(Host, { key: '3b3254340783d824a13f6fce1bed7c784376d5f4', role: "status" }, h("swirl-stack", { key: 'e27363486128cfde2ecf5d20277bfe5974d1df4d', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
             const props = {
                 ...toast,
                 content: undefined,

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

@@ -13,7 +13,7 @@ export class SwirlToggleButton {
             "button--pressed": this.isPressed,
         });
         const ariaLabel = this.hideLabel ? this.label : undefined;
-        return (h("button", { key: '0d05ca6c75316aed8a126c17fdbd37cef8e05385', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", "aria-label": ariaLabel, onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'aed2d300a51b34b0457e9b79799f9cb1974cf427', class: "button__icon", glyph: this.icon })), !this.hideLabel && h("span", { key: '1cc29eecb6d7e35199c2d0225d488e8c8aa6b1d4', class: "button__label" }, this.label)));
+        return (h("button", { key: '1d7f06fe533453dbfe319075fdecab44b961af74', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", "aria-label": ariaLabel, onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'fc44847f482647f3597269143ae83da2fbc5c2db', class: "button__icon", glyph: this.icon })), !this.hideLabel && h("span", { key: 'ffa330ac2bb7d048e8a8c69ffd098b7856f548d8', 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: 'dd43706dc3b3acb5d5847a295964c0703fe2da9d', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'af7283ac8be4616e0dccf3a0b1cffe0c22c89b06', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '4fa4b23584713d39e50d9ca826f04a65a33662b8', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'f23d802cb7e3a45edc5a422ea1c7b8f0336755dd', 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: 'ede99953e343b09fdb0c0530c71d25e04ea3f25d' }, h("swirl-stack", { key: 'd25ff9e88c3cdc94f0ba2c30ac0e22f580cf94a7', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: this.spacing, wrap: true }, h("slot", { key: 'ba9a0aa2f22044820ce128da57bf669054770555' }))));
+        return (h(Host, { key: '4976e353b8df6e70c241293dbba084b376677257' }, h("swirl-stack", { key: 'd145282f484e033a68dbaa4a78aa5fa0133334ee', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: this.spacing, wrap: true }, h("slot", { key: 'a1511560b214686ed229c09e54d0a79393e6f230' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -152,7 +152,7 @@ export class SwirlTooltip {
         const className = classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, `tooltip--intent-${this.intent}`, {
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '084b4ba8e696c3b1749b935ea8b067335ce2d745', onKeydown: this.onKeydown }, h("span", { key: '96f963ec1dad742c17dfe6f3475b0167970c6cc9', class: className }, h("span", { key: '9231163be5004120ab26d00f528f1cf4743a86ad', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: '9709d16a715bc5411299eda21673329b56932d30' })), h("span", { key: 'e0af9360a98e68999329f925920b566aefd9e71e', class: "tooltip__popper", popover: "manual", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: 'f72d398e8b0ffe35e6736a98e0c93322df8cc321', onKeydown: this.onKeydown }, h("span", { key: '823d22387edc37f4d9f62ca80171d425984fcbd8', class: className }, h("span", { key: '73ff0e71b320b369abd810083917cc810aa12bb3', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: '360acfdbee9418dffc4928e8f51d4a1a16f636f2' })), h("span", { key: 'da84c0c6a7837f53009bfcdef577319ba4980d50', class: "tooltip__popper", popover: "manual", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -160,7 +160,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 maxWidth: this.maxWidth,
-            } }, this.visible && (h("span", { key: '55cb6c63c17e9259b51d0cd7980a6c353f12f1a0', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '9a3ab1789cffb4b59622d2140d0ca8c84ddb84ad', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '85f3b738f87adaf9d4fd6981085edb2f5b9bd552', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: 'dea2834878343f30975c8f57b3d4359b6384931b', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '85aae2745219a97e1dd1b130b9b4ffbbd8493e4d', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'ed1aefbd28a10881c5b4a057b65b5e47eebda92b', 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: 'ccf16b3f17c16acd0579a56a8a42aaa910136d6d' }, h("ul", { key: '561c30f34e9ac3821c8feddd27876f0a63513d04', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '93d3e8f247f49bc6b74791747649563a3af58ca0' }))));
+        return (h(Host, { key: '69456adefd23bf636a3df9437087211cba63f71d' }, h("ul", { key: '482166a957596e7dd69840a284eb3868b173a342', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '2203db0c03dadac8d16995ee98e2706b06b3697f' }))));
     }
     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

@@ -89,12 +89,12 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": this.hasCustomIcon || Boolean(this.icon),
         });
-        return (h(Host, { key: '30613dd70c8f9de6f690ccab8fac14ab5549c035', role: "none" }, h("li", { key: '3df666974e1e529f5228046a3cbce1caedd89840', class: {
+        return (h(Host, { key: 'f734a6d8fe9ee94e4e1f4146ec15fff3d571fc80', role: "none" }, h("li", { key: '95959e6031174ba1708c13d8daa585ddae85faca', 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: '19a43913974e1eec1057428443c93064a3e712fe', 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: '360980d46950afa7058c28b19c636d8bdb29d16a', class: "tree-navigation-item__content" }, this.hasCustomIcon && (h("span", { key: '7ddcdc6b0eb8273bec217e9f7cd3a184f4089821', class: "tree-navigation-item__icon", "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }, h("slot", { key: '179928f3914e2d9d5bb0a320bdf33ff6117b7297', name: "custom-icon" }))), !this.hasCustomIcon && this.icon && (h("swirl-icon", { key: '9083a676da5ad5c287abe868a2dc976eb69f669f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '37a1be08b6f0353e5c3335f66b4b8560ad687a4e', class: "tree-navigation-item__label" }, h("span", { key: '209f8468fe14fb40cf718d368c22ef822bf96281', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '16b0d9542090eea6f6f95e59f92c000cfe1d2d05', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'be903bf65b4b6fccb8243b15bd97182fafda77c0', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'a34f663155f53700192974b3c7bf609a54c46a88', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'c65f61c994ebf49a9419ece2b7f713e81ef2aacc', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (h("swirl-tag", { key: '0f4b0ddc3fd4a3ca318a1640c9b891950a2db0ce', class: "tree-navigation-item__is-new-tag", intent: "default", label: this.markAsNewLabel, size: "s", variant: "strong" })))), this.hasChildren && (h("ul", { key: '74b0566559056518312ea43fc6a114263860d783', 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: '26c194ad12d296f72033324c5084c29196866733', 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: '1403b580945410fd0affc7b934e8168394f57fae', class: "tree-navigation-item__content" }, this.hasCustomIcon && (h("span", { key: '65c9dd7c6f2f8fa60dbe17387fa95c670f418c10', class: "tree-navigation-item__icon", "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }, h("slot", { key: '0f204a6b8e6ce299151fc6dbded82972c99756a8', name: "custom-icon" }))), !this.hasCustomIcon && this.icon && (h("swirl-icon", { key: 'd862a978877c752e6b70b23471a66d2e4615eb27', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '40fc819ae4404bf7d51a74464dfb650ccf770c38', class: "tree-navigation-item__label" }, h("span", { key: '4b25ab30a63b363fbd4042a7684e9e8f743aee00', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '7aac93ca23021514007d56d986c40eb62423f285', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'd947b119831e6047e9c286d0df27e3e14c063393', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'a66a2b326845d1e6b89288fa879d4f7a852a5257', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'e48dc82646e567b650a22551307931d337fb7dd2', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (h("swirl-tag", { key: '168d31b91c9ba9d63ab5fe9f4ac591bd11ae0e23', class: "tree-navigation-item__is-new-tag", intent: "default", label: this.markAsNewLabel, size: "s", variant: "strong" })))), this.hasChildren && (h("ul", { key: 'ee9b538b189b730ef5182ccf7e17bce10218c7f4', 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: '4caa6f0f1e04b823f8b3388069fc567465a373b6' }))))));
+            } }, h("slot", { key: '5ae1f92bb4043a69905d5145e1f0c1060b709839' }))))));
     }
     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: 'e439f533c72c47fc8e8badbea55dce8730e306f7' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'adab7acc32196565c6a027c27e5d2b46599bbffa' }, h("span", { key: '3422bfdc013f3adfefd0a9174b812e88a94ed600', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '4934bddee0c25ef52e06a220f6fb3a46771e9ff6', "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: '6fd4ea7324c4c28e52337b4721cea15e791d3a60', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '1d51b6b1613a1fa0b3baaa440df453cc04704a51' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '76f99e5f1150e434597f15742efc73b3ccf7da3c' }, h("span", { key: '198d943911f2b18286ba27770004f24686a8f547', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '9448e6968f5efa9161290b1f28e1653735b4036c', "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: 'f186329a04387c0b3c2985d71af88d0ed5127473', 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

@@ -339,17 +339,17 @@ export class SwirlTreeViewItem {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: 'ba3c130730de8e8f3faf0eed0f141174a2d3d648', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: 'b17cd2bf715c5bac51b7a9186594477f93994cdb', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '138fb00852384f9b33136a36268625ab0bb78f55', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (h(Host, { key: '799801188a287a9840062e11839a8110d0277867', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: 'a9d7dc43950f0a5669bebe1e987b53ff7c5bfbe9', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: 'c3c306c46d1d0e72bc15aa3d4c269bd991ed8685', "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.expandable && semantics === "tree" && (h("span", { key: '33f84d486931efe491ee2e7f153a996fea7cd638', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'fc3a98b0a24cfadc00a9292fc486f6c94a3769bf' }, expanded ? (h("swirl-icon", { glyph: expandedGlyph, onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon", { glyph: collapsedGlyph, onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '569c7109cb378b0480c955d723cdfea50a0d18e6' }, h("span", { key: '553d4a7c3b95d0a6ae81f8f724842ef07c38c9f3', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: 'f7a00b5702ecc493091276a1c45ab9e46d34562e', class: "tree-view-item__label" }, this.label), h("span", { key: '11d26c8c44be0f1a65f7df4fc178eabaa3ee3b9d', class: "tree-view-item__tags" }, h("slot", { key: '90ca7faafe3a4cf640b134c04e7ea2a799f66bfc', name: "tags" }))), h("ul", { key: '60972e6c31a2df42e32508bc2e8f6a65cf7f85d5', "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.expandable && semantics === "tree" && (h("span", { key: '128894c54b9787b2f68f696573007dd76ed9ed81', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '6b478f02e5f99cf10a160d1dad12b229f9b9acd6' }, expanded ? (h("swirl-icon", { glyph: expandedGlyph, onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon", { glyph: collapsedGlyph, onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'cf47f80489f16b33adcaf8ddcbd240a95f282cc8' }, h("span", { key: '59dca8b68dedf4989335060594556ee9eb153478', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: 'a72f38444e3c9eed91004452a87f6371309b2f87', class: "tree-view-item__label" }, this.label), h("span", { key: 'c9129679a11ebc44e1cad10b05d68eff7a41e076', class: "tree-view-item__tags" }, h("slot", { key: '98b912755ab5b46f46cc1417cf15205ab23539b1', name: "tags" }))), h("ul", { key: 'ac38c0a6fb60eebc8ff41546e1da4384b223d0a0', "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: '1d9ec0afcef8354c8c194a469864e89e3ccb4a47' })))));
+            } }, h("slot", { key: '2fe60b3526dc2dcab583e326b02235e1e0b1bac6' })))));
     }
     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: '30c01c58602387c5b9130e0375a637b23de0cc97' }, h("button", { key: '3cef3b299746ba07ee0d498cb2899c907b48e681', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'a39c114f6cbde695275e70e16dbf6edc0845044d', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'a6eb88eabd3f32c01e24c7eed65e19b84489c9e7', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '2840e80fb821556d3001e80d8c4723294d6f77a1' }, this.durationLabel), this.duration)), h("svg", { key: 'ac825744e74b73e0becdccc8a5644a2379a68571', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '09545eb9d1b60ee61e352afe2dbf71998e9b3c8a', 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: 'a1a76891aa14b43307a71d295fdf2bbddb5c3dfc' }, h("button", { key: '665f50ea2bd428cb7d5c4120528ecd9ee9531027', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'b765b946190b1245ad0defcd83ad2eae06fd12b3', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'db55ef4f4bd2a28b8700c27c655ab8d82333bf03', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'db7b928f7e0cdf7aa55d0b5103039b1d3d6381b7' }, this.durationLabel), this.duration)), h("svg", { key: 'f42741d0979eac89f6124e96b448c26c982b6158', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1918cda26000f56974f475326eb57e242f45855f', 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: 'be03c710ed99e7bbce312ee7ec5d4d5d34217d6d' }, h("slot", { key: '86243cbc43ef3e9c92347d2c9c77f78ba331fca6' })));
+        return (h(Host, { key: '1aa0aafdb301c13bc0170570b577345108d5e1eb' }, h("slot", { key: '958190a2e3194845c994b58024b25d8b5ed02f1e' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }