@getflip/swirl-components 0.317.2 → 0.319.0

package/dist/collection/collection-manifest.json

@@ -188,6 +188,7 @@
     "components/swirl-icon/icons/swirl-icon-link.js",
     "components/swirl-icon/icons/swirl-icon-live.js",
     "components/swirl-icon/icons/swirl-icon-load.js",
+    "components/swirl-icon/icons/swirl-icon-location-on.js",
     "components/swirl-icon/icons/swirl-icon-lock-open.js",
     "components/swirl-icon/icons/swirl-icon-lock-person.js",
     "components/swirl-icon/icons/swirl-icon-lock.js",

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

@@ -36,7 +36,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'f648e99e2cb37a0e48a2e77949b239cdf867e066' }, h("slot", { key: '7dd5cbd8aef91eeb4cc636df1ae549323d2097e1' })));
+        return (h(Host, { key: 'e30443cfc009758000a3b0b2268961fa9eafb75e' }, h("slot", { key: '476ece68fa8e42d711d80e111627c4eb0edebe54' })));
     }
     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: '8b9a6c456fc2e5a9f16b16853bc91ea19f1c5b4b' }, h("div", { key: '9f773a414cc13f286710c7c4dd35ba90100faffa', class: className }, h(HeadingTag, { key: '9224cf762f420a3a386382155d59012bbf5792da', class: "accordion-item__heading" }, h("button", { key: '480b62d7b722d3ea7359c57ad45e04abd607c1d5', "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: '04b433097de5349ebeda505586a4657f651667c8', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '4d57ade9bfc43294bd59afb41366f2e6b28ab96f', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: 'df80ad6b195db9097bf92a4b3cee78e0218b06fb', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '2fcd97cf9eae60e638fb2636f50cbea822b5f170', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'b484697817ce799d3d992e08ac975d86b8babfe0', glyph: "expand-more", size: 20 }))))), h("div", { key: '729fab275d515edc5f19737ba5936061af125490', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '565546dca5df85d9bc3e815ea9311cdcb13f5545' })))));
+        return (h(Host, { key: 'b83f9e2000c556d79ab910e992366d83c5829846' }, h("div", { key: 'd16691dc92dfd9e581c4d4b10e0846eadce5236b', class: className }, h(HeadingTag, { key: 'c3f9cff3e21f6012863291626cfc6c8fb3cdde72', class: "accordion-item__heading" }, h("button", { key: '38aa7c2ae8e499f0b32d5cb996aa5610b1ddaf6b', "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: '05a45b6c2c14bc7d13890753ef08ec9f09c2a910', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '67155d6bd60b8ec1481c45aa0922107ec8a2abb5', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '93ad926798a5c593aa00a09b356294be2158a0c9', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '74f9c08addd3eda4b45ad75fa930fa3a3eab5877', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'c3d2edd14173d20bb4a773716867397ea71c3393', glyph: "expand-more", size: 20 }))))), h("div", { key: '471c481565b4d40ee8164a1cde7c29bb20f9c0c8', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'c112664c3e25ce7e6e5270b6a3d6b3b3c0add285' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class SwirlActionList {
         });
     }
     render() {
-        return (h(Host, { key: '70d0e6c707203b8af3e52dca0f4053b588bb4a15' }, h("div", { key: '9ede3dd5d65ea0b7696b5e3b463547e9e32b4f6b', "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: 'b38f57e83ce6e1caa4bd1bfc4c8d912f5af281e8', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: 'fa74a3d427f124826faea04ba6acdfa7667752f1' }, h("div", { key: '5a9b9155af66b777ec716646b16527a676e26044', "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: 'c1068047e5ccaf8184dc7773e331bcc1ada6a530', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class SwirlActionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '189f588a9095c39047ca495682f114db2d3d6b6d' }, this.hasSeparator && (h("swirl-separator", { key: '773c8b78fe9a04a3c36e789eab84f4c26d22257e', spacing: this.separatorSpacing })), h("div", { key: '93137ae464cd6d3ee33193c5c5a7663a050e55e2', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '5709c23d303de51db3c145410473b8e022929179', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '3c2b6ae7f99b0d8026d481220d88d922d5e0a244', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'e814de889e2395f9eb0a93a06f335e4b134e9a08' })))));
+        return (h(Host, { key: '4746cade99a59ab4b7d6c7d276d5bbdf2731d3ee' }, this.hasSeparator && (h("swirl-separator", { key: '2ca2301f66f43341f75a7590444fc022cdaa8bf3', spacing: this.separatorSpacing })), h("div", { key: '051cf57c2418d995fc180c32d3ba9aa7942c275e', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'c64001e8c358938a084183d581f7dd19ea151efc', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '876ec9775a660ca7bdbbebad118a5dd0fb22b781', spacing: this.spacing, align: "stretch" }, h("slot", { key: '71e0d94758c25cafda3946faf1db029aa75ffc65' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: '0ebf5d4991526f74e27058e68001874ca4eae18d' }, h("span", { key: '68f7657c4ac2dd8c07d911811e6556cf323cbcdc', class: className }, showImage && (h("img", { key: '448393ed1143553d08370568dfc30b8b23b99557', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '3e17b2c93c71584430d03752a763641b386aaa68', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: '90f9007428de57708504bf15c29b30909f7d6b42' }, h("span", { key: '7119b43222a0a224268ffb6ef5debc804f7bb3d9', class: className }, showImage && (h("img", { key: '1b8421ed21164b5c921733903a5cc4f3102d0c0e', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '41c6eddecff32a689d81feb4d3ba9df4ff420b0b', 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: 'fddf4384a09977c3e8bcceda588d68df8bc28945' }, h("div", { key: '61640eb3cd9f0ddb86e314eec73f5aea1ebcd31c', class: className, role: "group" }, h("slot", { key: '6e3d9ca333d3cac62c4edae14cf279c5224188f1' }), this.badge && (h("span", { key: 'b86156b83070ff8c4263828f979ce68d7b4aebd1', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: '76e85ac1f2499bddae35aea6e1ce1281294a707a' }, h("div", { key: 'a2763cdee26628d8b3926af85302cc0d74a1ee60', class: className, role: "group" }, h("slot", { key: '1e15e3f8e2b36912a3f4e834e6f24a8e4bc0bc09' }), this.badge && (h("span", { key: 'd6c7e9e98de8e5191f17dccfe7e662c05314dc85', 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-carousel/swirl-carousel.css

@@ -1,5 +1,6 @@
 :host {
   --swirl-carousel-spacing: var(--s-space-16);
+  --swirl-carousel-fade-color: var(--s-background-default);
 
   position: relative;
   display: block;
@@ -39,7 +40,7 @@
     left: 0;
     background: linear-gradient(
       90deg,
-      var(--s-background-default) 0%,
+      var(--swirl-carousel-fade-color) 0%,
       transparent 100%
     );
   }
@@ -48,7 +49,7 @@
     right: 0;
     background: linear-gradient(
       270deg,
-      var(--s-background-default) 0%,
+      var(--swirl-carousel-fade-color) 0%,
       transparent 100%
     );
   }

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

@@ -7,6 +7,10 @@ import { debounce } from "../../utils";
 export class SwirlCarousel {
     constructor() {
         this.activeSlides = [];
+        this.carouselFadeColorMap = {
+            default: "var(--s-background-default)",
+            "on-surface-overlay": "var(--s-surface-overlay-default)",
+        };
         this.updateActiveSlideReferences = debounce(() => {
             const activeSlides = this.getActiveSlides();
             const activeSlidesChanged = activeSlides.some((slide, index) => this.activeSlides[index] !== slide);
@@ -37,6 +41,7 @@ export class SwirlCarousel {
         this.nextSlideButtonLabel = "Next slide";
         this.previousSlideButtonLabel = "Previous slide";
         this.fade = false;
+        this.fadeColor = "default";
         this.loopAround = false;
         this.padding = "16";
         this.paddingBlockEnd = undefined;
@@ -129,6 +134,7 @@ export class SwirlCarousel {
     }
     render() {
         this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
+        this.el.style.setProperty("--swirl-carousel-fade-color", this.carouselFadeColorMap[this.fadeColor]);
         const slidesStyles = {
             padding: Boolean(this.padding)
                 ? `var(--s-space-${this.padding})`
@@ -156,7 +162,7 @@ export class SwirlCarousel {
             "carousel--is-at-start": this.isAtStart,
             "carousel--is-at-end": this.isAtEnd,
         });
-        return (h(Host, { key: '49ae3956e780803b3a71be6bc6ae10f49f4ff6a2', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: 'f178dfcf58ece220b1ef9f76dbea5a72082ddc73', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: 'b9cf8dffb2017a8ce51f7ffc1d566de428481863', 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: '9b59149c2838e52c00eb3f312b5c66a12e56e965', 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: 'f5b9343af6a14957982aeca99b2931139cd9d58d', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '8684886a48992ec0f61cab7c87b73c3cba1be4d1', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: '1e26fcf73b92609c88ed3f702fe53e750e26f6da', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '02e7684b10d536d75a1590dfa162315307b01118', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '0becf4dd5a8184cc3e25738bca97c266cee87a4d', 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: '08fe60febb3c9cc4c0c5747126277586d7f24e6e', 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: 'b421a6ef4b4c1870aefbb0e54d785811cfa701d9', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'e46a799bf218fd0ceeb4baa718c9d975e82f377a', onSlotchange: this.onSlotChange })))));
     }
     static get is() { return "swirl-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -243,6 +249,30 @@ export class SwirlCarousel {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "fadeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlCarouselFadeColor",
+                    "resolved": "\"default\" | \"on-surface-overlay\"",
+                    "references": {
+                        "SwirlCarouselFadeColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
+                            "id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselFadeColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fade-color",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
             "loopAround": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -7,7 +7,7 @@ describe("swirl-carousel", () => {
             html: `<swirl-carousel>Content</swirl-carousel>`,
         });
         expect(page.root).toEqualHtml(`
-      <swirl-carousel aria-roledescription="carousel" role="group" style="--swirl-carousel-spacing: 16px;">
+      <swirl-carousel aria-roledescription="carousel" role="group" style="--swirl-carousel-spacing: 16px; --swirl-carousel-fade-color: var(--s-background-default);">
         <mock:shadow-root>
           <div class="carousel carousel--is-at-end carousel--is-at-start">
             <div aria-live="polite" class="carousel__slides" style="padding: var(--s-space-16); scroll-padding: var(--s-space-16);">

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

@@ -14,11 +14,11 @@ export class SwirlCarouselSlide {
         const className = classnames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: '4512287502ed0e8fa7faef980b14e77264c68d9f', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (h(Host, { key: 'e75b302d0c27d9571444d6019cc2295ab86413f1', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
                 aspectRatio: this.aspectRatio,
                 flexBasis: this.width,
                 minHeight: this.minHeight,
-            }, tabIndex: 0 }, h("slot", { key: '17010c17d5149e3517cc02eda7b79abf11b79fc1' })));
+            }, tabIndex: 0 }, h("slot", { key: '63794dea8f1ab9790b135a39eb9f84e004e4e349' })));
     }
     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: 'ea86580e4084e0a511ab206034037b9a79cdd8ed' }, h("div", { key: '23c8c2a248e487325f51733a6d57f81896b8ff4a', class: className }, h("input", { key: 'e2749d5da3fe3891b56e6e8ad9d48ae5128ade3b', "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: '82da56c15058870871d53d76c6c1f2618358e0a4', swirlPopover: this.pickerId }, h("button", { key: '74871e68e08c191409db7caf88bd511cc43517d8', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: '84cc3e16101043574dd4d30f7903ce92b034309c' }, h("div", { key: '439383e3e3384bcd255bec502a2df0dd5be1a661', class: className }, h("input", { key: '59edc6b99c9cb8cfecbb4d672584a37edcbad943', "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: 'f5f6ae99f40c8bc2dd565fa2114cc5aeb795ecae', swirlPopover: this.pickerId }, h("button", { key: 'aef319ab0793cc4882632d73a73ca38f9484a1ec', "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: '64a1ea8de315b717d8d9276b9db96e2398e4d30a', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '137104c8282fc8d5c68842e1fb5d2557e90f9437', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '58b93d66d99cfe2aa045eea81d2993aafe0e4608', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: '948eb8d67e9497014133f4bf757d5a5c900ff83d', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'c6987312e10639e16573f8129fae48aa71b2d734', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'f182577c4d61d00aabb8547fa02c809ee8959243', 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: '9a2d2754b43ab7e348b9442907bd0d9e5e999be3' }, h("div", { key: '57ae7f658c082caececf3fe6649a2b8910afdd52', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: 'e8fcf07a4eb9269c8234a609e1e3944383237427', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'e40a9b4c7fe06f48a877193f9f00753ca20feaff', class: "console-layout__header" }, h("div", { key: 'e3d291425cacfc5ef1ec3c39a0579d19dcdb1da7', class: "console-layout__logo" }, h("svg", { key: '9cfec3adfaf691551c516f7086ce29504eb51ac9', 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: 'd62af68da7f3318fb33f7b6acd2d00b80f4d423a', 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: '321f14e7ee9a5932680db32faa2f4f8231b8e997', 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: '5d47862eb9af4b4921f94bc29e6dbaf1d8c72baa', 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: '9ac1dd2814708825589dd81f38f715a9b5edc744', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '073e23d4f2ced314cf5e93e51f4c3ff8459b3395', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: 'a3deea5dd9efc830d2ade631a4e43232402fd4d8', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '8663ac401dd573b7abfc788cf994ced921f85ddc', name: "navigation" })), h("div", { key: '8a1fedfd24c9696a1ebba3c44d5daf6669cf6c83', class: "console-layout__user" }, h("slot", { key: 'f036f17430a6bfd289b60f1ea521e8d372b7e21f', name: "user" }))), h("main", { key: 'a76e8983dfd2be812604f71779904b69da457192', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '1f13ae4ffabf55805d6ea6dc0b7bf6831bdc8fac', class: "console-layout__app-bar" }, h("span", { key: '08c2299265ba6b77bb0cb34ac242bb08f324bf16', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '89eaadaad9414565b554d209fb1eec6baaf1146f', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: '5595858078dcbf2b1fd42112fcd01ee93b9167cf' }, h("div", { key: '0a6314f7b0647616f5cd84145a6f4efb00a30d31', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: 'de1c401167cdb325f977557fdc3d1c960e282f00', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'f01342846ba501c93c9e24987705466fb1a47788', class: "console-layout__header" }, h("div", { key: '6d0d7c0b804e7c4e7745a5b0141090b306cf2ca7', class: "console-layout__logo" }, h("svg", { key: '86e27129a81c8c973feb1931e323d30d178d3e2a', 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: 'cabedc7b728044dc009dad217a0b6cd23b3e48d7', 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: '50338c0502b6acfc1512f7000b28b02ff56cd965', 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: '6924da416478b4cb733441366d5b2850ecd522d0', 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: '5296e69f2bb97e4ba927b1c2f7f7717e417fc407', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '9c5c6555c5e5c968a9fbf7c3c608e5e5d91eb447', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '645446cbbaaf965c34c991f256fb50b67bb62218', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '394af4d5e53f06e690016dc0349e5eb46e24a3f0', name: "navigation" })), h("div", { key: '5f492d23d18d2f03365aefcb796211ad7b12cecd', class: "console-layout__user" }, h("slot", { key: 'a4eb05fc2fe7cd6261aa378e94ced5460bc476e8', name: "user" }))), h("main", { key: 'bea6c4681f70ad6fe7952d34ef6b386173d0d8b7', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '5cd828b1a1d8f0ed5203e96ed02bca1a1f0540b8', class: "console-layout__app-bar" }, h("span", { key: '7d73db4547218b8327bf0bbd63492c6b8f25b064', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '19e341a3b45ef973393470599360fa61d2f2348b', 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: 'f937616d96378b50479e7e57d5e9412fac4128b2', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '790a724160946e0ac56509f3e042a1c82da62847', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'a37bff020b2576200382e0b588b4ebc3896d5b14', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'eec8fe1fbc5e1e36790859a80cb2850ed6c04712', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'e0c45a88ffb1e2c41c47dabb61f5a141635cc059', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: 'b1e1af381cb390dc225f9a713cab0876df9ba9c4', 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: '88ec220f0c70a831e9f2209c7a54fd0a031050f4', class: "console-layout__heading-container" }, h("swirl-heading", { key: '925e2bce54be35ec38d0dd282921d8ab5597da54', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '78ce813a886b8c0c91311b66103c23f3148b7a0d', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '8454ba98c32ff3c4a5f917d06aee1fb70bf2d7cc', class: "console-layout__heading-container" }, h("slot", { key: '9834d707a7d0f29704518c574491b7addba54f30', name: "heading" }))), h("div", { key: '174db5a6e5f8e31c523b0ad3ed9a562067cc54ec', class: "console-layout__content-header-tools" }, h("slot", { key: '030536c59758ddf499bf00c239ae219fd940ef96', name: "content-header-tools" }))), h("div", { key: 'b474dfdc481eba386a24197881870f6852cf8fe7', class: "console-layout__integration" }, h("slot", { key: '17f916eb1018880744bb3bd987ab2ec9de49d5df', name: "content" }))), h("div", { key: 'ee0cbdbe0387feaee9ad7ecc43a679b678013405', class: "console-layout__overlays" }, h("slot", { key: 'd00e565f58646b9dccd64cdf794b579ae3cdbd9e', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '7874976b0d943b6a46d949d926c71e7309b848a4', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'dc9433db63038b1dba709d95024bc91b6f08b44e', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'a97d75f252ee883901eca39d49cfbb445b2654ae', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'a8f810812fed7ad5e4e196df840e3d13121b028e', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: '3a5c83092a0b8a65bca19116cc3846e9a921dce0', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: 'bb9b1af9879c93c1d9a443fa48c3f1cef9a78035', 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: '2c3f314a9c91d78559fc76f32965d60ebade4f44', class: "console-layout__heading-container" }, h("swirl-heading", { key: 'c8e44bbdfaf7852f34db579d00a1862eb1060506', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '8ce3e7f38bf3839d809c0e09c123411d5d4fa5d2', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '10aa0dc2560370f4d30da8a5966bf0fd4b638c70', class: "console-layout__heading-container" }, h("slot", { key: '7e97de533348a07382b0df81bab78592a536d5eb', name: "heading" }))), h("div", { key: 'e0409cc3844d006bbb4e133c9ffb616b727b0c8a', class: "console-layout__content-header-tools" }, h("slot", { key: '6bcbc098a17673eb65a8c2874a8045adeeb2f1ed', name: "content-header-tools" }))), h("div", { key: '15678aa3040a39fa390e1d2e1b05348984671792', class: "console-layout__integration" }, h("slot", { key: '61c50f5ef9d62d1814f697cab41666737d55b363', name: "content" }))), h("div", { key: '739b6bb2a8495a633479817618e86bbe3766aa6c', class: "console-layout__overlays" }, h("slot", { key: '90796ad47b67ddf548fe3df282ff993b1f45c537', 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: '60561fa81107bccc810454ccbf608c7524e17f22' }, h("div", { key: '39ed1bf54b3869864cfb47bd327edb368efcc62e', class: className }, h("input", { key: '4ddc87cfa5cc10fc33c882643e2316699990d5b9', "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: 'b69c4e9ef942bc41c6386901e4353f68f1ec50a5', swirlPopover: `popover-${this.id}` }, h("button", { key: '17d351d8b26fcb20400333de5bbb9d509c2da89f', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '65e47b09d4d4f073f366c55a1af6f2122e8d1c27', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'adb5c59b4e5e654a631359f82d42f1fd85a2ece1', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '27e8e48c0ef904ee702b3540950ae3755bfb47b2', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '3f2ae1eb77b986b7e1522d5900efcb2dc4e728f5' }, h("div", { key: '5219471c4ceafaf67020a9a7230ba5bd5130b18c', class: className }, h("input", { key: 'f05d9bff27ce73576ebc076ea64fdde9bfc9a8e4', "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: '61003928d32c16bb0d1326ea0afe754f090b6fc3', swirlPopover: `popover-${this.id}` }, h("button", { key: '765192c92f20b4a86a0a0b8eb0752e7f9fde6f1c', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'ff2ef9ba18ca4a712702faf5ee19bd2cbb4b1c29', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '69901e0c6aeb4552cdb913d053a667db5f72b297', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '6b3bccc77095c5b54d8dbc03207070f2be717973', 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

@@ -36,7 +36,7 @@ export class SwirlDatePicker {
         const startDate = this.startDate instanceof Date
             ? getISODateString(this.startDate)
             : undefined;
-        return (h(Host, { key: '419bfce8d09ae9f52723a5961cee77286a0b94f5', onClick: this.onClick }, h("wc-datepicker", { key: '1b253011e2081061b972e544f542da300e991217', 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: '4fb20c5695f709b12aa3da8425551751659f94d2', onClick: this.onClick }, h("wc-datepicker", { key: '4b3375d033e80bc0aa3362757697e9bebd95dfde', 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: '365d6330e6f7913270c6963ab0b085ecb0ce5ad4' }, h("div", { key: 'e9194ea8e8805e61fcb0783e80d02272947069a7', class: "description-list", role: "list" }, h("slot", { key: 'f66201cd9883f7bd27b96b2071e5aa8f26097042' }))));
+        return (h(Host, { key: '31f8cdf6605116227d878fcf87878c341fa4be50' }, h("div", { key: '687e9967667fc2ac99dce8620cc5d4ba59563b20', class: "description-list", role: "list" }, h("slot", { key: '00cbc2fc0f676943751b8ccf379cc3f5d688c8a3' }))));
     }
     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: '2b2cc6faa87021e231f754ccad716460058dbc1b', role: "listitem" }, h("div", { key: '4127782135646567196121355b27cabf6db3164e', class: className, part: "description-list-item", role: "group" }, h("div", { key: 'e01e1580376cfc9be6a74dc997a668783c9bd743', class: "description-list-item__inner" }, h("div", { key: '9880df426f838aaf53eb78a87a8508e33c23f02a', class: "description-list-item__text-container" }, h("div", { key: '884ef5345390155dfd09d6960094019aecaba756', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '635731e535f9a09cb03bf461b366d1d3a6076258', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'f686d8d3aefb4a929444d364bffe7268a652ec4c', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '7d9eee396813ed62e5866f4b5717970571710c0e', size: 16, tabIndex: 0 }))))), h("div", { key: '46f2a1ca4efc189439f637cf5bebcc6fdeac0977', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: 'e49c0ad4c7ede5e830efc5a034aa48d22d317518' }))), h("div", { key: 'c5cdf69e34f1f8b5c37aea10f489ba27efebdfae', class: "description-list-item__tools" }, h("slot", { key: '0fb2d8dffa21cd2682f677d24bfca0bd420247fb', name: "tools" }))), h("div", { key: '2ee40bfa8f0e908d6792c9514016b2857c0134a5', class: "description-list-item__additional-content" }, h("slot", { key: '965542617b7b2e3af3d694575ecbb2c31a13af4c', name: "additional-content" })))));
+        return (h(Host, { key: '9f218ded01558b4884f5878fbcde683c6b80421d', role: "listitem" }, h("div", { key: '55b19904189f577d2aced0fb2626e74d2d0af61a', class: className, part: "description-list-item", role: "group" }, h("div", { key: '497ce10a342e7059431636ee0c95504aadcc4464', class: "description-list-item__inner" }, h("div", { key: 'b75f1f31f940fd4b013f55e2c4bf653e6a7c26fc', class: "description-list-item__text-container" }, h("div", { key: '0d8fbf2cb62bb3a81e768579b73815a2fbff1535', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '3ffcf6327cea54ef69e78f5ec5813f377db1896a', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'eda1bda51e7f9ca0d7c43bf4a11cc3957c8d692f', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '2126b3db4717b4405e463ac92c96155d57139021', size: 16, tabIndex: 0 }))))), h("div", { key: 'd471e6a33966c94ce9dce45e2d49171c0883b460', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '235f8d0c47d42c2853cfadcce9e5f81a07cc5c6b' }))), h("div", { key: 'fab6b42209a7d5e307fcf9807aefd2cae3ec4366', class: "description-list-item__tools" }, h("slot", { key: 'bd418fcf86dcbcbe7111608c1dad77c36e4f283b', name: "tools" }))), h("div", { key: 'd6444c55698a0df409b87c21a09bc8ad9454d4ad', class: "description-list-item__additional-content" }, h("slot", { key: 'fbc2c75d49844c5361208125d203cb61551da0ac', 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: '0b1d94d4f60b3bde62d1dace5ecd70349b8d996e' }, this.size === 16 && (h("img", { key: '70d8251382eee41e31d5cf203d50b305c5c5c317', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '23249d07a2623970f1e3a2e2e1f5ed8f58c91536', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '45baea65c2b80c382093813a2c5e83d0a5875466', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: 'c7545a4e0cd2136c280f3a7be7c0f8b879621edb', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: 'fb1b965ded208d1b499e970704fe1eaa725c624a' }, this.size === 16 && (h("img", { key: 'e4372fdb12decbb5bea77df28e2c30e8f0de986f', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'cb6c26490d8c7bc7dbecb1dadbad41b026481be2', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '977f4c1a828a5791f969302474c915bc4ba0e77a', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: 'a5c81159e8a6da40c810358885bc4c36f3f38350', 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: '4aa33245215f18632fb5df7e77ad2b59239cdd46' }, this.size === 16 && (h("img", { key: '594fba7f6cee74f0cf89b8dcad885591dd0d6155', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '3066b8e61bcadedf9ee62e485def48a064a9238c', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: 'f5bee8f6ef3fc8c90a4fd0b2a95d8542ea680d7f', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '686df65d088fbc84fba66392997c78c91e7d6a40', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: '8f1990247189958db4233e13711713105526e394' }, this.size === 16 && (h("img", { key: 'f5f3d0f60b41b5483e557d964b18c45a09446be7', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '4e577d0ea58ccb4cdf592b34beb67c4a24baa1db', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '338805c5cc1c325c7b16ae31eaec9e6cca5d99a0', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '227cd86cf3d2a0a27e0038b190e30a558f527c04', 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: '71ecdb75207e2147117e8dc84b7098676c1f114d' }, this.size === 16 && (h("img", { key: '1a73f728ec7731f4c9e388cf6f1db72b26ef2158', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: 'f2efc43fd2809fa393b106a31824ea2bedbefe80', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: 'c8ae50166a2b462b032169d290f5c411fc1b83bb', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '094c224298648d60ae7413a76da23ab2190941df', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: '712753654c2a4d716f16be007cb66334d753741e' }, this.size === 16 && (h("img", { key: 'c2709614828a1e90c203ef2422283d172706b000', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '9abcfa58681f88ec8f296ca3760678b695dfa235', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '81a577e943978c7bfcb19ffc9a1614e884ab7476', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'a8f27ee63de19ca1845879f96691443d9e6b682f', 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: 'ce5d47810da7c86359997705921dcd0242632b5b' }, this.size === 16 && (h("img", { key: 'd18be838cfbc751d17ca57aa8c6d1f3bb9e9141f', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '63325da590df677ecb64c1cc372223acfe6b1909', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '283a9c6a8aa790e05497e6a1e286eff4ab8a47b5', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '9683dff95b1e2642d5cbda359a34ea0fe4f52ae8', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: '0ee293854401b1e53722a85c68c2f223a2cfc4f0' }, this.size === 16 && (h("img", { key: '7d8bf10f81c8eaef1f1f5e871e16f16382e9a74e', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '440e5cbfcd508aa0b6f8a4de497e2032a86c28be', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'ed0e387f1168bfa0137c3a7ef7da99e7437134ba', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'b6a33080b56fb74c1455b42d942c2da261c8bc36', 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: '8008e5f2b3bc23d9e1c37bf5c835ad1398691e27' }, this.size === 16 && (h("img", { key: 'f36b58133bca1261b4a6724fe7f1231b9e12a36e', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: 'cee4bb8ba28248bfee9f1b65b6faf322d32b97aa', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: 'd311aa2a6b81841f96aab8838dcccb79835b041b', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '6a9ca755af47a41af1dd9cee24a4bd49a15a0b46', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: '82e118f9daa194c82b2cc5ccf78b82e6147bec3d' }, this.size === 16 && (h("img", { key: 'c6d9bf63c1ade3074958326b4dd5f4dcfbadd09f', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '5e83a3fa49f7d62292e26cfc65863797aa46f5a0', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '85b88944f43e15d612c292bd361da377b03a758d', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '6051b9d23ba75e7a1ee748c33853e5d295fd88f3', 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: '32c7d7a69509910d4f11dd72d74c3fd71178badf' }, this.size === 16 && (h("img", { key: 'c503381284b514814fa41fd20cc39d5bfb88ae66', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '9e44495d8918299dd3678d4094115e3b297de91d', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '853a16cc6598b25043a559bc96df881360709bca', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: 'f05b0803926776e8428f819a69f292797dd069bc', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: '5f5c8d8da0b88e6a2d09c948150a6b5cf0917a75' }, this.size === 16 && (h("img", { key: '5d5a6410388b3ff6405304577fa5719cc489f645', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '4e8855477b57678f4f5a52dfc74386830aeadc90', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '5555bf0465668c7f23a25fdbcd39957061c41574', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: 'fda3af74a035d90e975e340eddb8b3182cebc506', 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: 'cad60bc49276fae4d56cfe72ed06fb69806167f3' }, h(Tag, { key: '8b2324da619efd2ee8f4dd63e4b62dfbb9fe9e61', label: this.label, size: this.size })));
+        return (h(Host, { key: 'c3ff3db711db738fc99660e4cb161a54aaef33cc' }, h(Tag, { key: 'b6fdb4e900419ba6206331f5eb3246a2206e3daf', 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: 'b2c7cdf8a41625c365fea3669fbfcc67fd3bf7d4' }, h("div", { key: 'dbe0ba581446bd0305efec7b711ebed6046d0a83', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'a02d8f66af56cb2176bd5a083b6f5fe2bad923c0', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: 'f8f4f24198112c912571dce7d6752a594c8d3174', class: "empty-state__slotted-illustration" }, h("slot", { key: 'b58bbe01f06a1dacad722c2bf325e90db4758b4f', name: "illustration" })), h("div", { key: '73b5810d6ba9a303268603874dcefeba1aa76c6f', class: "empty-state__body" }, h("swirl-stack", { key: 'd3283378f052b0defceabc0cb9e6fa9918b2d229', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '29a753435128ba46fd3fb9128e878b5efd89475d', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: '2353c84e5cfc3feec631f2bd4fcd6d28fcbd50b8', class: "empty-state__content" }, h("swirl-text", { key: 'fa8030850bc7f6ed695582c1b1f8d0bb7815f4e4', align: "center", color: "subdued" }, h("slot", { key: 'd7260037d0a99faf84a8206f77bbe6e17864b24b' })))), h("div", { key: 'd2fd7b5cb909934e73b4d6d443badbeb3319ddc9', class: "empty-state__controls" }, h("slot", { key: '2dd3f0ae67ec091e7c4d1bf8df9b2f9008ec0c8e', name: "controls" }))))));
+        return (h(Host, { key: '94c0183213827a9e385891a8efaebf09a1373b41' }, h("div", { key: 'df6358b2d51045996b4db5f7d439cdac982a0ea1', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'afe293f061b57a8e3ef32d1a563ea0a50504d1a2', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '681f5893da0f9885f77335593aee396a256533eb', class: "empty-state__slotted-illustration" }, h("slot", { key: '09e0673a2b78059361be72881a0e974bbf080b85', name: "illustration" })), h("div", { key: 'dd54e6476baebaeeec075cbe453bcf3e998f6bd0', class: "empty-state__body" }, h("swirl-stack", { key: 'ad8fb7ddfda397fc19b55aa975baf78a4764b70e', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '243990d5402bfb9b02cd511300d5276ffb0ba54b', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: '1bb06393c28e20e43f80e9e1c9af44e0bc7f10f2', class: "empty-state__content" }, h("swirl-text", { key: 'cfa49896324f7a7065724129e0b2eb40308c2a94', align: "center", color: "subdued" }, h("slot", { key: '6f27905a027ffa3da097026119034902dcbacb00' })))), h("div", { key: '566a23490090c0c9c1e3bc6431a76219d34727fa', class: "empty-state__controls" }, h("slot", { key: '13e163bd884866127c76c5742faeb55c128d29e4', name: "controls" }))))));
     }
     static get is() { return "swirl-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,10 +40,10 @@ export class SwirlFileUploader {
             "file-uploader--disabled": this.disabled,
             "file-uploader--show-dropzone": this.showDropzone,
         });
-        return (h(Host, { key: 'cc2e658485aac6b80e53dd837c5b447ef86664f2' }, h("div", { key: 'fa42b9411c8948938bd55a8b2488d570706174a5', class: className }, this.hideLabel ? (h("swirl-visually-hidden", null, h("label", { htmlFor: this.inputId }, this.label))) : (h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label)), this.description && (h("span", { key: '013613eda6ffe343507b7ba03b793367b368ca50', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '97e58cf69567889d75f1c2adad3b82b0dc1c227d', class: "file-uploader__dropzone" }, this.showDropzone ? ([
+        return (h(Host, { key: '8a0cdf9a64cb2aeb4fd50a3e780c1410f3fe4d78' }, h("div", { key: '6e0e81bc954969a84bd97c5e46a0f94a5aad7e8d', class: className }, this.hideLabel ? (h("swirl-visually-hidden", null, h("label", { htmlFor: this.inputId }, this.label))) : (h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label)), this.description && (h("span", { key: '9a2ccf57e7da988713ccf4fd76cfb77a4ff9dc0d', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '5ee36e8c4e618c4b59930da2048c4d439fbf52b4', 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: 'ba5dcd96f03c299c5b9c9530e592a70604517dff', 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: '4ca41a6117e155f1f835bc386c98a4ead4885853', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
     }
     static get is() { return "swirl-file-uploader"; }
     static get encapsulation() { return "scoped"; }

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

@@ -54,7 +54,7 @@ export class SwirlFileViewer {
                 this.type !== "text/plain" &&
                 this.type !== "text/csv" &&
                 this.type !== "application/pdf");
-        return (h(Host, { key: '2abebb8ec815c10b0f31c25ff85ae107f1a0d9a0' }, h("div", { key: '44fb399dc4e492138de7221dab2b925fc01e8c29', class: "file-viewer" }, this.type && this.active && (h("div", { key: 'b9cc512a67ffcca032898c9ea631ec32a662c0e9', class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { key: '06b915918dc23061a692db54017c92a2814c2922', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '43ffea8a26419020017d18509cb2cb7b0f9128b3', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: '09610e52cc20a2eddbd3d8aac728dea3e67ae4af', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: 'e2d0a11585449712087e0faa42f9ff280f7d7430', errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, workerSrc: this.pdfWorkerSrc, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { key: '0c4d4d42f23fe8b7965878cfe7ad9fcfdfd8f1d4', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: 'f55575ded4d2c0a8b84b78f020d028efa3562fa5', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-file-viewer-fallback", { key: '234eb4e0573e4ae1ba0a56de9ec54e6b873af056', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
+        return (h(Host, { key: '604f2321a6fb26d96f8794f7cfbf9906c7148b19' }, h("div", { key: '2a746b85e98b52213857c3cc177d54129a8bc218', class: "file-viewer" }, this.type && this.active && (h("div", { key: 'a6b119e4c6a307d18823a70556e4126c14ff6a8f', class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { key: '4936716bd56694e99ca17ff01fb851df3a8dcc16', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '2aa6056c8c499bb44aa5d9c5274ab9916fb31958', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: '75128195873901f5d2882bf94480fb4b9f04447e', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '8464a0ac03ab4f481e0a1098c0d3a6234bfbb4c9', errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, workerSrc: this.pdfWorkerSrc, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { key: 'eb7328fea4e1ba4b9b8b75b80c116c470b5c6aca', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: 'b1005301fd74a6928554829635f0ce849011d872', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-file-viewer-fallback", { key: '5aa332b20d67bae558220925ab1697c34a9c3e6b', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
     }
     static get is() { return "swirl-file-viewer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class SwirlFileViewerAudio {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '3f57d9c06d7d0f558864b7142eed608b1d23c8c7', class: "file-viewer-audio" }, h("audio", { key: 'de3fd8bc413f1f5ceefde9812f836edc7d62a2bd', autoplay: this.autoplay, class: "file-viewer-audio__audio", controls: true }, h("source", { key: '64035b8d412e975d2bb3f52b2e7b916ff0d37c52', src: this.file, type: this.type }))));
+        return (h(Host, { key: '01519d551ea031ae0f66c6d2df64952168a68ad7', class: "file-viewer-audio" }, h("audio", { key: 'de7b02c56e7ff272bd6ee89b74eee8891cf72401', autoplay: this.autoplay, class: "file-viewer-audio__audio", controls: true }, h("source", { key: 'f66116d692f4d68b15d5d05b815523f373a1707d', src: this.file, type: this.type }))));
     }
     static get is() { return "swirl-file-viewer-audio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class SwirlFileViewerCsv {
         }
     }
     render() {
-        return (h(Host, { key: '7b3af3a9fc70122957ce42576d61d1102c4826c8', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: 'da8ee56f911896edf82e19b8ebac2ea357916671', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: '3c8d9832529dd55f374e26618517109cad06494e', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'c599d7bbe0c45a8bc043c720b84a1d9675cb93e4', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '4e86dd24c91a88dc16e9319c86703cbfad61a330' }, 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: '9f7739c3a3fa5b2a0c3fa292334622174e725c98', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'fd0497d6aca0a5e52da3a7cd722e771526a297cd' })))));
+        return (h(Host, { key: '8301a0b59b8621e8820420812830c4880ca856ae', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '8f18df3914ab948b3d5284c598a9854a129c2961', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'bbcf05a09e8ce1c546892242f4d896d98427f75a', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: '15fa290cd1a12b6f6c38ba74d0ce16e4c108c7b0', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: 'b18bb1d508c38d2118bb50630ec5e31d0bc89cb4' }, 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: 'b7339538a440fd93978717a1f722e45f2b98cb2f', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: '5eed4a1a4c04f3d6f2d51a0dd8b913bf518e0ef0' })))));
     }
     static get is() { return "swirl-file-viewer-csv"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class SwirlFileViewerFallback {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: 'a508fc10952d8de78855302a84acafa61d07719b', class: "file-viewer-fallback" }, h("swirl-stack", { key: 'e1f41ea7f173355593aed04f68867a8a0762ec48', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '8985b776ed7280d7688366fc61d720f0a8ef6d39', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: 'e592e51a0ee36c3c5388b62601a53f834c56f991', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: 'ea032fff8311110698acc416586737327d69e850', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
+        return (h(Host, { key: 'bf155637d99022aa366c199749d9627146adca41', class: "file-viewer-fallback" }, h("swirl-stack", { key: '9d5c833b3e088121a9d9b7fdc7e94f9263e88773', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: 'f564d3f71b4b39355901ba3817d5e2da36c0b4e5', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: 'a19e3152ec495ec5df23bcd22bed62d97b621bbc', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '3b780d3aa5476a6ca31a7d3afa85e6a10b883dd0', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
     }
     static get is() { return "swirl-file-viewer-fallback"; }
     static get encapsulation() { return "shadow"; }

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

@@ -190,7 +190,7 @@ export class SwirlFileViewerImage {
         return this.updateZoomAndPan(1);
     }
     render() {
-        return (h(Host, { key: '2fa6869aa8c5092c5678043b81b902e0676991c5', 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: 'e480072db6446a0bf2215fafa381565fa851d4bb', class: "file-viewer-image__error", message: this.errorMessage })), h("img", { key: 'fb8d01366bced3c9f975a85e33a72107558bed9d', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: 'afbf258f4b9a3a8c1fd99df61d9ca9068c7a14b2', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'fed5620e31c77acf7aac99e0d584b8b3899d683d' })))));
+        return (h(Host, { key: '7a1fc1de65e82ed4792fa64b5c13b1282669cf1e', 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: '6984d44cd79d60482fd43387908a4dd491adf062', class: "file-viewer-image__error", message: this.errorMessage })), h("img", { key: '5fc53101cc8cd65923902f6d57b96a32534b5342', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: 'b9f74f9f930e54fcbb50dadef8fcf8b200ab5077', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '0e5cf4ade9961afd245e5be1c2fa10bbdbe8bc8f' })))));
     }
     static get is() { return "swirl-file-viewer-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class SwirlFileViewerText {
         }
     }
     render() {
-        return (h(Host, { key: 'b5e4e08a4e936c6b156e1d06b647f43b3f0af10e', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: '56282aca503fedfcc98620fd8d2f54483b3c4300', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: 'e9350ca1c44fcbe12e773424e24b8905d710402d', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: 'c1c62378b963846b8e21539d62350715ff5b2190', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '544b6d31adaf2ff3269ddbb416ca39f5c29e892a' })))));
+        return (h(Host, { key: '5ea1998a73c77c1dbfa95b329ec2be5a8c537ebf', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: 'ec48aea3c0289fb8ca8186d60b1092597fb1d145', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: 'bac115375d994e6eb28bcd44371fdfe11a102836', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: '7144393fca968b21d2a8a61ee0032da85e1fdae9', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '378b38578720f45abaabfa7f43b3a800a0c17944' })))));
     }
     static get is() { return "swirl-file-viewer-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class SwirlFileViewerVideo {
         }
     }
     render() {
-        return (h(Host, { key: 'e301492b43b08de5572a6f345b4f53dc170476e7', class: "file-viewer-video" }, h("video", { key: '2c533b0f0038a64a8dbed6c499cd12f9f16dd06d', autoplay: this.autoplay, class: "file-viewer-video__video", controls: true, ref: (el) => (this.videoEl = el) }, h("source", { key: '25e11bf4263d6fb2eb4c0437422ba6f5fa9ea7dd', src: this.file, type: this.type }))));
+        return (h(Host, { key: '9c2a61ada059a49cfa7d2a70a8f15ca48044d0cb', class: "file-viewer-video" }, h("video", { key: '4fd6c096beb63f8b45ab4e075ce9884cbaa9d80e', autoplay: this.autoplay, class: "file-viewer-video__video", controls: true, ref: (el) => (this.videoEl = el) }, h("source", { key: '329332794c1d2a79bdd8d7e0725b630cf9dfbd35', src: this.file, type: this.type }))));
     }
     static get is() { return "swirl-file-viewer-video"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-form-control/swirl-form-control.css

@@ -415,6 +415,25 @@
   }
     }
 
+.form-control__icon {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--s-space-20);
+}
+
+.form-control--has-icon .form-control__label-text {
+    margin-left: calc(var(--s-space-20) + var(--s-space-12));
+  }
+
+.form-control--has-icon .form-control__input {
+    margin-left: calc(var(--s-space-20) + var(--s-space-12));
+  }
+
 .form-control__description {
   display: block;
   margin-top: var(--s-space-4);