@getflip/swirl-components 0.214.1 → 0.216.0

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

@@ -5,18 +5,34 @@ export class SwirlTag {
         this.onRemove = (event) => {
             this.remove?.emit(event);
         };
+        this.icon = undefined;
         this.intent = "default";
         this.label = undefined;
         this.removable = undefined;
         this.bordered = undefined;
         this.size = "m";
         this.removalButtonLabel = "Remove";
+        this.variant = "default";
+    }
+    componentDidLoad() {
+        this.forceIconProps();
+    }
+    componentWillLoad() {
+        this.forceVariant();
+    }
+    forceIconProps() {
+        const icon = this.iconEl?.children[0];
+        icon?.setAttribute("size", "16");
+    }
+    forceVariant() {
+        if (Boolean(this.bordered)) {
+            console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.');
+            this.variant = "outline";
+        }
     }
     render() {
-        const className = classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, {
-            "tag--bordered": this.bordered,
-        });
-        return (h(Host, { key: '02429e0453f16d87117282b02b5566210e9990cc' }, h("span", { key: 'bd3039960b3f6bad92c08001f9927643626d9ffa', class: className, part: "tag" }, h("span", { key: '082ae33eebf5fa8fb39e9d481d613419aacc06a9', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'e3a20c81951a5606f49a7ac946ccabcadde1a856', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '15f71b707c8d6bbba3c09dd9c66ddaa4399b82ad', size: 16 }))))));
+        const className = classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
+        return (h(Host, { key: '4f3801dc7f9872b38bc0340c6a8b859f0f7f545e' }, h("span", { key: 'cc5d10bc2b4f1a27584beea293da156920aa248e', class: className, part: "tag" }, this.icon && (h("span", { key: 'ddce7d37fc8ab9391c9ac1fb3e3533535f47c022', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'afd46af752a3c62ed8e26c073bcdd32e56fe91c4', class: "tag__label" }, this.label), this.removable && (h("button", { key: '46c87dd90a1e9f0f288f18b20ee750906aa2c01c', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: 'a183448bc380d12d1b2ca99d9c9df50175fc627e', size: 16 }))))));
     }
     static get is() { return "swirl-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -32,12 +48,29 @@ export class SwirlTag {
     }
     static get properties() {
         return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
             "intent": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlTagIntent",
-                    "resolved": "\"critical\" | \"default\" | \"info\" | \"success\" | \"warning\"",
+                    "resolved": "\"critical\" | \"default\" | \"info\" | \"special\" | \"success\" | \"translucent\" | \"warning\"",
                     "references": {
                         "SwirlTagIntent": {
                             "location": "local",
@@ -148,6 +181,30 @@ export class SwirlTag {
                 "attribute": "removal-button-label",
                 "reflect": false,
                 "defaultValue": "\"Remove\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SwirlTagVariant",
+                    "resolved": "\"default\" | \"outline\" | \"strong\"",
+                    "references": {
+                        "SwirlTagVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tag/swirl-tag.tsx",
+                            "id": "src/components/swirl-tag/swirl-tag.tsx::SwirlTagVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "\"default\""
             }
         };
     }

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

@@ -9,7 +9,47 @@ describe("swirl-tag", () => {
         expect(page.root).toEqualHtml(`
       <swirl-tag intent="info" label="Label">
         <mock:shadow-root>
-          <span class="tag tag--intent-info tag--size-m" part="tag">
+          <span class="tag tag--intent-info tag--size-m tag--variant-default" part="tag">
+            <span class="tag__label">
+              Label
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-tag>
+    `);
+    });
+    it("renders the label with icon", async () => {
+        const page = await newSpecPage({
+            components: [SwirlTag],
+            html: `<swirl-tag intent="info" icon="<swirl-icon-mail></swirl-icon-mail>" label="Label"></swirl-tag>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-tag icon="<swirl-icon-mail></swirl-icon-mail>" intent="info" label="Label">
+        <mock:shadow-root>
+          <span class="tag tag--intent-info tag--size-m tag--variant-default" part="tag">
+            <span class="tag__icon">
+              <swirl-icon-mail size="16"></swirl-icon-mail>
+            </span>
+            <span class="tag__label">
+              Label
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-tag>
+    `);
+    });
+    it("renders the label with outline variant when bordered is set", async () => {
+        const page = await newSpecPage({
+            components: [SwirlTag],
+            html: `<swirl-tag intent="info" icon="<swirl-icon-mail></swirl-icon-mail>" label="Label" variant="strong" bordered="true"></swirl-tag>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-tag icon="<swirl-icon-mail></swirl-icon-mail>" intent="info" label="Label" variant="strong" bordered="true">
+        <mock:shadow-root>
+          <span class="tag tag--intent-info tag--size-m tag--variant-outline" part="tag">
+            <span class="tag__icon">
+              <swirl-icon-mail size="16"></swirl-icon-mail>
+            </span>
             <span class="tag__label">
               Label
             </span>

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

@@ -52,7 +52,7 @@ export class SwirlText {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: '4e76cd5640a6e3796ddaf2c1248a5eb001f03327' }, h(Tag, { key: 'ddf69948aa62e50b470651cd7d4ae558a89f2c86', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'b8d4c77cd22364955682bc7f224de408a2439165' }))));
+        return (h(Host, { key: 'f6a88638b11748787875b8c33faf17e8caaba483' }, h(Tag, { key: '180c7b58004915895d50c016364bced598075eb5', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '12297ee13e7e6725da7ebb57b6180311721cdcfe' }))));
     }
     static get is() { return "swirl-text"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-theme-provider/swirl-theme-provider.js

@@ -145,7 +145,7 @@ export class SwirlThemeProvider {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: 'd44bd0401f8422c67b8ff225cd985f95298e30e2' }, h("slot", { key: '7925b0a073e4b5388d88d3b03c53bfadd76a1fff' })));
+        return (h(Host, { key: '9c82d8e55c791bfeae52b4372b61e54cd70a520c' }, h("slot", { key: '0d865519ef09e11c4a823212dc9982a10b5186b8' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -29,7 +29,7 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: '180fd0d7ad47d35b5867d6f698937454b21eb757' }, h("span", { key: '5540996b1ad2a87ef157e5be98efa7e7d1199d38', class: className, role: "group" }, h(ImageWrapper, { key: '3e2fc61e197695923fa301391ebceaf5bcf0eb00', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '50c157965d5e67db73c17792b79406095ca78e9f', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'b144b3ed974c106e46c795a24f141e3bac47248e', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '58a45909ee501fe941359e1e1b1ac091d6e10c4a', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '0124bcf1eb6489878914a59ccb756c1cf8568a1c', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '74215d066d9d85f97f2b92ba963472392353a2ba' }, h("swirl-button", { key: 'fa9dcc701c7494e5a31ae4cf8c54a34303866413', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '129eaabf19586f3adb858d497d07dfe755a31916' }, h("swirl-button", { key: 'd8c1e423f87b9c780cc6b8c4e3500c321b770f65', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '48b943825e2e5784ec96d02a652e12e3d0baf406', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: '29beede8cd3c3504cd7b40519628c5d65ff6c4ad' }, h("span", { key: '5e2e8b9e5d5942f0e10b7bfd2cdd44240676d870', class: className, role: "group" }, h(ImageWrapper, { key: '44728becb46e5308367c6d7689f6fbd994243024', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '060a5553b062eb2fa307e762234a0cf8a2c3ceb2', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'f87b0987cc3178763b3ce972e95a8b24971d52b0', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: 'a88312014539fcac5f20c0d77e5b076c734aaffc', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: 'ca708f20b51f03605ec4f95b2a57a264bb77e53d', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'f59f1a102510fa003d98976a6bb72a5f0b87be52' }, h("swirl-button", { key: '321f13e11b820e1e7fa3698ae86f6421baa183f8', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '5d775e285069d2450152ff797a4173606559adb8' }, h("swirl-button", { key: 'f3c12bd27d104dd717f1a8e23db0ff5067bdcddc', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '043067757ddfd316a0d07124e3a25d2ab4708ba4', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get is() { return "swirl-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,7 +117,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '408f73c8599e9a2b4a93c42a10497c811c27fc8d' }, h("div", { key: '379aeed59f29fe9d29e5878f6480491bbdbd3fc0', class: className }, h("input", { key: '51b9b8895c2efa66ec9e0e90b9a8321df5b8b9b2', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: 'f4966c079ecc3aa340666c3f30eded83fdd33f21', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '005ce9dcd4847ea11d045933f68af4441f737f19', size: this.iconSize })))));
+        return (h(Host, { key: '9c074dc52719b09275f7dcf9486f459b3f8e51f7' }, h("div", { key: 'd2d0b1cf7863a8bc80f19379e4ee2ece4f6caf45', class: className }, h("input", { key: 'f08cabd38fba7de32ac2648872f2b83f09fe341c', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: 'bbb7cf593cfc74e799c84fa4758904ba5fdca283', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '61db5641fedcae4f77c8f558f0118510f0f40de2', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -53,7 +53,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '888b9166ea3b2c1c0accd229b10df71e9508085e' }, h("div", { key: '3d7c585b55cf7fb793511d3a39249fbeaf24e7a9', class: className }, this.icon && (h("span", { key: '3a5501b63dd47555e51e270f49b251a8d88f6c60', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '744f38f0eb2c1baad05e4a04b2b97e2008c0bd71', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '782a9848808d24457e7f5bd33ede990c7729a773' })), h("button", { key: '039c2406c9ca02284b8d311c45e04bcc19a1f271', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '29b0f0b90bf067c5d1679d2c44387504a7db2083', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '74552715fe709d5a56de877114c219e34e933d3f' }, h("div", { key: '912b2c811f1ad202d8ed3338418e180fbd8c8e80', class: className }, this.icon && (h("span", { key: 'b33cda7199cea684828b5380cabfcaeb43379158', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'b0326da56c13d5b7398c76af880f08ddeec6ec1e', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'b9dd6a1f6dffa84d914f3856927ad231f0f1876d' })), h("button", { key: 'a1cb910c86672285a2fc48f607bd9255f1fb1177', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '5eb94e0e527275387fddc1e21b33d14e999d42be', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js

@@ -49,7 +49,7 @@ export class SwirlToastProvider {
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: '939b5584be108dccf4c0389f3784844a57ea84b2', role: "status" }, h("swirl-stack", { key: '02365268cecc9167d07d6f7351e4496939aa821b', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: 'd1cdc770a1f0eaf09b099c08eb2b3f2aaa8b907a', role: "status" }, h("swirl-stack", { key: 'e5349e15af42d925d5d6a1b827fc80d74ad31234', spacing: "12" }, this.toasts.map((toast) => {
             const props = { ...toast, content: undefined };
             return (h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
         }))));

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

@@ -66,7 +66,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: '9395ed31604862788bbd526be3a263deadbfeba3' }, h("swirl-stack", { key: 'aaf3d7f8c27b65c06c9e190a46abe4a399662032', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, h("slot", { key: '67a58d72f42141a418fd720bb457d44e06ef15dd' }))));
+        return (h(Host, { key: '8e4ae145e0b9a703494a5ffcd0b715532dd76783' }, h("swirl-stack", { key: '848cf05dcceba5341d5fd5a0cb90b9f6e3b36342', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, h("slot", { key: '0e134c4966dbe4eb9e7c9301128788ba9fbab98a' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -96,7 +96,7 @@ export class SwirlTooltip {
         const className = classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: 'd0a74f9a48f9588b1354d80023419b2662f6c365', onKeydown: this.onKeydown }, h("span", { key: 'ab4662b52b91f14e2bb556c5eee8a667dde26d20', class: className }, h("span", { key: 'b719bfb561d8f31abf56fc8454c8f670083f2266', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '3ee1b3d4112a48e16fbdb82b306dd2060dd628c8' })), h("span", { key: '6c415ab45aa1c6dd918b82a661211949e5d12ab4', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: 'c1cbf222e6f4df7ff1a1b1dcc4d878a41f3f4f40', onKeydown: this.onKeydown }, h("span", { key: '6819d99e6c7d0187bf831c570a8df04c48ae6fee', class: className }, h("span", { key: 'b4a1ca8b5ce716e9f7a28a5b49dafcc04fb89dbc', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: 'c4cbfc908cf866d1ddbceeca6670fb126f0b08cb' })), h("span", { key: 'a1dcd95b72a588c8728e831c3ab1f3e75e70e2d9', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -104,7 +104,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: 'd1901017bf0c80e4715ae7f961caab6bc84fe226', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'fb06e617d8699b51f923d71dc2e864f7c0c47678', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '31b1189f37160fa546683384eb6f6d9d49ca10f1', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '82f02a2b298d9562011c97f604f4933e1690ecee', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '603c4625cca8bb6330d404c35c0162fd63fd19a4', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '760c5a9a193ecacc4cbc7de6c8051ba9a8b8f086', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.js

@@ -15,7 +15,7 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item--active": this.active,
             "tree-navigation-item--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '8d623e7cae8cd60b4c67904104b5ac881c057b42' }, h(Tag, { key: 'e173ee6cfb4c3822c699a758a40c9bb6d55cc2fa', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: '6a7284f1af17d26dbf77c2af138fdca058d5e02f', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '66b66458f53d48406d19c081b1561f49c6538e48', class: "tree-navigation-item__label" }, this.label))));
+        return (h(Host, { key: 'ce72f757f6b7f852fe0db041a3a7cc3986360a42' }, h(Tag, { key: '60067bb6045b0faa8d3a04c6d263abbdb8d7d957', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: '038c495fd16a2a73d982ad4a62ce54e89b1b29af', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: 'c96bbabfd94289dc85d0dd5e95ee9b2b39a8cb09', class: "tree-navigation-item__label" }, this.label))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-video-thumbnail/swirl-video-thumbnail.js

@@ -7,7 +7,7 @@ export class SwirlVideoThumbnail {
         this.src = undefined;
     }
     render() {
-        return (h(Host, { key: '16ea4fcec7bd75529fe2e69de9a671e5c51a05fe' }, h("button", { key: '56974d06078f9f3fabad441037e8e3d686c086c9', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '1682d27c207b74c9c0ee6f57bceab2e491b6a3aa', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ce28406004f1909fbb7640bf1552069413e2b9ae', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '7c951958faa6e567e798b6989ae3d27401f672ad' }, this.durationLabel), this.duration)), h("svg", { key: 'fbb53b90d15fe05684f006536b548cfe16d5ada7', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8330f16e56293d383ed82f107455b4992ac659eb', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (h(Host, { key: 'eef575c4ee1ffd605c7c9029a9871b1042a89520' }, h("button", { key: '72a430f135cce621487b125fa753f40953c879ac', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '1be4e9b6f97596955578ec96d10a0b503a73f469', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '2e8e3e811f97bbb0ffd5eda6f6d730f1a1c3e28a', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '9090e88326abe7c50f40b0d87064036f72172fa1' }, this.durationLabel), this.duration)), h("svg", { key: '2f6eb330c35308e97a045ea552f3d9510f87f5de', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '28348280637d0234dd92f8c03d2864e8150eb70a', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
     static get is() { return "swirl-video-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlVisuallyHidden {
     render() {
-        return (h(Host, { key: '4e8e2608465b8f39ad034074f790d9fc4f9757dc' }, h("slot", { key: '04a160051ce42d1a8ebae23c7aca1fb96cfa28b2' })));
+        return (h(Host, { key: 'd3ed1fe23d6437f9c8b1d35955d0011c1e96ca58' }, h("slot", { key: '1a071b54990853b4dab9ec371d2244f9d5067c8e' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/prototypes/file-manager/file-manager.js

@@ -56,7 +56,7 @@ export class FileManager {
             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: '34cf3a76bb348b31a83146341dab02313685dcc3' }, h("swirl-app-layout", { key: 'babf48045864b584ee739d5ba5d08767313575fc', 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: '3d3a77481a89cadb3485e663a29084b46092e609', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '2ba5080511406d74eb19051a7519ec7dd3d54277', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '44c59896b47fe9295c2d9f1ef5db23b36227735a', label: "Sort items" })), h("swirl-stack", { key: '471f67a5385804ab140bd3840fbf652fd4667d39', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '73bc84fcd81f07f135404ee888b7db99b0c6169b' }, h("swirl-heading", { key: '1100c71a1eb57a1c86c2bd08f898fae8e3488c01', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '03bff10caed54ec02ee6d0bb40470168f573ac4e', 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: '6f95e4fce74974400720f422df62a389509d823f', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '3a343b2242347339b00c259b75e76daf8c2c9774', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'd789e658212f01258858536e06740e4627f37315', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '381933cc25ca02a7fe1bddb17bdf4bfdc82f91d5', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '533a07fe3301160223e9aea8681a39c80de8d346', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '9eb3298788a93e6e4f52c21ef1bd068b6b9cb9ce', value: ["ascending"] }, h("swirl-option-list-item", { key: 'dd2aae4eec2190317ae1c9f3135cc4b49a56a3d7', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'ff72b83db3d250eb2a58c29fe4863899596e269a', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'e2d822424639a8340d9a72b16e752bc4ee0bb5d8', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '0e586b6178ef2cb6a6e9cd0a21e182e6305156a9' }, h("swirl-app-layout", { key: '6c1f69a25036deaaf30c2c11758d9fc8eb9caef1', 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: '425a06578bbd4c00639b243c8da457014f893936', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '27f42db9c9d6494d0d238fa0454be0b52f0fba26', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '3a635597a0551796249887c9b1540345f443dceb', label: "Sort items" })), h("swirl-stack", { key: '8fc33e9c2375e8322eaec891e1b70d8f3cf7b722', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '356e463e4b515ccff20147fbc98bdfb0190c51ed' }, h("swirl-heading", { key: '47ecf36a7308c7572fa625bbd9a16b12f27770a1', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '2023efc5d1f03ad22d73aef45e248d7c6f470347', 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: '062a0039d07a8648f7e0f5ba287f486e65a4cc6a', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '4a8a61dbe941764d26d28b945d8f9c0a7bd8e535', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '353f1bd7ff6d309a646540ea796071df5485a6e9', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '616813794a4857e399e30ae17890fae7638c1773', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'a88e9264c07c7f1efc1d35e15746a3fb9320f4df', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '073b5d2fcec021e9210ce89d6110789b41c6a3c8', value: ["ascending"] }, h("swirl-option-list-item", { key: 'f3ba0fc797f1ede6ed1f24c7313e372a748827d5', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '0e085ce9e7a28c6866963bd3e78b0d19a38f8a89', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '6ea2caf4a57460a2c276d312ddf0eb654e5125ca', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
     static get is() { return "file-manager"; }
     static get encapsulation() { return "shadow"; }