@getflip/swirl-components 0.429.0 → 0.431.0

package/dist/components/file-manager.js

@@ -88,7 +88,7 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: '4b81a01101dd7e0b49293574a5d5b61ebc670b54' }, h("swirl-app-layout", { key: '5228c1c226b25a541ea82fb2632c1d2d537717f4', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '3d82c65cff6b591c5b016646888f4727dac07760', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'd4f6998b5d087dcb2fa7113403dba3ff805c349e', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '4a31695f6fdf5947aae4f8cef5b829dbd7929fde', label: "Sort items" })), h("swirl-stack", { key: 'b28e81b669130090b7a72bcd54b3dd8026f32b4b', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '4e7a9bea6e811dcccd5b2ed10ee9122926867b93' }, h("swirl-heading", { key: '37a4adaff2f17a7cd89954043e1536ecdfc89ee6', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'f55da237470f1f81bc470f45f31f02cce4281c74', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '29aac6e2a5853c8657bb2085198274cd702f7001', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '84019061a66f2f27c70aaf951da5bdee38057913', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '9ed8e2c899a07bae62b6642f7c229b7aea1e3e18', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'db127ef6f7ede6d96ef89a695dc7330e3e5f61c6', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '530ffe4f8436b18f3e5aa698ae04cd8fa2aedd9b', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '80e9363a16208d425c462247a5073eb6688f4716', value: ["ascending"] }, h("swirl-option-list-item", { key: '85f752c5a8182fa6be474cbcaaedbd28774458c2', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'fd09f6e8c8807af23275f11c5ac5966bafeb6507', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '07e41a31b732d57d68410de7204b6c15407937ef', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '430804dbff826347c3b0d3c9505f4d72d6aac93e' }, h("swirl-app-layout", { key: 'de1825bd5653bc3837fde6791177edc5a8fa11e0', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: 'e8b94748a91ec9126403db62d8a62224ee95ff15', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '09b141c11d94ffd850810ea01e2168ee0f508d0a', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '8f929f17ae034cbfee1331d62867f2ff28c7cbdb', label: "Sort items" })), h("swirl-stack", { key: '0890246f8271f0eaa192d3b570b5064e9cce022c', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'f4f3f76bfeb32e9abafd782ef1f7d3085cce50bc' }, h("swirl-heading", { key: 'f8ee497baa76c8d59a134988765732f192d7c957', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '9a4c030b6c6296bcec66520802e082c90c7e489a', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '3631a991dd45d1ea403b07a9762d5b20ae397565', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '96fbf73d2a350d0c3dc0b9c97eb78e2a61637c97', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '3e51573a4362370872ab1a6d657fad68cb56de50', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'c9cfab4eae3d2f8d8460be9855405f11972c9892', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '34433b274e752fffa335f149264c4ca93a6dd436', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '2e0363fae6106456b31a91851c05765f6ec73c51', value: ["ascending"] }, h("swirl-option-list-item", { key: '21b34ca344b2ff5667221fdaa4f08850ab103009', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'fe29d08ba463cb3e493b907df89ef965802640a6', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'a65a31b0498ab708831fa4e26eec21cb76a75ecc', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 }, [1, "file-manager", {
         "selectedDirectory": [32],

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

@@ -63,7 +63,7 @@ const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordi
         const className = classNames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: 'b35263203580fbfed36b2007641d1f83a63c6e6d' }, h("div", { key: '35c217c4a3e34ecf98b10bc39e53b1ffba8d0fc5', class: className }, h(HeadingTag, { key: '5a9e428ef98f63224fd0d025cf09b7b914337fc9', class: "accordion-item__heading" }, h("button", { key: '7c0ddadaeaa5df01bf70a8c4cb6ad74dc40557cd', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("slot", { key: '42a75751024d1df6ca107276fcdbe7f3f882aa5e', name: "media" }), h("span", { key: 'dfe928fb6416203e7476e1103f5577b703f3c1d8', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'd580febd870c6e2e44bccb23ba2c38c8ceabf997', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: '66fe643c962611eb0f9a1fe40ebdf98f40f4d088', name: "trailing" }), h("span", { key: '9a717649ec1c02ab576b69d2ab5a819f7cf3cfed', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '7c62cddc6b7a9af65fb2114c9398641f96c06e3e', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '5deea0602d5390bdabf6ab46834aa6b623436e5c', glyph: "expand-more", size: 20 }))))), h("div", { key: 'db1eb88c10e0ff64166188b483387f55969a8619', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '10d46819cced462a6f1fa9398cc34c325d0bc0ce' })))));
+        return (h(Host, { key: '329ef26823986c089f34d4ad7c3ff1300baf0fb8' }, h("div", { key: 'df687c50b36e64a12c5dc26007b02013dc00f763', class: className }, h(HeadingTag, { key: 'a14e016a4310564082f5fdae47d0bbd3d0e25d5e', class: "accordion-item__heading" }, h("button", { key: 'b140e7fc4612ec219d75cae6525abcb893d43088', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("slot", { key: '8d7ea4057af762c1de86c71a58d06bbf3e456f0f', name: "media" }), h("span", { key: '86c4cde94475e6d6941144522faededf6f96af45', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '9c3ecfbb57f67b2b046f3eade7a33e85641d76e0', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: 'c51ba50a75629ec4f6d7527dd2cd8273f06e6202', name: "trailing" }), h("span", { key: 'a9457bc370b4602adfe9cd5383b0a274d264b038', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: 'eb0df2ab5d62f528280e0ebe0e7420facc5d9297', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '514c9ca3d7a494ff2ea0c96c162f22ca05484469', glyph: "expand-more", size: 20 }))))), h("div", { key: '17feaee07371cb4f2cb53571245708773618d44c', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '9366a1bb83f68c3c663a132c88ba249e669f2a23' })))));
     }
     get el() { return this; }
     static get style() { return swirlAccordionItemCss; }

package/dist/components/swirl-accordion.js

@@ -49,7 +49,7 @@ const SwirlAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordion e
         });
     }
     render() {
-        return (h(Host, { key: '460a845a82b2d480c008336395d835cc94e43452' }, h("slot", { key: '38b47130b8c7b415a26c5ccdec36bc8edbabb6f2' })));
+        return (h(Host, { key: '030b24a78a7a066314c89f1d5e3231cd344eb275' }, h("slot", { key: 'eea5ce9022a70087b77aeb99b1e85f49670fbcf8' })));
     }
     get el() { return this; }
     static get style() { return swirlAccordionCss; }

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

