@getflip/swirl-components 0.423.1 → 0.425.0

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

@@ -0,0 +1,73 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-data-cell.mdx";
+export default {
+    component: "swirl-data-cell",
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            page: Docs,
+        },
+    },
+    title: "Components/SwirlDataCell",
+};
+const Template = (args) => {
+    const element = generateStoryElement("swirl-data-cell", args);
+    return element;
+};
+export const SwirlDataCell = Template.bind({});
+SwirlDataCell.args = {
+    label: "Name",
+    value: "John Doe",
+    tooltip: "This is a tooltip",
+};
+// Add media slot content to the default story
+SwirlDataCell.decorators = [
+    (story) => {
+        const element = story();
+        if (element) {
+            element.innerHTML = `
+        <swirl-avatar slot="media" label="John Doe" icon="<swirl-icon-person></swirl-icon-person>" size="s"></swirl-avatar>
+      `;
+        }
+        return element;
+    },
+];
+export const MultipleCells = () => {
+    const stack = generateStoryElement("swirl-data-cell-stack", {});
+    stack.innerHTML = `
+    <!-- Basic cell -->
+    <swirl-data-cell label="Name" value="John Doe"></swirl-data-cell>
+
+    <!-- With icon avatar -->
+    <swirl-data-cell label="Email" value="john.doe@example.com">
+      <swirl-avatar slot="media" label="Email" icon="<swirl-icon-mail></swirl-icon-mail>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+
+    <!-- With image avatar -->
+    <swirl-data-cell label="Avatar" value="John Doe">
+      <swirl-avatar slot="media" label="John Doe" src="/sample-2.jpg" size="s"></swirl-avatar>
+    </swirl-data-cell>
+
+    <!-- With avatar initials (placeholder while image loads) -->
+    <swirl-data-cell label="User" value="Jane Smith">
+      <swirl-avatar slot="media" label="Jane Smith" src="/sample-3.jpg" initials="JS" size="s"></swirl-avatar>
+    </swirl-data-cell>
+
+    <!-- With tooltip -->
+    <swirl-data-cell label="Status" value="Active" tooltip="This indicates the current status of the user"></swirl-data-cell>
+
+    <!-- With suffix -->
+    <swirl-data-cell label="Name" value="John Doe">
+      <swirl-button slot="suffix" label="Edit" variant="plain" icon="<swirl-icon-edit></swirl-icon-edit>" hide-label></swirl-button>
+    </swirl-data-cell>
+
+    <!-- Vertical layout -->
+    <swirl-data-cell label="Name" value="John Doe" vertical>
+      <swirl-avatar slot="media" label="John Doe" icon="<swirl-icon-person></swirl-icon-person>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+
+    <!-- Label only -->
+    <swirl-data-cell label="Description"></swirl-data-cell>
+  `;
+    return stack;
+};

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

