@getflip/swirl-components 0.236.0 → 0.237.0

package/dist/components/swirl-banner.js

@@ -63,7 +63,7 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         const className = classNames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
-        return (h(Host, { key: '7d1d0fe808a0d56888901519a1d2c7d7a5953703' }, h("div", { key: '6f0482657ddd0b91ba5ca740db378e3fa5cad176', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '82bc8952ea7cc638a13eb8997492515280793e70', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: 'd2d6aa7d78d04fdb16a5d9d632fef49977400690', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '637f8d6f03aa8b9ed71798b60a2a8b6f68c96e6b', class: "banner__text" }, this.content)), showControls && (h("div", { key: '8c6ed8081c22c3f9121223ea2dc6bd3918f1babf', class: "banner__controls" }, this.actionLabel && (h("button", { key: 'afd0254e27d026a1f828ec203eed23a6934c8dbe', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '7842e8dc33cfc78226ade9d5b8d141809efbb9e7', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: '44118f5b5f92f476440b3adb6d33b3c88ef3b5a8' }))))))));
+        return (h(Host, { key: '59ad8b46103af68b01514dffb4a8ffc3f7366135' }, h("div", { key: 'e7a44b513cc0e362187b7972bbe30370b9789b1d', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '4465f6f6ab0afe3231e25a52192a9f56d5756efe', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '4aa59545611d08217a0edb767ee34f5d7fc2e18b', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '91ee916917e08fd7d19277740a63c6efa2493910', class: "banner__text" }, this.content)), showControls && (h("div", { key: '49b0b4c1f8b83e60e033fd3729c1591f3ba961bc', class: "banner__controls" }, this.actionLabel && (h("button", { key: '3642186b3c70e2a2a2fef4ec21ab3cda77d345c6', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: 'a09f723ea799b686f0e06baeeb87590a1b60f1fa', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: 'caaba0ff27439dd72e1efd50178a253e496abd4d' }))))))));
     }
     get element() { return this; }
     static get style() { return SwirlBannerStyle0; }

package/dist/components/swirl-box2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
 
-const swirlBoxCss = ":host{--swirl-box-scroll-border-top-width:var(--s-border-width-default);--swirl-box-scroll-border-bottom-width:var(--s-border-width-default);display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--bordered-block-end){border-block-end:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-block-start){border-block-start:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-inline-end){border-inline-end:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-inline-start){border-inline-start:var(--s-border-width-default) solid\n      var(--s-border-default)}@supports (\n      (scroll-timeline: --scroll-timeline y) and\n        (animation-timeline: --scroll-timeline)\n    ){:host(.box--bordered-block-start-when-scrolled),:host(.box--bordered-block-end-when-scrolled){animation:box-border-reveal both, box-detect-scroll none;scroll-timeline:--scroll-timeline y;animation-timeline:--scroll-timeline}}@supports (\n      (scroll-timeline: --scroll-timeline y) and\n        (animation-timeline: --scroll-timeline)\n    ){:host(.box--bordered-block-start-when-scrolled){border-top:var(--swirl-box-scroll-border-top-width) solid\n        var(--s-border-default);animation-range:1px 1px}}@supports (\n      (scroll-timeline: --scroll-timeline y) and\n        (animation-timeline: --scroll-timeline)\n    ){:host(.box--bordered-block-end-when-scrolled){border-bottom:var(--swirl-box-scroll-border-bottom-width) solid\n        var(--s-border-default);animation-range:calc(100% - 1px) calc(100% - 1px);animation-direction:reverse}}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}@keyframes box-border-reveal{0%{border-color:transparent}100%{border-color:var(--s-border-default)}}@keyframes box-detect-scroll{from,to{--swirl-box-scroll-border-top-width:var(--s-border-width-default);--swirl-box-scroll-border-bottom-width:var(--s-border-width-default)}}";
+const swirlBoxCss = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--border-color-default){border-color:var(--s-border-default)}:host(.box--border-color-strong){border-color:var(--s-border-strong)}:host(.box--bordered-block-end){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid}:host(.box--bordered-block-start){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid}:host(.box--bordered-inline-end){border-inline-end-width:var(--s-border-width-default);border-inline-end-style:solid}:host(.box--bordered-inline-start){border-inline-start-width:var(--s-border-width-default);border-inline-start-style:solid}:host(.box--bordered-block-start-when-scrolled.box--scrollable){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid;border-block-start-color:transparent}:host(.box--bordered-block-start-when-scrolled.box--scrollable:not(.box--scrolled-to-top)){border-block-start-color:var(--s-border-default)}:host(.box--bordered-block-end-when-scrolled.box--scrollable){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid;border-block-end-color:transparent}:host(.box--bordered-block-end-when-scrolled.box--scrollable:not(.box--scrolled-to-bottom)){border-block-end-color:var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}";
 const SwirlBoxStyle0 = swirlBoxCss;
 
 const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLElement {
@@ -9,6 +9,9 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.onScroll = () => {
+            this.updateScrollState();
+        };
         this.borderColor = "default";
         this.bordered = undefined;
         this.borderedBlockEnd = undefined;
@@ -41,13 +44,31 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
         this.top = undefined;
         this.width = undefined;
         this.zIndex = undefined;
+        this.scrollState = {
+            scrollable: false,
+            scrolledToBottom: false,
+            scrolledToTop: false,
+        };
+    }
+    componentDidLoad() {
+        queueMicrotask(() => {
+            this.updateScrollState();
+        });
+    }
+    updateScrollState() {
+        const newScrollState = {
+            scrollable: this.el.scrollHeight > this.el.clientHeight,
+            scrolledToTop: this.el.scrollTop === 0,
+            scrolledToBottom: Math.round(this.el.scrollTop + this.el.clientHeight) >=
+                this.el.scrollHeight,
+        };
+        if (Object.keys(newScrollState).some((key) => newScrollState[key] !== this.scrollState[key])) {
+            this.scrollState = newScrollState;
+        }
     }
     render() {
         const styles = {
             alignItems: this.centerBlock ? "center" : undefined,
-            borderColor: this.borderColor === "default"
-                ? "var(--s-border-default)"
-                : "var(--s-border-strong)",
             bottom: this.bottom,
             display: this.centerBlock || this.centerInline ? "flex" : undefined,
             flexBasis: this.basis,
@@ -82,23 +103,22 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
             width: this.cover ? "100%" : this.width,
             zIndex: this.zIndex,
         };
-        if (this.borderedBlockEndWhenScrolled &&
-            this.borderedBlockStartWhenScrolled) {
-            console.warn(`[Swirl] swirl-box does not support both borderedBlockEndWhenScrolled and borderedBlockStartWhenScrolled properties to be active at the same time. Please use only one of them.`);
-        }
-        const className = classNames("box", {
+        const className = classNames("box", `box--border-color-${this.borderColor}`, {
             "box--bordered": this.bordered,
             "box--bordered-block-end": this.borderedBlockEnd,
             "box--bordered-block-end-when-scrolled": this.borderedBlockEndWhenScrolled,
             "box--bordered-block-start": this.borderedBlockStart,
-            "box--bordered-block-start-when-scrolled": this.borderedBlockStartWhenScrolled &&
-                !this.borderedBlockEndWhenScrolled,
+            "box--bordered-block-start-when-scrolled": this.borderedBlockStartWhenScrolled,
             "box--bordered-inline-end": this.borderedInlineEnd,
             "box--bordered-inline-start": this.borderedInlineStart,
             "box--cover": this.cover,
+            "box--scrollable": this.scrollState.scrollable,
+            "box--scrolled-to-top": this.scrollState.scrolledToTop,
+            "box--scrolled-to-bottom": this.scrollState.scrolledToBottom,
         });
-        return (h(Host, { key: '28418675b679475c4f4260b4d8d59d0cf0ee71a6', class: className, style: styles }, h("slot", { key: 'fe4e622d5163b941d2932e7090d946e0f6234d75' })));
+        return (h(Host, { key: 'cc56b1b68106d9e9b759e271339201c1792ffbe8', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '311112ceef9ab1964bbb8d57ca1eb8bad79f703c' })));
     }
+    get el() { return this; }
     static get style() { return SwirlBoxStyle0; }
 }, [1, "swirl-box", {
         "borderColor": [1, "border-color"],
@@ -132,7 +152,8 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
         "grow": [1],
         "top": [1],
         "width": [1],
-        "zIndex": [1, "z-index"]
+        "zIndex": [1, "z-index"],
+        "scrollState": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

@@ -20,11 +20,11 @@ const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class SwirlButtonGroup
         const className = classNames("button-group", {
             "button-group--segmented": this.segmented,
         });
-        return (h(Host, { key: '557c6898580f3ed020e594a92f3751478c5c3779' }, h("swirl-stack", { key: '7d6103e477a8f7ae88d48e7d1ece170d45c31456', align: this.orientation === "vertical" && this.stretch
+        return (h(Host, { key: 'cc02fbfdecc4beb261f26c73a7925a3913b728eb' }, h("swirl-stack", { key: '91f6cb70857348405c6684383fe81279116d63f3', align: this.orientation === "vertical" && this.stretch
                 ? "stretch"
                 : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
                 ? "stretch"
-                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: '6a03778002a4a196f5baab8ea636e41eea7c2b8f' }))));
+                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: 'cf750be5fade7d52cc0cd9d95820c440b8439767' }))));
     }
     static get style() { return SwirlButtonGroupStyle0; }
 }, [1, "swirl-button-group", {

package/dist/components/swirl-button2.js

@@ -95,7 +95,7 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '7fad35302abc81636138866c895162587ceee487', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '84c7c78d9b8b5305d1314b996e69183b6a373280', "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: 'cfccc6f288691dd024ee4bfcfd78509310d5d3d5', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '9cbca966cdb4cfac57263cf46d7cb4d587bf49a5', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '7c36b4686599640b566a8f2fb1f4ecf5559d6a96', name: "icon" }))), !hideLabel && h("span", { key: 'bdcb32131ecdad608e3a6ab9b352fb9ac383b2a2', class: "button__label" }, this.label), hasTag && (h("span", { key: '87e6c7856ba29ce59e039e696642954d4b8d608b', class: "button__tag" }, h("slot", { key: 'df5f24ad0571229d3ff98fa1e7cbac2655e0fe94', name: "tag" }))))));
+        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" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlButtonStyle0; }

package/dist/components/swirl-card.js

@@ -83,9 +83,9 @@ const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCard extends HTM
             "card--interactive": this.interactive || this.href,
             "card--is--borderless": this.isBorderless,
         });
