@getflip/swirl-components 0.498.1 → 0.501.0

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

@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 require('./utils-UfZG-xPD.js');
 
-const swirlToastCss = () => `:host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem}}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}`;
+const swirlToastCss = () => `:host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast--action-position-bottom .toast__content-container{flex-direction:column}.toast--action-position-bottom .toast__action-button{margin-top:var(--s-space-8);margin-left:0;align-self:flex-start}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem}}.toast__content-container{display:flex;flex-grow:1;min-width:0}.toast__content{flex-basis:min-content;flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16);min-width:0;flex-shrink:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}`;
 
 const SwirlToast = class {
     constructor(hostRef) {
@@ -13,6 +13,7 @@ const SwirlToast = class {
         this.action = index.createEvent(this, "action", 7);
         this.dismiss = index.createEvent(this, "dismiss", 7);
         this.accessibleDismissLabel = "Dismiss";
+        this.actionPosition = "inline";
         this.intent = "default";
         this.mediaQueryUnsubscribe = () => { };
         this.onAction = () => {
@@ -57,8 +58,8 @@ const SwirlToast = class {
         this.timeout = undefined;
     }
     render() {
-        const className = index$1.classnames("toast", `toast--intent-${this.intent}`);
-        return (index.h(index.Host, { key: 'b262aeaffd17ea3bd343809cfb0d8e97b1b62396' }, index.h("div", { key: '78272b495c2092ff7a4ee9e0eb5b4f13726aa9b7', class: className }, this.icon && (index.h("span", { key: '967d5fceb7d7497429313c832da27986ed160d5d', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { key: '8b36bf2a453fb30a56b9eac3ca1b30e1add71d7e', class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", { key: '781e18bb04e70bdfa4f7425db0fa3e93fbd8bffb' })), this.actionLabel && (index.h("swirl-button", { key: '59df81ec318efd3084317cc9af56e6c6d57cf21f', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" })), index.h("button", { key: 'f5677d18055dd6e51f78d45dde03e893cb93c466', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { key: '701b783b1c5a7ae56e79e5873c991d6ca74839c7', ref: (el) => (this.dismissIconEl = el) }))))));
+        const className = index$1.classnames("toast", `toast--intent-${this.intent}`, `toast--action-position-${this.actionPosition}`);
+        return (index.h(index.Host, { key: '2ae9a317c62c35f96b69aa0b4945c74101e210b3' }, index.h("div", { key: '21f1e47be66edf5eb91c2fa346a5e10311da9c83', class: className }, this.icon && (index.h("span", { key: '1d01a3d3005ccf694c5f67a02c6e69ec0dcd6f75', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { key: '4cbdc5ee5adf56abe15f40de536310cbf94b2a33', class: "toast__content-container" }, index.h("span", { key: '9ccd54d6874f64b40f832d004c8ebca06e2ae6e5', class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", { key: '8c26ac36fe46baf6f6cabe0b02263bd9730bb1e4' })), this.actionLabel && (index.h("swirl-button", { key: '7fc42c302778f67bc9592b52a0955e9a1354fd8d', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), index.h("button", { key: 'bba7173b62602a8a110baa92003d8878d5c2c972', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { key: '88821f51f8ae050f6e69822baa1800e5f2bcb898', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get watchers() { return {
         "duration": [{

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

@@ -19,7 +19,7 @@ const SwirlToggleButton = class {
             "button--pressed": this.isPressed,
         });
         const ariaLabel = this.hideLabel ? this.label : undefined;
-        return (index.h("button", { key: '7d3fb907494b79a9cd73b571b55ad3429931cc36', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", "aria-label": ariaLabel, onClick: this.onClick }, this.icon && (index.h("swirl-icon", { key: 'f54d595dfea309031ba7d2e075d331e34cd83482', class: "button__icon", glyph: this.icon })), !this.hideLabel && index.h("span", { key: '2f379a300f20fd6d12a5f18da67cccd77ad85d44', class: "button__label" }, this.label)));
+        return (index.h("button", { key: 'be452f8ebccc40c5b98c9737fb7c76be37d47d71', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", "aria-label": ariaLabel, onClick: this.onClick }, this.icon && (index.h("swirl-icon", { key: '59cb769717b75fa1bedc37c575ed2f231b181540', class: "button__icon", glyph: this.icon })), !this.hideLabel && index.h("span", { key: 'a5e3cb07a845a12a2b19f0be9eaa1c8b21fad480', class: "button__label" }, this.label)));
     }
 };
 SwirlToggleButton.style = swirlToggleButtonCss();

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

@@ -62,7 +62,7 @@ const SwirlToggleGroup = class {
         const className = index$1.classnames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (index.h("swirl-stack", { key: '67690dcc23d24c021eed8d5828fc0833807fb19a', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: '535c7e563913262583d0e86c194a45c198da1a4d', onSlotchange: this.onSlotChange })));
+        return (index.h("swirl-stack", { key: '8d041df037a1235032fea927ad0717e8e400144a', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: '355821ac9d0dd0505894aaf5d278ec1855c09341', onSlotchange: this.onSlotChange })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -72,7 +72,7 @@ const SwirlToolbar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '34b3dcdf0beeb720ca846cf4f8999eff7d65f3d7' }, index.h("swirl-stack", { key: '908d04e73127abb6a60565321696055aeb7b5036', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: this.spacing, wrap: true }, index.h("slot", { key: '92193a84dee4a5d13a654e3364950bc16465826f' }))));
+        return (index.h(index.Host, { key: 'b6ac2a4124dafe8fa0fac9395001366271c4d1d5' }, index.h("swirl-stack", { key: 'ae28c6d3a4b70f9da63d30d3cf1b3143b1173fef', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: this.spacing, wrap: true }, index.h("slot", { key: '0d39fa3ecb5e4bd2acfefde88d4459d81a470f9c' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -93,12 +93,12 @@ const SwirlTreeNavigationItem = class {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": this.hasCustomIcon || Boolean(this.icon),
         });
-        return (index.h(index.Host, { key: '9d410315d9ced800c379b7d05e08ecb3e51e3814', role: "none" }, index.h("li", { key: 'c0f8691af8bf97eef0716667588fe5ab65b2c0bb', class: {
+        return (index.h(index.Host, { key: '15cbe5683daa53e7fdd930586616901e11d373b1', role: "none" }, index.h("li", { key: '81909ebc312cef0650506dece925918f151e324b', 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: '82f023dd4af3ceec7b9f890097320482ce97f3a3', 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: 'f3a2e20055bf7ced64f31ca036a3122db78fedc3', class: "tree-navigation-item__content" }, this.hasCustomIcon && (index.h("span", { key: 'b2951e1d5d72b55cae72dd648021651bcd15538d', class: "tree-navigation-item__icon", "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }, index.h("slot", { key: 'a13949bc1b64dbe719e5a8bf24278f875ac4f814', name: "custom-icon" }))), !this.hasCustomIcon && this.icon && (index.h("swirl-icon", { key: '3eb6fb9721525644d4c364dde958e8571a1a627f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '164b0449d9f2112a4d44a7b47a8a906d1599d982', class: "tree-navigation-item__label" }, index.h("span", { key: 'e64fb929e885747c7df166c35109465de8f5e981', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: 'feb686e0c0da93524f7b8b67afceeff986940bd5', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: '0e5dcf23065a2b4d395cd247e8c67181771e9777', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '647dbc1098508387613ec0dbc7cdd5b279af67f3', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '19b8f3c8a2c12448bb1bcf0b1720b0e8e24ddca5', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (index.h("swirl-tag", { key: '65a3fbcf1386227356bf6e278702be28d0b7c880', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (index.h("ul", { key: '4099707c9f4c96c9e2e990f9512c3ff738e1e0c5', 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: '646f5c1b024f567e998d1d9a0c44c66d13602558', 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: '50d2e92949bf8eac2acf001e6c34bb98a731d683', class: "tree-navigation-item__content" }, this.hasCustomIcon && (index.h("span", { key: '1b4926b15eb1255a134ead1da3d3f0a63f0fb49b', class: "tree-navigation-item__icon", "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }, index.h("slot", { key: '3ddde65ec0a56e5efd4da7c50e4842dcd981ebf5', name: "custom-icon" }))), !this.hasCustomIcon && this.icon && (index.h("swirl-icon", { key: '44f249abd5f87cc2d68beaa569dd958cf9f1bc5c', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: 'b8f73dd9e0833b0e80402be5bed0592ba0b07501', class: "tree-navigation-item__label" }, index.h("span", { key: 'e6a2359673d807a723836d302e425c3cf0b7a023', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: 'd1e0c32adf741a596d54b4670e681416a13bcb46', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: '784805dea22d02d0ab9dfc8a47f026c7d1808c88', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '0bcae849ea7cda2e43dfa34f12d0cd7c929e0f8f', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '1e5ad5e807e7fd604b401c12c75004f920192926', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (index.h("swirl-tag", { key: 'dd6d7677e51565fe133b053921241b909fe92f18', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (index.h("ul", { key: 'e0ee7fa24794a6afbce91a7414233fb4d5479944', 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: '36979963b718cbab4349e2d9f3be492641b18fd6' }))))));
+            } }, index.h("slot", { key: 'e631efeab7fdd0010d02efe8323121573b755a62' }))))));
     }
     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: 'd010ffa6eb9b05c6944b73824de36f53c1254bf0' }, index.h("ul", { key: 'bd64eccced945ffbc205013f2e5cc5933eadd11e', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: '35b88eeefc2b1ffc99e65764abbeaec76805ea7f' }))));
+        return (index.h(index.Host, { key: '20456499fb0a0beb4400496eec0bff3582edd360' }, index.h("ul", { key: '5f125a9a7d65c8974b74a8f05782644bdb21b5b6', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: '2b15d95564c65f78f191536cdcb0f88b778bf644' }))));
     }
 };
 SwirlTreeNavigation.style = swirlTreeNavigationCss();

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

@@ -337,17 +337,17 @@ const SwirlTreeViewItem = class {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (index.h(index.Host, { key: 'fef970c07fc3123503e035112fe7e52115ff057c', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: '33bc6518dcca289192ca2607a99f0efa10bba901', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: '55d51b7cc91bf9adb51c5e7f36365ec08012a763', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (index.h(index.Host, { key: '73d1f4a9397356ae42ac6e7eff3a232bc8044b81', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: '43a7b8a02f7e275527b653de1b3f3641947fa9c6', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: 'd39b5cee6d1e5f0d7dea38ee822762b4a81b91e2', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (index.h("span", { key: '6fe53ca04d992b2cef7d5d2cedb5eb119fdea162', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '001696960c2893a8fc881f5c961b18d75af2a23f', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: '1d458f9abae531dc0f48ca8ba57fcd62d0020eb2', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: 'c891f69fc682d14f1502ddec8dc6688453449711' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: 'cde788efaed79b489c1765e14bc08a6e73344efa' }, index.h("span", { key: '3f8f49d065901483b521f5646df4ef3dba8a1143', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: 'e4f9af62617994508af401bc6867cb98151c3b75', class: "tree-view-item__label" }, this.label), index.h("span", { key: '86c3694ec3bfd6a78df23c91abed72900d15f135', class: "tree-view-item__tags" }, index.h("slot", { key: '25a3c909290b92c30f3694bd46670ab3cea7ab4c', name: "tags" }))), index.h("ul", { key: 'ec63119eebc2c54568e0557bb93ecd1337f7b565', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (index.h("span", { key: 'a218ad345f47dedf2fcd839926eb401b9348e8fd', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '48b7647a53a8717336ef3918de98c266bc94a12c', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: 'e6d9298d67b80046e65b68dbfb74f82e35a7d522', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: '7ed530e7233b18e670e53836afc53ebf7bc4c7d7' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: '8f64d41f0514402a26f14e8892887b3d6b693c94' }, index.h("span", { key: 'f6c8c8024ae589a47912a727e7ad4c4539f6d2fc', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '385aa803866c02e6b9a5791747d639984c6315d1', class: "tree-view-item__label" }, this.label), index.h("span", { key: '688e67dd3cfc6d5854d91846781c36bc5853b79f', class: "tree-view-item__tags" }, index.h("slot", { key: 'f3fe801f732e0430a8e6f4f519688bb7025fc673', name: "tags" }))), index.h("ul", { key: '8d3e1b1db911768b5a985e46e3d09d6701a8e53f', "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,
-            } }, index.h("slot", { key: '07d406b0fb59133df2d64b2e8228309a974c3072' })))));
+            } }, index.h("slot", { key: 'b063cb022bd4895bf96944bc6755b7d006c99fec' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -332,7 +332,7 @@ const SwirlTreeView = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '30e6e9f186e102f9f0e963ceadbc4023eb27b559' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: 'a357db78cefc2dbb7ef751c88fa8700518e23936' }, index.h("span", { key: 'de4c7c511dee37fd462abd40ad9637387bf4a6c0', "aria-live": "assertive" }, this.liveRegionText))), index.h("ul", { key: 'efa77a78b995e2e897ade19b111c4a03eed2f7ee', "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 }, index.h("slot", { key: '66201ff8c5dfb3c18f061cc98740f824761371ee', onSlotchange: this.onSlotChange }))));
+        return (index.h(index.Host, { key: 'c4924320ec1fe292cdbc9df3ca6d14525878c32a' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: '637b328cb91975d4507c1f56b8c9ad233cdd07f9' }, index.h("span", { key: '20796768c4c49f56bd24c589351c4b269d9d4030', "aria-live": "assertive" }, this.liveRegionText))), index.h("ul", { key: '204bcb7f17078f4c61ccbc1cad65ee4985a7de71', "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 }, index.h("slot", { key: '834075856c950ca6a493928a4cbba632b9d4dac0', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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: '3022d58149ece77aa8b4ea2e64c971429fec80ba' }, index.h("button", { key: '8f8c1cdeccf74471c7d5bfaa2eb40f7e26da68db', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: 'fef51a137116e2f7cb28443ce9039579d94696b4', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: 'f170fe4841f2038b8489b220d7bc24891bce8eda', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'cce95ca0d643e74ec1b6b586a18544243ebde8b9' }, this.durationLabel), this.duration)), index.h("svg", { key: '3738ed4000e2bc29f51f049d4e4308c07d086ebb', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '02154d538ed641db69c3807af34a2b12aa67ae52', 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: 'c94384ed792baebc0fb1189f8efb750067f24880' }, index.h("button", { key: 'e542039c8ec57832f8a52ff5a29d7912743c0246', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '7f0ecbd0e4664ea5a8946893e9daf7b1bbf5cae0', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: 'cb7cfc478b50b9ed72137e88e98c6a24391a78a3', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'd3e40fdbdcae626c63705b18ca94d83783414f43' }, this.durationLabel), this.duration)), index.h("svg", { key: '1053df0e559d973e45dfe96408503d09fb977ec0', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'af47e8b7762ca7dda99f63cb1be1398fdec5ee38', 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: '1e62cf11ebbb1134c7176a28e6cf91346e382902' }, index.h("slot", { key: '1dd238b1e1c8c133fdfe48af7327407fbab42b00' })));
+        return (index.h(index.Host, { key: '94134fa049f9d6d3d699a2253aa51ca65e7c2763' }, index.h("slot", { key: 'f9bee71bd8e08da65a3dbbad91eda8c6254dd3ac' })));
     }
 };
 SwirlVisuallyHidden.style = swirlVisuallyHiddenCss();

package/dist/collection/collection-manifest.json

@@ -102,6 +102,7 @@
     "components/swirl-icon/icons/swirl-icon-admin-panel-settings.js",
     "components/swirl-icon/icons/swirl-icon-ai-filled.js",
     "components/swirl-icon/icons/swirl-icon-ai.js",
+    "components/swirl-icon/icons/swirl-icon-api.js",
     "components/swirl-icon/icons/swirl-icon-apparel.js",
     "components/swirl-icon/icons/swirl-icon-apps.js",
     "components/swirl-icon/icons/swirl-icon-arrow-back.js",
@@ -452,6 +453,7 @@
     "components/swirl-symbol/symbols/swirl-symbol-precision-manufacturing.js",
     "components/swirl-symbol/symbols/swirl-symbol-print.js",
     "components/swirl-symbol/symbols/swirl-symbol-push-pin.js",
+    "components/swirl-symbol/symbols/swirl-symbol-qr-code-scanner.js",
     "components/swirl-symbol/symbols/swirl-symbol-recycling.js",
     "components/swirl-symbol/symbols/swirl-symbol-redeem.js",
     "components/swirl-symbol/symbols/swirl-symbol-report-problem.js",

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

@@ -56,7 +56,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: '53058b590f5964f77f27c1a2d5dc3e4f6303bca4' }, h("slot", { key: '40aadacc04d62c2ad7dcb2184e3c96cede6b1c9e' })));
+        return (h(Host, { key: '3145ae0baa7f64589d40182d31a0b3b05e26c2f8' }, h("slot", { key: 'e7544fbcc0b50f06e12b52b10f9c0773c0a69713' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.js

@@ -59,7 +59,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: 'f15a0677326d12d4b9d4eb23c9d5efe65611f7d6' }, h("div", { key: 'ccc8c752e65b5325bdab89e1c27e285b6241d38f', class: className }, h(HeadingTag, { key: '15bed907cc15f0b3589263c7837c1f5602e9cb7c', class: "accordion-item__heading" }, h("button", { key: '83152164de9659cf826ac4898742fff772e01860', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("slot", { key: 'e6f97e10880180b1461b15fef1fdfbd6ab00487d', name: "media" }), h("span", { key: '303a2952d526306fe52f4aa1e4e62df8c3b71e4f', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '0f174ee5694050ccc2a05d4a946a954875c31b12', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: 'b1816e439f7b680b3347cd9f214a271eab449b93', name: "trailing" }), h("span", { key: '72b1f1fb9088fb74c8dd0fcd3e2745a6bde25b6c', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '478218253cc30ad3c706fb8bd160e4fc62a0d841', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '18d538ce575e8e50167ab4dd85ca370e5c7d0d91', glyph: "expand-more", size: 20 }))))), h("div", { key: '1389d81ed3bce89f1967bc8d588cc9c89596d66c', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '24e8e2ada9bbade7ad6a8eee6a56d34ee7803a60' })))));
+        return (h(Host, { key: '06999da47eaba55763a447cbbb544d92da636760' }, h("div", { key: '5484984dcea351c0e224ab4796c1460bba704fe3', class: className }, h(HeadingTag, { key: '72eaf7a42cec947e810de91c6116b7f50b0c1598', class: "accordion-item__heading" }, h("button", { key: '98f4adc35db13350b76dbba86c7e22f1bac2aa2a', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("slot", { key: '94a467d23569e323a2dedf7110c91c0f5244f60b', name: "media" }), h("span", { key: 'ed3131d3e0a2c02ffe6925a52045e9c547fac2bc', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '3030464b2a7b19222563bd8a355be5a5af1baca7', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: '108256c9d74efda48d746f7a40037a68420a40e4', name: "trailing" }), h("span", { key: '5c3367b2ee839b214d4a013f10f800de16b57d4a', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '5b5906edb7cf2e24fbb11e405bfe8ea9df65b1ef', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'c4249ab5c3ce934be473771f0b831fabce7cd3f7', glyph: "expand-more", size: 20 }))))), h("div", { key: '10d0287d13bd323e42de265a6ff3944fa9959eb2', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'e8cccd0d6e0f6a3a5911efd964930e5ba4273b73' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class SwirlActionList {
         });
     }
     render() {
-        return (h(Host, { key: 'c6ce9b1fce62151da12fe07c07d338122ceaafa8' }, h("div", { key: 'c040c40c62c3037208cd5790dbc83adf3170f18a', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '35e4e5306fa2f333554893b292302a18dccd0736', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '29cb100e2c4dda657ae43dfcfbbfde7e1803bf35' }, h("div", { key: 'a5894ffd17df4488b41318368d48056991d28c20', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: 'b0cc65e1c60829887ea80531c2487ec664fc6491', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-action-list-section/swirl-action-list-section.js

@@ -9,7 +9,7 @@ export class SwirlActionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: 'b1f48748eb872060713c7cd9e2d85b903a8bc877' }, this.hasSeparator && (h("swirl-separator", { key: '0b81779a74fe4b20a790c9098616b8a0393129e7', spacing: this.separatorSpacing })), h("div", { key: 'a91fa502721bdeaf491e216467c7545fd5522cd5', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '6321d99508e7bccd2590fb966532acdb751058f9', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'bf4859d757a18080947baa4967ccafe904e534d2', spacing: this.spacing, align: "stretch" }, h("slot", { key: '6c681834ca30b1843e883dbca0434c7fcf652e30' })))));
+        return (h(Host, { key: 'c9f4e4a9f5c548ca890ad61c9f497c27f3b797a7' }, this.hasSeparator && (h("swirl-separator", { key: 'b0a7f642ff96f23b69dd7e29cca1b258674ef75e', spacing: this.separatorSpacing })), h("div", { key: '849ee3049d337414b102caca1d00f632b016f5e2', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '2b31af6217534b05b153b1784c2df074665a1673', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '2f4d8c9c1b7d07c63495052cfb2a3edc89893968', spacing: this.spacing, align: "stretch" }, h("slot", { key: '2e07c838eb056cff1708cd6f3f7c913b29c7351a' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-app-icon/swirl-app-icon.js

@@ -30,7 +30,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: 'c58475dbf646a9d006890916e87d83cd9906ee83' }, h("span", { key: 'b0d64cfd31d6e716eb2eae9f08140f476b4ad8be', class: className }, showImage && (h("img", { key: '0c2ae8bd6f3462a4549c55cd7e3b0ebe70d1e1bc', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: 'f352ef23a3396184e88e41894357e6ddb15301d0', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: 'd09c1d1aaa21068830200c308f2b3f720422a96c' }, h("span", { key: '24523d60801284e612620ba2255e4238955d2b3f', class: className }, showImage && (h("img", { key: 'c83f11a2814beac394aad6194af386b8a77200e8', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '00593a27391e4d0df84cf8c387ec1a0c14c6ecb6', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-carousel-slide/swirl-carousel-slide.js

@@ -11,11 +11,11 @@ export class SwirlCarouselSlide {
         const className = classnames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: '3dee76aae503080b212ab304b1b2d4bc11c3fc0c', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (h(Host, { key: '7f5c8e11f7aacefbfa72ccae416b5d94d0f3e9a7', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
                 aspectRatio: this.aspectRatio,
                 flexBasis: this.width,
                 minHeight: this.minHeight,
-            }, tabIndex: 0 }, h("slot", { key: '18395f1c057a4b8adfea8f96599fccdaeade58ab' })));
+            }, tabIndex: 0 }, h("slot", { key: '25cdf099ba287290ef10a7cb40375ca2ea0c94ad' })));
     }
     static get is() { return "swirl-carousel-slide"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,11 +55,11 @@ export class SwirlColorInput {
         const className = classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: '8faa0ba1fdf6d55cd5e9ff8d1cb42738d586a0eb' }, h("div", { key: 'fbc9200a7318669ace362f25510124ced61b418b', class: className }, h("input", { key: '7837f8b509251caf79d46a6341cb0e43772a246b', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: '256e94f88ee8b0ce91d3c22bd5236ab7aa2be07e', swirlPopover: this.pickerId }, h("button", { key: '1b0b3b76331731d3c1af0d73ccb6dde06326184b', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: '5a710686ad471748049e2246186febb4d7a3fd87' }, h("div", { key: '6f9beacf28b62e48db30001e9586ca7248a35ff8', class: className }, h("input", { key: '848bb9cde49f688a4007242a0900cc3755a54bba', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: 'e400c9f79451c30009555c451406260090925d41', swirlPopover: this.pickerId }, h("button", { key: '546f4a60eb80aad2e813b4e034c3db2af1bbbc53', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
                 backgroundColor: this.disabled
                     ? "var(--s-border-subdued)"
                     : this.value,
-            }, type: "button" })), h("swirl-popover", { key: 'd93b43a8b6d680d7d52743dde653a8333d67d514', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '3189ed30ad815e64b265e1f3c3b4464e5799b7ca', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'e2cd1e63d998d906b824c5d0c8e4a6eaedfe23f3', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: 'f6ba4b19ebeed724563ce771efeb446d7a0072bf', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'ed091dbb4c85fb35be4b64aff43c95f599be3729', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '21e2f5281d5e1f6619a9ab1b637cc7ab770aac59', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get is() { return "swirl-color-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -158,11 +158,11 @@ export class SwirlConsoleLayout {
             "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
             "console-layout--hide-content-header": this.hideContentHeader,
         });
-        return (h(Host, { key: '6d3d76b3bbe059e36b83d71bef04189d9bf52697' }, h("div", { key: '8be9369affb1e769fa088af15c278d5bcef3239c', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '18f96ffe0cd4531fa1c1432571e9865c81419519', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'a6ca9595440e044f01e9eeb99a02669006651377', class: "console-layout__header" }, h("div", { key: 'eedf50754624ba62d2dee201caaa4c722472e867', class: "console-layout__logo" }, h("svg", { key: '126b0b43f34bb3b4b17ce55f443a28a9ab920bf1', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5816b1cf9245a21f410b78d4df44be804f1f8653', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), h("swirl-text", { key: '94260711560885dd241e2c982d41a6a445ab500e', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '02f8498f9cc229c3f2264e47df1a524033bcdc3b', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'ba5909d095b6287796877cd96d795f93dc440512', name: "navigation" })), h("div", { key: 'df6cf86f2df40b1311d7e8272b0aead808001358', class: "console-layout__user" }, h("slot", { key: '71d379979ed62b36ab090e2ee7275f84b2348738', name: "user" }))), h("main", { key: '79b024113f1ff98be044b1ff439b060ec427ba2e', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '11c0da8a1ceb9f1114b31fb2f253ef2cedb6e841', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '945c13dc3f1a137f67dc4dd23372abd59303dad1', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: 'ade2fdb3b97bca5b11d3f51960130554102eaf93', class: "console-layout__app-bar" }, h("span", { key: '3763982c2893f0e9f4051858cc13348b9ad87464', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'adb4797947a8164a439920cf46b78c01ba71ee6a', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: 'a4158e13d33d78b4d27fb2024290f11c49fd0e5f' }, h("div", { key: '3f1291ef4b8ac9828151a09e07657b68954b678c', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: 'cefb587ec5daa8096a4c3d3f13344cc440e5f97d', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'ca149c639283c4bc8e733ea1cf8fa1619ee0e434', class: "console-layout__header" }, h("div", { key: 'a59ae357c46b8d35fc3f5c8a99f1ef753008327c', class: "console-layout__logo" }, h("svg", { key: '42c6c8e6250510d5d0593b202bc9d2cde0a9590d', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '64900a6758a8d12ee196ab708e6d50d836a52f61', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), h("swirl-text", { key: '57d5701d08b4c53af4de4ca3284b7e04c4e0e54b', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '76dab062b840632dea8308756703bb3e119f2081', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'cf89e7ddbebb6e87119368dbfff3c8295868ce27', name: "navigation" })), h("div", { key: '5d49517e16eff2f164b945f48dcbd6407bce5031', class: "console-layout__user" }, h("slot", { key: 'ff73023ebb64f240ec9a782ec086b4aebd555f34', name: "user" }))), h("main", { key: '5d9470b3d8cb91853c0dedfd0075c7f90c2dd439', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'a6a5bd4c6ca674ebae0cc8e97fb4aa47265fd2cd', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: 'fbbde6af44031e9b51af81972d5a0ca07dc639be', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '2265183fea6bf47f09cc019ecc508e7168c17029', class: "console-layout__app-bar" }, h("span", { key: 'f7e7c811938694c46a473001ee0a2f8937395078', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '711f48b45b46753f118a0463f2304eda2f9c0a27', 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: '888442817c242245c8a4254b1fcbdac131e9664b', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '9a42899542bf5a8f3015e4a9830adf7e82b16602', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '368709207382507b0f3acc7eff553af7fd21ca12', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '1b818fdd0857179d2571b2c3636e4ea253670c71', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '997508980962020a361281a61acbda609dd02f5f', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: '597ee6188a39738b85cfe5b8ee1cff5e81fc470b', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '9dbf4f8f04e1e32eac104d324448d9678122e141', 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: '017cca3478dabf0347de9c906da9639dfd55a186', class: "console-layout__heading-container" }, h("swirl-heading", { key: 'd2799b47248282463d9e53f81870d3a644c48778', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '758441b1390f2e7014b25123d978f0b3f37dd09d', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'c1da0ed02c4391cd1134e29380df6999432ed390', class: "console-layout__heading-container" }, h("slot", { key: '20b72fc9bebfe7fa55272d3743448b75cdbec86c', name: "heading" }))), h("div", { key: '631804252b9d02e7e77c447736f82c72b86c5b12', class: "console-layout__content-header-tools" }, h("slot", { key: 'd8111f725736d6269e617cf6f69bf1c2a4082058', name: "content-header-tools" })))), h("div", { key: 'bc36dc116663e54fba88653175ea494b9746503d', class: "console-layout__integration", style: contentStyles }, h("slot", { key: '563651e53020e12c2d936ab8c0585a9939ea2dc2', name: "content" })))), h("footer", { key: '1fbabaa24e0a457835e0e173542c29387d834666', class: "console-layout__footer" }, h("slot", { key: 'e7444b9ee022f3a1bb816fe4b7c32e25c9e07d9b', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '0ab722bb6bc57e4b3bc2fe11e771f6f796c7fd0e', class: "console-layout__overlays" }, h("slot", { key: '86312704fefb36b2b9f8d5a24a191c588acf23f1', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'b232051bf3cb60ce36bb2159a11853dd139168c0', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '5ccb29bfef3aaae85ed8c8bf818665c14a86b2a2', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'fb402a6f585112cfa1115274982b2f8e645ce44b', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'fe702ca29858dc085ffdd02e767098dbf85dce9b', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '8c0bc9d8f5b68e176d166620e5114d15b52c42f9', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: 'a3f358a3e96dd6e9d818a390516b6cd67d0c6aa0', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '1b7a95dd315ccd55f1bb1281b54eb7876b1f7852', 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: '596834d4d9308e355f8be0bab370141448b28e3c', class: "console-layout__heading-container" }, h("swirl-heading", { key: '91e2b51e6fe28d9974ab4eb62ceee52be660fc1b', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '4baf247b67882cbc726a7b741dbac737ed2bc7b6', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'fec65282ac397f9a8955a568a0c11d162ade6a4d', class: "console-layout__heading-container" }, h("slot", { key: 'db73df06bc3f6618f262b1a79053a0d1054f1a72', name: "heading" }))), h("div", { key: '148cfe997f855a7ce9c24e2567bb3336be629e67', class: "console-layout__content-header-tools" }, h("slot", { key: 'cb087749b934ccfa488781874671cec70f82b83d', name: "content-header-tools" })))), h("div", { key: '68d29de55d12e3a38aae91cbd0b20b7d21e83b3a', class: "console-layout__integration", style: contentStyles }, h("slot", { key: '0d509ae9c95910196c160c324c93a3029bec3a76', name: "content" })))), h("footer", { key: '958b494dc87397b8909edbdd3c71a9a66767e6fc', class: "console-layout__footer" }, h("slot", { key: 'c852db01bc215f6b4da9eef67163259a3ddfaae3', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '68aebf8d1319138ff2bf530111369746ad17781a', class: "console-layout__overlays" }, h("slot", { key: '0312cb654e3b771c7ca87319e7ac44e2d3aba4a9', name: "overlays" }))))));
     }
     static get is() { return "swirl-console-layout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-data-cell-stack/swirl-data-cell-stack.js

@@ -28,7 +28,7 @@ export class SwirlDataCellStack {
         const descriptionId = this.description
             ? `${this.headerId}-description`
             : undefined;
-        return (h(Host, { key: '9816cd9a28f4771294e607d37f7eafa7bbeec397' }, h("div", { key: 'a4f70e0edf996c0502f17bdc7cad8de297431e76', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '66ea79f97995eb38d609ac76681b60c8d2986aee', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: '170fa4424c37ede46d21c98fe9a0a3e30e7dc6ad', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '8b533a3efc877d00f2b883b4bd97f5ce3ff0d82e', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: '09b7ab8c1916e3eee5dc319a82b2cdf2261f0507', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '2d543e439b20b707cac55899382b4da1db83e867', class: "data-cell-stack__cta" }, h("slot", { key: 'f425a418b60908285450b4714f941272e541ad9a', name: "cta" }))))), h("div", { key: '14ba4e4c794c2d6bd27ff4dffaf7241139a1d694', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: 'aa91bc50a03d16f0ca0ff7026f41074200480053', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: 'c3da49e9b7790874f8360fee4d0314204e79f56b' }, h("div", { key: '841705fac518ef6a01525df95dba2cbdc2d5a3e0', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '11ae4c9b357be3b834c31bd7eda0e642fa3ddf23', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: '3a75787b65c88d645535b63b4ca8679898399cce', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '65bc8b13f560ee9adeabf18c5fbf35623e0542c3', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: '0742e498e5deb487bdb1947aca8ae92b74137bee', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '86fcb90372ad2e9179389ce69735d812c1d21952', class: "data-cell-stack__cta" }, h("slot", { key: '385924b0cdf96c2b76605268b30eea4be3f510cf', name: "cta" }))))), h("div", { key: '284c754322880cfed92c85534241be24af898bc7', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: 'd8e255560793646082e0552b75dddee75d6f1051', onSlotchange: this.onSlotChange })))));
     }
     static get is() { return "swirl-data-cell-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -218,7 +218,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '3cc04c80b9e8be4aa7461f340d10705220751b92' }, h("div", { key: 'f07cab3f83d59c05e86926490893e0455b88bc48', class: className }, h("input", { key: 'e7aa2c4be5019070fdfc0819354528600a8c5a1a', "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.isInPickOnlyMode || 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" }), !this.readonly && (h("swirl-popover-trigger", { key: '3572f4e7b818083b664f6f976a936171ecfc209b', swirlPopover: `popover-${this.id}` }, h("button", { key: 'bd20e95c764b32d27af2230ddcabb48351008f58', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'f51649c06b04c5873fffd4fe5866f79421578b84', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: 'edcee514ccc63bcf098d6669bdc0c92d106cc0e1', 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: '0e348d65635e249958e274bd7d2e74f76457ff8c', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '837329ab8c80cad44421fc19a79124c684846e8f' }, h("div", { key: '7116bfaf64a4b4da2eebe5851a881bae29581174', class: className }, h("input", { key: '3abfdb8840ce728d0f75e550482aeddeaa854f44', "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.isInPickOnlyMode || 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" }), !this.readonly && (h("swirl-popover-trigger", { key: 'a6d3c22092affdc5370fd93009a70907d1bd651e', swirlPopover: `popover-${this.id}` }, h("button", { key: '42325d18293a1ffcae71385d5d190c9d8419e527', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '6eb5d29bd5bc825cd30ddaf21df1bac22fae09dc', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '293941dc84a9a953e8a8760262380c9a9b567ece', 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: 'c45bd7a0309af4c8e8080655c1dd3f855c9751ed', 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

@@ -39,7 +39,7 @@ export class SwirlDatePicker {
             "date-picker--fixed-max-width": this.fixedMaxWidth,
             "date-picker--fixed-aspect-ratio": this.fixedAspectRatio,
         });
-        return (h(Host, { key: '94dea4c449be4b75fe25afe265f3adf2ee2a94d5', onClick: this.onClick }, h("wc-datepicker", { key: '7a84b9ea132cc0530c2c40fd698ac76b9d9df125', class: className, 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: '74295e59ccb106ea49afe81c3f3e1a0edcaed1ad', onClick: this.onClick }, h("wc-datepicker", { key: 'dfa153a41ee7be0c3cbd93e418ea8acc37728fc4', class: className, 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: '45ce3260bd1d0e428661b0552e6733cd6c19294c' }, h("div", { key: '05f2a433270da1e71c48030234203f186fd9c52b', class: "description-list", role: "list" }, h("slot", { key: 'f706ce03655209c8eab5d8183ea277e93bd33459' }))));
+        return (h(Host, { key: 'd99e56b1624faf547f56afd1614693b3f888f359' }, h("div", { key: '852524eec75bc67498995dd8d609ce976fbb30ff', class: "description-list", role: "list" }, h("slot", { key: 'ccb5d7aed0a3f7681e20a9a2e2d1cfb2ec8ce7ff' }))));
     }
     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: 'c2d6fc6460b890b60e96a42a81f0f4178e5fa452', role: "listitem" }, h("div", { key: '9af840c914cfbaa846bae662a2320892cd6f0a45', class: className, part: "description-list-item", role: "group" }, h("div", { key: '9746994b3083160fd75f393cfc596e81e3f4415e', class: "description-list-item__inner" }, h("div", { key: '1af4b2d0b74d49309ce803a01bc5e4dfea6d0696', class: "description-list-item__text-container" }, h("div", { key: '94c46c59e768cb8a54da983b6e57b218fa87f1a3', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '58b9b9c472938c8f0a2de69dd4728dcb9cc942ea', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'aaaeba3570e880a5fbf9377546bdbb72e1674c96', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '30f862c7272fe9e23487c27bcbc6948a0acf6cbc', size: 16, tabIndex: 0 }))))), h("div", { key: 'b216007cd1bbccad5eac8ad3f977e97c89539904', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: 'b179b73e7bcada25cf48bb6fcfb0cb092224838c' }))), h("div", { key: '70e40cb7bafe26c8af4b0370371715849c7cbf8b', class: "description-list-item__tools" }, h("slot", { key: 'cff71a961b4e71b0266e864cdb92da155bbef6f4', name: "tools" }))), h("div", { key: '390451fc8a8d2ca78150eb5cf9b3c8edb4ee8181', class: "description-list-item__additional-content" }, h("slot", { key: 'c12a5a0cfd7511f4270ab1a54bee2fabff916590', name: "additional-content" })))));
+        return (h(Host, { key: '691e405b49aca541fb4bed135777bff0e01c1518', role: "listitem" }, h("div", { key: '1893cfeb94d8566421118771ffe453e831fe79d5', class: className, part: "description-list-item", role: "group" }, h("div", { key: '175f355480d698cc436c30c22d9df17cd6b4b6f5', class: "description-list-item__inner" }, h("div", { key: 'f5cd0f453ca42eeb4c151553c2046a21ae1c52b1', class: "description-list-item__text-container" }, h("div", { key: '7025a2c437978b9ec20b545db1e861176d57462d', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '49ecee8329cd7b67be4cf971cc11a74086722d7e', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '970c4ebea40b819e00b05c2a9da584eb3f79f59d', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '9f20afcc571460d291d41bcaf1bf6a78ab0f664a', size: 16, tabIndex: 0 }))))), h("div", { key: '8031eb733dccc338f06601fde1a0568f9caff4c6', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '8e76b7e5fce6eae82471cd101bfa745936840d1c' }))), h("div", { key: '276eac570cb0d30a143577842cfe2d96a74ae43b', class: "description-list-item__tools" }, h("slot", { key: 'b26b1404ca1dd00b84fed093feaf55181af3f99a', name: "tools" }))), h("div", { key: '7f09f5fc316fe662ac7e1582176912a5b214cf6d', class: "description-list-item__additional-content" }, h("slot", { key: '9ec670b8676de6c0e65a7fafaa0075aee20251d5', 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: '1e40d34ae4ce88e9ed4d68f38f812266f4caa663' }, this.size === 12 && (h("img", { key: '65bf3fd30437260f8323d8129ed0b85d1279fc91', alt: this.label, class: className, height: "12", src: "emojis/Clap12.png", width: "12" })), this.size === 16 && (h("img", { key: '096c1c6c7230874177593a2cc736c68c58419255', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '87e86f4967c75fea89b7a6f0ed317ee638839e77', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: 'e8d7c8fb30ff6180b82658e9a4ce6846ecddfda3', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '17ccf169090fdde4320217cab42c7df451bfabd5', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: '09d0e75ba81401110070a6235e73b69a10cc9722' }, this.size === 12 && (h("img", { key: '7fd2166277cef666b5adaea710f5c9efe0230f70', alt: this.label, class: className, height: "12", src: "emojis/Clap12.png", width: "12" })), this.size === 16 && (h("img", { key: '7b622b06b4b92567627fe648023b4cba2240d648', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'c07c2b69710291f219d33b0ea95181024115bc87', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '2ea22e12c46ee678027850729d116f02d790e4c3', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '1b2696387fffdb96705851e984a3b3c5597614d1', 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: 'ec7697abed60d3d46cd745033bc9e49ffec76928' }, this.size === 12 && (h("img", { key: 'd924de30951b66e7a632ce46646d483564467ee1', alt: this.label, class: className, height: "12", src: "emojis/Happy12.png", width: "12" })), this.size === 16 && (h("img", { key: '81ba2238bc8db1b2cc2f735370d27025d74b4dce', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '64a38868485da28835e5defe9ef6d4cc47153e72', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '2429fa343c0dbf7781e9da23ea257f94612c2b32', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '586f6b35188b225f265c45a03cee1a933f29a506', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: '80090513ac9069a7fbe2b28da9748de47733097b' }, this.size === 12 && (h("img", { key: '09c882e3e5062d45f689776164a5533d42b91b11', alt: this.label, class: className, height: "12", src: "emojis/Happy12.png", width: "12" })), this.size === 16 && (h("img", { key: 'e208f59aefdc566e1f9dddbd9ace985e923ef8ce', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '6dea6b7480b27a84c3d1c62b76cb86358f95bd74', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: 'e59b270ef54416aeca97e23ba500316630afdd71', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'f543fd1d1610d4dbf430e7e78c0bd032182b9409', 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: '75d9e1efe7a39179eb41077b1766408b47bcc56e' }, this.size === 12 && (h("img", { key: 'aa2c998f0d8c2860bb6dc7129585edc420cb5fe5', alt: this.label, class: className, height: "12", src: "emojis/Idea12.png", width: "12" })), this.size === 16 && (h("img", { key: 'b7552aa60f5eddf89039006c234ba11bc823b677', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '2da9c4e70f3cd522b01dd6b0ca56d52771a24008', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '1ae5581d739792757875f8ea7fdbc29948ae5161', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'cb358ff37b2bdff72d00c3ee2d999fb0dd67b003', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: '37c5f4cdd2bf38033322619bd81ff159f03a9944' }, this.size === 12 && (h("img", { key: '391fb124dc1ce18fd7f7465be58317fff5afcfd9', alt: this.label, class: className, height: "12", src: "emojis/Idea12.png", width: "12" })), this.size === 16 && (h("img", { key: '91dedb3111d0e10fb06afe0f2ef6fb9358bc245d', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '95a760e723f4ddb629ca9ac42d24d81b41654f51', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '9d7943465e323ffe8ea17b7515067d734c456f97', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '6f4118f0d62e16df539e9afa0dddad14eb5398b8', 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: '6ef69f5611b75ce5d972fc5eb1a3a2a373cd73b8' }, this.size === 12 && (h("img", { key: '38a4d6b1e319d88d5765bad880e51777df4edb37', alt: this.label, class: className, height: "12", src: "emojis/Love12.png", width: "12" })), this.size === 16 && (h("img", { key: '955040b99741a7bee5e13d62f863501a68396ef8', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '81df6deccb285ae0ffe080ba8cb4715904ff9ad4', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '2ee8c1ef6ef0eabae8ef648775e14d36e11f1f26', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '89fd476fcd42e3e5996a5b3fbbdf6ca199a527b3', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: '52fe8e0c6cc6291378b6b77caf35f7a068ea5f5c' }, this.size === 12 && (h("img", { key: '5ad8653c81b8b5195fcd77e780fa9b703ec1df47', alt: this.label, class: className, height: "12", src: "emojis/Love12.png", width: "12" })), this.size === 16 && (h("img", { key: '4bd94a048ae59efe31e1b10faf77a600f70146b5', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'ee273c86b243232c3878e619382a5fde8f873825', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'b0572d8d96f43b2f8871bc6400a79a5cb4a03752', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'f004b5e056232f11c8466b0c5e22176fb8fa6adc', 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: 'ca1150443dc9121e2569924a732c3eddab4726b1' }, this.size === 12 && (h("img", { key: '6f0d526d1dba6e40295cf4780bc28dc21b083a66', alt: this.label, class: className, height: "12", src: "emojis/Sad12.png", width: "12" })), this.size === 16 && (h("img", { key: '0eac5e3c0289224ac55cd5f134ce3e3b8cfddd29', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '0790da98eec76f42bb92b976ac4f4647028b87fe', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '81aa107e3178756cb67d986c90dd06a294037503', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '680880b635f8b30098cd040f5a602c573e63144a', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: '47d9ed2e330074aef803f9be2cbf77157cfc2b92' }, this.size === 12 && (h("img", { key: 'b097396c4977e40026cdf05d9b45770fd135d449', alt: this.label, class: className, height: "12", src: "emojis/Sad12.png", width: "12" })), this.size === 16 && (h("img", { key: '0871ba6f45134cff8675842727ca483082a6c546', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: 'b3d040fb541c979b5fd27914a9153b30d0de540a', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: 'f9ecdf021674237c940bc1de9152c41a206d19e4', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '3617ed20bdab93f68541650bcf0a49df843275d8', 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: 'e93d201248189e4e0ae90055238732e14946fa19' }, this.size === 12 && (h("img", { key: 'ce5898d22d03398d082b5b93f1aaccb5ab8c4a62', alt: this.label, class: className, height: "12", src: "emojis/ThumbsUp12.png", width: "12" })), this.size === 16 && (h("img", { key: 'adb34ca1e78fed40ccb09c5835153b54cc22778e', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '3d9fe55d5d4e811b000856655845ab090dcc41dc', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '5effd482733a2042e048a4f6518cc390e196051e', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: 'ac07e04f252a0615d553b71f459ac5ef5294c941', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: '3b06581cfa8cb93227b27a93c65dd0f24d4cb67e' }, this.size === 12 && (h("img", { key: '03e7ce514ac91d627261812ff064da07e83886c2', alt: this.label, class: className, height: "12", src: "emojis/ThumbsUp12.png", width: "12" })), this.size === 16 && (h("img", { key: 'cabdc8aab8630ab6e0516f9f44b99fabc3b149ac', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: 'f10866db18204bb7c552be5550f90a341b306961', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '43f8f0f137d7d7c667d343f05d0f85ec8055257f', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '0d0a9d735468f45270f69e43d9f96cce67ab4221', 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: '626e4ee595c80ba3fa26b0ed77bea219926cacb1' }, h(Tag, { key: 'dfac405bcbc4c2c61beb42ee262e53b51feeb919', label: this.label, size: this.size })));
+        return (h(Host, { key: 'd40950bf0f4871346965b3f3a7dfe63f26a32275' }, h(Tag, { key: 'af4106b9313f338496ce1069fd517460702feea0', 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: 'b973b4cf699ba4877b16a8ba3f2dcec8c286c447' }, h("div", { key: '1139962097340ed99f67c4f26122584235766e29', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '4dcbb2dd78273396bfcea5f0d7ff848a7e590c00', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '380c3905e6f14e789f5c29962f43595ac2ea4925', class: "empty-state__slotted-illustration" }, h("slot", { key: '4b1d2bc172445f46e2128fab59b667eff1838afd', name: "illustration" })), h("div", { key: 'e6cb062dad9d21fa574dd993c5d7939ba9b964da', class: "empty-state__body" }, h("swirl-stack", { key: '9677bf328269e4c566357e862dd7d512b01f7924', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '491fc1b0b3f77dfbb46ce0a8e2db9adf991d07cf', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: 'ad5aec3111a8939b9400338291e51b0619c73169', class: "empty-state__content" }, h("swirl-text", { key: '8786c7c5129db51dad58bb1bc4041377cf53d322', align: "center", color: "subdued" }, h("slot", { key: 'b7a12ffebb1c0d6feaa0586496a0e676863884b6' })))), h("div", { key: 'dfa6f82451206763837c553d62e1eb4d34172745', class: "empty-state__controls" }, h("slot", { key: 'fd231fc225b6f8b9e92f3f7ca65d2e53e118bd5b', name: "controls" }))))));
+        return (h(Host, { key: '853836f30b1bfb921232c7acf87735fbb5a6c3e0' }, h("div", { key: '1d0f3dd2ff0bd8a0404fa7bfbbcd16381a4b29ca', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '88e1a96eb9910d2ba127c19eccb29a5cfab48817', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: 'bdea01549602b808cca297851d51bda97b00f6ef', class: "empty-state__slotted-illustration" }, h("slot", { key: '905d5f4db1f7049bd97604be3e8f5edf5e537b31', name: "illustration" })), h("div", { key: '486a5b4b2c0078f32910aa9e943e78a7b8549b8c', class: "empty-state__body" }, h("swirl-stack", { key: 'bb1367101e86b039c6d41216386e10419f788b4a', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '82750fa1611ba1e1f42941bf486a814ee841dab3', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: '2bc8645cbf8ce242bb70379cf7c2b98a36570bc3', class: "empty-state__content" }, h("swirl-text", { key: '40b2322a160f8cae1f7cfd07d78f7b240abddb11', align: "center", color: "subdued" }, h("slot", { key: '062f564846d5b2c249037852ba2fca01a6843c58' })))), h("div", { key: 'a71ab053e9d303f865f0018a9a658706f411415b', class: "empty-state__controls" }, h("slot", { key: '2a0c344c987f2e3a15ac380241878e1de91a868a', 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

@@ -109,11 +109,11 @@ export class SwirlFileChip {
             "file-chip--no-actions": !hasAction,
             "file-chip--no-suffix": noSuffix,
         });
-        return (h(Host, { key: '7ffd07e38c155e7f70258088b5c3f593fb957d04' }, h("span", { key: 'f4ca6b7e58890d0dc1a9006c8c28eda86e64dbfd', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, h("span", { key: 'dda7f1612e92a45f54aac0ae5fb19a49113e84fa', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '7f016dbb7414ab330afa6053b640aa1843ceb2cc', class: "file-chip__info" }, h("span", { key: '3aecd4189d19e31474fba1214658007cd45a5d99', class: "file-chip__name", title: this.name }, this.name), h("span", { key: 'bd1aeff1a43fda9bb5f17d99141fff90c843ae03', class: "file-chip__suffix" }, (this.description || this.loading || this.hasError) && (h("span", { key: 'e1ed1644a3bf7149bb556ac045195a557b6da144', class: "file-chip__description", role: this.hasError ? "status" : undefined }, this.hasError
+        return (h(Host, { key: '93e05be20f2690e89acb473de91c999e9ded3db8' }, h("span", { key: '1972b6e3da4dc591216dab6b1b75a42d315151d0', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, h("span", { key: 'b51bc7c2d63e4bbecdc12a2bfd2e1ae064720d84', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: 'd1de1325fd7fb583732f2034b1437f0dae83a83d', class: "file-chip__info" }, h("span", { key: '946f72fff9e235c0675e929c263a3f66589e4bb2', class: "file-chip__name", title: this.name }, this.name), h("span", { key: 'd13505c304050f58ec5d25ccd0ca0d6d61d84185', class: "file-chip__suffix" }, (this.description || this.loading || this.hasError) && (h("span", { key: '9756de3b45ab526addb215d7bb6b904f110cddc6', class: "file-chip__description", role: this.hasError ? "status" : undefined }, this.hasError
             ? this.errorLabel
             : this.loading
                 ? this.loadingLabel
-                : this.description)), hasAction && !this.loading && (h("span", { key: 'fb4e7efb492cb7e0a405d8cfcb6e806240619f59', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '8f81e70e5e589228620bc46142a296dbc7be9ae8', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (h("swirl-button", { key: 'b64f629efd950aca0a1fe8c7201f6e6f0a16c1e7', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (h("swirl-button", { key: '4971f424dce6897b830129c01d193bf93939acc6', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
+                : this.description)), hasAction && !this.loading && (h("span", { key: '65121a4eeef8e76f7ce39ac66393a2229c27f3fe', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: 'd373ba6284fa1b309af83bf65c5ae54cdceaaecd', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (h("swirl-button", { key: '2d7ade06469bf06e52cd5a42a60c944d3c24c7fc', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (h("swirl-button", { key: '6d469aed36305753a5f74e7330f41e84a44c1ed4', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
     }
     static get is() { return "swirl-file-chip"; }
     static get encapsulation() { return "shadow"; }