@@ -0,0 +1,82 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.data-cell-stack {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--s-space-16);
+}
+
+.data-cell-stack__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-space-8);
+  width: 100%;
+  justify-content: space-between;
+}
+
+.data-cell-stack__header-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s-space-4);
+}
+
+.data-cell-stack__label {
+  font-size: var(--s-font-size-base);
+  line-height: var(--s-line-height-base);
+  color: var(--s-text-default);
+  font-weight: var(--s-font-weight-semibold);
+  margin: 0;
+}
+
+.data-cell-stack__description {
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+  color: var(--s-text-subdued);
+  margin: 0;
+}
+
+.data-cell-stack__cells {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-space-2);
+}
+
+/* First cell: large top corners, small bottom corners */
+.data-cell-stack__cells
+  ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)) {
+  --swirl-data-cell-border-radius: var(--s-border-radius-l)
+    var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s);
+}
+
+/* Last cell: small top corners, large bottom corners */
+.data-cell-stack__cells
+  ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)) {
+  --swirl-data-cell-border-radius: var(--s-border-radius-s)
+    var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l);
+}
+
+/* Middle cells: small corners on all sides */
+.data-cell-stack__cells
+  ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)) {
+  --swirl-data-cell-border-radius: var(--s-border-radius-s);
+}
+
+/* Single cell: large corners on all sides (must come last to override) */
+.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type) {
+  --swirl-data-cell-border-radius: var(--s-border-radius-l);
+}
+
+.data-cell-stack__cta {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,108 @@
+import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+import { v4 as uuid } from "uuid";
+/**
+ * @slot cta - Optional call-to-action (e.g., button)
+ * @slot - The data cell items
+ */
+export class SwirlDataCellStack {
+    constructor() {
+        this.hideLabel = false;
+        this.headerId = `data-cell-stack-header-${uuid()}`;
+        this.onSlotChange = (event) => {
+            const slot = event.target;
+            const elements = slot.assignedElements();
+            const invalidElements = elements.filter((el) => el.tagName !== "SWIRL-DATA-CELL");
+            if (invalidElements.length > 0) {
+                console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.");
+            }
+        };
+    }
+    render() {
+        const hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
+        const showLabel = Boolean(this.label) && !this.hideLabel;
+        const className = classnames("data-cell-stack", {
+            "data-cell-stack--has-cta": hasCta,
+        });
+        const labelId = showLabel ? `${this.headerId}-label` : undefined;
+        const descriptionId = this.description
+            ? `${this.headerId}-description`
+            : undefined;
+        return (h(Host, { key: 'cd8d8d60538b60155e23757a7b277d1d97e01067' }, h("div", { key: '8701abaebeb6d584facd9fde9fcc432e8f1bc845', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '0b6b43dbeda02bab4c1d413d04602d3bf7480b3b', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: '7dcad79c2087bcdb0203cc30a3188580c2bdfc10', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '593ba1309c784c377dade4bc972b1cb0d84ad639', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: '9f769200f3d6f244ebb15a78804940177050f413', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '8fca31b2fd8a5a40e05f6e97db815a959759fa55', class: "data-cell-stack__cta" }, h("slot", { key: '8d9e7ae5237f1cb5639c8df4c8bbdf5f9f50f894', name: "cta" }))))), h("div", { key: 'decc1d026cd071501988c0b92e875e5ab7437cf4', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: 'aa41073060b3a4e8c62db259018639949e044a24', onSlotchange: this.onSlotChange })))));
+    }
+    static get is() { return "swirl-data-cell-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swirl-data-cell-stack.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swirl-data-cell-stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "attribute": "hide-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,71 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-data-cell-stack.mdx";
+export default {
+    component: "swirl-data-cell-stack",
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            page: Docs,
+        },
+    },
+    title: "Components/SwirlDataCellStack",
+};
+const Template = (args) => {
+    const element = generateStoryElement("swirl-data-cell-stack", args);
+    element.innerHTML = `
+    <swirl-data-cell label="Name" value="John Doe">
+      <swirl-avatar slot="media" label="John Doe" icon="<swirl-icon-person></swirl-icon-person>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+    <swirl-data-cell label="Email" value="john.doe@example.com">
+      <swirl-avatar slot="media" label="Email" icon="<swirl-icon-mail></swirl-icon-mail>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+    <swirl-data-cell label="Phone" value="+1 234 567 8900">
+      <swirl-avatar slot="media" label="Phone" icon="<swirl-icon-phone></swirl-icon-phone>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+  `;
+    return element;
+};
+export const SwirlDataCellStack = Template.bind({});
+SwirlDataCellStack.args = {
+    label: "User Information",
+    description: "Basic user contact details",
+};
+export const MultipleStacks = () => {
+    const container = document.createElement("div");
+    container.style.display = "flex";
+    container.style.flexDirection = "column";
+    container.style.gap = "var(--s-space-24)";
+    // Stack with label and description
+    const stack1 = generateStoryElement("swirl-data-cell-stack", {
+        label: "User Information",
+        description: "Basic user contact details",
+    });
+    stack1.innerHTML = `
+    <swirl-data-cell label="Name" value="John Doe">
+      <swirl-avatar slot="media" label="John Doe" icon="<swirl-icon-person></swirl-icon-person>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+    <swirl-data-cell label="Email" value="john.doe@example.com">
+      <swirl-avatar slot="media" label="Email" icon="<swirl-icon-mail></swirl-icon-mail>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+    <swirl-data-cell label="Phone" value="+1 234 567 8900">
+      <swirl-avatar slot="media" label="Phone" icon="<swirl-icon-phone></swirl-icon-phone>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+  `;
+    container.appendChild(stack1);
+    // Stack with CTA
+    const stack2 = generateStoryElement("swirl-data-cell-stack", {
+        label: "Address",
+        description: "Mailing address",
+    });
+    stack2.innerHTML = `
+    <swirl-data-cell label="Street" value="123 Main St"></swirl-data-cell>
+    <swirl-data-cell label="City" value="New York"></swirl-data-cell>
+    <swirl-data-cell label="ZIP Code" value="10001"></swirl-data-cell>
+    <swirl-button-group slot="cta">
+      <swirl-button label="Edit" variant="ghost" icon="<swirl-icon-edit></swirl-icon-edit>"></swirl-button>
+      <swirl-button label="Delete" variant="ghost" icon="<swirl-icon-delete></swirl-icon-delete>"></swirl-button>
+    </swirl-button-group>
+  `;
+    container.appendChild(stack2);
+    return container;
+};

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