-        return (h(Host, { key: 'e9557284559f0a8a3af1974f8dbf6547337f40fd', styles: { height: this.height } }, h(Tag, { key: 'ce0fc1940b354f70a0325ec8871ba09812c4ec03', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
+        return (h(Host, { key: '3d12e783c069b6e09e9c94bfe891dc80e0e401c1', styles: { height: this.height } }, h(Tag, { key: '97551b12b4cf2e4ab2f74936583ac9ed1dc2a60b', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
                 ? "noreferrer"
-                : undefined, style: styles, target: this.linkTarget }, h("div", { key: 'c739eb9185766fd8f589683da75e46dba3720867', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: 'a9838caefd147ea8a6d8f1bb80679a8472b6162f', name: "image" })), h("div", { key: '77661ef0cdc5ecadffaf7311e8e8f8af26e48cb4', class: "card__body", style: bodyStyles }, h("div", { key: 'c5ffd5b3b58a17a9d2ec3b1213d5775fd5100554', class: "card__content" }, h("slot", { key: 'c7f0906840ad6614fe318a80c51dc73c1f4d5f0c', name: "content" }))))));
+                : undefined, style: styles, target: this.linkTarget }, h("div", { key: '8cbbc4f08e59e134afaca1887abcfb587eb55555', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '47dd8500f698a6730f8b081ab64e3049991ff271', name: "image" })), h("div", { key: 'b96159e15cc9bfeffac6d86063453d598151ba2d', class: "card__body", style: bodyStyles }, h("div", { key: 'a6e3674c5da0d005e4fe30187325d67816525d3b', class: "card__content" }, h("slot", { key: '0e1bc603b145fdea67baa131104ed6234dd61373', name: "content" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlCardStyle0; }

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

@@ -17,7 +17,7 @@ const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouse
         const className = classNames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: 'b64340fe67a804d87f260086010ce7b475757e0b', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '47ba79a64973df8b19fb3c67c5b4a92c733a44d7' })));
+        return (h(Host, { key: 'e98072f3b5ca614a12246b8afe8316573d77afff', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '30de79f8a64db90a367518d56c0ee299c0f07e81' })));
     }
     static get style() { return SwirlCarouselSlideStyle0; }
 }, [1, "swirl-carousel-slide", {

package/dist/components/swirl-carousel.js

@@ -110,7 +110,7 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
         return inInView;
     }
     render() {
-        return (h(Host, { key: 'a0cb5e199ebf2baedee95a0513243f303ecd9ce8', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '71f2068f64c21f05aa2a7dfc73bef9bff955cee3', class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '1de0f6427531106ea114a0d1e6add4b55ad94cd1', 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: '800beaa37d2cf652fee7dc5c6142be3864d5eb1a', 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: '521291c5ee76584e2e74168ef4764757b3ca106c', "aria-live": "polite", class: "carousel__slides", onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '6ca18c99665057841218b495f857c24d7c00af7b', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: 'b42685db89a56d4830eeb1239fa54fe56223fb9d', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '606cbedb8b004b08f7290b407e0569c238158f3e', class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '037152058a9a8ba99ababb57d658d7c5cc24dd61', 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: '094722563650554507a9a4a9ab0fa2a4a4e7b517', 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: 'e29a4b19ae43f38307b23928202735913fd223a0', "aria-live": "polite", class: "carousel__slides", onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'b2f30363455da8ea0d46e0633f831e183fb4e5f0', onSlotchange: this.onSlotChange })))));
     }
     get el() { return this; }
     static get style() { return SwirlCarouselStyle0; }