@@ -14,7 +14,7 @@ const SwirlActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAct
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '0bc222deb3a1bff86e6d5848eccc54f76fb34ce8' }, this.hasSeparator && (h("swirl-separator", { key: 'd11407df329bdb42e01574020636e0bad8cce670', spacing: this.separatorSpacing })), h("div", { key: '9615a451dd4b4ead12b371e5d5ee7185087d9aeb', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'fcd3b4cee29e7f17331fccb71a5e70eb9cb78618', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '748e7da4efcbd321db239694fabb7516dda850d7', spacing: this.spacing, align: "stretch" }, h("slot", { key: '5e05616181c45744e7a22d326ff4ce12198bfb9f' })))));
+        return (h(Host, { key: '23236d2056cf06883fc44eddd3df9dd82e7a62ec' }, this.hasSeparator && (h("swirl-separator", { key: '553fc49048062dce825747e09a947bb2921fc152', spacing: this.separatorSpacing })), h("div", { key: 'c18cd6fe3d06fc07dbbaf5fdcee3aa940bf7d28d', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '69f2faad486df5732d75f4118c12b81d58886bf2', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '6de352c30adec98052e6fd4a62483ab7e663ff4c', spacing: this.spacing, align: "stretch" }, h("slot", { key: '91f31a80ca3d6ba9240a4eb3da76e0b46d7b950b' })))));
     }
     static get style() { return swirlActionListSectionCss; }
 }, [1, "swirl-action-list-section", {

package/dist/components/swirl-action-list2.js

@@ -92,7 +92,7 @@ const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList e
         });
     }
     render() {
-        return (h(Host, { key: '09d1bc4e31b1945570f416728e29691ab8d3c3e3' }, h("div", { key: '22e9fd9171e10e4848b4c8abe27294aa9b27f135', "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: 'f8774d4ee3df61df23e9219a24bd9cceb9f85b45', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '81e29fa8d000ee2acb47973b728e2e1f6b2847ab' }, h("div", { key: 'a157db0a93f5cf3e1d42feb6e54c3742b0f2b2f2', "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: 'bfeed6ba99a4f955b3ce53034538bfbf17025fe2', onSlotchange: this.setSectionSeparator }))));
     }
     get el() { return this; }
     static get style() { return swirlActionListCss; }

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

