@getflip/swirl-components 0.368.1 → 0.369.0

package/dist/cjs/swirl-tabs.cjs.entry.js

@@ -77,7 +77,7 @@ const SwirlTabs = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: 'f96bdb8681babf66671867fef6b36b4a05fbc1d4' }, index.h("div", { key: 'b0d64e7fe96cb6eb8f81356749e6a6e8a69b57a5', class: "tabs" }, index.h("swirl-tab-bar", { key: 'e9327c7eb153a7afacd7d2c01328e595288e7022', 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 })), index.h("slot", { key: '61ed03c9d0c37ab1336f6a09da38a3832df10448' })));
+        return (index.h(index.Host, { key: '1b71ed5ebc8c25ed689c2f007f258903f70f16b0' }, index.h("div", { key: '43d418a0accc3ff045c125910ec4ac78ccfcb7c3', class: "tabs" }, index.h("swirl-tab-bar", { key: '6fc41b7e6f1eb12a569aef6d1e43cbfe2fdb69df', 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 })), index.h("slot", { key: '099762d240237856fd73a448bad8b1794f91fed5' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-theme-provider.cjs.entry.js

@@ -152,7 +152,7 @@ const SwirlThemeProvider = class {
         this.setDesignTokens = [];
     }
     render() {
-        return (index.h(index.Host, { key: '5e5666314a969520cd3afd9832d851810ba9cf2d' }, index.h("slot", { key: '659cc00af9c93fdad4fb686f7a66c01349c211e4' })));
+        return (index.h(index.Host, { key: '8393a61a05cc2eeb473ee1ef1feaf1e8e269eb4d' }, index.h("slot", { key: '8cc0185f22946934eac2c3d60ab73066477207d5' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

package/dist/cjs/swirl-time-input.cjs.entry.js

@@ -145,7 +145,7 @@ const SwirlTimeInput = class {
         const className = index$2.classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: 'fcff63c5c5cae44ce02b0c11098a65d930c32cb4' }, index.h("div", { key: 'ea5190d825539eea8009234d492de00c61685016', class: className }, index.h("input", { key: 'f7fd06406aa6716ea98c960a974f25ef7dcc13ed', "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" }), index.h("span", { key: 'f1d3db8f74ec7217119698736ceefa8486195bbd', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '329431e6fd0cc8758c2d9ae6b721f798f83a2ac2', size: this.iconSize })))));
+        return (index.h(index.Host, { key: '981cf171001c3c69d9ca6499bdd7426848810711' }, index.h("div", { key: '2949f08e0a08ef2e159e59ce2d2fc7fb84dd274b', class: className }, index.h("input", { key: 'c2be09c877ca4ec6e10e7514cd85e674fc07a57b', "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" }), index.h("span", { key: 'ae29d4c1ca5d831bfc7a5af272989603c9ce5f86', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '9fdef36886b40de6cafb94c09f0445a1c55da0b3', size: this.iconSize })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-toggle-button.cjs.entry.js

@@ -17,7 +17,7 @@ const SwirlToggleButton = class {
         const classNames = index$1.classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (index.h("button", { key: '7fea74ea5bdf424e022318ad1a47e1cb7a9524c1', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (index.h("swirl-icon", { key: '6075f521484294765adfe92586e12e5a977188cd', class: "button__icon", glyph: this.icon })), index.h("span", { key: '06db4d7123e013b8ed257621a00764c993b23cff', class: "button__label" }, this.label)));
+        return (index.h("button", { key: '725fa8f8aecb56f47b055c9e337a23c04594842c', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (index.h("swirl-icon", { key: '28e52ad921ed4660a8767b2a4a2fbe4c09787bc5', class: "button__icon", glyph: this.icon })), index.h("span", { key: '725200238f3d8bcf14c9795386a4cc07198f881a', class: "button__label" }, this.label)));
     }
 };
 SwirlToggleButton.style = swirlToggleButtonCss;

package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DM-IG6w2.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlTreeNavigationItemCss = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-sm)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:2.25rem;padding:0 var(--s-space-16) 0 var(--tree-nav-item-padding, var(--s-space-8));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-sm)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}";
+const swirlTreeNavigationItemCss = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}";
 
 const SwirlTreeNavigationItem = class {
     constructor(hostRef) {
@@ -90,12 +90,12 @@ const SwirlTreeNavigationItem = class {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (index.h(index.Host, { key: 'e208b1622c9178cfc4a2e296b25e7c67640aba29', role: "none" }, index.h("li", { key: '4fb5768056699d674ec4acebad45325c12b5c6dc', class: {
+        return (index.h(index.Host, { key: 'e5892006f6e0d479a93994f050a9bfc06d358cb9', role: "none" }, index.h("li", { key: '12fbbd5cf3ca7e97597a6faa1889e665e910becb', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, index.h(Tag, { key: '890de4db9901ac6d160113c57a3b9fc5d0d2f213', 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 }, index.h("span", { key: 'c5889ed380fcfbf32ff693c23968feaba55a31af', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: 'b1ef92dcb88ccf54ecf46b3b726c403a4ee983c1', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '55e185c0457bc4d384eb252c35b42951849b0e97', class: "tree-navigation-item__label" }, index.h("span", { key: '5b5c07fb67742e97747177105f2d62492edcfe50', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: '8e1c834c54ce2c641b3f7f2673bcb8f35bf7d620', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: 'cc62956a053f7dc9dacbe11e508b197cb7a355c0', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '4666fcb530af51df584bedce7927eff438d25a6d', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '3ef0bccfdb92ed52d8546e7d7064b52cac038cf8', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (index.h("ul", { key: '83436a280c0a3e75a5dbcaa98b8316d32086556c', 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 }, index.h(Tag, { key: '44e9017d8b25ad561050666ad2e6c9a35d9fe2a3', 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 }, index.h("span", { key: '7ec98ce065c42aaf96a8340da27b22888a9fcf49', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: '0110d7f713ca0040067bb4cecfe10f3c21140df5', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '321e98259f46f2537daa178b94880af5b654e7cd', class: "tree-navigation-item__label" }, index.h("span", { key: '03b40b5a27f2ebaabde7dd1eda9389e8a5ae5ab8', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: '43bb07c08e0fb5c8e67b8ac2ef5a75e0c89d0f3a', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: 'e7b0b04613e89576cbd7e9052bf300fbe7936589', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '3c53d1fb965bc60273762fae697161dd07d79b7c', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: 'c0a534343158a84b62d1f2217020cbd831cf8ee3', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (index.h("ul", { key: 'ffb5c9030cfffa3e2717782678ed37c2edf51cd8', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, index.h("slot", { key: '10545f5a40caaaca0813b012f7909cea37a820a3' }))))));
+            } }, index.h("slot", { key: '0c6eefee8fbb6fe15702d739807cba7ac2e58231' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-tree-navigation.cjs.entry.js

@@ -9,7 +9,7 @@ const SwirlTreeNavigation = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '6a4a6277f27ec2cc4e13d811c43a969e3052089b' }, index.h("ul", { key: 'ee4dbfc8553e4dbbaf3b688a041ae73506b715e9', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: 'f3e66d8a17136a882e57b6ea1ccf1342775f2f94' }))));
+        return (index.h(index.Host, { key: '6de0c53c48ee5a11541f3f048da018df9a0d19f9' }, index.h("ul", { key: 'b9e5bf4dfb6aef8acb2e92421a71fe936d3912e9', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: 'd2999c3fbebc8629f3662b9536d1da42ec671b2d' }))));
     }
 };
 SwirlTreeNavigation.style = swirlTreeNavigationCss;

package/dist/cjs/swirl-video-thumbnail.cjs.entry.js

@@ -10,7 +10,7 @@ const SwirlVideoThumbnail = class {
         this.durationLabel = "Duration";
     }
     render() {
-        return (index.h(index.Host, { key: '885b5026b5ce2119760c6b6ca144be001b16b991' }, index.h("button", { key: 'c3e08d6910079201c125750d126dca751873f378', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '48dd71f050a4e9be31c91a6cdee8b656a812e9c1', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: 'be560b7007ab8687ae11950fe1446adc5a048edf', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '97b59d520740e6288bc3522da2408ac39d5412a5' }, this.durationLabel), this.duration)), index.h("svg", { key: '6e367099743e2b8cd03ec28a4065be848014fb1e', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '9cbbbdd73f4555f8bccd4418b9750af6224ed00d', 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 (index.h(index.Host, { key: '42f3f85dc459c8d7140d9052f9cf4c6edaa4dd51' }, index.h("button", { key: '82dd95b54642b3b108fd91dbf1a8f8afeb0fa271', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '278f7980472b30d2611f4b2ea81f680d01f98ce0', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '909ec9ce4fb84fd292047f01bf5b151e2d31d8ad', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'c116caa5cdfce1eaf4c90fc0952435677b7a8f91' }, this.durationLabel), this.duration)), index.h("svg", { key: 'f3def89bf9321a2bd650ce8da299927841492bd9', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'c680681835a6635574865c28eb9c579073b57068', 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" })))));
     }
 };
 SwirlVideoThumbnail.style = swirlVideoThumbnailCss;

package/dist/cjs/swirl-visually-hidden.cjs.entry.js

@@ -9,7 +9,7 @@ const SwirlVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2629887aba4136ddd1d58b8eef851f87cb916281' }, index.h("slot", { key: 'e294868680464e61f643daaff98b7f07cbb2b405' })));
+        return (index.h(index.Host, { key: 'c60b98986bfc4bfe390d3d3e1eef5a54dcc25110' }, index.h("slot", { key: 'f150f7d98ab83d65e72983aa63ca593b915e2f5d' })));
     }
 };
 SwirlVisuallyHidden.style = swirlVisuallyHiddenCss;

package/dist/collection/components/swirl-console-layout/swirl-console-layout.css

@@ -4,6 +4,7 @@
   height: 100vh;
   --console-footer-height: 4.25rem;
   --console-app-bar-height: 3.5rem;
+  --console-sidebar-width: 18.5rem;
 }
 
   :host * {
@@ -21,7 +22,7 @@
 @media (min-width: 768px) {
 
 .console-layout {
-    grid-template-columns: 20rem 1fr;
+    grid-template-columns: var(--console-sidebar-width) 1fr;
     grid-template-areas: "sidebar main"
 }
   }
@@ -132,8 +133,7 @@
 
 .console-layout__main {
   display: grid;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   width: 100%;
   height: 100%;
   grid-area: main;
@@ -200,6 +200,9 @@
 }
 
 .console-layout__content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
   display: flex;
   min-width: 0;
   padding: var(--s-space-16);

package/dist/collection/components/swirl-console-layout/swirl-console-layout.js

@@ -19,7 +19,7 @@ export class SwirlConsoleLayout {
         this.logoText = "Admin";
         this.navigationLabel = "Main";
         this.showNavigationButtonLabel = "Show main navigation";
-        this.mainScrollState = {
+        this.contentScrollState = {
             scrollable: false,
             scrolledToTop: false,
             scrolledToBottom: false,
@@ -31,7 +31,7 @@ export class SwirlConsoleLayout {
             this.hasFooter = Boolean(this.el.querySelector('[slot="footer"]'));
         };
         this.onMainScroll = debounce(() => {
-            this.updateMainScrollState();
+            this.updateContentScrollState();
         }, 16);
         this.onBackButtonClick = (event) => {
             this.backButtonClick.emit(event);
@@ -69,21 +69,24 @@ export class SwirlConsoleLayout {
                 this.deactivateSidebar();
             }
             // Update initial scroll state
-            this.updateMainScrollState();
+            this.updateContentScrollState();
             // Update initial slot states
             this.updateCustomAppBarStatus();
             this.updateFooterStatus();
         });
     }
-    updateMainScrollState() {
-        const newMainScrollState = {
-            scrollable: this.mainEl.scrollHeight > this.mainEl.clientHeight,
-            scrolledToTop: this.mainEl.scrollTop === 0,
-            scrolledToBottom: Math.round(this.mainEl.scrollTop + this.mainEl.clientHeight) >=
-                this.mainEl.scrollHeight,
+    updateContentScrollState() {
+        if (!this.contentEl) {
+            return;
+        }
+        const newContentScrollState = {
+            scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
+            scrolledToTop: this.contentEl.scrollTop === 0,
+            scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >=
+                this.contentEl.scrollHeight,
         };
-        if (Object.keys(newMainScrollState).some((key) => newMainScrollState[key] !== this.mainScrollState[key])) {
-            this.mainScrollState = newMainScrollState;
+        if (Object.keys(newContentScrollState).some((key) => newContentScrollState[key] !== this.contentScrollState[key])) {
+            this.contentScrollState = newContentScrollState;
         }
     }
     onWindowResize() {
@@ -150,15 +153,15 @@ export class SwirlConsoleLayout {
             "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton && !this.hasCustomAppBar,
             "console-layout--has-footer": this.hasFooter,
             "console-layout--has-custom-app-bar": this.hasCustomAppBar,
-            "console-layout--main-scrollable": this.mainScrollState.scrollable,
-            "console-layout--main-scrolled-to-top": this.mainScrollState.scrolledToTop,
-            "console-layout--main-scrolled-to-bottom": this.mainScrollState.scrolledToBottom,
+            "console-layout--main-scrollable": this.contentScrollState.scrollable,
+            "console-layout--main-scrolled-to-top": this.contentScrollState.scrolledToTop,
+            "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
         });
-        return (h(Host, { key: '496726613eda9b1c13e33c085e915d775933ed0d' }, h("div", { key: '3579c1193e739746a8638efabfdce3117bf0f7ce', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '675b17d7ae85f8625e322debcb000d5bf2e90353', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '8aff40aaea61bb8d05f3a055251f44b1e3127369', class: "console-layout__header" }, h("div", { key: '28c91b86ee3c54491354b2201529b93e616ed5a2', class: "console-layout__logo" }, h("svg", { key: '94c383254b365d55087f79016f64de5c2a9090f3', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '95d61c6613839aaadf51693466036c9fc80ae379', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: 'cbb0bcffdaebc54633f2e07d658e3c9c9a529ddc', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '203d33fe023f8f24dfc3dbb5a484151ec2067179', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: '78fa8fc8471d593dd6b82e9a0e6dd55804cbb5cb', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '1a1c38e126ceb14ed84d20ea35eb9881a6e96a29', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '10c48be46ba7cb3b57ab7941b565ec6262d5441e', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '40c8755440f5fa081cf75e80f2658082f5f372f2', name: "navigation" })), h("div", { key: 'dd865340cbff798b518dfd1619a71ac7aa746b28', class: "console-layout__user" }, h("slot", { key: '8526bf246e4df5ad1a8f156de420094b0bf07a42', name: "user" }))), h("main", { key: '1d748d5d7f368dfc04cc798b67c84ac70bfa27bc', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main", onScroll: this.onMainScroll, ref: (el) => (this.mainEl = el) }, h("header", { key: '4f4a0ec2fce6b3332a383d2eb490cef9f9914c82', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '22ef51d2afffe32c7802938b0501a980317fd422', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '4e7f642ec1b0db200a06014895a304410d4e4bf6', class: "console-layout__app-bar" }, h("span", { key: '5b62b2d1c1d778b663a436d3f3cdb1fb3ceda0bd', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'dc14fca02f84c6e6deb1ad326940abfe6c46bb2e', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: 'f602249c3a2f823304f2a5bf67ddc5e6a39a6085' }, h("div", { key: '295edc899d752d5d185f1bfcdc933b6c67dc5cab', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '3d5f51aa48ab671b90e3ab795c8e2336f2a0bf00', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'ef7730d2ebcf7ac06dfb79573bf3799cbb4fff32', class: "console-layout__header" }, h("div", { key: 'd30f5fea7b7315254e965c668f4c2d7481c92f6b', class: "console-layout__logo" }, h("svg", { key: '6d7760615c7429ff4c9f75a426e9f9dd45c3383d', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '06644682742c5102d1957434e16712f4ffc05078', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: '204c7f8eb3f9cdcb4f373fab64837b0dab65863b', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '6d84e0d4c32f66edae27369c1b1e2fb5653b080f', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: '958f28ed610cb01b7978ed1746683f592a62f55e', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: 'caa2148fb54f21e3cda5463f3cc3897cab2ae483', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '1e510d6fb7e3ac9253de3028ab47c5959f070866', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'e52cc6938675f37e197632a18664aad70a53612b', name: "navigation" })), h("div", { key: 'f692ec53041b36b44d8bf79ea16c79fb5d93d3fe', class: "console-layout__user" }, h("slot", { key: '05811ff54291ca6b58c687f68f2a99198b23bedc', name: "user" }))), h("main", { key: 'a8f039990b09c03d359501b481bfb24b5b31322e', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'd5b5ffcdc55cce910a16a8f7fa676a3c30927e88', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: 'e412eeebd7df7a58e86a89e74622d741b1f163ac', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '0e2da65e6647e850b76ca977c9a6e6777626c3b6', class: "console-layout__app-bar" }, h("span", { key: '08da9d4298d53485e2dc40a171a267ba2cb84b60', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'c943ac71ee28ca081f58d5fea6df1dc80a9c6aca', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
                 ? this.hideNavigationButtonLabel
-                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '01d45eb50d075757955b80853198f1b0f39299c8', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '02175712524e8351c77fb19e694b578fb7286cf4', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'd32c76e8ece2eeb22f011f32c413a4830cc30981', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'd1988d4c22eb7bdc7f0a6e7b2214f279d16f0f58', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'a0432af5b8fa2c86cdb38107bf9862434b71c3a8', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '247e57f3ad9aa23d632676da5f9412bf49178046', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: '45edcca489cfd352b051296b603014b4a3680f0d', class: "console-layout__heading-container" }, h("swirl-heading", { key: '7b4e9fd2b38eb7c577d9c24a777081091e67edd0', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '1c2465d0e95338b0951eb4acca5c600b59e28ed0', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '4ba8d0d2952cbd856740bdc9cc437bf3cc760a30', class: "console-layout__heading-container" }, h("slot", { key: 'e4f52ed468b699b7c7243857337342ee5c11ab42', name: "heading" }))), h("div", { key: '5aeb6ea58a0d5773684c63faab63efd58356472a', class: "console-layout__content-header-tools" }, h("slot", { key: '736fa0e793324d24da67ed4a005a520e55e9a047', name: "content-header-tools" }))), h("div", { key: 'ccfd6c9269d2eb46761dc5b1746928cc9f032e36', class: "console-layout__integration" }, h("slot", { key: '61c7b54e8ade13b05a8c3fca648c01fb45704913', name: "content" }))), h("footer", { key: '74be6cb8601f004b48e76070172d11a61a9567f9', class: "console-layout__footer" }, h("slot", { key: '346a507d59d8969c3d53289cdd777cd278c35608', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '9d27e700c9d1863a0801661ca45f7e7bdf01e4f6', class: "console-layout__overlays" }, h("slot", { key: '3d2bc10779ef6cfdb56aed0a145a5d8ccfe2a764', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'f9415886d01ef95ab39077ea999f42406e86f314', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '43cb2fa3a5f83641f355b70d65824349a4d81c0e', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'c33cba1e95d045c844a54abd07c7137b0e78bc50', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '6ab6d727f2277140e11db645868827c847dabdba', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: 'b052ea71d81c31e87cd2fb3737bbb71d1bc031fa', class: "console-layout__content-container" }, h("header", { key: '088cdd2fbbd44ab1d28b522d5fea49d8deefeb2d', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '4460404203e17d8fb4e40d648e12d04aa56d6d5c', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: '2140642cc721068ada371be1815b67031fbd0aa2', class: "console-layout__heading-container" }, h("swirl-heading", { key: '22cf167cae948b9fc2bc599e633d853e8f12969c', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '06e4ef0297ce3ebe4104ccf8b69c83c065bc79ca', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '46a66886e33e95bd953e4f7302ea349e9a6f51e0', class: "console-layout__heading-container" }, h("slot", { key: 'fb00d09092088ee6276bd40cbc4c7da5c85b21b3', name: "heading" }))), h("div", { key: 'a9b2ffbe3dde312da4652de366b912098a7a3a14', class: "console-layout__content-header-tools" }, h("slot", { key: '5f720c87d56af83fcba11b5a867fa9b16ffb8ff8', name: "content-header-tools" }))), h("div", { key: '3849b04645ac7bd52456b5bb133d656cae4ade3f', class: "console-layout__integration", style: contentStyles }, h("slot", { key: '8bea0cef1e5b108d0431472cd2a4a773c04e6099', name: "content" })))), h("footer", { key: 'cacef9477a9ded8ae8ed0c1f33c5dfc4fcccaf13', class: "console-layout__footer" }, h("slot", { key: '29c75ed06f31e2fa404af0f0df9e3c4b9f2a72c6', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '6fa46e755ea4ab076400514f059468583baf1158', class: "console-layout__overlays" }, h("slot", { key: '7ba8df29673c595dcd5607611b2e27652cc2040b', name: "overlays" }))))));
     }
     static get is() { return "swirl-console-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -413,7 +416,7 @@ export class SwirlConsoleLayout {
     static get states() {
         return {
             "sidebarActive": {},
-            "mainScrollState": {},
+            "contentScrollState": {},
             "hasCustomAppBar": {},
             "hasFooter": {}
         };

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

@@ -193,7 +193,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: 'dfdcee29c1198a91f487f95303a25a351af9360f' }, h("div", { key: '421758bdfb0227068bebfeffbbcec9e633af01aa', class: className }, h("input", { key: 'd952d450aaa1e8c7fcda535b8574c985cf924a0a', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("swirl-popover-trigger", { key: '9b8a3918fffd902a55f6e05d80dd074050ae8aa7', swirlPopover: `popover-${this.id}` }, h("button", { key: 'f2c0b68ff346b189ec1c87cfa512da7f60705258', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '22036bb077e80763db35526f9b5a2e5ba7749959', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'c3d73d88335c7b1736249bb816df3c98a2c96f00', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'be4b56f558745d0ab85387cc41db391a86e8828b', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '97905434c765395244603fcaeb8b99cb7ca65215' }, h("div", { key: '08e9af686684961329173c15583f56871c737291', class: className }, h("input", { key: '799cbdbc674b660917535823f328c0d3989e0b8d', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("swirl-popover-trigger", { key: 'fc9d427e1fe7c99f2172f8dd6d42fc1af5339f25', swirlPopover: `popover-${this.id}` }, h("button", { key: 'c218bddaa19d9d07bba93998b22eacbc419c9bf1', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'dcc5582668398233b0e9233cca1bea7d2b5ccda5', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '8a7a720ad6d8b6a2a103b90a872429ad546527ba', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'e01597c0dc2a830aef8862fb05532678d3630603', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     static get is() { return "swirl-date-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-date-picker/swirl-date-picker.js

@@ -32,7 +32,7 @@ export class SwirlDatePicker {
         const startDate = this.startDate instanceof Date
             ? getISODateString(this.startDate)
             : undefined;
-        return (h(Host, { key: 'b65ecce22e01a0457adf4a34769c1913f3aeffa4', onClick: this.onClick }, h("wc-datepicker", { key: 'e47c178eeb45168c4578a659101c10dfceac1e9f', elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
+        return (h(Host, { key: '7ec3ae9991690904727eba667b74a54f21ec11a1', onClick: this.onClick }, h("wc-datepicker", { key: 'd562dfed3aa6b4876348fe4f9ec2cd372cf93287', elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
     }
     static get is() { return "swirl-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-description-list/swirl-description-list.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlDescriptionList {
     render() {
-        return (h(Host, { key: 'e694dac352c50a28b0f35dda8d4e067c9399eb17' }, h("div", { key: '9d64ffc820e098f492297af7745c9b36af5da0dd', class: "description-list", role: "list" }, h("slot", { key: 'd5573abce8e07e5240bf060c1058fed54059e5ff' }))));
+        return (h(Host, { key: '186621c7a5995bb3a1e13ca26d7d010b494ea56d' }, h("div", { key: '2c13f86bdc4920b412e6faba663b852d4c2c2cf7', class: "description-list", role: "list" }, h("slot", { key: 'e5968335d30156bcacd58839addd74d092bffdff' }))));
     }
     static get is() { return "swirl-description-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.js

@@ -17,7 +17,7 @@ export class SwirlDescriptionListItem {
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,
         });
-        return (h(Host, { key: '8014ee8d849b95bab7ae1cc682a3d0bbe3e074e0', role: "listitem" }, h("div", { key: '6b202c77e7012ec0aca3a9b980e75480c1109065', class: className, part: "description-list-item", role: "group" }, h("div", { key: '242cfe61b946a5322b4c1ab23beb02d6dd5c3bad', class: "description-list-item__inner" }, h("div", { key: '9b76595e162cdb97f3308490af5ab0644078fd1c', class: "description-list-item__text-container" }, h("div", { key: '02db73c687ef62d819842254e2dbe8bbf8fdd69b', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '0b4837ec0bf37b8fe75cbe3242ed3a83fd8ff1bd', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'f1e6c484c32f3df6d8e6dfab19ab4ad313273ff1', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '2f3cbe85180a75972dbab80daec81c708425fd7d', size: 16, tabIndex: 0 }))))), h("div", { key: 'bdcb6c648ff3370248c4b345e8939182c8b2f6e4', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '656381c9109ae0436572945c1c48d80c483c1ea9' }))), h("div", { key: '7100d26dc8930335b1c425fc7591dcfd4ead42d4', class: "description-list-item__tools" }, h("slot", { key: '24b18f9b9543677fd051f58c8a755ec914d30495', name: "tools" }))), h("div", { key: '36ee7c5b466de605604c17ee189797f67c12451f', class: "description-list-item__additional-content" }, h("slot", { key: 'aa50290a8b8e1870308df632c88003b32d144f89', name: "additional-content" })))));
+        return (h(Host, { key: '90dbdf2ed25781b297bde67fc0900421ebb830ff', role: "listitem" }, h("div", { key: '53f163fc7500a78bef54ead6964bd72f477e0b83', class: className, part: "description-list-item", role: "group" }, h("div", { key: '81313649bcb191b15503713665f77d40e4375bee', class: "description-list-item__inner" }, h("div", { key: '1baabe026578dc1baa0df120e42e0ead42e9f1da', class: "description-list-item__text-container" }, h("div", { key: 'c313991c7674e14a5ab3a38265942338ac5231c5', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '7e1ba8dfbb8a92b61dd4d920ebdc10c3f4167e1d', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'd81f3d95d0471c83f347efab966756665161fad0', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'f86d1830237f8919a38864158cfc35715b81225c', size: 16, tabIndex: 0 }))))), h("div", { key: 'b40b4e149ddfec7e4b068477af6671e30c19043c', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '15462d6c1d14aba95f3451c7a5be36e325bc7300' }))), h("div", { key: '074a5ac6fdbcd158b2967c9df72860f982a78403', class: "description-list-item__tools" }, h("slot", { key: 'c51ab4cadb99ec5c1a695fae2bfa55445d6b30e5', name: "tools" }))), h("div", { key: '60336ea3f267639607aad06c4aaec92dfa4a33cc', class: "description-list-item__additional-content" }, h("slot", { key: '9cd5c2a9f26a3f293749588fb6b6b734bc1ab3cf', name: "additional-content" })))));
     }
     static get is() { return "swirl-description-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-clap.js

@@ -8,7 +8,7 @@ export class SwirlEmojiClap {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'd8145152a1d500d30ec0a1061f34b05f233285d2' }, this.size === 16 && (h("img", { key: 'ce9fe6be764d0edb7e99b774f9c988509b90a6db', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '3a95758faa7eb55ce62516d4b948d6394812a746', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '2c9b32c6b109b244b27845dc79c15af55df9c3a0', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '2c47f977da2466747c1115761f8931c747fa3e95', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: '2290bc6161eb63ee23ecf06fa93714b0cc708196' }, this.size === 16 && (h("img", { key: '480624f433bd871973e385db4de95c5ce80b290a', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '636c0729258ae4fe56a45227673c870a13bba8c2', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: 'bd2d915f0d7d26135402b4c7b130e531cc12ed69', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '92ab6253b231d315829861675053a2d10617f7bf', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-clap"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-happy.js

@@ -8,7 +8,7 @@ export class SwirlEmojiHappy {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '619129c7e28e73a3723d09bb20f5db4104664e52' }, this.size === 16 && (h("img", { key: '5798a5cf99caf50942b860c7999175abdff20e9d', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '1ca5db3a8e5d1d32b216f3522320179637f910da', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: 'd96185a2e87c597f75693636dd58572e6682d4bb', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'e695555af8ab00a6bcc9fdaf0528b885fc08eba4', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: '785ef51d1bfe14d937e3be24d81095a513894745' }, this.size === 16 && (h("img", { key: '87475da3c8cf4f98b41ffca26ba76bf349444980', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '81953c3e2917f9733653b333ce13b4f63533e2b0', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '58c8988adec7c1beaed83d98e97651b096d23c7f', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '2205b12c5576e627f2d461161fa363d35f88d540', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-happy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-idea.js

@@ -8,7 +8,7 @@ export class SwirlEmojiIdea {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '1ddb0dbaa2dece9843885be0eb96297f7262d042' }, this.size === 16 && (h("img", { key: 'baa3127e120fd75fbf3f29dd33ae7d90f427d129', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '3d388543de153e653acb4f0f247817495b7bb310', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '7d2fbcc9c48cb85d3edeb3c230b6c3aaf74b82db', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '7574c6a2d552407413f9794ca8c8bbb1a2f1cb75', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: '1d0863ea22c3d66bb231797ad2ff68c7a9500f49' }, this.size === 16 && (h("img", { key: '32fd806fdb0206c37ea6b95c960942b597d61c77', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '0df21795e3fc6a86350afabc747511de612c01b8', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '5b9ef8fcc048437978ca6698af848496678b10cf', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'bc87fe134003bee65a2ea2f6d22a7bf7b3504405', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-idea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-love.js

@@ -8,7 +8,7 @@ export class SwirlEmojiLove {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'f228265076d1ae32694322c19ba8efdf6d499dc7' }, this.size === 16 && (h("img", { key: 'd01a77f870e92fbf86d1ea37483852d8c6ef1178', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'df5424c60471aef05b51e6dc416488acb83b8ea9', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'ca9df68a4a190d8f5c2b045e5ab7b49ca4e32708', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '021801691dde3891761b12cbc16684e9655bb67d', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: '71914ec3c2f44caebb5eee5384cf00f42ff47150' }, this.size === 16 && (h("img", { key: '6592a1a6cee3f306ea8e3ccb05507c4d2ddf71b9', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '38afe95020550e282ad6289d74ad3bd62111a665', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '5475d51f17a5abe120d809ba88f77addda344f37', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'c1cf4e32564e54aa1319573dd421a1a1f6334c6c', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-love"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-sad.js

@@ -8,7 +8,7 @@ export class SwirlEmojiSad {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'cacb17f5231e8e65a9ba788e97c88ac4d7a045d3' }, this.size === 16 && (h("img", { key: '8c420591c9e1312e3bc7e10a263b708dff884d43', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '09372c3936cbf5828ef26b092f8c126d5697967d', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '519fc1a7bd8fd1d3c9d90ebe032c2dc10dc685fa', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '5443be3ab168eac250687611d2ec7e585f7393ca', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: '12004c4c99d9952ddcb0b3291b2e8373f7397a13' }, this.size === 16 && (h("img", { key: '37563f43bd4269c48d4445932d0f0470d3cd6157', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: 'b84bf5d217da8aaf87ff970ed02117f21e3917c5', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: 'b549ab7ac90739c46bc26352d96ec61e2a4745b5', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: 'af47a19fc9bc89a23b14ca26653360a5ee5d947f', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-sad"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-thumbs-up.js

@@ -8,7 +8,7 @@ export class SwirlEmojiThumbsUp {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '7510a6d0c2a9a9d1cbf64b544c447925084b743d' }, this.size === 16 && (h("img", { key: 'de70ac25084a64fe1bfd85a8c3c0a6aa302f7733', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '5fb26959f969f039c39f44449cdb6de7fe6fa1d2', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: 'a91dae1f9643768541afc140e8978c86dcc3a6fb', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '9c2b744d0a4c96c3b9984734de5a4cc178cae7d5', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: 'e4d260bd644fd9677422dd90f7a66df5de5a68ee' }, this.size === 16 && (h("img", { key: '76c2958dbf6055acd7fc3a9a703c75e17e55635f', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: 'e852d1e26f222c008896283cedb3b868434c1e38', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: 'bb6ecd185cb696b87589adc0a138e5de1b9fb231', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '4a70e11277dde7de59877a3d1d79bb7d4ed81fbb', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-thumbs-up"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class SwirlEmoji {
     }
     render() {
         const Tag = `swirl-emoji-${this.name}`;
-        return (h(Host, { key: 'f7b245d8cc103991cf4a2727776100f78f0d0c5a' }, h(Tag, { key: '6c6a83f481a491d04b3e204f942cadc45c06490e', label: this.label, size: this.size })));
+        return (h(Host, { key: 'f42b652c032c9a6b0acaf8f963575d33251831ee' }, h(Tag, { key: 'd0f9d52a6b449c2070e2efa02ae24205af2a2564', label: this.label, size: this.size })));
     }
     static get is() { return "swirl-emoji"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-empty-state/swirl-empty-state.js

@@ -16,7 +16,7 @@ export class SwirlEmptyState {
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (h(Host, { key: 'c2e8ccde693817838b60f34a6d740a5c7b66699b' }, h("div", { key: '0003deb97729d9f910357954ca460b0175f1767e', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'e7c6a2f2ac8b517bc988affa907971b315be51f0', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '3ff8688a488ee7f8f98e16171184bae84993640f', class: "empty-state__slotted-illustration" }, h("slot", { key: 'dd5200b78701624ef24ebc9a356bacbd187280ce', name: "illustration" })), h("div", { key: 'ccf3be4270aff8f5b0e58df3d26d981aeae3bec1', class: "empty-state__body" }, h("swirl-stack", { key: '302f100325f5431c005263afaea48cdb114e193b', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: 'ff8683109c205de82b3bf0dd5e24756c18d8be16', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: '081f9d49b19fd65e69383ad982838d1792a0a87a', class: "empty-state__content" }, h("swirl-text", { key: '6357990f0fa688a4016361b037092431651e6ea3', align: "center", color: "subdued" }, h("slot", { key: '3f648e01deb2242e132bcacfadab4fd08d7f116d' })))), h("div", { key: '372fd4f55274a6c32a2443a456530845473747a5', class: "empty-state__controls" }, h("slot", { key: 'a0fe0a4e1705e5e55286bc455d0e0b911093f407', name: "controls" }))))));
+        return (h(Host, { key: '166076ac4cfe04b4764c72b42245450f11a8e794' }, h("div", { key: '62deccef0cb90b476c5a2158fc6d392410fac996', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '63c79c7e413c7b9c715ff07f6d2bf7fc35ed3ddf', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: 'a477f4eb79a7cef298c73303e71b242f2dbe855a', class: "empty-state__slotted-illustration" }, h("slot", { key: 'd9bb1832e7119c8caa4743901be8dad76772c7ac', name: "illustration" })), h("div", { key: '6c8b5903cd2a310035b6f19ea2c578deae6ff6fd', class: "empty-state__body" }, h("swirl-stack", { key: 'd5ba6a8034b7784d413c9da99f64e0f1e2090f9a', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '55ac5b35d92a434f02f02edd5de54e574793b82b', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: 'b5cd99d2fc3933797c868682d30c28117d0510d4', class: "empty-state__content" }, h("swirl-text", { key: '52388f0b76e3e1971016eab8582d8f180f02e9e2', align: "center", color: "subdued" }, h("slot", { key: '88e782a04e75234c96ba3a2f339a324657172a37' })))), h("div", { key: '6a934056e62842dda32c55970f4b412cb1dd7ba5', class: "empty-state__controls" }, h("slot", { key: 'ca1161d9f41bb32a1b3d994285f91db758825fca', name: "controls" }))))));
     }
     static get is() { return "swirl-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-chip/swirl-file-chip.js

@@ -76,7 +76,7 @@ export class SwirlFileChip {
             "file-chip--one-action": actionCount === 1,
             "file-chip--two-actions": actionCount === 2,
         });
-        return (h(Host, { key: '6037f2f042f1cf6134849c125b333e3952337618' }, h("span", { key: 'db9a73e9071b1fbaf319d5cbf99e3495e70ce8bd', role: "group", class: className }, h("span", { key: '08d2cef2a41f4cb0f027f40768b4113a56edeac1', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: 'd42b6655f625c2fac97ef7b150d25c7528ed0842', class: "file-chip__info" }, h("span", { key: '1ab14be5f4dba742602381fa4a5dd6ad5ac8f0d1', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: '91e85f2654fb69478e62043c7af0b00e2470d0f1', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: '21cc627fb6d28fab11661c34cf6dfad7bfd365a7', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: 'd1becf6e5ccce991c73c600a254922641145ce89', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: '7047997c6bcafb5ef0649788850699249959ccb4', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
+        return (h(Host, { key: 'fa1ecf418460262c70a56f51a423604a97e8a1af' }, h("span", { key: 'c847d053734b05e13a55848941f1ff975d54c022', role: "group", class: className }, h("span", { key: 'cd1112cb3f9ca9cfd1bfe7836491c51da2e7ac4e', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '825e322f119d2e514cb1aed6b972810e1164826f', class: "file-chip__info" }, h("span", { key: '5802f85a82cabf174098ecc9992d770ae65794b4', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: 'd292ced14d7335ffbb39d522d6f770f2f465d1c9', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: '205d45f06313496aa89f2fa0eb1a86c6346a3009', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: 'c67813fba6df624b66b2114ac8f65d617a580a5b', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: '14d348a5f14bdb5f8448ddb8d11e1c259b0de689', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
     }
     static get is() { return "swirl-file-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-uploader/swirl-file-uploader.js

@@ -32,10 +32,10 @@ export class SwirlFileUploader {
             "file-uploader--disabled": this.disabled,
             "file-uploader--show-dropzone": this.showDropzone,
         });
-        return (h(Host, { key: '735604888bf0188109cfdf8e038400aecb060ddd' }, h("div", { key: '9aab6f2e0e559b1c4edb2c40b81e48707da3ef31', class: className }, this.hideLabel ? (h("swirl-visually-hidden", null, h("label", { htmlFor: this.inputId }, this.label))) : (h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label)), this.description && (h("span", { key: '26934972352c10d5320733fd75d582c64ae2e8e2', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: 'bfba3d7da9b3a93ea18940c78b8428f2f009b5bb', class: "file-uploader__dropzone" }, this.showDropzone ? ([
+        return (h(Host, { key: '142fe7a2d391928f453d74fcb0aaac4a4d08ae3d' }, h("div", { key: '97bbecb655eeb499c1036a40bbc1593d00a7ed46', class: className }, this.hideLabel ? (h("swirl-visually-hidden", null, h("label", { htmlFor: this.inputId }, this.label))) : (h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label)), this.description && (h("span", { key: '0733be83e31bf8f501e3dc9eb83685586fd4fe51', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '43c71e823001d12bd7996591e6e7f6ff213dacca', class: "file-uploader__dropzone" }, this.showDropzone ? ([
             h("swirl-icon-cloud-upload", { class: "file-uploader__dropzone-icon" }),
             h("div", { class: "file-uploader__dropzone-label", id: `${this.inputId}-additional-label` }, h("span", { class: "file-uploader__dropzone-cta" }, this.ctaLabel), " ", h("span", { class: "file-uploader__drag-drop-label" }, this.dragDropLabel)),
-        ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { key: '6f9d334acde73367d4e83fcccaf7fc393635bea6', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
+        ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { key: '5e88f42179879b53c1fc1f58cab9f30f7c866876', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
     }
     static get is() { return "swirl-file-uploader"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-file-viewer/swirl-file-viewer.js

@@ -46,7 +46,7 @@ export class SwirlFileViewer {
                 this.type !== "text/plain" &&
                 this.type !== "text/csv" &&
                 this.type !== "application/pdf");
-        return (h(Host, { key: 'a3e463f3ba54bc00845cdfec9347c54cf348eb84' }, h("div", { key: '383e8d5cb0ee05f6909d34be85b00d126bf929b1', class: "file-viewer" }, this.type && this.active && (h("div", { key: 'fc9f387a74e144048ed61bb955f633fef55f5073', class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { key: '941527a09c5f49026d4c5a2464ebe8ebe427868f', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '3860256892bbae5aa56a609c8666ab9a162660ec', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: '697e20abcea270502aa05ef2ab0397f66635eb64', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '5e9b09445443a24c46b61e3f9961640ec6c62780', errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, workerSrc: this.pdfWorkerSrc, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { key: '3c1ab16de0ca1f952eb139caf8371fb09f28f92c', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: '73ea43a0bbe3e785c7c21208cd57fcee184d8054', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: '22e51a1bb71752cbc4208beb29b428c599f6face', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
+        return (h(Host, { key: 'ca428acd99e8b5d700e3935e94c1e7f3638b9869' }, h("div", { key: '6c0d4faf40af3cd9d59b38e4f07d541a69ea4c16', class: "file-viewer" }, this.type && this.active && (h("div", { key: '13d33ebdfb5d616910a7889a7578356f3029910e', class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { key: '25440c53fcfab131c6cb236239ec37fa77d4a398', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '6dc34153015503df47fa957f88caba861108d503', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: 'f221753a8aa300d9c770bf6989f222c4c490cac4', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '7eca59534735529982cbbad98b573224dcd5593e', errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, workerSrc: this.pdfWorkerSrc, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { key: '0500bf8f85ff694835157ca077440cb8dfcff915', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: '56b77cc2f2b56f0b0b1642c1331c62b7e81d353b', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: '945b7046764193a1b070e988e493705756a7e720', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
     }
     static get is() { return "swirl-file-viewer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-audio/swirl-file-viewer-audio.js

@@ -4,7 +4,7 @@ export class SwirlFileViewerAudio {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '6d8926d23f40942e14e298aa5e29ced5061f3a68', class: "file-viewer-audio" }, h("audio", { key: '3b8b3d48baf86aeac70edea47dd7396b35c6783c', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
+        return (h(Host, { key: '2900b07191c797a19e8cf8225c8c6573bfe161ee', class: "file-viewer-audio" }, h("audio", { key: '6ca576dc4b02f6e84f13311e4ba700167ee09aed', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
     }
     static get is() { return "swirl-file-viewer-audio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-csv/swirl-file-viewer-csv.js

@@ -34,7 +34,7 @@ export class SwirlFileViewerCsv {
         }
     }
     render() {
-        return (h(Host, { key: '4cd688f21caed158e9c8583f77d586027eab643a', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '3498e1d8770ef8f34a2965a18fa839d0caa09063', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'a0a77074dab7e8dfde1b1b1bfe679a0475f4877c', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'f94ac17832b09feefa57bb5d459882e0b71ef07d', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: 'a0e238437099227e7bd40ecb6c08debfb9e64c24' }, this.data?.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))), this.loading && (h("div", { key: 'd0afb493fbf337a08eb3b8bb7384f4b081b94d77', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'c02a95a090bc46dffb823cb08d1a6cbf85fe4b6d' })))));
+        return (h(Host, { key: 'fb27d2be2dd3dc912ef407a51694c80ba65d3227', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '4736a116b6ffd2866b0133605600c7ad0774fa93', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'f39bcff9c921a0501085ab34daa0d847ef6d5c71', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'e7b3ec0721d96d32d483ee10df83b57ae7a1fb99', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '0265132d7cfe5580b21c7191791371fcf24c8ff3' }, this.data?.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))), this.loading && (h("div", { key: '97603f955d0a0fb882b097b73c200f623c5ab5e5', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'ffda025c11e51e615a1b02ac7e39a5304dc0cbab' })))));
     }
     static get is() { return "swirl-file-viewer-csv"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-fallback/swirl-file-viewer-fallback.js

@@ -11,7 +11,7 @@ export class SwirlFileViewerFallback {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '701a53b9b636773bb852b67ea0efb9fe8c6729d2', class: "file-viewer-fallback" }, h("swirl-stack", { key: 'ca58d970c935061efb8d71224d1b11e502fb443d', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: 'c69e13fe64286bbb4b780ae489779f280c6f23c9', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '3e51a2e49759edcbd2527eb6c5821906d2bd557f', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: 'aa1d2f3dea806a8fa4485fef1268df56a2fc50a9', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
+        return (h(Host, { key: 'f4e82cd376cd171e1fa0b4bfce34f3e0deb08c1b', class: "file-viewer-fallback" }, h("swirl-stack", { key: '692a28eb030d667c66e047d8c834d8e4809392f7', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '5f34316d466be0d19943788e8407b74ab5d5766c', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: 'cebf9ccf829344d5148df45ecac9051475bbebd2', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '35acb0f8bb2b3bfd9066487777b3fe57604ed4ff', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
     }
     static get is() { return "swirl-file-viewer-fallback"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.js

@@ -188,7 +188,7 @@ export class SwirlFileViewerImage {
         return this.updateZoomAndPan(1);
     }
     render() {
-        return (h(Host, { key: '7736a509c5ed8de5607d520a6287a595830015c6', onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: '595c8f592f7428c793713feb4e76a839d98cfac8', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: 'd2991b3923463bce82a7456d6e767f2db38ca931', class: "file-viewer-image" }, h("img", { key: '7852a60b1bd9411205d7f5c4854c0041ac20a3b5', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: '42abc98610fb608eb36b33cc93ff0a0a40a4ad4e', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '455c69292237bbeefce5e24ba31ed0b82ecb6f98' }))))));
+        return (h(Host, { key: 'a8e61ce954abb2de1d6f445a46219259f2a919a2', onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: 'cdb22d3feda76498870a92a6bc419e4e9602670a', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: 'b1dc79557c223df5936c294e25277c112c99472a', class: "file-viewer-image" }, h("img", { key: 'f3de188a201afca765ca44a157b1c921bb393c2a', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: '856804b636026ee60b3a4ea7b25946da5495f877', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'f397c7f1a7120e9548e07707c3d7d264e80f9891' }))))));
     }
     static get is() { return "swirl-file-viewer-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-text/swirl-file-viewer-text.js

@@ -23,7 +23,7 @@ export class SwirlFileViewerText {
         }
     }
     render() {
-        return (h(Host, { key: '459eedd3b49a4227650cd82ba0575bb6fa85e561', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: '835c940c2d60b4f283d8f7ded8ff62dbb8ece669', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: 'a9c16f454f1bf2dcf72533bca1f27c2018b7c74d', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: '03e2ffd76c3080e7a9f391166eda35b5dfd5f6e0', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '87073f3480e456c178d554a1bb6c315093142410' })))));
+        return (h(Host, { key: '502671c5b2a0187ecfb4d1d3f10dc685343a83a8', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: 'd223d764c28c87bc08f12ed859a94340dbe2b61d', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: '0fa96de20270c3bcaeceaadb60a731729eec5c35', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: '225bef811457027af189698ce61afc3b16b15bef', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '1df61e955211d7fb2b148b4ed73619845e35b231' })))));
     }
     static get is() { return "swirl-file-viewer-text"; }
     static get encapsulation() { return "shadow"; }