package/dist/components/swirl-checkbox.js

@@ -54,7 +54,7 @@ const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCheckbox ext
             "checkbox--invalid": this.invalid,
             "checkbox--unchecked": unchecked,
         });
-        return (h(Host, { key: 'd44ffecc0c31556046cd85669ae4c4c3c8a3c838', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '50ea3a331ac215db2e0bbc60b2be3d0e46adf867', class: className, htmlFor: this.inputId }, h("span", { key: '2e6ba1107b375c354e19059f4d793122d79626ad', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '09c7dda3c827041bab637f7a6386595003b731ac' }, h("input", { key: 'f3b841af474381fc828dd9936ffdeeb2498e8ec0', "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { key: '502c9f0de587d6b04e0a696ff2fbb120e863a0d7', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: '3004f914efc6565899f5f1d16fb7d91d66922759', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: '0dd463977ed5ed112ea8ea48eb86fb543ea96abf' }), indeterminate && (h("span", { key: 'eed5f1e4d53c2aefb684a176fe4639dde65c0a5d', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '2f6eeabf37975c052905e09614ec2f4d17ac0415', class: "checkbox__label-container" }, this.label && h("span", { key: 'f585de5b2850ff6180e1bacaad8a5a8143ff42bd', class: "checkbox__label" }, this.label), this.description && (h("span", { key: 'd626972d62b4d6240affbaf4f6180adc9d6b4a0f', class: "checkbox__description" }, this.description)))))));
+        return (h(Host, { key: 'bbc24f3e3cb34a0b25cf7a1e46272fc6044ffb5a', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: 'a3ffcaef4e52604ae57dd26b97291506b1aea38f', class: className, htmlFor: this.inputId }, h("span", { key: '4ffd11cfdc97d42b79db1ed1d27befbae0a93f8b', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '609774c239efc03caeb57772d05647fc89246592' }, h("input", { key: '1fb5ef7acc8a582d200634c722821d3a3ba92125', "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { key: '29d9697422a16f5e0a6c6e71a3f2b62966fca9e7', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: 'e6511ef127391d85a6b309dfd80c6839be213504', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: 'd3ffe82c06e560a28acb496fc2229260ed9af242' }), indeterminate && (h("span", { key: '2bd6d87e9aa7916fd0b66241fc8422d27e6b52f5', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: 'a697eb7d6ab5e11617ddb962d30992388b438ef2', class: "checkbox__label-container" }, this.label && h("span", { key: '0cfab93f48f153f48a93609952b03df28a62ac9a', class: "checkbox__label" }, this.label), this.description && (h("span", { key: 'ca60f0efa10e52076d20c6f9a6c6e075e854eae0', class: "checkbox__description" }, this.description)))))));
     }
     static get style() { return SwirlCheckboxStyle0; }
 }, [2, "swirl-checkbox", {

package/dist/components/swirl-chip.js

@@ -56,7 +56,7 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: 'fb5885a5e342bf086ec524d438b9427b30b29598' }, h(Tag, { key: '06aabd7960c3919ecb90640a313462bbf89d2b42', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '4f7f50827d6fc53aece738f31aff1a7694d63b98', class: "chip__inner" }, showAvatar && (h("span", { key: '91c3b2dda9886ca0d831c7871986b979c9f272a1', class: "chip__avatar" }, h("slot", { key: '8a160db2247eb3467ce80197f9fff840a71594d4', name: "avatar" }))), showIcon && (h("span", { key: '788ca102c452ce600738a0c3f8584c748c1275f4', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'd5b3eb5d4f4384847d53e05d296ade03fe6354f2', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '49e776230624ab382a0a745d1ffa3e051c9a21ff', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '86ad1c9d6c9c4b12ccb337667272e5ecb3233730', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '1e2440e03f99407293420744d52e0c5d2c60855b', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, h("swirl-icon-close", { key: 'df8db1499738c9eb952fc78802bebfcd03cd65f8', size: 20 })))));
+        return (h(Host, { key: 'b4d76c88062465e2646fa7ca7d0c7db04bb0f9f1' }, h(Tag, { key: 'c9c9ed830168769e54d0a774486da011bdaec7b9', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '6f5d010858eaebc7012477c6de01f5c5bde71c8c', class: "chip__inner" }, showAvatar && (h("span", { key: 'b6c60ccb92aaa1fe0694f4d1e183c605fb8dd8da', class: "chip__avatar" }, h("slot", { key: '0af6eed958712310f19d7f70c1310a55ab89d9e3', name: "avatar" }))), showIcon && (h("span", { key: '5c91e5a998a108a086b7b100f74f649bdec07cc6', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '3a08fcd1a50156ec578994a000f17bd36593a7b5', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: 'b3cd34ce776fd6ffb4e29f118bc5c841df2324b9', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'e844e5ece17f9b41b3361381fbd17baf44f79e55', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '81e67bc9a0fc5a9327b5d1d766101ea0dd5eb53b', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, h("swirl-icon-close", { key: '6ad0709ea5e5166a96ca2cd005913cf88c2e598b', size: 20 })))));
     }
     get el() { return this; }
     static get style() { return SwirlChipStyle0; }

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

@@ -458,11 +458,11 @@ const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput
         const className = classNames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: '4ca17afe5b50d24b416ea733002f276d8fb70711' }, h("div", { key: '6c1f470367d7763af551c9165d47db17e311d02d', class: className }, h("input", { key: '2a66462a91ab377d737ffc8ba728cf5130aeefb8', "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: '6d90ddb69f523f7247648e252f6ad9fa070b84f7', swirlPopover: this.pickerId }, h("button", { key: '9e5539e693c42cc7d2443e55e0b7d57e67617568', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: 'a2346d18c39dc63a34b793ccd9356e4541dcd099' }, h("div", { key: '2181f5494b09a7d458ab4641bb4a6d8f1113b58a', class: className }, h("input", { key: 'fd1ebd1784f0abc95c50fea017b351bd3b12014f', "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: 'bb9f65ec406da228d4474a1dd8bf515dd7e6964f', swirlPopover: this.pickerId }, h("button", { key: 'efd73a3a270b514963b99c93d37a7fab8753a2cb', "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: '345cf6ddbcf0e9b88e2f2c639e399ef92b0176f8', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '70be116ccc3d2aec762312dc8b929cfb993ab290', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'd49d15b73f702be9401bffda2b3abdcbad3f70b1', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: '13436c091272af1fbba288ece7df98e5fb820ce8', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '8280dd788601aea97a1ceb9735f0c7a845243839', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '623c1df3053f9941837c037192f7a917503b42ed', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get watchers() { return {
         "value": ["watchValue"]

package/dist/components/swirl-columns.js

@@ -12,10 +12,10 @@ const SwirlColumns$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColumns exten
         this.spacing = undefined;
     }
     render() {
-        return (h(Host, { key: 'bf48bb3161515ba409f221191ad3b7c14c54cc61' }, h("div", { key: '97ce79b4c7d69d1600ff993fdc9e072a1fa5f4b9', class: "columns", style: {
+        return (h(Host, { key: '108d13a0f199ee797ddc7cbaa4e74d78a0314603' }, h("div", { key: '443741ebc1a3b6ab177933f82eafe7607c9d074e', class: "columns", style: {
                 gridTemplateColumns: this.columns,
                 gap: `var(--s-space-${this.spacing})`,
-            } }, h("slot", { key: 'ce624dadd830a3d3b57cf0d378aac8917f392eea' }))));
+            } }, h("slot", { key: '089c7cbacedbf46f3f68a2bb43344bf0931b9038' }))));
     }
     static get style() { return SwirlColumnsStyle0; }
 }, [1, "swirl-columns", {

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

@@ -126,11 +126,11 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
             "console-layout--sidebar-active": this.sidebarActive,
             "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
         });
-        return (h(Host, { key: '9263f766c548f35ebbb11c0e24b9d86a5e3fdc97' }, h("div", { key: 'f702278ca04a66121e4a61945e2137b035107ef4', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '4e0457065ef78ae27c97c215baf71009ee942c43', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '84401195ab6fc37ea08a163852a3cc711485ecf7', class: "console-layout__header" }, h("div", { key: '6b380acde8ac23b6483079b7ce7b51f041797471', class: "console-layout__logo" }, h("svg", { key: '1439108354b40bd0bd832c4328fa7e1080c10c88', 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: '10f9ca116415e4ac8a0e88c191b14b2126c5c05b', 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: '4d567306642f6b869b950ebc65afe355c4b341cb', 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: '205289386c1eca6c136698b1f21a404ade106bae', 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: '196d91f8af0cf3348e034811b5192743010c1a5d', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '712024746e2c5f49ddb9a37b56a9c5c6d89fcae7', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '9957d93eba8f76a42deac46e3c5face011d3c998', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '72ed785631dadaaa6d464b92e4e7221ff3c5dc7e', name: "navigation" })), h("div", { key: '95a327bdc33fe774cbdde994f1bb6e7bc4f64a44', class: "console-layout__user" }, h("slot", { key: 'a0581ec55dc1f703d968d3415f88bde0ca34ef29', name: "user" }))), h("main", { key: '6f7deb35cabd899b64a172cbe5661812f3607670', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '0a0eeec7cc01f3eec7ea0ee00d497307b79d56ff', class: "console-layout__app-bar" }, h("span", { key: 'c941f5e62fe8ff3e97e4719c270b9369f0acd2c4', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'dca78af684fb624e0a3baa0efae65d722f8cbc90', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: 'e83df777cc0cde1f53462ea4187fe3c2da747b6d' }, h("div", { key: '4de881d2ed1ad606cc108a480565062e09365b71', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: 'cf04e79778e05d6c7ef29fa0f5e33d2178d2b4aa', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '4eba2d22990fd7f713251c6980c3058a8359f38f', class: "console-layout__header" }, h("div", { key: '38170f65a3fb1a88bb8b298cf7c8df3de0d3e92c', class: "console-layout__logo" }, h("svg", { key: '5b4a6b1e0001d95654b2f3276596f64039c7ed3c', 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: '865fbaa0de6dc9584dedb2a3160a5d83f3fe9de5', 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: 'a10522b1c3cb97fc1549c203c5806f268934177c', 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: 'd0613306028fecb5153202faae5895b9d04fa3f7', 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: 'feb5e858ceea083472f1210f31c98f593f6bd35d', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: 'e653a85a4bfc57db2a389866bfd524ccd5af2cbe', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '0d11c3e373a674f3239621df61ffaaa03a83a180', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'ce46382a1c03cf9fa5a00265f6781d93b813334e', name: "navigation" })), h("div", { key: '01bfbf2dfe2acaef2217ea1fe750d2e16599871b', class: "console-layout__user" }, h("slot", { key: '58d437bdc351b287377960d211de459675334251', name: "user" }))), h("main", { key: 'fcfd4cdc9091e5f7e6fd328cc3c237ea4362f1c5', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '70cfa4cdc31da0f152403ace316a1a14db9f8375', class: "console-layout__app-bar" }, h("span", { key: '8b547bb70088b27fad43d4dcb37b8282ea6c0896', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '6e5c953660c9da12505704b5e7cd57b8c0cbf4d8', 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: '54d51ade1fad9ac066a321a36a42e7582755ab9c', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '062c65956bd65e134d8d0fb8987b5fb711343de7', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'ea7e194459a35b0a0ddad0764a994a5c814ab5a2', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '13e6a3ee151b439d20c8ca32cfe9de801574fbd9', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: '6e24d88fe2577426b2708025c75bcb4e6de35c15', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: 'cec2bfe8ee2412d032950be0aee66339c8e58f62', 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: 'bb05742c0e48411f0a46acc965b072650374d0d6', class: "console-layout__heading-container" }, h("swirl-heading", { key: '0afc4e557f3eb86e843d6ec3bb87db2b1a6822d7', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '6ba2cee0fcb510ed6d22d517f2224cfdd0c785db', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '99a633ac596c38ed0d2d48d104c0e7e512a9c964', class: "console-layout__heading-container" }, h("slot", { key: 'eb489c69a4095bc4a1e6d1b1868e729ecc842e19', name: "heading" }))), h("div", { key: 'a02c5fc14dae307388a0017e556b2c4254c4d6c7', class: "console-layout__content-header-tools" }, h("slot", { key: '1bc2eb6e90f9636f1285968861f5947329484fd2', name: "content-header-tools" }))), h("div", { key: '8d39f793a60662b43cf7f054000457ff60bddb71', class: "console-layout__integration" }, h("slot", { key: 'a7f0cb0933a74d4543cfd7d54965a0a6f469f17f', name: "content" }))), h("div", { key: '09d01349535282fbec6d238a272c8b80baa35f16', class: "console-layout__overlays" }, h("slot", { key: '395501ed4ef130d913ecb0463f0b11450e2443e7', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'd846c7d853ee0daf03eff05a12078ee248d98386', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '6ed6e1df2bc2a32cf141595672d6adcfe118ef6d', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'adf520e0a2521a31ff43dc21fe4bae0ee64f4421', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '1c65f9542422c0fbbb6cc24e6527d42902140614', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'd6481df299401e0952a650b54a4cfd18d0ced49d', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '131fa5660fa4f8d3a6fc1e60cba577c6fe27b907', 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: '1165d1a3d5df3efcb2b1362f262d4c0902615cc4', class: "console-layout__heading-container" }, h("swirl-heading", { key: 'f89d44dd0809fdd457fef13c5d40ea8ad93fda73', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '9e6a76a94c12b2a2bcf449d7b559c944f7f84ad7', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '80b8bb85428e0bf2c507cc7b98749e6d3de52816', class: "console-layout__heading-container" }, h("slot", { key: '1b57a4807873cd470f7d66fa45a53ce803111d0c', name: "heading" }))), h("div", { key: '265e78c8b4f0544698ef83db34cd3d2a36618a0e', class: "console-layout__content-header-tools" }, h("slot", { key: 'd9e5d1b8211ecaa10b827e0bb85443a0be99a926', name: "content-header-tools" }))), h("div", { key: '62cfab284a4e03872d3f8793289a5649226d496e', class: "console-layout__integration" }, h("slot", { key: '7acde4a9406a2e89b7e18dc3bcc70be73a68b369', name: "content" }))), h("div", { key: 'd268079299659d44a526f494af5c2be4eb334058', class: "console-layout__overlays" }, h("slot", { key: '296bae330c20989f3f1691c75bf8b710bc9a494e', name: "overlays" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlConsoleLayoutStyle0; }

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

@@ -158,7 +158,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
         const className = classNames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: 'db4b7e8ee3bb1591be2dd9d047b0488fea64e291' }, h("div", { key: 'ba76203c10375791ff0d71604aece968139ab82b', class: className }, h("input", { key: 'ba8b462724747deb752cd9e01082c5b58fe174e8', "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: '5979f6dd6915885d267b43099849f91b62ce355d', swirlPopover: `popover-${this.id}` }, h("button", { key: '4cc43dcf9d966899c60ec7ec52bf7c1c06be1b76', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '59eef5f027ffa65d6ec19a2b4fab0bf94fffaec7', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'c13ff08277fca8afa05d3fa640e73d89060bef5a', animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'a81bed829f465247ab47663ae5d5fe32310638a1', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+        return (h(Host, { key: 'a34fc2ba8601722502a3f84a049d714795b1f7b7' }, h("div", { key: '90cdd315c932d40161d4f34c2229e09741faf7a0', class: className }, h("input", { key: 'acb269f6fed3a694dd21b5e625b3c691700a4c23', "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: '9ca6fafc267ae50e9b20f201e5f1770a53c8e2de', swirlPopover: `popover-${this.id}` }, h("button", { key: 'b023cc4f1c4b6ad11e64d228adc55b0202d22800', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '93eeeb8bd64b43e79ce3a5263afbf7324de356ca', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '148f5802cd5e7b449758178bf381106b4bf910ac', animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'dcd39fbaaae46f7d222f017b777206564e0246af', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-date-picker2.js

@@ -33,7 +33,7 @@ const SwirlDatePicker = /*@__PURE__*/ proxyCustomElement(class SwirlDatePicker e
     }
     render() {
         const startDate = this.startDate instanceof Date ? this.startDate.toISOString() : undefined;
-        return (h(Host, { key: 'eca80cc13af260cce6037f1410fc9a9ca441788d', onClick: this.onClick }, h("wc-datepicker", { key: 'ea971f3fa86ce247a205a9f9d4ac572ee5caf421', 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: '8441082ceed994e5b69a89f50a2c4100a9c67f77', onClick: this.onClick }, h("wc-datepicker", { key: '207e37269388580d50e546ecef84a3cca863ab11', 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 })));
     }
     get el() { return this; }
     static get style() { return SwirlDatePickerStyle0; }

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

@@ -24,7 +24,7 @@ const SwirlDescriptionListItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlD
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,
         });
-        return (h(Host, { key: 'dd2a318e9af7dfacededf1cbe8a8e771bf38b068', role: "listitem" }, h("div", { key: '4e9ee660a1cc215d1463b55c824e06e4442a0893', class: className, part: "description-list-item", role: "group" }, h("div", { key: 'fa19d21747ea7f9413934dc7124e340a4551ae7f', class: "description-list-item__inner" }, h("div", { key: '842b63f54810d42256f96bc7ed4983cde57a5585', class: "description-list-item__text-container" }, h("div", { key: '9013f211af3b9196b7335ec22f4be4df686fb2ef', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'ec6aa5291fb5f044503670cc04af20eb90226df0', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '46aace63193b59cd0014d3f9ec13a8b793a6e37e', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '897def91ca891e814e383964b583bbda42f5f7ea', size: 16, tabIndex: 0 }))))), h("div", { key: 'bbb30b6eaa0d521c121933e0ad0e92d778e221f8', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '1fa21ccc53235813326a0481064bab90218e98c9' }))), h("div", { key: 'fd8d9c02eea90468cf7809687f18e3323e2ead55', class: "description-list-item__tools" }, h("slot", { key: '3a7fc5f57498018974f0a897299db17f3e9c84c8', name: "tools" }))), h("div", { key: '098c5f9eb6446ccaf36753a4763789bda6f1beab', class: "description-list-item__additional-content" }, h("slot", { key: '0d529810fe8d94849adee370b7aadf19d5688b33', name: "additional-content" })))));
+        return (h(Host, { key: '2a3394052e1985e01ae4e3e98b5db31636f49e9b', role: "listitem" }, h("div", { key: 'd2458b39aa59ff859fa1fed5d4f660656a2284f2', class: className, part: "description-list-item", role: "group" }, h("div", { key: 'be23d31b0da4f61f35266027a9ede0c87f5aa031', class: "description-list-item__inner" }, h("div", { key: 'c10cf95754cc58374e45233543a865a3a74dbcc1', class: "description-list-item__text-container" }, h("div", { key: '296b1e81b716c778c52d79039d5129265d4e6039', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'd8a0d0be6f19201961f8c80401b58b2d9e11a0ce', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'c26f9c94df5c2689c4dfe79b7085a864f0339df2', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'f115d2fcd4ec02a5fc64dffdcebed522a05d7f08', size: 16, tabIndex: 0 }))))), h("div", { key: 'f9e2674d205ea603733ad53ba6d3e7f0962f0371', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '5439eae6c69daeef0f95b35e3251e6ffc500ae17' }))), h("div", { key: '276da257649bd8fbc9269a8ff7a84c0ace620e02', class: "description-list-item__tools" }, h("slot", { key: '31b28891b51823d5ee16bec99cfab543b40fbb77', name: "tools" }))), h("div", { key: '014f63ce874c83fb27040297b760dda5232c2010', class: "description-list-item__additional-content" }, h("slot", { key: 'ce6cc4ecff2564e4ca3a9143d7f93cf8b688c055', name: "additional-content" })))));
     }
     get el() { return this; }
     static get style() { return SwirlDescriptionListItemStyle0; }

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

@@ -10,7 +10,7 @@ const SwirlDescriptionList$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDescr
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'a60b278b60b5d2360769b9ab9ac48bd7077187b7' }, h("div", { key: '8b5deb1dbb0e1457aa1884948e47c542337dac17', class: "description-list", role: "list" }, h("slot", { key: '534d68fa0a30433d5bd7dccfca03356f85f7845e' }))));
+        return (h(Host, { key: 'cddb8d20f884355eab1b79af381058f3a1cc5c89' }, h("div", { key: '7882f4721c8fa431fc0d2c7f7e150d318a6e44d2', class: "description-list", role: "list" }, h("slot", { key: 'bd828613f3a9f0108ed28d5822bf71f6106c17eb' }))));
     }
     static get style() { return SwirlDescriptionListStyle0; }
 }, [1, "swirl-description-list"]);