@@ -36,7 +36,7 @@ const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon exten
         const className = classNames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: '9c26acdf5286cb87a8e3645a0d723fa7822ea8bb' }, h("span", { key: '72b57e72a81b7e7234a96fcee39aba7f77922930', class: className }, showImage && (h("img", { key: '45c57c6182edd69d1ffd2bd8de7fc35dfff9bb03', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '3ac1c0820d113ffbf1cf1b7798a5cb133cb58dfc', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: 'f28fce716c50671562e9d57fa578cf9f2bd00bd3' }, h("span", { key: 'bee443883531c7b2b78997ba940ab5af0dd6081f', class: className }, showImage && (h("img", { key: 'd894bce834d32980894910d9fa121720b74d5e3b', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: 'd1a455c9cfba6382b7aee41070f1f1551a1ae804', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get style() { return swirlAppIconCss; }
 }, [1, "swirl-app-icon", {

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

@@ -14,11 +14,11 @@ const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouse
         const className = classNames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: '8fe470cabdf40babf14512d6f78a819be2fad6c3', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (h(Host, { key: '1ac4b5aebd322ad4292861e79b127b2e294b4c44', "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: 'bb5aaf6b6743afe0d9c367daf0fea7397de54571' })));
+            }, tabIndex: 0 }, h("slot", { key: 'efc916ce55f5a2d7b35917083aeea5ec6d3e03a0' })));
     }
     static get style() { return swirlCarouselSlideCss; }
 }, [1, "swirl-carousel-slide", {

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

@@ -448,11 +448,11 @@ const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput
         const className = classNames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: '76ca797ef75e13ae56b6eeb81f0c06830b7e4f3a' }, h("div", { key: '82208847977209ae0cb952b8649b810f2daa76f1', class: className }, h("input", { key: 'b5013b7d98514d3598c3143ff5766be1218f6fba', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: 'efe56176224544da0aa2d744f1a0ab15d7486edd', swirlPopover: this.pickerId }, h("button", { key: '305a37bb005ae5ecda0ab5265cd1d54dfe600950', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: '09db3f7a03c19062b300f75ac6d8e9d0c7f999f5' }, h("div", { key: '4f2ee859c9f95259174131f04a3b4f75670432f9', class: className }, h("input", { key: '27d9897b26f0520dc5916a2924ea67f8e4cb9895', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: 'f3cfa297d3450b2b78e79fe15f4f062d69c4d7d4', swirlPopover: this.pickerId }, h("button", { key: 'd3b28f980d53305cb953c3db9067abe924e09aac', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
                 backgroundColor: this.disabled
                     ? "var(--s-border-subdued)"
                     : this.value,
-            }, type: "button" })), h("swirl-popover", { key: '96da0a92762b291d94639bc6ee9087e338200b9b', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '505b258981f4f74ee4830c773fe816b607d3d5d9', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '91d15d8c742af9b1ba2fd60497c4e254720aad51', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: 'e5646504ebd2acf6c36285baaafff780c007575e', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '9fdd7e45bd2c753043396130f821fa3c5fcbef15', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '5e6f0b71e3aab034a352711815cdd503062074bf', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get watchers() { return {
         "value": ["watchValue"]

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

@@ -159,11 +159,11 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
             "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
             "console-layout--hide-content-header": this.hideContentHeader,
         });
-        return (h(Host, { key: 'ec25a5df48adb6763d42fd1c1d3fdfd7709021bb' }, h("div", { key: 'e0efdf4cbd61a726437429146b49e3a3f71500f4', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '27a242590a86e50e630a4a751dbcff9dfa11337a', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'b9429a44bc8eb5d649ec81f92d2620a32be37205', class: "console-layout__header" }, h("div", { key: '3c4a7add6736688a0644e9bde8bc8cbfc0be3dbd', class: "console-layout__logo" }, h("svg", { key: 'a0c85f9cb107de60a7a0a09c5eaad180321fd6ab', 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: '7530a8c540d5425617617bce3b84fa4e75b6ff1e', 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: 'f4d2f315c0e46eedea14552e3cfe0b03d84d55b5', 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: 'b5b3b36fc8418dcd3c08d49e2f56915dfcd2e150', 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: 'ec66937df7431d944c42598bb9ad9f4e6a217c4f', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '84cb0977bde0f233950365631ca5e688cb48409c', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '7d6b62f2168d6cb2d0d7e80db2f95dfe28b89b2c', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '1ab81931d430fa39ee769c09bc9f1ad7cef67291', name: "navigation" })), h("div", { key: '5898f5740db84e7a6fd182032a30aba196fd03d2', class: "console-layout__user" }, h("slot", { key: '17396f96ee555f00ee1ea9e29ea46001ebb1e6f8', name: "user" }))), h("main", { key: 'a30be533b8b6b7aae54348d5d00a9e9e05c4eaad', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '8b93b464cf02da1a7106c2e2a6ecbd6a4d249128', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '1e609f161e6b3c33a2412034003ff5c69bcc125e', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '50484370f6a3d4e79075ff8ce3095526d9d1df32', class: "console-layout__app-bar" }, h("span", { key: '8c243d7ced4b1de660c25a07a9df9c114d76f197', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'eddcf93dd207822d4914eaa826d9008a496c85fb', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: '0d8bd37dc6ca5cee958c10160627c97805a891b7' }, h("div", { key: '3716318dae4223594b8a2b20b1378773d3732c4b', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '52052931e9aed9af37d770eb72ebe01fd1e5b98a', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '585173542188a82dba589ee48389380f1200bbee', class: "console-layout__header" }, h("div", { key: '7d6b1ba4eab47a1aafcf6e9d0efedbcb9133f64b', class: "console-layout__logo" }, h("svg", { key: '9e1da14f93589e84c2a34f5213bee41531fcf609', 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: '0a1ccd062ef6db7625d141a9d19ed21f5c220073', 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: '067ff1a1efdd088c87c19af83b8415dcc3dfff5d', 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: '0749dfff2adb9d8a421afd44c5fff449fa00609f', 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: 'b4f716fe2e6cfd15f0d8f99e1d8863c146804fb8', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '169320f3ea7aee0aeb4ac321dfc75e0be890bff5', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: 'd24574af90be953d12f4fc9d705228b425c9f726', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '6da540808288889ebcabf2a61b830637dee0bbcb', name: "navigation" })), h("div", { key: '7438cc918c9c443cc3efaac3daa217f1e251099a', class: "console-layout__user" }, h("slot", { key: '5c5ba585ea501b136024e70210706c67e31a80f2', name: "user" }))), h("main", { key: '7e0132b033996922e2b20bbe5e221358063c7ad9', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '188ebbc9012012755995c12f983a106e0423563e', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: 'd7bc62fb6ae78125d45d897106588197980aa7dd', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '96fb32e9993f296f1eadebefdab501abe7cfd60b', class: "console-layout__app-bar" }, h("span", { key: 'f16e02b9060ed98ca0635a595b910d191757fa1c', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '436a66a51a28b324030a953abd76cbf8e703d089', 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: '5571c8627e40f43415cce9a5eff39ddb338ca0ad', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '551fa8e3bab2eb7776da6026328f8cfc304b34f6', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '839113a2b423396937b5abcb4be388f3da3ffd64', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '2aaf4d1ee276dcce0901981b6f99c6936cf7704a', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '4e9cb173c271c62404601f38c6bcbe4b6b62e5ce', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: 'eccdf52d32cfcb07705ae77f62142990f2e47903', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '1963b23df86b236960f9f2a6bfb2d45f0211095e', 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: '41f1dd697296d29e66d7acf1cbfa3745ef7aefc3', class: "console-layout__heading-container" }, h("swirl-heading", { key: '79467f229d08960306ba49d99b86215e057430d7', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '88c482830ad6dc150f8fad080aa86fe11fb4dd0a', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '00c6292cfea6251e1d6ac2feef0ad23217a3d063', class: "console-layout__heading-container" }, h("slot", { key: '635c5ff3dc018059d8465642950c1d3e7e36ff5d', name: "heading" }))), h("div", { key: '4cad29d8473c5c3dff8edcea2d3320a890f0dea8', class: "console-layout__content-header-tools" }, h("slot", { key: '1209bbf2f8e4714727ef10fb9b16510aef992581', name: "content-header-tools" })))), h("div", { key: '21db2f41f68238f2537fc74ae39388bec3d33474', class: "console-layout__integration", style: contentStyles }, h("slot", { key: 'aa90f16bccecc1b83ae0c0072d443f82002be0b3', name: "content" })))), h("footer", { key: 'd7b81136c62b5bbe8a9fe69bb9d6ec8f0014c768', class: "console-layout__footer" }, h("slot", { key: 'a1eafa3aa18f07d54af3b467456494bda491d6e2', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '208001fe7e3786bb94af52ffe31aa47e730ac623', class: "console-layout__overlays" }, h("slot", { key: 'e928a243967fd8c6bce7d17d774842bfb2f21b74', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'ae0af1cd1167a34210f1766b46bfa949c9cbbcf6', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '54e10e1d8bd2573013b3e707cba56f679a93d208', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'e3a6f97b8bfbee32e81ccc09eda5c8d197f4bfd2', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '92ec4a6d5bd61f61e2bc53922d4cb4e8bdf65df2', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '8a473be039f6060e6e7de9b525bcf36f1d5cff44', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: '76fa94c4399d11adb41b6ca4f7fb4215d9f33fbf', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '3dfeea481886d2adb017eb110e86b2f6344db2ea', 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: 'f09ce19139118006f05cb71db0bc2decfd974b1f', class: "console-layout__heading-container" }, h("swirl-heading", { key: '68995e208c40d55837b92845b6340e5ca51bb14b', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: 'ff9c42b2e632774997bf86272af9807cf217c37c', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '6f9cae98596d11392a0b75e8bd14f61d596edc76', class: "console-layout__heading-container" }, h("slot", { key: 'd873636d606b5e9ecb8578e2468551967ebf3810', name: "heading" }))), h("div", { key: '687e19dc3541d0cbf75c79d60051657c16a9182f', class: "console-layout__content-header-tools" }, h("slot", { key: 'b9595f9ee3ff5f2ebb6afd46876f51d7ae1f9f3e', name: "content-header-tools" })))), h("div", { key: 'c587696c27af5dca093f4ebb63c8803e5870ae69', class: "console-layout__integration", style: contentStyles }, h("slot", { key: 'bd9d1af6e1a6d33f44b3fb805e56ca28d606a259', name: "content" })))), h("footer", { key: 'e9bf1d53d8e983f4059d9932a9df437649d7000f', class: "console-layout__footer" }, h("slot", { key: '2d507b51594c0a6dac27b85cc2716c7b03be0863', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '80a7b16e3482f9cd48f142f9e15032f479d39e56', class: "console-layout__overlays" }, h("slot", { key: '11d1547cc6ee50376ced47b5e416375fab635769', name: "overlays" }))))));
     }
     get el() { return this; }
     static get style() { return swirlConsoleLayoutCss; }

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

@@ -30,7 +30,7 @@ const SwirlDataCellStack$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDataCel
         const descriptionId = this.description
             ? `${this.headerId}-description`
             : undefined;
-        return (h(Host, { key: '507cc6a36af09d27674458a9b4dcf726de401397' }, h("div", { key: '497a5a2c4583a9f21b0b0f63bb99916e370972ae', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '006613533e4f988dccbd787314bfb153ef82e3a6', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: 'e7b5d0afdb72a97fa215b06df1380c9dbc1cab0a', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '8e4951017e71117193241be8cda2bcfb7d10372c', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: 'a4f47b0483f10853695efc15febacc2eecea75c9', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: 'fd70771b96857ec57adf29c7f25ea20f9f6c6d39', class: "data-cell-stack__cta" }, h("slot", { key: '68ecc877c989b14ce5b336120bef87e69382f584', name: "cta" }))))), h("div", { key: '9edfebfc17b5422ddbf49f763c1245ee4b02b7df', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: '40c9ab19ec8cf7d17f56edd9c8a5b08aee827aa4', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: 'b699f4036da82002d83aafcba421523936ec01cd' }, h("div", { key: 'a72785f24af710084dae83529406cea580fce841', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '583c5ae964fbb28b527fecf802bc0f7e5d3b2f22', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: '8296166c92bf0039b7b59eb887f19feaa87dfd57', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: 'befe65355c1e42714569955357c8db92672da70c', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: '884f3e3ed32809dbe809464f2dd4f03b72b593ae', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '951b59742fab091af29357cbe095875364f8ec3a', class: "data-cell-stack__cta" }, h("slot", { key: '1be6442250d78bd59e52108486fbf7e862373ba5', name: "cta" }))))), h("div", { key: 'afa76e23b15515ee2844ae267d62ffa51f32c93f', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: '10fd21cd5d44004810c3d52c282698753f259bd5', onSlotchange: this.onSlotChange })))));
     }
     get el() { return this; }
     static get style() { return swirlDataCellStackCss; }

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