@@ -215,7 +215,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '122135c2c5061758f06089513a406c4bbcf0b34c' }, h("div", { key: '77d124d013fc57426c30fd1726b3438abfb6a8ba', class: className }, h("input", { key: 'cc9ba7ab3a479731b5ba73ea355916dfb2feb03c', "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: '7ee351a93ed9f30eeb6a7057a28210404bfa0868', swirlPopover: `popover-${this.id}` }, h("button", { key: '530d21cb5a3752218b3f38588fce1c927c535ad9', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '1954331a89fe5a076d0e951e09046a398cd4aaa6', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '2956f5d627d6f2269063a986f9183e2a469088e2', 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: '3aac2a9318c4191ff049f2978ea68705e2f09024', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '7ab64d2c530f1305a51227ff5bcb77554cfd5895' }, h("div", { key: 'd08197d6c69c7bc18070e034757bc9564bbea14c', class: className }, h("input", { key: '82bd15966be681f05a0837c152475698f0ef3cd5', "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: '972aec87bb48fc2585ee6c8043fa9520e7eb63f7', swirlPopover: `popover-${this.id}` }, h("button", { key: 'fcf326af9e0b494fad482a1e6f934377cde0f11e', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '33948b7b1f64abbc2df5bc5424895f2755a1da00', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '9ae60f0ef578a1fe0d428da799f44410f85b9b0e', 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: '42e3d365aac233d15a1b26abce722650ce6699a5', 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

@@ -37,7 +37,7 @@ export class SwirlDatePicker {
         const className = classnames({
             "date-picker--fixed-max-width": this.fixedMaxWidth,
         });
-        return (h(Host, { key: 'b3b92f7111e61219ec927aea63befa69668314af', onClick: this.onClick }, h("wc-datepicker", { key: '51b6b4beb979a2267bc19f60d5d2a5a43e88908d', 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: 'f9208d4e51785c8844b7029150957d8bf30682f9', onClick: this.onClick }, h("wc-datepicker", { key: '1a53dc95157dca1f2f022233232892b0fa1f6c42', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
     }
     static get is() { return "swirl-date-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlDescriptionList {
     render() {
-        return (h(Host, { key: '3609f2613ae2ce0d6aea21552065208762c11bea' }, h("div", { key: '17f4571248eccb182e772aa2075ed5ede9a33235', class: "description-list", role: "list" }, h("slot", { key: 'bc46e6b60cd99b535a40dec1fd8debcfb9cd01ab' }))));
+        return (h(Host, { key: '403f73ec489f18943c52732686482d38ac63e9a7' }, h("div", { key: '8f0ccdfb673144a145306913582f31e777424adf', class: "description-list", role: "list" }, h("slot", { key: 'ec57593f713ff2eeb236b04d2e92664224dd9e40' }))));
     }
     static get is() { return "swirl-description-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class SwirlDescriptionListItem {
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,
         });
-        return (h(Host, { key: 'eb7616b79841a8c64bb294b7cde8e0d221b071a4', role: "listitem" }, h("div", { key: '0a1521d92896a93f78248c2c52409636ce6fdc39', class: className, part: "description-list-item", role: "group" }, h("div", { key: 'bb5cabf04bab654de5a4a264b9e837a961eabe8b', class: "description-list-item__inner" }, h("div", { key: '8484f7ab3a5072e0e4fe8d1c167279fa443d7cc3', class: "description-list-item__text-container" }, h("div", { key: '38fd012b729114783f1413c009f669d5cd2de8f2', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '03fe8546ccf69dea75c3ff23bf10b9c0246b9575', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '677ebeafee313f4096247a58c11f59f94a3ed3cd', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'a8436141f051236d2193fec52f23733f3b397566', size: 16, tabIndex: 0 }))))), h("div", { key: 'a3870805db26c2e0a0b7e0215374c2f5551a3792', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: 'aee8d25b78e994d8e22c42168d01736a8cc92057' }))), h("div", { key: '4906c7e5491e11d017472f97e90352aacbe74970', class: "description-list-item__tools" }, h("slot", { key: '9cf8ea6fbf2c0d4bb2d589d0b6ad391c852f2dc3', name: "tools" }))), h("div", { key: '10cd752f19e838dc6ebea01d14cc9ad4b3765f83', class: "description-list-item__additional-content" }, h("slot", { key: '4a48ffe1814326cd11926fc86be2a56f4669dda9', name: "additional-content" })))));
+        return (h(Host, { key: '1a0d061d7e318113ddc4109f2e8acffda1f08529', role: "listitem" }, h("div", { key: 'c01b977f3dd4df61a0d5b8210597aecde90128de', class: className, part: "description-list-item", role: "group" }, h("div", { key: '446d87fa5daf307e7151c24fdc0322d3e8f386fd', class: "description-list-item__inner" }, h("div", { key: 'd7ce3523c1f7744f28001892a67a92ad5d5937f1', class: "description-list-item__text-container" }, h("div", { key: '967a7a39ba719f5ebc13dbbd27ebfb36f7783d8f', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '4f4e15b269d071f0f8fd7bc7b62bdabdedef9191', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'af96ee34765e922429b5fa998c75510075ef4fc3', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '1d69d8b8079f52ae2387baa715cadca60b65835f', size: 16, tabIndex: 0 }))))), h("div", { key: '3fc9080d00704f89425dee7fd2b57e57c1a95304', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '9c8e6b20855f31284d442b41e749a433d07557d0' }))), h("div", { key: 'bdc20efe11ca490759affc9fe5222c6c9ec20bd6', class: "description-list-item__tools" }, h("slot", { key: '097d52440230c0a6758ecb4e0c3b0dd7042192b5', name: "tools" }))), h("div", { key: '12cfcd56f3e082926dc22b7ff3e721985ace49ae', class: "description-list-item__additional-content" }, h("slot", { key: '0efbddcc6f58ca424e71b23f3358946f945f789d', 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: 'a88cbff328f28320dfb7f0ab347010a0f1befe25' }, this.size === 16 && (h("img", { key: '0b5149b9e98b04be48473a96d4cec3c9e7eb8b45', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'e92ed80c3c3c10f7d71be66e73880b063cdd9336', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: 'b665c393a66006c5ac51e09e947d9095b2bd111d', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '19958d429dac3bb20511007e55218dfae02c5ef7', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: '59f8892cc38e557450958c4e102e765e2f5f9810' }, this.size === 16 && (h("img", { key: 'e333aeb56df8bfe8b2db09f8823b847a50c96b2f', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'ad1bc58035f110c97d2594c33702bd0508791dd8', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: 'b44dbbc12dee3801100d29969268e4ecc7ad5632', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '6e3d1817743a05b82e21b217cbbbfdaa006d8340', 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: '676c4afb2e509aa57dfdd4ac9a796484ccf0b135' }, this.size === 16 && (h("img", { key: '883271ca7d1b21f1c45123d7d00388c1aabaed84', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '495e8149fbb36e44a24dcbe4df2c9fb93c1ba7bd', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '58dfdf1eb6755187a5c3205cd2bfcce6341e48b6', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'bd6acbaedc0ce7569a0fa38bf1f8b7ea4d7f7478', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: 'b6ce3613d823b8ef086309e65ef47c433ad2a506' }, this.size === 16 && (h("img", { key: '1f27d4920d4485c2d32444fc9e9198c44d5ed098', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: 'bb08f6ecc5ed936b967aad87960acd990f22a57c', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '4db438f7534285a6a9b36f457b6860f5ee5c9bf8', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '9f9d399ae59c083ee0e0f4fde2876305470e0fc8', 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: 'af79a461284dae5646057641015d7dc7082a4c55' }, this.size === 16 && (h("img", { key: 'bd2014abe1c90b2795b00bbe6ed82171f0b11aa9', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '2707351c5d96ec8e682acaeff76be8dc6aaa5ba0', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '444440c7949f8bf228ba60ce505d3375636fd472', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'a20f42352357096eed99105c6d42cd531e7b6f53', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: '8ff3a1a940859658d88c26916d41064e2e92c8fd' }, this.size === 16 && (h("img", { key: 'ed4c692587f47600ce7a9b83abe60ff1fdbb6f54', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '7e23064fca619033830213f81af609ef30e59a3f', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '5a5e45004643bd5349755a54659da075a9f6c769', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '0b81a085a62b0ee6c2828d1fe7d68c6d96b8a513', 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: 'aa2f10718fe8a6380910c541cfa82ba4614ea1a8' }, this.size === 16 && (h("img", { key: 'dedbc425919cf652778b0a90832858a1d29d1aa9', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '8043b08affea5e54ae286952e7059c6f1b537de4', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'f5cf9dcb6a1c41bb210daa02eb0817b6a4ef3995', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'c8dfcb4967428e49ce59f93dfae2a767c7ac0b1b', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: 'e17876aa6999e73928b609924e06f8808ec732ce' }, this.size === 16 && (h("img", { key: 'cb30feea31a9a76608d6c23a7864349d1e4b3921', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'ae2b274562f723afaa8fc673018d81c42f45adfe', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'a3b1e51b08834e7b754f861a609ca1242c13bb4b', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '8634c0c060173148efabe5e42c250563d751d2a7', 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: '657ce7ef5bac8782366103c1a5b4aac30f220cf5' }, this.size === 16 && (h("img", { key: '15c569cb04444202bdfccf458384a02e4e5c6e20', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: 'f65d3e4989fa11f5174c21fe247711a4b34a7bff', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '4bd8753e840121850231d97176377fd7f58890ab', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '9651b9436aff8164d028a1b3454d9710a4268dde', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: '68fe396c6f3bd30532dfb8d79edd9143e9540b8e' }, this.size === 16 && (h("img", { key: 'a77633b15e2e59576477b6f3c19b6ce62d7564cf', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: 'b674cac80e397c2943b54cf087460b501128abbe', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '9b9ed5e1a2d0769e06bc8426f22c1b2592042fde', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: 'cea88ffddc5668e6baf7d8f8cf547a9f2748111a', 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: '69ddbf1d5262335c1d768b3c4b2fde5f3994e006' }, this.size === 16 && (h("img", { key: '729d33d8ba90417cc270fde3220f10011067012d', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '2c1bef9ee328773d40f38c4bf5735e9c45ddba5c', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '2da65b39929f904c291ca2d1689298ed92e3298a', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '702f050c2f91601bdf44325bf77f65cdbf93f08b', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: '4195f4d439a4ddd7ee5ca77b508a8ae7e3658964' }, this.size === 16 && (h("img", { key: '670624b032d41d2dce0bd5c7d8da8ad6e577fcfd', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '6edbc6892400018203e1b996620d0b0a394120aa', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '0d18437327c772f504434cd6553905014b80a5ad', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '64b2b862126f6452fc46dd19f5824f3bfb5dc566', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-thumbs-up"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class SwirlEmoji {
     }
     render() {
         const Tag = `swirl-emoji-${this.name}`;
-        return (h(Host, { key: '971312c5957031fd829542e0a27bdae9a00a7c60' }, h(Tag, { key: '921f4766f766b1fa177f2d6aef0225e8806619cf', label: this.label, size: this.size })));
+        return (h(Host, { key: 'e080ea7151f1be83880dee47ec668dca692de9ea' }, h(Tag, { key: '15a4ee6e7087af5fdeed4cfc8c230ea78f8fe0e5', label: this.label, size: this.size })));
     }
     static get is() { return "swirl-emoji"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-empty-state/swirl-empty-state.js

@@ -16,7 +16,7 @@ export class SwirlEmptyState {
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (h(Host, { key: '690b2ee6b42a5db7cff03d65994f489c155a51f5' }, h("div", { key: 'b18f7a79f707845d1817de37030d181da3d23986', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '1f315a98c20968f489a4740fc3d3f13b84933bb3', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '88eb2721916e8311c812c35a96a75d734808a113', class: "empty-state__slotted-illustration" }, h("slot", { key: 'ba47597e5b22f9a7f47f4adaf423e1f4866b2379', name: "illustration" })), h("div", { key: '8965fc13e5d3078a1d88a98c2f9cd40ae8f585b2', class: "empty-state__body" }, h("swirl-stack", { key: '5dd9a343d8fa82bab48b5115128de4b2366b53a6', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '61391feb5f24ceca7ba8fd1b0fe467ad58395fc6', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: '4270bcfcb84e80bfef2a39dc99f85e088b1d19cf', class: "empty-state__content" }, h("swirl-text", { key: 'ab5e4766ba820ce86d70af40d752271955db65a9', align: "center", color: "subdued" }, h("slot", { key: 'dff12908780757f44a745cd9f69ab809bf025ef2' })))), h("div", { key: 'a3324f8e9a4ad027db57ac17a4f85145bda8864e', class: "empty-state__controls" }, h("slot", { key: '713fcc59e6131d2b9270e4571ccc28b8eab062f9', name: "controls" }))))));
+        return (h(Host, { key: '34abe836a62db33f14264298d0c0d15568961d94' }, h("div", { key: 'bbd76afc365205dc1c6ed1653c1db21aa811027a', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '453bdd6059141b7ccfa8642ceaac53913588f166', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '8bfd55712d1c4e43b5cad4476da5fab197ff70bb', class: "empty-state__slotted-illustration" }, h("slot", { key: '3fc651d3c12f47111da74e3675ccfe4d249fd1a1', name: "illustration" })), h("div", { key: 'a00c49948225c39089e6853a5a4d330ff3e871fb', class: "empty-state__body" }, h("swirl-stack", { key: 'ef6509b571e8d28a8ed61cd7351d98de8a2ca87d', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '3f7032374ffd6ca1cba1fa9f442bc2ae9f164f32', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: '4edbf7391b7de8fa7297ef34457e45b46992df33', class: "empty-state__content" }, h("swirl-text", { key: '03151b35f6f40732065e0bd836f7bb19ebcb0ebc', align: "center", color: "subdued" }, h("slot", { key: 'c1d61b383a7f69f3a5fcb6cfc067acb32b49b5a1' })))), h("div", { key: '024b7f133fc46d510cd872c084efc0c1c4090740', class: "empty-state__controls" }, h("slot", { key: 'b1668ee1428f9b4d1d30e86b1d103f38cdbed6ff', name: "controls" }))))));
     }
     static get is() { return "swirl-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class SwirlFileChip {
             "file-chip--one-action": actionCount === 1,
             "file-chip--two-actions": actionCount === 2,
         });
-        return (h(Host, { key: 'ffaee4cb9f88bcc071f77b5d2d3d79db7a332ec6' }, h("span", { key: '82be280b1a5c480c835d46212104166c63ae329f', role: "group", class: className }, h("span", { key: '8e1214c9c9207afc85d372d351c23551c3195787', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: 'c0ee6dc2ff735a4028cf6bc5cab9d293ef938247', class: "file-chip__info" }, h("span", { key: '06cdc45c08fb983716ee9d62455cf5699036d6ac', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: 'dc3cb687e64db6d6f81af2ea23fb5b47a52c3f87', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: 'ac523aa508d995cf831ad85bfe14ea6729952ce5', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '876f62a9d6b9cbb3b497be36b56e64eb8b133c93', 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: 'ce8aaa35a20826d6e5aaac8f2075005b1b070b6b', 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: 'a1e736191427c96c7774b15977d415a39c9a5360' }, h("span", { key: '2bce65aa7b5d93b46b13943f55a05670bce855fd', role: "group", class: className }, h("span", { key: 'ecdfc9ebc4b81b4d1d5d7eb15933f8c171cc9f7e', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '84946f285265d1c13f5c733b5671303c2fa7cee4', class: "file-chip__info" }, h("span", { key: 'a10e8df293f8f908f1d1c67a70cd428bf032f335', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: '1b1b01eff962948a501d1143019f19c96a264ec9', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: 'd72e022582d4ef8b948a6a1e15ef1a46807dacf2', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '6397c85bd2d3a684ff59bf2aea0d66bd56b253c0', 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: '9789bc5bf3b40bbf57cc6a60fb8235fc6ba539f7', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
     }
     static get is() { return "swirl-file-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,10 +32,10 @@ export class SwirlFileUploader {
             "file-uploader--disabled": this.disabled,
             "file-uploader--show-dropzone": this.showDropzone,
         });
-        return (h(Host, { key: 'd55d8e003e2fd498a8dd3c145d7fb6ecd7684cd6' }, h("div", { key: '9338b9f5fa576a07acb76302f06854ef4c644281', 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: '666d4b5750d08143a4019240c371bf8592e01d41', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: 'b796b1b7bc889d4929889ba3d93127832a05208c', class: "file-uploader__dropzone" }, this.showDropzone ? ([
+        return (h(Host, { key: '97ff3a4f62dcbbce3a9ae641c8658c8826578deb' }, h("div", { key: 'cb8924bcd3889d0dd610ffe11d40095038a6d6d3', 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: '92713cc8d433c6bd12b215f94352c395da85fcc1', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '0abf5b09dd4274e7c52f5fa1806fc0086ee1dad7', 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: '75e54aac49ed10de93d890c3ee241dda622478e7', 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: '79ff77b84b3d3f1f6c04f175cfe8937ff89f1166', 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

@@ -47,7 +47,7 @@ export class SwirlFileViewer {
                 this.type !== "text/plain" &&
                 this.type !== "text/csv" &&
                 this.type !== "application/pdf");
-        return (h(Host, { key: '07c8b42a2b38f1cabe35be6997da85ae7e13cd64' }, h("div", { key: 'eed905679fb09994a343c754ff46f620d7cf61fe', class: "file-viewer" }, this.type && this.active && (h("div", { key: '76458467e500219a99c079b977afcb94240e03eb', class: "file-viewer__file" }, isSupportedImageMimeType(this.type) && (h("swirl-file-viewer-image", { key: '3587c8b5383288786f407dc857f66a1ccb539c99', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '66f0f2ff1dc741aa2bc44448d6c52dfc710d9e83', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: '851502429ed72a062e3c94e388d376702aab9c91', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '540f92c26a34786cf9590da7052ac68128db1eea', 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: 'fad2a1dbb1643b05d45119f93b01fa7636d6f1f7', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: '904155b750e023ced64ef1d55d5f3b0b23fd15ae', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: '57c53d6e49fc916d13c662fd284c4163c8d349ee', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
+        return (h(Host, { key: 'eaccb23a0e7e13270576afef209f3febb9d3a900' }, h("div", { key: '52def83884de3cbc807bc85ca99536cb2535534e', class: "file-viewer" }, this.type && this.active && (h("div", { key: '0156a95c126e2daebaa2dc4f00cfb7b0670a7343', class: "file-viewer__file" }, isSupportedImageMimeType(this.type) && (h("swirl-file-viewer-image", { key: 'ff6cc1d618d7206c971882ea5397bb1d2ce01b86', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: 'e824b4209c2b96f451d5f4b9a4750af625c080ba', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: 'df8abc4ade24e042ad0cf4ffa513c29ebe242151', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: 'ba771630d69e75dbc97b6abf81c164593b04a19b', 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: '8157c3f2df31912d24f013d75b0cb573c2b8d932', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: 'f55af2653c88e64c1608b42a600a56ba6d45712b', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: 'b4dbb3c44c060be52a565491aabeb6248a9c3ee7', 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

@@ -4,7 +4,7 @@ export class SwirlFileViewerAudio {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '2a19acc10183877f1d972a7ffe5ddd181c5904b5', class: "file-viewer-audio" }, h("audio", { key: '9e6a6835d0716ce6cf929d896552e0d6e0b3ce42', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
+        return (h(Host, { key: '4b597070229656ffbf9fbfa59e83fb96f964d6f0', class: "file-viewer-audio" }, h("audio", { key: '757dccdabed2aefa5588e050c09dd913149f9ef6', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
     }
     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

@@ -34,7 +34,7 @@ export class SwirlFileViewerCsv {
         }
     }
     render() {
-        return (h(Host, { key: 'd14281440a5315074ebacc9eb50778ff1f858193', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: 'c8fd3ee1512f8b80a1d19c5866cab69b5ac0a071', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: '7cc29b8557899ead3773c14c09bd30eadcdcc8cb', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'fafde14505de917855ee4edb837f927d38bc1631', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: 'b3e2dc77236c5ab309b8e3bcd20782c5011bdaaa' }, 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: '805df059246795405d21a8a4d1bdfcbe865dc740', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: '66d407e21691d718f6f4ec920eaaac286bdc2f5b' })))));
+        return (h(Host, { key: '2d998d2f6003691285c7e4be4bbc24c0fc82134c', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '4a495b4447de40e933c4cdc3e4c441844d1276ae', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'c3a9f2dde498ea23702992d1f626d608329a1047', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: '362004a62f6563b78959832cad1968a20d9987ac', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '4c3080cf1fed3ed520002329c013a28f418aa99e' }, 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: 'f4b6a5121e5162b4ac4e1bc915f99e7cd443b78a', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'c5d87eb9a9d93ccf574e4286f16708eb4093ed59' })))));
     }
     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

@@ -11,7 +11,7 @@ export class SwirlFileViewerFallback {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '4bf2941dea790b11ca9e05b1215d7baf207ee623', class: "file-viewer-fallback" }, h("swirl-stack", { key: '6a31cdbd5c931b46b43ab1893f14e0ba0c485ffb', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '6581e3df50fb3c44d874b1aabdb10a66b648babe', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '711b29cf73a248a8127f98adf938496fa3bd5607', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '8c0b228b6f03448868cdb8679a7240ba65e26802', 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" })))));
     }
     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

@@ -188,7 +188,7 @@ export class SwirlFileViewerImage {
         return this.updateZoomAndPan(1);
     }
     render() {
-        return (h(Host, { key: '86f13b2614472cab2c15921a709ec0f31df6b3f5', 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: 'e33badc0e7bd9f4f2e84e4eceee034a16dbd3aea', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: '1cb3535b5136edec2e856bc85ef315fe7e427dbd', class: "file-viewer-image" }, h("img", { key: '8e397b1c705a7b683e79ee977e892ed45bd25498', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: '6d43acf2fcd4c0191909d433ce96577331ada3cf', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'e997796b0baec1014e4a73feae3a3570ed97a2bf' }))))));
+        return (h(Host, { key: 'c7280521f67f5a8e988496db51a5a1018da8059c', 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: 'e3ad917c4c006275e7b0f885c09478bb5e77616b', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: '217b3ef167777066d61a6407ec955207e4755eba', class: "file-viewer-image" }, h("img", { key: '23dd87f7142873d65b9c5d5f85aa08558b448e8c', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: '7d655d674ab24393d3a7a3bcb2ab83b7c0fad075', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '0d07a0907c18a2bd527a9b125bf433b153d86179' }))))));
     }
     static get is() { return "swirl-file-viewer-image"; }
     static get encapsulation() { return "shadow"; }