@getflip/swirl-components 0.254.0 → 0.255.0

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

@@ -36,7 +36,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'e598bbf01637b555d81979af8169e5765ba6ab80' }, h("slot", { key: '29e4116f06f3337fb61f1bd6163bdc51a019bc0a' })));
+        return (h(Host, { key: '004b1573b2075e23a5b1a0a154c4ec1c6f5d27be' }, h("slot", { key: 'b2f412f6020ef6d8d90bd837091d4e5896ecb38e' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: 'd20864b7a190aa60d6e84fd9566b76f0b225ebbf' }, h("div", { key: '0495c32558ba037a6a34a3b471d535cc79094319', class: className }, h(HeadingTag, { key: '179b731e15cdea46baf0e62c7aa0b3a80f6eb276', class: "accordion-item__heading" }, h("button", { key: '52fdb8aae9a5919a193413066c1dcd8f07fa6f03', "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("span", { key: 'e5322713bebd4af0973077afda7b1e307e4898d3', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '308fcaf2aa5213a78bbbbaa85855c97c6128bd4e', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: 'a2c873f03eb89b908d3ecb033dcb2351e5b3ce14', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '8ca407506f305e7178ffd7a397c13b35d650916b', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '8b2231c486f76b21b9a31c36b533caac027400c0', glyph: "expand-more", size: 20 }))))), h("div", { key: 'c77f0e3c85f73ea225569d1e9b03b1a8574224fb', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '5bfe1ea819a7d4c271251a26ece6988fba765745' })))));
+        return (h(Host, { key: 'c6d9fc10a2ac8f527a9d808287041166aaab4870' }, h("div", { key: '234903b1094c4dad2ca0c677fa483d6eb9fc10ba', class: className }, h(HeadingTag, { key: '6ec1f491bc0abecfbb6366cfc85ee0ce68f5dde1', class: "accordion-item__heading" }, h("button", { key: '84fcf94c50141cfc9e6c40d3187b2c20d65ad8fb', "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("span", { key: 'cdbaf4f3ebdde6ee4a0a756bd69c4c0c13dbba03', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '85564f3d319e46d89cca9c6f5b64e2f087394ac4', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: 'f7e739a84c489e399a56dfd7ae5f270044b3b17b', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '8a8de5ae8958b1f63af03e00772b02f1d6b7e801', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'd325057cd997f9c88adfb3bc44ae3a6287410ce3', glyph: "expand-more", size: 20 }))))), h("div", { key: '43c47bdf78e3889c20e19cd752eda010d83c4218', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '6e89f9bdd0f1226037a97919445dc734fabc99cc' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class SwirlActionList {
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
     render() {
-        return (h(Host, { key: 'f130ed86606be59c58c0d7e1166ae6d9d028dcdf' }, h("div", { key: '770e6691bd13ca71fcb3f60746d8bccc07a19e83', "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: '08ee019835e7a054d63accdff30d7ff70999fe2b' }))));
+        return (h(Host, { key: '9f6c3f33370fb9a3ed2dae5b032ed6aa2516f7d7' }, h("div", { key: 'ee3535a465baf0ebe9c37cbb6424f55d764a8144', "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: '8b9de9551a41afa6f2b74ec787501e078881c334' }))));
     }
     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

@@ -7,7 +7,7 @@ export class SwirlActionListSection {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: 'cbbdfd6f7fc5591c7cee2229bf6b6c797bb74cc7' }, h("div", { key: 'b1e1e3f98314fb21e32f42b9a8e14d3f9becafc3', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'f0c50d2dc0d094c31a08589d69c7d0170c1ed9c5', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: '56f127cb581b2df701ec0ad184dfb986c28e4f55', class: "action-list-section__items" }, h("slot", { key: 'dc64d1341deddf34ce32d44599b33b82ce47dab7' })))));
+        return (h(Host, { key: '8cae6b24fa63e2a4293dd290d046a181acec4114' }, h("div", { key: '938b89ab19e4e864964841d7c8792a88fb9715db', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '3f0cade363242d3b2abf07c17adadaff8985d54b', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: 'ae351506f15b64702e5163f3ae3370e542f51552', class: "action-list-section__items" }, h("slot", { key: '106c08d0dd9c83d2e6e54e02e71763906aa2946c' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: '949e4c6f89bcf570e23ccdb2dca62b8fa590b595' }, h("span", { key: 'faf2ed8b84352e57267a95a3108773e8b42ac09c', class: className }, showImage && (h("img", { key: 'db28155e17a2eadd28f015b581af873959dcc0e4', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: '2ac3b8de21200d8866694e985a0737b87da891dc', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: '6842caf131f2b105538cd14e25a0f8bf0a44c26a' }, h("span", { key: '331a8d940fa7d65f523cbc2aba537458296a63bb', class: className }, showImage && (h("img", { key: 'a17f3b3945401d487247e6ac92beb8d1ddd3fbc1', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: '944dafe88937ac7af4bc65e7eadb006c4e5981d4', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class SwirlAvatarGroup {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: '0fb00cbec4533c9dba3678c2ea19e3e10feea383' }, h("div", { key: '8f51d3f11ffec646fbdfc7c847b6119db7fa0c0a', class: className, role: "group" }, h("slot", { key: '790a777b8a79a1fb004971451ebb4753e1bd6435' }), this.badge && (h("span", { key: 'cd64c635336fd04c1fd3236477518d44f47c630e', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: 'f499e91465cf9179cd6e3139f4c21f6bb0f7dda5' }, h("div", { key: 'cf2868c85e93991f7c850f016d3151f64680e5b8', class: className, role: "group" }, h("slot", { key: 'f1606a310a7a63fdd9c764ae6d3c8feddcd7b6a1' }), this.badge && (h("span", { key: '3002d8955d5c68a683f85ce7c68a727bce406c1e', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get is() { return "swirl-avatar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,13 +39,14 @@
     background-color: var(--swirl-ghost-button-background-pressed);
   }
 
-.button:disabled {
+.button:disabled,
+  .button.button--disabled {
     color: var(--s-text-disabled);
     background-color: var(--swirl-ghost-button-background-disabled);
     cursor: default;
   }
 
-.button:disabled .button__icon {
+.button:disabled .button__icon, .button.button--disabled .button__icon {
       color: var(--s-icon-disabled);
     }
 
@@ -80,27 +81,27 @@
   justify-content: flex-end;
 }
 
-.button--variant-ghost.button--intent-strong:not(:disabled) {
+.button--variant-ghost.button--intent-strong:not(:disabled):not(.button--disabled) {
     color: var(--s-text-default);
   }
 
-.button--variant-ghost.button--intent-strong:not(:disabled) .button__icon {
+.button--variant-ghost.button--intent-strong:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--s-icon-strong);
     }
 
-.button--variant-ghost.button--intent-primary:not(:disabled) {
+.button--variant-ghost.button--intent-primary:not(:disabled):not(.button--disabled) {
     color: var(--s-text-highlight);
   }
 
-.button--variant-ghost.button--intent-primary:not(:disabled) .button__icon {
+.button--variant-ghost.button--intent-primary:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--s-icon-highlight);
     }
 
-.button--variant-ghost.button--intent-critical:not(:disabled) {
+.button--variant-ghost.button--intent-critical:not(:disabled):not(.button--disabled) {
     color: var(--s-text-critical);
   }
 
-.button--variant-ghost.button--intent-critical:not(:disabled) .button__icon {
+.button--variant-ghost.button--intent-critical:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--s-icon-critical);
     }
 
@@ -134,41 +135,42 @@
     background-color: var(--swirl-flat-button-background-pressed);
   }
 
-.button--variant-flat:disabled {
+.button--variant-flat:disabled,
+  .button--variant-flat.button--disabled {
     background-color: var(--swirl-flat-button-background-disabled);
   }
 
-.button--variant-flat.button--intent-primary:not(:disabled) {
+.button--variant-flat.button--intent-primary:not(:disabled):not(.button--disabled) {
     color: var(--s-text-on-action-primary);
     background-color: var(--s-action-primary-default);
   }
 
-.button--variant-flat.button--intent-primary:not(:disabled):hover {
+.button--variant-flat.button--intent-primary:not(:disabled):not(.button--disabled):hover {
       background-color: var(--s-action-primary-hovered);
     }
 
-.button--variant-flat.button--intent-primary:not(:disabled):active {
+.button--variant-flat.button--intent-primary:not(:disabled):not(.button--disabled):active {
       background-color: var(--s-action-primary-pressed);
     }
 
-.button--variant-flat.button--intent-primary:not(:disabled) .button__icon {
+.button--variant-flat.button--intent-primary:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--s-icon-on-action-primary);
     }
 
-.button--variant-flat.button--intent-critical:not(:disabled) {
+.button--variant-flat.button--intent-critical:not(:disabled):not(.button--disabled) {
     color: var(--s-text-on-status);
     background-color: var(--s-action-critical-default);
   }
 
-.button--variant-flat.button--intent-critical:not(:disabled):hover {
+.button--variant-flat.button--intent-critical:not(:disabled):not(.button--disabled):hover {
       background-color: var(--s-action-critical-hovered);
     }
 
-.button--variant-flat.button--intent-critical:not(:disabled):active {
+.button--variant-flat.button--intent-critical:not(:disabled):not(.button--disabled):active {
       background-color: var(--s-action-critical-pressed);
     }
 
-.button--variant-flat.button--intent-critical:not(:disabled) .button__icon {
+.button--variant-flat.button--intent-critical:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--s-icon-on-status);
     }
 
@@ -189,18 +191,19 @@
   box-shadow: inset 0 0 0 var(--s-border-width-default) var(--s-border-strong);
 }
 
-.button--variant-outline:disabled {
+.button--variant-outline:disabled,
+  .button--variant-outline.button--disabled {
     box-shadow: inset 0 0 0 var(--s-border-width-default)
       var(--s-border-default);
   }
 
-.button--variant-outline.button--intent-critical:not(:disabled) {
+.button--variant-outline.button--intent-critical:not(:disabled):not(.button--disabled) {
     color: var(--s-text-critical);
     box-shadow: inset 0 0 0 var(--s-border-width-default)
       var(--s-border-critical);
   }
 
-.button--variant-outline.button--intent-critical:not(:disabled) .button__icon {
+.button--variant-outline.button--intent-critical:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--s-icon-critical);
     }
 
@@ -233,32 +236,33 @@
   background-color: transparent;
 }
 
-.button--variant-plain:hover:not(:disabled) {
+.button--variant-plain:hover:not(:disabled):not(.button--disabled) {
     color: var(--swirl-plain-button-text-color-hovered);
     background-color: transparent;
     text-decoration: underline;
     text-underline-offset: var(--s-space-4);
   }
 
-.button--variant-plain:hover:not(:disabled) .button__icon {
+.button--variant-plain:hover:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--swirl-plain-button-text-color-hovered);
     }
 
-.button--variant-plain:active:not(:disabled) {
+.button--variant-plain:active:not(:disabled):not(.button--disabled) {
     color: var(--swirl-plain-button-text-color-pressed);
     background-color: transparent;
   }
 
-.button--variant-plain:active:not(:disabled) .button__icon {
+.button--variant-plain:active:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--swirl-plain-button-text-color-pressed);
     }
 
-.button--variant-plain:disabled {
+.button--variant-plain:disabled,
+  .button--variant-plain.button--disabled {
     color: var(--swirl-plain-button-text-color-disabled);
     background-color: transparent;
   }
 
-.button--variant-plain:disabled .button__icon {
+.button--variant-plain:disabled .button__icon, .button--variant-plain.button--disabled .button__icon {
       color: var(--swirl-plain-button-text-color-disabled);
     }
 
@@ -266,11 +270,11 @@
     padding: 0;
   }
 
-.button--variant-plain.button--intent-strong:not(:disabled) {
+.button--variant-plain.button--intent-strong:not(:disabled):not(.button--disabled) {
     color: var(--s-text-default);
   }
 
-.button--variant-plain.button--intent-strong:not(:disabled) .button__icon {
+.button--variant-plain.button--intent-strong:not(:disabled):not(.button--disabled) .button__icon {
       color: var(--s-icon-strong);
     }
 
@@ -294,11 +298,12 @@
         color: var(--s-interactive-primary-hovered);
       }
 
-.button--variant-plain.button--intent-primary:disabled {
+.button--variant-plain.button--intent-primary:disabled,
+    .button--variant-plain.button--intent-primary.button--disabled {
       color: var(--s-interactive-primary-disabled);
     }
 
-.button--variant-plain.button--intent-primary:disabled .button__icon {
+.button--variant-plain.button--intent-primary:disabled .button__icon, .button--variant-plain.button--intent-primary.button--disabled .button__icon {
         color: var(--s-interactive-primary-disabled);
       }
 
@@ -332,12 +337,13 @@
     background: rgba(0, 0, 0, 0.4);
   }
 
-.button--variant-on-image:disabled {
+.button--variant-on-image:disabled,
+  .button--variant-on-image.button--disabled {
     color: var(--s-text-on-image);
     background: rgba(0, 0, 0, 0.3);
   }
 
-.button--variant-on-image:disabled .button__icon {
+.button--variant-on-image:disabled .button__icon, .button--variant-on-image.button--disabled .button__icon {
       color: var(--s-icon-on-image);
     }
 
@@ -380,21 +386,22 @@
     background-color: var(--s-action-primary-default);
   }
 
-.button--variant-floating.button--intent-primary:hover:not(:disabled) {
+.button--variant-floating.button--intent-primary:hover:not(:disabled):not(.button--disabled) {
       color: var(--s-text-on-action-primary);
       background-color: var(--s-action-primary-hovered);
     }
 
-.button--variant-floating.button--intent-primary:active:not(:disabled) {
+.button--variant-floating.button--intent-primary:active:not(:disabled):not(.button--disabled) {
       color: var(--s-text-on-action-primary);
       background-color: var(--s-action-primary-pressed);
     }
 
-.button--variant-floating.button--intent-primary:disabled {
+.button--variant-floating.button--intent-primary:disabled,
+    .button--variant-floating.button--intent-primary.button--disabled {
       color: var(--s-text-on-action-primary);
     }
 
-.button--variant-floating.button--intent-primary:disabled .button__icon {
+.button--variant-floating.button--intent-primary:disabled .button__icon, .button--variant-floating.button--intent-primary.button--disabled .button__icon {
         color: var(--s-icon-on-action-primary);
       }
 

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

@@ -87,13 +87,14 @@ export class SwirlButton {
         const hasIcon = this.icon || Boolean(this.el.querySelector("[slot='icon']"));
         const hasTag = Boolean(this.el.querySelector("[slot='tag']"));
         const className = classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
+            "button--disabled": this.disabled,
             "button--has-icon": hasIcon,
             "button--icon-only": hideLabel,
             "button--pill": this.pill,
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '1f660fbaeb4698d043c2b650283631958fecfc44', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'e924cd240a270f86f91033eac7306c39b9d49cd2', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, Boolean(this.icon) && (h("span", { key: 'faa7f2e30c8e67b78d8d6008a9243802386488ea', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'c8ed1cbcd6894b0b60c5df84eb32bfb2f2ebc9e4', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'f4c9a4a28e6bb0e5923e747ffbe5a60c208c3c04', name: "icon" }))), !hideLabel && h("span", { key: '32de5b66b9983e525a9c722eef2769ff1af77a47', class: "button__label" }, this.label), hasTag && (h("span", { key: '0f8a2230c89a066c2baa65dd951f693f45d0ee63', class: "button__tag" }, h("slot", { key: '2c0214af5a85fc1014e0c233f1bfc685001f0ecc', name: "tag" }))))));
+        return (h(Host, { key: '754225ae695966b9fbba5811eb88013f84ef321c', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'ca3e83907da65fed17d31cd3a43460ea1c847dea', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, Boolean(this.icon) && (h("span", { key: '7831558760ae82ecd7fdb8b85b431998478fd9e9', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '529b5533ca9551c9e3ad9f25a1ddc19eb6f23845', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '501350b5ab673e6e3749edbc0f2813b10b62adec', name: "icon" }))), !hideLabel && h("span", { key: '6fc475d46f48a692284df2ece2c8082d4287c8f2', class: "button__label" }, this.label), hasTag && (h("span", { key: 'e6185f85a2950964f37362044e136dba1e516158', class: "button__tag" }, h("slot", { key: 'ba583a55cb5c553aff100d2a3a481d963af91a80', name: "tag" }))))));
     }
     static get is() { return "swirl-button"; }
     static get encapsulation() { return "scoped"; }

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

@@ -17,7 +17,7 @@ describe("swirl-button", () => {
         });
         expect(page.root).toEqualHtml(`
       <swirl-button disabled="true" icon="<swirl-icon-close></swirl-icon-close>" intent="critical" label="Label" pill="true" size="l" type="submit" variant="flat" style="pointer-events: none;">
-        <button aria-disabled="true" class="button button--has-icon button--icon-position-start button--intent-critical button--pill button--size-l button--text-align-center button--variant-flat" disabled="" type="submit">
+        <button aria-disabled="true" class="button button--disabled button--has-icon button--icon-position-start button--intent-critical button--pill button--size-l button--text-align-center button--variant-flat" disabled="" type="submit">
           <span class="button__icon">
             <swirl-icon-close size="24"></swirl-icon-close>
           </span>

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

@@ -104,7 +104,7 @@ export class SwirlCarousel {
         return inInView;
     }
     render() {
-        return (h(Host, { key: '8c11edc4d4b47bc2e14f67a02e915ae36accfde0', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '545694170893141f767e634ca7f06a311c485a4d', class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '295bad656ae38a49d7f8434c17034749abf41b59', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '15d4e944515c6761a77fa4bd828ac3077c9b13d6', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: 'f16f809f3bce510b8d8c59380e2f800f22ed5cdc', "aria-live": "polite", class: "carousel__slides", onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '7e37f897764033cc2777c37d2fd5b206e6a2d190', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: '801697822fd433c46ba90d32b73fbedf3e7b1d5d', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '275ba2f4cda4630a8af16fe7eeabec632d4932b3', class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '246e774f5f8d1506d109c8e68d83c626be472641', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '5c847d86819472aebd8d22348efbc57a25a49a8e', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: '2bb930b8f2458177507db8ac62fbf165e525e37a', "aria-live": "polite", class: "carousel__slides", onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '596aa756c3919a1d66d6af891a11d8d45b70cb3a', onSlotchange: this.onSlotChange })))));
     }
     static get is() { return "swirl-carousel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SwirlCarouselSlide {
         const className = classnames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: '8f61c52d294e42d466e3a6cb8d535bb6e3a57bbf', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '5d3fdafb94d95b976272e9d75e6e5dc36a89d1a2' })));
+        return (h(Host, { key: '21e5c0c1a0554506a0e8eeb89093673bf4c55efa', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '13107eddba0cfd06a83194bb0f5c72020f073683' })));
     }
     static get is() { return "swirl-carousel-slide"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,11 +64,11 @@ export class SwirlColorInput {
         const className = classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: 'a6b1db08b2b1a13ea3bdd7d410b65bedd8b3a0a4' }, h("div", { key: '7bdd6e4d4a50fe73c0415ed6a7b2a8c893ff3113', class: className }, h("input", { key: 'f4db4ff152d13e0ee6f5414d3f5610b201732b54', "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 }), h("swirl-popover-trigger", { key: '425b3b1bb4cba6fcd6d989de26f24e9a99fe4e35', swirlPopover: this.pickerId }, h("button", { key: '824daa23d2bbcf3bddb1e46a77e53c850b7c56c7', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: 'f0d620c0d0402c04255df09eafdeab6ce0b271f4' }, h("div", { key: 'f28c97aecd99df2e5bf8eda9dbd913fdc1d76349', class: className }, h("input", { key: 'f286823b38675dc28a41c20d1c89ba09058fe8ba', "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 }), h("swirl-popover-trigger", { key: '17348886e3d8283b8f92bde939d8ffe67cdf0371', swirlPopover: this.pickerId }, h("button", { key: '2737a09648c06563631ea7ad24f932fd116d0c16', "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: 'f3e100b52a832fc73a8fb0a72ca1411b608bc104', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'e9d1f8442646ecb2852d48f6a87ab897605a1660', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '1cad488c849088dcc4b106bb7448c94a2d0cad50', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: 'f0deee906e54a0802914abe66b5b426c759c0d01', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'b4beb61326f80d2a57c8ef533b9a7d291867ca12', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '3c412fa3f8dae4128170a25a9906a6ce2bd338a9', 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

@@ -122,11 +122,11 @@ export class SwirlConsoleLayout {
             "console-layout--sidebar-active": this.sidebarActive,
             "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
         });
-        return (h(Host, { key: '0eb19236d04c54db5b90ee7651d1b1d4a7650b77' }, h("div", { key: '35781e4a429a3ed3610a970225935717af299f8b', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '744171c694eb49672c9fd12d8dfd475668ad7c96', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '7192c4a3bb4ace699dbcec0ab9a8ffbb53747e56', class: "console-layout__header" }, h("div", { key: 'b267f54fbb085079e8ee483093a5de3988abc57d', class: "console-layout__logo" }, h("svg", { key: '4a19eec03d3431569a178981e0d87d72dd3d3548', 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: '7125a91e87dd369461cfec31b9f4751e92eeb3ff', 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: '28dbea85c6cc083706b118a550f0c4927559646a', 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: '4d2f62470e2346a070047e2fc3d0840bac127a0b', 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: '537ca3018e9aebb1f7fa7d8740aaa1b891984e38', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: 'f90a92d55105c8c95c0868d214c052950a9ee07e', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '464a016822f48f8da113344637652d17683282c1', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '50c2c1d0193fb7ca1778d5f581340667c255d251', name: "navigation" })), h("div", { key: '944122212602e40616c12fb44870c2064b363ae2', class: "console-layout__user" }, h("slot", { key: '4431a00144a149b62dd8d2885b55f22a7ab68c32', name: "user" }))), h("main", { key: '4faa140f198686c95145b0c9872ba2667ef5ef12', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '8018aa787cb9a24e0872f2c583ec63282ad645ef', class: "console-layout__app-bar" }, h("span", { key: 'fc3efe0db3a7f6e405acbdf5796cc6d3b04d6315', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '527cc5ac3220dc75f9a596f2ba62802fa66cab8a', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: '0ae8f75f1b1453107bd9595fc3e6fba0c81924b7' }, h("div", { key: 'c564a56cb9b53636b15776124fc05f5b99898d51', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '3fb9fd3aa92fef0aef34833e722f168ae378eca7', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '799e19bd775a44ab92fc84f34a433d5a3249f944', class: "console-layout__header" }, h("div", { key: 'a914ffe53baa687057b885bcd2967cfe1ffc3e00', class: "console-layout__logo" }, h("svg", { key: 'a413bb57cee87ed55e125377fbb4fca32c1c90d1', 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: '34fc711d9d779a50056329ad62e308f155b7c8d7', 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: '335a0240fa9a27db046eda7a42a4d168ad2b6ba5', 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: '6503f6c4cf76c4c51b7f6445987986412daa8fe2', 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: 'aa0cfa1f47d5c7924e7f6687d963c8d4c4f9b00e', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '67b8826fea6c6168449457ed853e747eb39167e6', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: 'ceb73cea3d462e12de2063fb6a4738b3f22b6925', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '6b5ef2e19e53704f0c51421e52a63d56693700bf', name: "navigation" })), h("div", { key: '877036f65f6e66029d54efc8a471353629044aff', class: "console-layout__user" }, h("slot", { key: '110525ea4f0d47aed61a572cfa988d58883686ac', name: "user" }))), h("main", { key: 'ef3ab0d75901a1eee091d2893244347ab28beebd', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '92dede77f656be58c606597751574f448d0a3c13', class: "console-layout__app-bar" }, h("span", { key: '24eea696baae959296f2aef6499a202bbe291da8', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'dc4a6d5cd66358ffed6e979e8afeb687272b8745', 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: '31bcc34e76b8e2ecbaf3efe113a2ff7049b1a53e', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '750381b7ec70425a7273e044dcffe56f5fde531e', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'ed27a60536922ab5d4b090f8c16eca13f6229cd5', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'cc460b3569b0374ce66a0f99340ce78757eb4f3d', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: '96dcaa37ce999b28ab0ee79dd2666be5b767a52d', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '3064b53bb893025d9b06735141d6e8a51e875d62', 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: '5dfa2758a8c5fd4fc948b4f8ae47771c258c2504', class: "console-layout__heading-container" }, h("swirl-heading", { key: '8e8e424a64d2dba7fe3d7bcc2b3fbf1d5720cce3', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '1a205ffa5656e54694e9a5ebd473deb13e8cda63', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '45cfad7e3a73a24b706bc6de72e5b4538689d547', class: "console-layout__heading-container" }, h("slot", { key: '4bb9af958085eef1d3d0ccf5316a61970e1b868d', name: "heading" }))), h("div", { key: 'bca5a2d4b523ce3f0b67368f706e789fe4f16cf9', class: "console-layout__content-header-tools" }, h("slot", { key: '329f7aa06d88aca384edb588f99211516a0f1732', name: "content-header-tools" }))), h("div", { key: 'ccec77529ef2e372a93c3bc589a05b3ba922e554', class: "console-layout__integration" }, h("slot", { key: 'c481583d21cf05aee6111ee64a5a3980bc218815', name: "content" }))), h("div", { key: '1d958ad52810aba7e587e02e3f40caae9c8b871e', class: "console-layout__overlays" }, h("slot", { key: 'f8397ebf73eaef4c1cf592cc823c2e7ba459295a', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '4d377f51a2e18350363a214d199a4935f16a9c16', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'fc62ac85402e2ec79958c1c2ba81d3cfc07c52d5', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '898a87ca39e0fd4786ecd80418c99793cc9e15bb', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '8e15f85881e119b76ab1c42422503e7bd98610ca', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'ccf7435dd21a960e090eb72d173020efa36b9124', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: 'a58c3ebbb9a664ad9079670785289c0601643131', 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: '5b7f51a49cce3f48f302b20db15a0924196580fc', class: "console-layout__heading-container" }, h("swirl-heading", { key: '54105137aafd04bc66d8afd636e6f62a03185721', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '125c91a8511bf13e26352d1696903ac59aeb9ecc', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '01bdf66bbd8110c5ba15c05579c60e3810b9e5ae', class: "console-layout__heading-container" }, h("slot", { key: '7683e7bf782f871455156501d96326c481d73847', name: "heading" }))), h("div", { key: '48d4e6abd947e58218a2a5172b0763d0a901810f', class: "console-layout__content-header-tools" }, h("slot", { key: 'b24eae7b370b1f0e7a0d88728ca60bed8cc10490', name: "content-header-tools" }))), h("div", { key: '5f07afe14c3961b31be303e178b55ab89ffb067a', class: "console-layout__integration" }, h("slot", { key: '78a281174feed87fdd6d7e4058354a172a3d7503', name: "content" }))), h("div", { key: 'dcafe77c3a567421c6767ed25296a996d9be8bd5', class: "console-layout__overlays" }, h("slot", { key: 'b49840f2799837b192233223c0d6cbd2e58291cf', name: "overlays" }))))));
     }
     static get is() { return "swirl-console-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -148,7 +148,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '26b9892a5e3fae38fec3765acd1bf2b0e8a9469e' }, h("div", { key: 'de5e001a177a11dcf26e16fd33b200d540219a7f', class: className }, h("input", { key: '56c7850f8450d515071fc7048734e17613022b8e', "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, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '9d3478ef10479c70618fe42f25081d5f22479ca3', swirlPopover: `popover-${this.id}` }, h("button", { key: '3f127344240be8e6c75711010f23bed98a9184e5', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '94d6af1ef3352a515daa8ed14200bdcc769090e4', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '8ddd0949962ee343f2f52d45ca97ec7cb73e8bee', animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '14fd07de748cb88b79dc3318d1160fd58645d439', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '296c03693dedf618c9f897027d1f18c37d7570cc' }, h("div", { key: '1cebccc9e07c74ba99250df57ce53385cc7422dd', class: className }, h("input", { key: 'f751cb69404907a1e203396d559db8e7b4591007', "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, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: 'dcbd828da70c00ac11ae35c278a793e5225e80f4', swirlPopover: `popover-${this.id}` }, h("button", { key: 'ba359bdb631eb2c327f9660d08e9ee28e4e7db37', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '144aed4c8e6768e3b3f3e4ea73a1b45688329205', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '76dd883b51dbc595e282019774751455fcd778d9', animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '80f4b71f88f43b21fb8bd54e3486ad27e485eb37', 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

@@ -27,7 +27,7 @@ export class SwirlDatePicker {
         const startDate = this.startDate instanceof Date
             ? getISODateString(this.startDate)
             : undefined;
-        return (h(Host, { key: '60477c7f4c8b070eb05fc2ca95d4c79371cefc7f', onClick: this.onClick }, h("wc-datepicker", { key: '5f29d33b72e91e3704084584eb92ba5cba3fdf31', 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: '0093f697e6cfa16a93f03398dcbe0a7015b59a9d', onClick: this.onClick }, h("wc-datepicker", { key: '92520400d69485b339666e15138ba396a4270bea', 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: 'dfbe1eeee244562cf21081f8afdab228c71e9606' }, h("div", { key: '5dea91c004cbb228d936ad6b0c816df6f882f2a3', class: "description-list", role: "list" }, h("slot", { key: 'a1125b0550e285ca6266209fb9c89937d7eec121' }))));
+        return (h(Host, { key: 'a3087fa2e0e84ac2bc6f4cd5a27a98d945cdff0d' }, h("div", { key: '8dc9916ad4cf9dd8284fc24e96178af3586b6210', class: "description-list", role: "list" }, h("slot", { key: 'dd319d9649ded0a1fb44ffd536586f0b43c6278f' }))));
     }
     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

@@ -20,7 +20,7 @@ export class SwirlDescriptionListItem {
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,
         });
-        return (h(Host, { key: '046474e3e80fdfc00205ace857b62a72cc1dcb9b', role: "listitem" }, h("div", { key: 'eea995f79fb12f64b80d98533513fa664c24ac85', class: className, part: "description-list-item", role: "group" }, h("div", { key: '68fcb08a0222b1bd3dce0129cf94e4f739df7882', class: "description-list-item__inner" }, h("div", { key: '60f1792fb07463cb2fefdc5e3798abe19ac2ac02', class: "description-list-item__text-container" }, h("div", { key: '04c89bac1a2dc3c48c355864ac093b3f70c63d4b', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'ddcebb1554511ab747499a05466fdee242aecee7', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '52f5032fcb2aed1df7171a0e72e0f7258b5a8c62', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '01988fe94a11f056ba67703bf1121c51a4450969', size: 16, tabIndex: 0 }))))), h("div", { key: 'd07c805bd0b0b0f1292104edb7d54df0292bd68e', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: 'd45e175808e96ebfa82c4f8b0ccb370602b5500f' }))), h("div", { key: '533e5b037d8879b08cfd7cb95c549120bb1bd97b', class: "description-list-item__tools" }, h("slot", { key: 'bf30240e82b671bc719b554bfd15e20746b03f06', name: "tools" }))), h("div", { key: 'c992222b8e453b61bfaeb008c21d35f5aea78690', class: "description-list-item__additional-content" }, h("slot", { key: '8e079034dc5228467e9f837999b883b0077fbb53', name: "additional-content" })))));
+        return (h(Host, { key: '86a9819f8575ee077bafc2330d30dbefc4751de9', role: "listitem" }, h("div", { key: '9942a358bcfc63f4945bb271e1d8cd92cd5c2818', class: className, part: "description-list-item", role: "group" }, h("div", { key: '44eac486a8b2beec67c155149d92b92045b54c11', class: "description-list-item__inner" }, h("div", { key: 'f5734b0551dadd683497a7d12eb3db1b87360c34', class: "description-list-item__text-container" }, h("div", { key: '549de9e411868b1d9172bcab2885973ba6a5cbd0', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '417a7c7de8b695eb40aa5bcd8e7a2492059590f3', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '0ace06c1790d424ec599fa627e72a3acc233bb1b', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '568c20c31efbc8bac557018f3263e143ba8be609', size: 16, tabIndex: 0 }))))), h("div", { key: 'cdd182789293f2f40842f76640c7e9a1b12b0655', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '875978a53447d99a3c47df8712b9715e980068fa' }))), h("div", { key: 'f1fdcd16180963875c5c0da46ab2c375799a3ad5', class: "description-list-item__tools" }, h("slot", { key: '3abef1527c0a751c1eb4518c9824ce543567fe35', name: "tools" }))), h("div", { key: '185db9ca6d1e5bd613fb4fb376133864f58de13a', class: "description-list-item__additional-content" }, h("slot", { key: '0e7e0497bd74c651963c1505ba6db4ca0aaf7902', 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: 'e42db4fb9fa2311d179e56fdb5a6bd68bc5952fc' }, this.size === 16 && (h("img", { key: '4fd3c9faeb99124d610ca832013d531706200c37', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'f68a6dc5107a7fbfa20f29e109f41468cb324fa2', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '39960d53b6fc830a8c54606d127811afc5d7fd58', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: 'e62cafc0f4d2e686f1c7e3d8b257ba0de9401967', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: 'bcec502f8afd9496dcb9013ea7e468eb76e80b87' }, this.size === 16 && (h("img", { key: '610fe681a08cff28ca7a0779ca7a8a7b8f8c227f', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'bb659a724f4f67887281a8d495b5ecb819086744', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: 'f2295aa1940879557e71f9b3d99d871f7ac2ab60', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '14949538ce9b84cb9b0973c3b089e7f30445a8f0', 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: 'ce4e0422011aafe57034c71bd1647c10c4bc2383' }, this.size === 16 && (h("img", { key: '1e3da507671390c2ef319d37626c49a988c3ac6e', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: 'b5f769b9be4c583d1fb99d263950e9efde2e6f8f', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '830eb97722bd22d3bbe8c91ea67b119007f306f4', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'ba345b48b6a87837bfdbbcff5e33fbab02bfc93b', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: 'bf61031b2354fd68ebdb9b68492a6ebe9245dd75' }, this.size === 16 && (h("img", { key: 'ad7c462fb1cbc4ae7bdb376f9684ebcc64c91656', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: 'e8d8ca87d588895b80cc744c39b4f3923b52d89f', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '85dab1a3aed8f8b0e45c18ba16e41ce15abd8e79', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'aea5a2a2a336d845353c13a3abbfc1f22ea89b2a', 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: '05cd2d3621ab09ceeae8045f836d03d8c95eb864' }, this.size === 16 && (h("img", { key: 'ef474446c3da264e58d2ea23f1333dbccbedca73', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '21d52ddd8d61be7f94a96569d416c506fda789e6', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: 'bff3aea97aabad6851b245a73db95c33411f7e81', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'd05b05dea846c9bf511ca4a407fac8983870a9f8', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: '9b1724279d1ed9330455e9e53b83e659a029d1a5' }, this.size === 16 && (h("img", { key: 'e1f4620d781dfdb0a11a38487f43aedfb1305206', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '15c982d76f630c390bf0c2d5537fa137d9ceaec7', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '6d77bdbe92d54ab8453b00eb18e3a8c83ee01bfd', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '64482481062d545d660557efd9c1ab3164e99ff9', 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: 'c52eaa2b1e538d3e0c1fd45ab170b713926ac997' }, this.size === 16 && (h("img", { key: '12eceb0ae6681e20ca0fbdf290829059e23e2849', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '2a05e405053a75818f8c175b5f67f0c2a51dca97', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '78b4a41d5d728e4beb8807c8527ac36f3fb8d4ef', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'de7453e06e048a6ffa1dd6e129cbfe09539a1119', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: 'a86c56fb8380765179fbc57e7e714ba46361bfde' }, this.size === 16 && (h("img", { key: 'be976119212c75951f51381c5e23f9972e6315cb', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '80eb454155db7fdb991d52b0df25b3df1c53d9fa', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'd316efb54c4439cba229e4f70e31d493e213e41b', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '3ac4dc6bd5982681b3d2032287704e6c8b6a216c', 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: '34a27c7f2b27c57477bdd1aef1e421ffe2da1993' }, this.size === 16 && (h("img", { key: 'da8ef3561f59f63440cd36961ea68fd5c83aa3f8', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '59235682bf90aa00497340e71f5913a89ca210e6', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '408538ed9f89fa5735ec358999a8e85051ca6e9c', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '62b0bfb3006105300d44b504bf2dc0aa418fc2bb', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: '9d0eacd9db0d58cc7269e34a5cd80f63baf66fa3' }, this.size === 16 && (h("img", { key: 'd31c43942ec596cb00c74303f2bc16088f93a9c3', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '8f324fd629244b7dd928f04c4aa48ba689efe951', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '78a6aca038bb5944fcd6f5033a6be2520c4d6820', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: 'a3e763bcddb38a85e5ecdf5fe2d8eff5c54c08ee', 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: 'df1d5169ef542e12a0dca9bed71f010b59d3ae23' }, this.size === 16 && (h("img", { key: '6355e3c143f14df40d9322bc74cf9cde8fd0fac6', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: 'd4f1045965aaa11e6a629f6db275de80dcd89e54', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '62217e81edbfd4c26ca087e0a833dd9f3c89a874', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '36afccaf42a2073d1afa89026db665c34ec971de', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: 'a6810f4f905d3af572ab0494b5e8d33270981073' }, this.size === 16 && (h("img", { key: 'dd35f229ab1a1df1be7b23bf02eaa9766069b83b', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '0adde72d9e66514fd1d8b088b69464e95f3ce126', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '35741e09b0057331ee7fb844b0c80815fd811b8d', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: 'f2ed2d95f15409673910b4ed56f24fd4c97e7fd9', 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

@@ -7,7 +7,7 @@ export class SwirlEmoji {
     }
     render() {
         const Tag = `swirl-emoji-${this.name}`;
-        return (h(Host, { key: '6a90c47f7fac16749701fc7565f68c1342b6ab94' }, h(Tag, { key: '0f2bab071f09b8ede064fc4c87bc4fcbca233372', label: this.label, size: this.size })));
+        return (h(Host, { key: 'b1eabfadcc13db1e9ac7860fd9eada649676c954' }, h(Tag, { key: 'e58263c674090a0650ce8d63f4a36501a701c8d8', 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

@@ -17,7 +17,7 @@ export class SwirlEmptyState {
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (h(Host, { key: 'a0d70dc213a678eda5d05f45689b2fc4b3ef79e2' }, h("div", { key: '44fa906829f09913cc82b248f4a448a8237c4aa8', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'd237ad9abdde16dbd1f17679e14add428e1b0a1a', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '2f2de9f4e52914bdef003a0eedd4f8341d3d07cf', class: "empty-state__slotted-illustration" }, h("slot", { key: 'b558d0eb8e17191c3db69112b94c8136cebf2de9', name: "illustration" })), h("div", { key: '990b6cb4126983bfe626f63051e1795dbe837024', class: "empty-state__body" }, h("swirl-stack", { key: '6cbd0524e0405222e8abd858adb3784ad43433e1', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: 'a8adbbdb32817f49f21388bb3179204375106cc3', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: '91e61734540d630c694b6e2ccd955eaadf52c43f', class: "empty-state__content" }, h("swirl-text", { key: 'f2d057bc75c306d4c5ac8f0cb36d5a1d639ed83a', align: "center", color: "subdued" }, h("slot", { key: '9928d7b7f10f951b4f2544c15c15a8cc2a2ad283' })))), h("div", { key: 'ca118d3d46669cb7697075841c1ceb0380d07c0d', class: "empty-state__controls" }, h("slot", { key: 'de5e87f0bb8dfe6b5c39e39ed882b901e37e9f4b', name: "controls" }))))));
+        return (h(Host, { key: '54b579115aeba928aba14cfa789f81eadf19621e' }, h("div", { key: 'bb0d6bac2319179d9b43ab5469070381c4712946', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '733fadb95e8458568c9ddee523007a9371ca8a84', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '5b610e75de57a6707c3364e98daa6753b225951f', class: "empty-state__slotted-illustration" }, h("slot", { key: '275f7e216aaef0ae125e3a14ec59eda421edd9cd', name: "illustration" })), h("div", { key: '7e74bb0f0ed09837a5c5e6ed0436500db01b2665', class: "empty-state__body" }, h("swirl-stack", { key: '41693a74c9c846ca6dc9ed442a4ac0a713e363e2', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '6b0d9fcf395ab3f60eef3e720560b0798a54e6c6', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: 'b0fc78406d23677dc98af4693fd12cd6c660f9d4', class: "empty-state__content" }, h("swirl-text", { key: 'aa9758dac037121b31f74dab447f5bba1fcce722', align: "center", color: "subdued" }, h("slot", { key: '667812460bcb12a6b9f36f6108e06c0f697100ef' })))), h("div", { key: '0955fc5e757fd56dec7a373525c49437ce433169', class: "empty-state__controls" }, h("slot", { key: 'b7fd277568939ab5bac06987945a15a2a1f2e125', name: "controls" }))))));
     }
     static get is() { return "swirl-empty-state"; }
     static get encapsulation() { return "shadow"; }