@@ -46,8 +46,8 @@ const SwirlDataCell$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDataCell ext
         });
         const labelId = `${this.elementId}-label`;
         const valueId = `${this.elementId}-value`;
-        const labelContent = (h("swirl-stack", { key: 'df5c67144d69560084f8537c804a5a3a0c8cc026', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: '35856f41262cc85b5d3a4c9098c6db23ab93e27d', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: '5333bee47e4daedabc89d81d674f6dca7a30fd92', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '43165b2bf2700b155cd8e76f202be1d82adcb13d', size: 16, tabIndex: 0 })))));
-        return (h(Host, { key: '4bf142dfb376aea7412ee0f33b3e7a6dba35dd58', role: "group" }, h("div", { key: '258c602be1218de1dba9baafb717db8be89a82b7', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: hasCheckbox || hasRadio ? "button" : undefined, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (h("div", { key: '1f6a44d54a5cff6430cf5eefc2dcca80d0f6cf82', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: '3423b3077ca30d680471e2f33e41afa9f9d7eca8', name: "media" }))), h("div", { key: 'ba6fc8a4b4a801eb6e3b0dd4d91d28c0341cff6b', class: "data-cell__content" }, hasLabel && (h("div", { key: '350fe75c27aa21e9da96d5309f0a068694fb19d4', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: 'a3ba56828bc02dc2ee457280dcabc43a7187ade1', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (h("div", { class: "data-cell__input" }, h("slot", { name: "content" }))) : (this.value && h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (h("div", { key: '4040860779bb345ddd741705602eab4a94ed7f8a', class: "data-cell__suffix" }, h("slot", { key: '8a8a255d32cd626ff7a647794549cc46bdd5ec2b', name: "suffix" }))))));
+        const labelContent = (h("swirl-stack", { key: 'd7cc1ec7885918e65e5d390fa54e5f9fdef95fc1', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: '32f490c5dc3ce8795866cbc2608c97d27ba7e7ca', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: 'b4777d0357479b6c3055403db0262cb365b6ef76', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'a1a796df0ca70ba286ed57294786856705276447', size: 16, tabIndex: 0 })))));
+        return (h(Host, { key: '9d9fb358048e40d43c6daf4e6e7d5b9d2b9c4cd0', role: "group" }, h("div", { key: '980edd70e5f4fccdc682e28d22809f6eda3a9ad0', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: hasCheckbox || hasRadio ? "button" : undefined, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (h("div", { key: 'b36ac3bb4f97512602a84c5f61b71a60ce7606f1', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: 'd91771382cb3f68426dbd0cac008a53e1a5df599', name: "media" }))), h("div", { key: '58f40a427ec6f245dd5e7ae47431d079f226c694', class: "data-cell__content" }, hasLabel && (h("div", { key: '0dcbd9d4f2841271e5422f918507195c8cad325d', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: '7d0f291d69d033480ef2b33b9893ddd48fa3bd36', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (h("div", { class: "data-cell__input" }, h("slot", { name: "content" }))) : (this.value && h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (h("div", { key: '19dba00a25848045e23e3be954faee6f12971e60', class: "data-cell__suffix" }, h("slot", { key: '6abeddd25de73c039bc88813961e2c6619211d39', name: "suffix" }))))));
     }
     get el() { return this; }
     static get style() { return swirlDataCellCss; }

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

@@ -226,7 +226,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
         const className = classNames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '2eb7ea49306172fb04bc69b8e480ae52f7d7ceaf' }, h("div", { key: '4b6132bdde148ad48f83326950c9e2ffc8949a59', class: className }, h("input", { key: 'f67381dca7356d016ea8abe52c0400e1a8e29cea', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: 'ead6f6a5c0c673c706247638f4d512ebfdc25d93', swirlPopover: `popover-${this.id}` }, h("button", { key: '718c4d0929e801719584a0d8baadf77c4431490f', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'd1f74a5cc2cb30006cc31ba1c6c9774a86d3c353', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: 'a624faec03f257ec372a0737a6718e4d5827cae7', 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: 'fb685fdb372e2747cba66692f36ad46002718892', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '9f4c97155953cd52e5604282335575ac7d422548' }, h("div", { key: '741a8481da4b9fcb3e04813e0f0e3dedabbf9be2', class: className }, h("input", { key: 'ce167f58cd6fae6100e738185c4addfa441c0178', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: 'd16a99d46026712b4f83e04d499c19ad8738a03e', swirlPopover: `popover-${this.id}` }, h("button", { key: '3535d1830088f53045d37e3b870fb487f6143aa4', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'a64b39ba3119c06704a9ff01d8aa5b6bf9a2f569', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '02ca73ebb12df7712a51ca3a1dacd56749f8471f', 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: '07ab0a2a647591deff7150cdb323451eb938ea88', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -44,7 +44,7 @@ const SwirlDatePicker = /*@__PURE__*/ proxyCustomElement(class SwirlDatePicker e
         const className = classNames({
             "date-picker--fixed-max-width": this.fixedMaxWidth,
         });
-        return (h(Host, { key: 'fd93d69647e0895f1390b39571ed79c3c8c6bc83', onClick: this.onClick }, h("wc-datepicker", { key: 'e414c0389654b9fe2a75e635abaaad4dedd6efe5', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
+        return (h(Host, { key: 'b4ca7661d33f3353987a571d6540551cc7dbb125', onClick: this.onClick }, h("wc-datepicker", { key: '75ec2d36b7e5a540c344dfe68080d859ad904e9c', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
     }
     get el() { return this; }
     static get style() { return swirlDatePickerCss; }

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

@@ -20,7 +20,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: 'e2dae4c05e0d737b33bb690f9571b01bc5724c40', role: "listitem" }, h("div", { key: 'f4bc749476eefba93aebb6873040cb2035c7f9c6', class: className, part: "description-list-item", role: "group" }, h("div", { key: '557d6ce9b7b0d87dad52dbf40ffbd21056ba89c0', class: "description-list-item__inner" }, h("div", { key: '11b529cd14f9f936ab769ce8e8406dacfd442a1d', class: "description-list-item__text-container" }, h("div", { key: '4b15cc2f7f392d7b5c8deea5e402f666bca7ba3f', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'edf2abe8f8bb3665c757526cb92d26dc7c24adc8', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'fa412c817afbc14dd360712900af8b1397459e2a', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'e2dd532cdc0f782a604a0dfb470bdcde8579b845', size: 16, tabIndex: 0 }))))), h("div", { key: '1c2bbf097b840f96a1c44b298f8070179c990d96', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '9728aa72db29eda46aaa41b692ce03f6d4ea2712' }))), h("div", { key: '6fb83ccee5fc2691322342ed7db68f87ee5f0590', class: "description-list-item__tools" }, h("slot", { key: '8f4b079d7015dacd65688af622c62fb9fecadb93', name: "tools" }))), h("div", { key: 'bf8c2e6b9968d219ebba159e541dd00587e951ea', class: "description-list-item__additional-content" }, h("slot", { key: '4a1abd184c498cb1e49f2012c94e9422793f4065', name: "additional-content" })))));
+        return (h(Host, { key: '7320af95feb4393029f216132e6928ae9f82a581', role: "listitem" }, h("div", { key: 'ca9294165c821d87cd5dd3ed397856bb753d1dee', class: className, part: "description-list-item", role: "group" }, h("div", { key: '5b1dcfc4655cc911d8a39134b1d8e7ea3cd5f9ff', class: "description-list-item__inner" }, h("div", { key: 'f4ef2483f13fef96ee004644b70fac0269c7dcca', class: "description-list-item__text-container" }, h("div", { key: '541fca3f3f4ac3c6550bc5eabbd921e57e874142', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '7c9b08aa6c245e45ca4f2f568f30b772967df424', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '46a7f9afe0b7a4ade744ae32a4ccead5bacb3003', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '3d69a75ce4cf351cd8030dc8fa25c9d403ca6f78', size: 16, tabIndex: 0 }))))), h("div", { key: 'a2542ab30113ae4706031503fd86cbcebd96593d', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '8b243805edfbefbfa6f1d06d89c9cc9adfbc75b9' }))), h("div", { key: 'fda5cfb8009b85386286a1e60e8fffa58ca7f894', class: "description-list-item__tools" }, h("slot", { key: '6d2a8ae00abe6ab13bfcdc97a732fd1e54d235a8', name: "tools" }))), h("div", { key: 'aabb2eabf0f71e8049b3fdde48a6a4b7bcf8e219', class: "description-list-item__additional-content" }, h("slot", { key: '4d4dcc24ea3988eb619b349381f93194e42a37df', name: "additional-content" })))));
     }
     get el() { return this; }
     static get style() { return swirlDescriptionListItemCss; }

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

@@ -9,7 +9,7 @@ const SwirlDescriptionList$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDescr
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'f73f7d135974ca70c52cbc6ec623aa61bb67a96a' }, h("div", { key: '3f55113d6ae5506ed9e3122cb80107ed6771fe0d', class: "description-list", role: "list" }, h("slot", { key: '80b4b4b012683b30b83658956ffadc2a3b5ed823' }))));
+        return (h(Host, { key: 'f343afcbac75a18e8649bdc56cace594bb32fad6' }, h("div", { key: 'd088799675f0ab6c422831fe2baa47fbdeb81d37', class: "description-list", role: "list" }, h("slot", { key: '640d7da6662aec8f6a98b03af6b68b608c09374b' }))));
     }
     static get style() { return swirlDescriptionListCss; }
 }, [1, "swirl-description-list"]);

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