package/dist/components/swirl-dialog.js

@@ -73,7 +73,7 @@ const SwirlDialog$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDialog extends
     }
     render() {
         const className = classNames("dialog", { "dialog--closing": this.closing });
-        return (h(Host, { key: 'a479a8b294450830e04247b7d29e6cadbf7f775c' }, h("div", { key: '47d0b859590c6c15afd21e388ca3ffb84a3e5118', "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { key: '017e3c6944ec7b262a18caae4837533fddb92c91', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: '9ac5955b7693c065818b25b36626d9739c94d840', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '9b001136a2453ea11dcbc7506fb3d2507a9a0231', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'b031c9502ae683d91892418d03b7c9344a7f0325', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '09e6fd5009b33263031f6230e04a8f83a9cee807' })), h("div", { key: '35d45d6c5a667b53cfd4afed58d8393a798bc6f2', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { key: '5cd580534a90ad420c17a9346d4002462e58c371', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'f3cfcac8d46cc0c0add1740a31d692db932a4431', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        return (h(Host, { key: 'ae72af1bff06bfed4158ca4755728820e3ee846f' }, h("div", { key: 'e8fcfa1c95d0962d6df3935c2a85938d522e215e', "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { key: '6306a14d12ceefc84c4b1494acad0f2d35bb1a6b', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'e82741767a5f8b7ed5fd94495ea9539a955cfd31', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'ba0dc64c9aff68ec24dc7ff7efa2f3a7a5a48b96', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '7d44bbcad4beb51f81c3da8979b9309163abd5c0', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: 'fe80434e4e387bb57fd250b4c895a90357cbae10' })), h("div", { key: 'a7b89757fd155fd3d895e68c9678f7aaf1e3b114', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { key: '10ffdfb436bbf8b29485ed854aaf4d29b77b4fae', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '039c2cfbcc5fdc05ffaeab8757dbaa7b7b00b9fb', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     static get style() { return SwirlDialogStyle0; }
 }, [1, "swirl-dialog", {

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

@@ -14,7 +14,7 @@ const SwirlEmojiClap$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiClap e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'af0041492c1c5ffcb101d1491767551714be1bd9' }, this.size === 16 && (h("img", { key: 'a82cc92a70f644723fb98d2a21f3f3ecd3422855', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'ae22b35ec719e403234b1071ea7ed994ef48d4c8', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '657d9e6837622a8caf01bbc3601ff56a06cc1c69', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '32f618332cd723dfcb6cfd789528b886ae657a42', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: 'abcba8eb84c527558cdbd4a9a2548d1a9d3d0c03' }, this.size === 16 && (h("img", { key: 'd4db4cbe16e5957460c21fa5c0dda581048432b3', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'c01de34035120ee48383197cc6156b451ba17137', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '6104def3cd429aad214015b17bab0bfcf212a91d', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '961eb49f5559add68730f8e098a1f92461fada6a', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
     }
     static get style() { return SwirlEmojiClapStyle0; }
 }, [1, "swirl-emoji-clap", {

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

@@ -14,7 +14,7 @@ const SwirlEmojiHappy$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiHappy
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '51ae525573cbcb17769ecc50b13eafdf611ddbbb' }, this.size === 16 && (h("img", { key: '8054ec4a3b5406c3821414ab846efb0cc714c1af', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '4b8ff616474664ed80d78b5aaac359b10aebf9c4', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '983283ab8a9dc12115049beac7acbc67af5d26c2', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '7a8f556faac85533526cf2853927399e5955cfbb', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: 'ad765fa85d4b1c7166ed8e60414bbf3a6b050303' }, this.size === 16 && (h("img", { key: '80e595db3cbbcf61be0310fd51bcf98d8c2c9b51', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '21c9f87a0e268c55c9496a89d3be683b691c9dcb', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '833cab6ce8e0c19b610af7a16dba869912fdccb5', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'fdc006283bc275ff8d2651cc4ae142a82fcec154', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
     }
     static get style() { return SwirlEmojiHappyStyle0; }
 }, [1, "swirl-emoji-happy", {

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

@@ -14,7 +14,7 @@ const SwirlEmojiIdea$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiIdea e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'f49af0f493e19af1f4fe8fa07c09394c7b8a959b' }, this.size === 16 && (h("img", { key: '9a792fd59afa4b2657bfa6fce6b2fec62fa9a8da', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '02eb010b9b418fb9fecb94b57cf048d9c8bf3790', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '52dcdef11ab8227380c25cb3d9dd4dc57eff87ef', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '794d14590756cb9a30a1a72cc23be9331181ac0e', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: '3d7daef495efee9c988fe263883092f233560172' }, this.size === 16 && (h("img", { key: '0d88f0164ac8ed1ff4ead71021fb8c7c38d86dc2', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: 'cbfc8094cfcea809bcf996ac99ddbb3e2ad20cb4', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: 'd34a97faf104274893626d54a5213659743773c1', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '0056ea5ef56400b798fa3a5dae5728144720befe', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
     }
     static get style() { return SwirlEmojiIdeaStyle0; }
 }, [1, "swirl-emoji-idea", {

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

@@ -14,7 +14,7 @@ const SwirlEmojiLove$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiLove e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '02061bd0870b890cab320df7e3165f0717a0c1f4' }, this.size === 16 && (h("img", { key: 'bc802ad931b5aee57a0d0ca375fa4b8f1ffc718e', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'dc0af917d57e0f6eda53861614ea04539932bee7', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '2a1cc6bded302ca55cf8c70cb12d83aec83cfc6f', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'ef1ceb1e9a836fc9025f521ed5c28cb35f0b2f65', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: 'e86d12a14b2e7cb5d5a10d0120cbdb5660c5503a' }, this.size === 16 && (h("img", { key: 'ad3f0e32259b336595cd6fbe18b829d35efabe42', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'f47113bcbeaf5247ffaf2ead88011244f9010df2', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '883e6431e23dde1290b8f1500ca273624c07b9ea', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '8f4616f66051406fed0c85ba35916af9b5d3fb43', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
     }
     static get style() { return SwirlEmojiLoveStyle0; }
 }, [1, "swirl-emoji-love", {

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

@@ -14,7 +14,7 @@ const SwirlEmojiSad$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiSad ext
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'bf1da88873d1b639470d64dfc4271abad0173c37' }, this.size === 16 && (h("img", { key: '2baea3f8fc1768212e0f697d555439112dd31731', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '74497ab00d141e3b5153bb73815b2db6500f5aa9', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '27742a15eba9a053aea92efc72753763eeb82a4f', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '75a0b11957af27c9df4ae53a7bb94910eb8f8aec', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: 'fb34d67e54b457498889aea14b9c01b9036ae3d0' }, this.size === 16 && (h("img", { key: 'bbc92a0c5cedec9dda205fcdd67677e19a51eb80', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '0546fc88323173fdc907d20fbd60cf9a782e0ba9', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: 'c19a6422cfc219488f73dd71d0a0cf3514dd274a', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '66925e8fbfc7434eb7691227c1be481b8a71ff29', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
     }
     static get style() { return SwirlEmojiSadStyle0; }
 }, [1, "swirl-emoji-sad", {

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

@@ -14,7 +14,7 @@ const SwirlEmojiThumbsUp$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiTh
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '0ba70a0924a18242940f4eb32fc0623f45ecbda1' }, this.size === 16 && (h("img", { key: '0af24dd1020019b739a8b7bbb5409ad842ad0b46', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '3593082e2cfe3ebf3ebe788e508ae0add6fdf11d', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '90336b2eb6b9196d2b84e566c1a8476f75f2fb94', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '6e40369d8dc2d1155691a4ab2ac6ee73594f27f9', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: '4d3c4bfb3bfb2030779a268946f0d4f4774bbdad' }, this.size === 16 && (h("img", { key: '205dbfd497a8ec8ed4931efaee59096788ec52d5', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '7b7f58c91bfc9356819950c1841ce83f2b6226da', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: 'dfb02d3d502f5d14fb694847344d41ab2034532b', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '65cadf0ec1704610750931eeab641090cabc3073', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
     }
     static get style() { return SwirlEmojiThumbsUpStyle0; }
 }, [1, "swirl-emoji-thumbs-up", {

package/dist/components/swirl-emoji.js

@@ -14,7 +14,7 @@ const SwirlEmoji$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmoji extends H
     }
     render() {
         const Tag = `swirl-emoji-${this.name}`;
-        return (h(Host, { key: 'add9f24025f70dc1f0a843eec796c93a8a081b7b' }, h(Tag, { key: 'f6d39fe1d6d284336301415471de31d5adec81e2', label: this.label, size: this.size })));
+        return (h(Host, { key: '9e327a2d08280d2e3fa4c1e105e767fe43faf5bb' }, h(Tag, { key: '1d45ac564fb6c366fb3aed65332d49538e5166c4', label: this.label, size: this.size })));
     }
     static get style() { return SwirlEmojiStyle0; }
 }, [1, "swirl-emoji", {

package/dist/components/swirl-empty-state2.js

@@ -22,7 +22,7 @@ const SwirlEmptyState = /*@__PURE__*/ proxyCustomElement(class SwirlEmptyState e
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (h(Host, { key: '910eac8b85ee42dcdcc3e35a417dab64e873f25e' }, h("div", { key: 'd2b76b353e4f59eaff40cf304bf511ff903eed31', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '26c7ad34d7845a7fe3f72e9d8edd680ec727067b', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: 'be93399b1b00f790331e04afa4adaf8c7e8ea6c1', class: "empty-state__slotted-illustration" }, h("slot", { key: '3505a06822a7f2e5316f079a029c25e2449b6d2c', name: "illustration" })), h("div", { key: '39f7790097fab3f0ca2008c0cd0638fbabd69c95', class: "empty-state__body" }, h("swirl-stack", { key: '666590ff0460748fe199daaacb8d01242990b573', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '7c1d2d059efb373e0fce2f2ccc7d3ba0987819a2', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: 'aa98b76c0669f5e1b899bce4969b2d65f152e6d3', class: "empty-state__content" }, h("swirl-text", { key: '7b81e1e942ee767cd1b93d757b44b2958119f2ac', align: "center", color: "subdued" }, h("slot", { key: 'ca182287a03f1db96e4eb9d1e46ab268817d5570' })))), h("div", { key: '0e47796c0063949ba56e7f9efff7a0a3622c216c', class: "empty-state__controls" }, h("slot", { key: '7f75b89a83f4475d629a4dc6699de27187330215', name: "controls" }))))));
+        return (h(Host, { key: 'a69b7620012d83f74a37fb281795d3372a98aa59' }, h("div", { key: '0d4b05a0470275d6f8bb05557b76aa631ed5bfbf', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'a14e963317f1444179fac8e662101c4e801fe7ea', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '7e95b8147620d992445c71a6e3e7b3e0e5b7f8ba', class: "empty-state__slotted-illustration" }, h("slot", { key: '8b3ecf12623210c586b0ee2a85a727023ebaa9be', name: "illustration" })), h("div", { key: '6a704c827cce431f91fedb45c4fe7d975fa2938a', class: "empty-state__body" }, h("swirl-stack", { key: '3a5b1b80e8a8873ae9e194cbeec6f3d58c61da39', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '5d0331dc10a582ed584a189d3f3aafd10f308ad7', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: 'd054646b5036134b39ea760f88d6eca3882fa291', class: "empty-state__content" }, h("swirl-text", { key: '3a65aefab1be1e3320412da968cc4e27886cc512', align: "center", color: "subdued" }, h("slot", { key: '533530974b07ea8924dfd9e55911c6b298958e73' })))), h("div", { key: 'c9fc53e76202b2d1e257c0ef258a7d7d2714a8f0', class: "empty-state__controls" }, h("slot", { key: 'c0335467618f043bbc9906395237b105f8232401', name: "controls" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlEmptyStateStyle0; }

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

@@ -47,10 +47,10 @@ const SwirlFileUploader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFileUplo
             "file-uploader--disabled": this.disabled,
             "file-uploader--show-dropzone": this.showDropzone,
         });
-        return (h(Host, { key: '7eba7248340d6ff2bfdf8eca2b6f42b330f0acf3' }, h("div", { key: '31d50804d886472e6abcdc1e315e6d5bfb7099ec', class: className }, h("label", { key: '21fc714d8f58e5cf4251887c9881ee4e34a4e3e6', class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label), this.description && (h("span", { key: 'e1e7ee6fb6e45a1cbb8b1b771d929690b5c0bdc7', class: "file-uploader__description", id: `${this.inputId}-description` }, this.description)), h("div", { key: 'a0e789dc19f640b477928e1996e54cecc58e3738', class: "file-uploader__dropzone" }, this.showDropzone ? ([
+        return (h(Host, { key: '3f3129b359f284761e2da6dd7d21c71a66c775da' }, h("div", { key: 'd2a0e2da7a12c4feaa4c4523450198f9bee12b5f', class: className }, h("label", { key: '5dfff8bf19f496486077b2b5155812b4d4fe2f20', class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label), this.description && (h("span", { key: 'd19edfea330d21d5e3fa053aecf1fc9d39016bef', class: "file-uploader__description", id: `${this.inputId}-description` }, this.description)), h("div", { key: '7408c3908bf05f951d0acd9a7e76ab81c840168f', class: "file-uploader__dropzone" }, this.showDropzone ? ([
             h("swirl-icon-cloud-upload", { class: "file-uploader__dropzone-icon" }),
             h("div", { class: "file-uploader__dropzone-label", id: `${this.inputId}-additional-label` }, h("span", { class: "file-uploader__dropzone-cta" }, this.ctaLabel), " ", h("span", { class: "file-uploader__drag-drop-label" }, this.dragDropLabel)),
-        ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { key: 'f3c9cfd6e398d26b4437a649ab0b288b04a24ddf', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
+        ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { key: '878dbf54918a1239d2ef65ac713ec13e5733dea3', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
     }
     static get style() { return SwirlFileUploaderStyle0; }
 }, [2, "swirl-file-uploader", {

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

@@ -17,7 +17,7 @@ const SwirlFileViewerAudio = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '26977a7dbd4f004e22fd2a21e5c4e3aeda57e49b', class: "file-viewer-audio" }, h("audio", { key: '412fe0c7cc75b4e9725a65cfd3763e4a31d156a7', autoplay: this.autoplay, class: "file-viewer-audio__audio", controls: true }, h("source", { key: 'a6390de71325dcf11982b6d277b4c150fe2c0a6a', src: this.file, type: this.type }))));
+        return (h(Host, { key: 'bcd643843b7dab8dbc081b27ba64f9aa3e0def96', class: "file-viewer-audio" }, h("audio", { key: '35dae5dfeb9949f158b782c801279ad574774967', autoplay: this.autoplay, class: "file-viewer-audio__audio", controls: true }, h("source", { key: '156d490b5da640cdbceb0d8ced2156d14029325d', src: this.file, type: this.type }))));
     }
     get el() { return this; }
     static get style() { return SwirlFileViewerAudioStyle0; }

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

@@ -63,7 +63,7 @@ const SwirlFileViewerCsv = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
         }
     }
     render() {
-        return (h(Host, { key: '9de54e5b54d7d03ac4c70e30781c59604088a1fa', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: 'e3e066bc3834e4d7d1d50056dda8f1316b92a52d', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: '9896303d4266e2c59799ea01487a3b2d740a4ffd', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'f6b31328d070e77694bee923dbfaf65430cec0a4', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '34d7e1f6ea9c81bf50a8f5ec23eb73f3d69959e3' }, this.data?.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))), this.loading && (h("div", { key: '109596c95c2b4de6c276f9905f89a40daab4053d', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: '7582c12b0eea6c9eab16d1c45103451780ab0389' })))));
+        return (h(Host, { key: '4d6705d9255af74e6787243ff5fd6bd09d44534b', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '4c5405f1ec4d08be4ebef0be4dd644a648d188e3', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'd928af732bc1f3fc6d990b51abaed0918a94c1ce', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'faf72527b34cc88153aaacdb43a50bd6029f4ec3', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: 'b1c63009b48cf40413e7112d87d6cc5532d40817' }, this.data?.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))), this.loading && (h("div", { key: '795fc611f4cc802c0edd32672ace4e94882b2b97', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: '6c5a320ef84d47fd77488d5c1b4366ba80b98ba8' })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -37,7 +37,7 @@ const SwirlFileViewerFallback = /*@__PURE__*/ proxyCustomElement(class SwirlFile
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '013c3626aaf69477c1a36dbb73a3bc9ab35fe6af', class: "file-viewer-fallback" }, h("swirl-stack", { key: '009d8e202845210ce8259537baec1ec4f93caef0', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '3ae8921a9c0c5f04a8b4998ce93e9805c10cd83e', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: 'cb3224d8ab22c78aea29f286ee1948165b813f1b', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '756d8099401a76adfc6d4607a80078fa4bf92b36', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.download, variant: "on-image" })))));
+        return (h(Host, { key: '97382ca3f481f79d55eed585cf62d465932606bc', class: "file-viewer-fallback" }, h("swirl-stack", { key: 'e7805f2e95d1c4447059cb2acf776fb0bfd2470f', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: 'a7a4e8bdf685c2cc22ee82f1daeb6daadb813fd3', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '5fa1639a14950d5ebe4f23b8ae62d5de369639b3', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: 'a967207be6621b2cb4a6d4346114f52b225fdb40', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.download, variant: "on-image" })))));
     }
     get el() { return this; }
     static get style() { return SwirlFileViewerFallbackStyle0; }

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

@@ -189,7 +189,7 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         return this.updateZoomAndPan(1);
     }
     render() {
-        return (h(Host, { key: '344f6ae2acaadab72556d29101884444c96bfe60', class: "file-viewer-image", onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: '91a9b17afab842a29e8e6c088db976a75aae623f', class: "file-viewer-image__error", message: this.errorMessage })), h("img", { key: 'dd2beccac1e94d4f41b02e8c9d80950920053c07', alt: this.description, class: "file-viewer-image__image", onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.imageEl = el), src: this.file }), this.loading && (h("div", { key: '2dd07c6c3aec5fce3a94a1e3db3187accb631e11', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '78fbffa011dbc99db992c83313b60871ff2ffe6c' })))));
+        return (h(Host, { key: '3ee4a82007ecc277009e2fbce01f3f57d8f456fa', class: "file-viewer-image", onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: '2b33dd0d7d58b2a4b7b1e965d5c507c25ce496ba', class: "file-viewer-image__error", message: this.errorMessage })), h("img", { key: 'b193c403449c839e922552f78567e905926a18ea', alt: this.description, class: "file-viewer-image__image", onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.imageEl = el), src: this.file }), this.loading && (h("div", { key: 'd3cf14e815493145dfc2e861e370a13b1572941c', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'eb0106b0517816eed2e7d75e4f9e63f77f47d279' })))));
     }
     get el() { return this; }
     static get watchers() { return {