@@ -13,7 +13,7 @@ const SwirlEmojiClap$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiClap e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '1d0863ea22c3d66bb231797ad2ff68c7a9500f49' }, this.size === 16 && (h("img", { key: '32fd806fdb0206c37ea6b95c960942b597d61c77', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '0df21795e3fc6a86350afabc747511de612c01b8', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '5b9ef8fcc048437978ca6698af848496678b10cf', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: 'bc87fe134003bee65a2ea2f6d22a7bf7b3504405', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: '92649c9101813a3fbdf0ee0356f3976173a14a09' }, this.size === 16 && (h("img", { key: 'deb8e211f35a7a9c5cefa1251a505a5167923a05', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'bb2779329cfe0c67af362ee8449e165840f233f7', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: 'd14b8b5a5f74ba2536b4547153a4b6ccae80f1c2', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '372171bb6e76a667a5cabd5b527fda06087daf16', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-clap", {

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

@@ -13,7 +13,7 @@ const SwirlEmojiHappy$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiHappy
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '413691a70d3bb7e246dbafe22dc9df883c355a71' }, this.size === 16 && (h("img", { key: 'd7f5103132c0ade3a2ad46ea65e9ca02e5bb6a15', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '7527a48a9243f3030f11df1c3886501498c75e05', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '64c5a207c560678cb70b657b80bc9c2bfb03cd95', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '08b2c1fa6cfb4e05fb031bf13aac2bcf6f5dfa99', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: '996a167769f650c08973d2de4d1f80c87c764a15' }, this.size === 16 && (h("img", { key: '4fa5967558b3f47a56fbf1d9df1b657f43bf41b6', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '9e324596b89046f0c709216b9f748d1bbebfdae1', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '35cdad5534b1ef9958830905a07538e8a79d2582', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '754754261b9724cab2d4ebc4937a8bb84b9c94cd', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-happy", {

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

@@ -13,7 +13,7 @@ const SwirlEmojiIdea$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiIdea e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '1bfc548c71f909e32e1ae38cd24abc22e548f2be' }, this.size === 16 && (h("img", { key: 'ff663fc3582afc614e07bcd2b5229b945b5a30d6', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '4d1837bb3c58b8ba10ed26ce6142b6c8fa2eb54e', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: 'bcb3cc740fe536f79e9908ba325c77659290a8ac', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'ce41322259121ca9ccf986c8c74257df37155a7e', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: '17f3a949ec46a15119f53f5390f5fb3b6e8cf745' }, this.size === 16 && (h("img", { key: 'db43276194c71c35ab64cb9c6fb8f4aa9d2f6005', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '569f2e4d4076aac230be05580f6b62fc5419a4e0', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: 'e3e5bad3ee010a842eba44d20448d037158b521b', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'da340a24432ff12f98402cf94f7366104ad5dff8', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-idea", {

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

@@ -13,7 +13,7 @@ const SwirlEmojiLove$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiLove e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '1e40d34ae4ce88e9ed4d68f38f812266f4caa663' }, this.size === 16 && (h("img", { key: '65bf3fd30437260f8323d8129ed0b85d1279fc91', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '096c1c6c7230874177593a2cc736c68c58419255', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '87e86f4967c75fea89b7a6f0ed317ee638839e77', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'e8d7c8fb30ff6180b82658e9a4ce6846ecddfda3', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: 'e2dbffa6014e4e0c63cc9a2daf17de8eda622156' }, this.size === 16 && (h("img", { key: 'b658cd56901ebaf56fb0111aa5e1d4be73260c60', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'fa47e1155c88b4ef6df1c0336bc9db6459bb6b5a', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '9a8457817455db4bced85a1276f23a026a12aaa7', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '65096936352a2fcb5a46f7b2e8936a93e543c793', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-love", {

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

@@ -13,7 +13,7 @@ const SwirlEmojiSad$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiSad ext
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '9d2b5fe2f24db0fdc4d96e4d4c0fb5dfaccfcceb' }, this.size === 16 && (h("img", { key: '61b70e1e99c44d5cbc603905d936b5a384a8f775', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '4624e2d1fc9ee226845acd965e6ad96e332d71e1', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '63ac720c829c2504ba048d46a509d259fb828bf9', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '0edc86a335bbc800bb7132bf4871da7b530fcad5', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: 'd3eeecc6ce3f80d5451a30057476cecbb5f3939d' }, this.size === 16 && (h("img", { key: '101a3e5db91b5db5acb8c184deedab103b61572f', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: 'b91b9c620697575b3b9c2be5105afb8067771478', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '238f2280b04ffec046a708f1d0bf2361d5217dea', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: 'dec251d6bb2327c9df18ad624e801b3808008e8c', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-sad", {

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

@@ -13,7 +13,7 @@ const SwirlEmojiThumbsUp$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiTh
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '33760f8e0d4719e07a8ded2687fa18e412cf0a36' }, this.size === 16 && (h("img", { key: 'e52aede20416b9ed3dc4fa1021384e7b42b515ba', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: 'f88e574c5b505abdfaa29f05543c6be950423cc5', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: 'c219f5dcec8245b540a1131d339aad00c3c558d8', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '2ffbe810c215b100f5d32268021f14634c506bf0', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: '341ebf9a753e7ee31a63323cf05b904d54950e01' }, this.size === 16 && (h("img", { key: 'cd11a48f31c798ddec1a495b182f2311b22eff64', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '937bbe442e16fef178c83e296a9ac6d1fbbd702b', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '562e9e8b315a4e0b9f8e04822b82de6a0f9c5591', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '7e38405e7335e1980e64b435d8ca0e0f88daca22', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-thumbs-up", {

package/dist/components/swirl-emoji.js

@@ -12,7 +12,7 @@ const SwirlEmoji$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmoji extends H
     }
     render() {
         const Tag = `swirl-emoji-${this.name}`;
-        return (h(Host, { key: '0effeced8331d2b7fab89d337258cf5048b83bb9' }, h(Tag, { key: 'cb6f1fa88e878569bded2e6fc0c53dcfe5eabfed', label: this.label, size: this.size })));
+        return (h(Host, { key: '785d1996969fb1d76ff1af92c9080abe7cf0499c' }, h(Tag, { key: 'e3fd1d576d501ce2588597438a067681d5b98c92', label: this.label, size: this.size })));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji", {

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

@@ -20,7 +20,7 @@ const SwirlEmptyState = /*@__PURE__*/ proxyCustomElement(class SwirlEmptyState e
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (h(Host, { key: '5df61a1af5d38b069afba9b9b05fefdf980660cc' }, h("div", { key: 'e4843d0406f975b2ee694da732f69f1187e8594a', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '82faaf3aecbbb42621f869bbab6876780c47a68a', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '2efc637d7638db6c9416aab8d5939270fc33051a', class: "empty-state__slotted-illustration" }, h("slot", { key: 'c3a8fe76345d37b4fdecbb8e8f52ad94f71600b2', name: "illustration" })), h("div", { key: '7babfddb226a55c1e16e746a547c45150654afc2', class: "empty-state__body" }, h("swirl-stack", { key: '572b9018bed4d3d27d0d4878ee66f5f0090f35b7', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '17f54f70e46a324bb1b102123f5ab77514ddc0ec', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: '29bbe9e29cb371628ec0ceee07ddbb4e0445be37', class: "empty-state__content" }, h("swirl-text", { key: '300c0e34b77fd6044f351e97bd0f4623f8ea4275', align: "center", color: "subdued" }, h("slot", { key: '8a0cadd257687a3a2432b14a16edcd516f4f73f5' })))), h("div", { key: '5f15307a7630ae017050806c435097ed0c0fde41', class: "empty-state__controls" }, h("slot", { key: 'f3c5da65b0cbd8a3e82b3aa196a14ca08e8a14ae', name: "controls" }))))));
+        return (h(Host, { key: 'eb8dbd0f9d1b1b5af3b162fdfb8c19fb12ba3919' }, h("div", { key: 'e73cf0cb5540abfd8c28970fff5022b7671739cf', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'a1847cc64ca90b1e28167bab75f2bbcd9d1267d5', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '3d94a4faf0a8aa9947b4eff89c6a52606130c46e', class: "empty-state__slotted-illustration" }, h("slot", { key: 'def1d506a19c83ad2366c833cb3d3f7c7acd9dac', name: "illustration" })), h("div", { key: '0197d025315e5492f5578bc90cd348bce0aaaeb7', class: "empty-state__body" }, h("swirl-stack", { key: '5334b5dac8d29900596adc513a5ce07b7992e26e', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: 'cc427e68dea7e6ab4e715b962b24fa6de7ae8368', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: 'b099182fa9a2ab2aa47f66b2bf429ac4c3df5851', class: "empty-state__content" }, h("swirl-text", { key: '86a59cd212030b01e9d9601a84a6189d678da665', align: "center", color: "subdued" }, h("slot", { key: '310c2837bc81f0d971ec49c5ad4e9405b04e4d0d' })))), h("div", { key: '33a512e235cd0bb3d5e89897a9be066b6fd262cb', class: "empty-state__controls" }, h("slot", { key: '1bbbc33d943cabd83f6ce2927e027e3ccf9f8925', name: "controls" }))))));
     }
     get el() { return this; }
     static get style() { return swirlEmptyStateCss; }

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

@@ -96,7 +96,7 @@ const SwirlFileChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFileChip ext
             "file-chip--one-action": actionCount === 1,
             "file-chip--two-actions": actionCount === 2,
         });
-        return (h(Host, { key: '3e1bead0faad33c7730cfa01cd4e68050f301914' }, h("span", { key: '1348f4fe1d5b3c857ee45acc3f76b16d4637b0e7', role: "group", class: className }, h("span", { key: '4f46da1daebff00af2b5165c5cedb7c26e2c38cc', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '4485ed1843092d05c757162f0cbd40a51643394d', class: "file-chip__info" }, h("span", { key: '93b30b1d83db4cc08da119e811ce407477219f82', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: '477e4795d1bbab51bee83ee8a7c08b9f064d2b75', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: 'b1e2e86961e95388ac15e774ed2f64fc2ecf58ed', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '786428a364ddccdd50b3605ce615072ed9f5e665', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: 'c8759b2cb8b754bb1abba87963cd480a02a48321', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
+        return (h(Host, { key: '3e33991fae4967ccf02b83064c588d238a42a89b' }, h("span", { key: '1b8d79438c71d0ca17f65a1fdc23bcce29502866', role: "group", class: className }, h("span", { key: '3c3693e2368997c737730ee46c3ce0fcaf91b59c', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: 'f3df0779d020d22fd568dd876c0a402bc68dde7b', class: "file-chip__info" }, h("span", { key: '12629fb888de518629d20a950e895774fc7d5671', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: 'c0e33465d49b9dc6fb820f8ec3e765d6d24f6941', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: '955c9371973bc0821619df578e711f1baf542ec6', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '29497106ff635ac1d7d4b59405cb7906abb0dcdf', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: 'f0356e773c5b8c043f0d757c08fafb11102172d1', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
     }
     static get watchers() { return {
         "type": ["watchType"]

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

@@ -41,10 +41,10 @@ const SwirlFileUploader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFileUplo
             "file-uploader--disabled": this.disabled,
             "file-uploader--show-dropzone": this.showDropzone,
         });
-        return (h(Host, { key: '393d696a4f0b5e09fea7789852ae67e19d9c913d' }, h("div", { key: 'f6036079010fa1962191656c97e3793c9d43159e', 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: '4f998d7297a6a559ecab7a6c93a2ccfc11a91cd6', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '492175c5c5b9b4f8e047bedbe178c2fa3e9c689c', class: "file-uploader__dropzone" }, this.showDropzone ? ([
+        return (h(Host, { key: '79695f75a663a26d91d6e79e6826c1372a6e0b6c' }, h("div", { key: 'a2e5abfa92adb9abb9d68487051ae972296527bc', 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: '3749d4c6847a4129db9ca0d2f706df0292de250e', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: 'f761c2215fe363ea8d703a21fce785e9abc74903', 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: '2bba872dea8c22499b4883042a900814bc635eb9', 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: '88233aa41ffc54f96f937967163c2e385b4aa7fc', 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 swirlFileUploaderCss; }
 }, [2, "swirl-file-uploader", {

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

@@ -13,7 +13,7 @@ const SwirlFileViewerAudio = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '26f96c54cd7ff05c2905d6975cfdb538d3f3d674', class: "file-viewer-audio" }, h("audio", { key: 'dc385b04e765304e7f133b14ed2a0db8398027db', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
+        return (h(Host, { key: '9350aaae0a3bd7ad626cbe51ce270fefb834d48e', class: "file-viewer-audio" }, h("audio", { key: 'f512fda1208a6f64d9627bcea34312aaed10ad05', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
     }
     get el() { return this; }
     static get style() { return swirlFileViewerAudioCss; }

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

@@ -67,7 +67,7 @@ const SwirlFileViewerCsv = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
         }
     }
     render() {
-        return (h(Host, { key: 'ddbef0546f0e61293dd00d129042bdf76e900ae2', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '4624bc589b730f784305d1cbf76b3e8b15df1ab9', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'd14d364606e3c71859ce293be2149f740fe847e3', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: '8ca914960ae60df8620d6def686937e1a9c02255', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '38fc3836efc882a4239505c4f861d746cefcf5ca' }, 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: 'c6ef34d5a639feaadec2e6a4c7b8b29a51ab7730', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'f71b14ad396acc9eabddfafe0877bebb07c02689' })))));
+        return (h(Host, { key: 'a96a8595ad0d80b8bfab94334bca6b4d21478000', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '5305dbe8c95c60d520772d0cf96ca92a61a5e6e4', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: '067686b577568af6c5a45aaa6f412f3c2e622288', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: '6ce95589ee604098281132ccdf0d938435f6c5cc', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '5f9e363b88fdb3dffffaba9aff8024c7daf14880' }, 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: '2c8bd031db9639614916f7a3a05392c61f89577d', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'aa374f98460fef87dd25ffe91a8304c6c49d4682' })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -23,7 +23,7 @@ const SwirlFileViewerFallback = /*@__PURE__*/ proxyCustomElement(class SwirlFile
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: 'a6469afbcb1d56c62d8865c1ecd29e7581dd9e14', class: "file-viewer-fallback" }, h("swirl-stack", { key: '82f31a385842d8728b288626af79b7543e5e4210', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: 'c49a615d6ef81112544b74c8bd43f5bd264a6881', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '1ec5310ad7857143e5cde79273e42e5b200b883e', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '6978336d8faacaf01cf1deea8c03a40f36bf6ced', 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: 'a3ad0f00afa112d19e29ff13abf51692ab9d8ffa', class: "file-viewer-fallback" }, h("swirl-stack", { key: 'dab7f8716509fb310716750a9282c08cfbab35e9', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '35397e5b1351b6dc22ae48e39f0a21b14990c348', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: 'da97715a10f4f34bf6f6b09b36cca83c0a571952', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '182bfad82ee14bee1033e1558cd12e4fad56f105', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
     }
     get el() { return this; }
     static get style() { return swirlFileViewerFallbackCss; }

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

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
 import { d as defineCustomElement$4 } from './swirl-icon-error2.js';
 import { d as defineCustomElement$3 } from './swirl-inline-error2.js';
 import { d as defineCustomElement$2 } from './swirl-spinner2.js';
 import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
 
-const swirlFileViewerImageCss = ":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;justify-content:center;margin:0}.file-viewer-image__image{pointer-events:auto;max-width:100%;-o-object-fit:contain;object-fit:contain}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
+const swirlFileViewerImageCss = ":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;bottom:var(--s-space-12);left:var(--s-space-12);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.file-viewer-image__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
 
 const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewerImage extends HTMLElement {
     constructor() {
@@ -16,6 +17,7 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         this.errorMessage = "File could not be loaded.";
         this.maxZoom = 3;
         this.loading = true;
+        this.transformed = false;
         this.panX = 0;
         this.panY = 0;
         this.zoom = 1;
@@ -136,6 +138,10 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
                 this.panY = 0;
             }
             this.imageEl.style.transform = `matrix(${this.zoom}, 0, 0, ${this.zoom}, ${this.panX}, ${this.panY})`;
+            const transformed = this.zoom !== 1 || this.panX !== 0 || this.panY !== 0;
+            if (transformed !== this.transformed) {
+                this.transformed = transformed;
+            }
         };
         this.updateTransformOrigin = (x, y) => {
             this.transformOriginX = x;
@@ -199,7 +205,12 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         return this.updateZoomAndPan(1);
     }
     render() {
-        return (h(Host, { key: '9ca81b2b2a336aeef5d84a90db15876d0ce36df0', 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: 'a2d387603e080854954bd3373063f7a0f134d15a', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: '384b944ef026a790180e6922fa4f0c01b00e4560', class: "file-viewer-image" }, h("img", { key: '7b20d619697a2ec803a7279be86d4c482b6ddcf9', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: '3591b1746d015559530b29fc407d2ce6d3a34696', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '81cf113ed103ff7f7c585212ee69f34cc2b163cb' }))))));
+        const hasWatermark = !!this.el.querySelector('[slot="watermark"]');
+        const showWatermark = hasWatermark && !this.transformed && !this.loading;
+        const className = classNames("file-viewer-image", {
+            "file-viewer-image--show-watermark": showWatermark,
+        });
+        return (h(Host, { key: 'a85b8486d5c268d45927191b0433bc4574c6422e', 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: '41afcb0d0533e7195030943735f8add24015a477', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: 'f5b4d11597609e85a4bd221876fc3bbbe1555428', class: className }, h("span", { key: 'bc0e117cf04da64f3ab75331895b06f4ae37b689', class: "file-viewer-image__container" }, h("img", { key: '10fa6444dc7685ad03871d399f39002db704a34c', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), h("span", { key: 'b63402667743f5fc0248584482a7be9377b40e7d', class: "file-viewer-image__watermark" }, h("slot", { key: '4371e398ba9fc85fbb40b9e98d666c059187e3cb', name: "watermark" }))), this.loading && (h("div", { key: '5bb1b9f0aa74fef2c6c246e9aa82869f58fa5d5c', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'b50e647cb08e6e973ec3c7d8f96c3357eb5c6f9b' }))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -213,6 +224,7 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         "maxZoom": [2, "max-zoom"],
         "error": [32],
         "loading": [32],
+        "transformed": [32],
         "getZoom": [64],
         "resetZoom": [64]
     }, undefined, {

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

@@ -34,7 +34,7 @@ const SwirlFileViewerText = /*@__PURE__*/ proxyCustomElement(class SwirlFileView
         }
     }
     render() {
-        return (h(Host, { key: '068c5b712e1387512d6853a7a1068bf1f855c354', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: '8fc2b5feaaa09ba4d2562dce9c23cccea8453cbe', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: 'cb2e693eef0740b5b07179b39df2d58b0dddeb46', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: '790e99bfc7f6524e7d30b9736676a10a6970b566', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '794104c84be618cc3d7342bf423b977fb5710c7b' })))));
+        return (h(Host, { key: 'd0560b0a8cdf4b89b5732bf96547ba1f81184fbd', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: '59433c5245010194a511acddf0eb5355e8066d23', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: '4b14aaeaea49be0187c863d05348b60468e9d3f4', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: 'c1c0be759edbeccbada172b874fe83065f2bbbf8', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '5f0aaf67871b3fc42516e5628da9732208f3feca' })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -24,7 +24,7 @@ const SwirlFileViewerVideo = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         }
     }
     render() {
-        return (h(Host, { key: 'bb2ced30c21303dd0593954953625711f35c441e', class: "file-viewer-video" }, h("video", { key: 'cc85301f8cb53f4db73269ef35c26ec0cd630af9', autoplay: this.autoplay, class: "file-viewer-video__video", src: this.file, controls: true, ref: (el) => (this.videoEl = el) })));
+        return (h(Host, { key: '439df8dd08eabf76634be7f539c4610e465cce4e', class: "file-viewer-video" }, h("video", { key: '0cbfbbe055fb7682311bf9f87db6ade51bf2e338', autoplay: this.autoplay, class: "file-viewer-video__video", src: this.file, controls: true, ref: (el) => (this.videoEl = el) })));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -71,8 +71,9 @@ const SwirlFileViewer = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewer e
                 this.type !== "text/plain" &&
                 this.type !== "text/csv" &&
                 this.type !== "application/pdf");
-        return (h(Host, { key: '8aac88df5dbf62f3b7d1d22218d0a7f034a16f52' }, h("div", { key: '99c523a221ba126e57d514c3adedb0bba62f71f4', class: "file-viewer" }, this.type && this.active && (h("div", { key: 'd865b1a64ce16f3b524ff9472b36017ad9eaa575', class: "file-viewer__file" }, isSupportedImageMimeType(this.type) && (h("swirl-file-viewer-image", { key: '8533d79b0f05460eee14c69a141b27c2068786de', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: 'd014d9d9b53a7adf6cb08650dbaf04b4edd735e3', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: '5a54a6a80c02b5269a4546345088b73494b75228', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '3af74d849fd426414b4eff1b365894a4bb725421', 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: '6b9929bf7f06053aa69d187e27851039d38bb5f8', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: '3236c5e2b67be20db6dd7e980b4ca424992c6688', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: 'ac3a1ab48196e7a4605cfbb975e0d2462825af76', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
+        return (h(Host, { key: 'b44c3a00f804f44368b420d4b59ac65b0b35306b' }, h("div", { key: 'c7a2b607dace02e221d65be9ea9a7f56a95a3358', class: "file-viewer" }, this.type && this.active && (h("div", { key: 'a1375b4495965b88d73f126bae5aae087858b0ba', class: "file-viewer__file" }, isSupportedImageMimeType(this.type) && (h("swirl-file-viewer-image", { key: 'a8f15cb8e78eb9ee996ed8b8eccca31f4a69fda8', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) }, h("slot", { key: '1ddad64e487e3812a3ffeb443b57689c4b7a5109', name: "watermark", slot: "watermark" }))), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '541736b770f941cf522b451fca74b97fcb5bb7fe', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: '05d5e91f39c00f8ce58f8aa2fe174ce3d950db24', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '5ffd109f44bfcc219dec9aa2add3752a6e1370f1', 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: 'e8a2cb22ec66c16198a6ebe9630eee9ab1d24e9b', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: 'dd3fec360055074b5113d6cefa3a1cb811c01f83', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: '212605c6739e94a800d98e7685677bb1762c2901', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
     }
+    get el() { return this; }
     static get style() { return swirlFileViewerCss; }
 }, [1, "swirl-file-viewer", {
         "active": [4],