@getflip/swirl-components 0.202.1 → 0.203.0

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js

@@ -40,10 +40,10 @@ export class SwirlTableRowGroup {
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (h(Host, { key: '77dab8351118eeb0e3532f4f739032adce61c18b', class: "table-row-group", role: "rowgroup" }, h("div", { key: '4296de8f61fe50d57096488e42be1ca27b3cee32', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '0ea63a7670fba2aa03c251c2f312b01eb3089a39', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'eea63dcbe8feed9d55019daf8cc3db329187e061', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '95ae5da1cd80f3de1e27a81e3548e03a4a5e143b', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'ac9cf587bb67cd0996c1de3952a45edd2f840800', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '82abe0e64ff6ca2c2bfca7c8cb88f6d67986be77', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'f33eeb57bb10f528001b895fdbf37601fbba3617', class: {
+        return (h(Host, { key: '09425d9a5423979095c77794b89cab49fe42f78a', class: "table-row-group", role: "rowgroup" }, h("div", { key: '4b6d882f2109e0bf6efeba9873a5e3ba363a17a9', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '044b12017a01b160ef65811ec02a63a57c08c9d2', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: '2653024ed934cd0fd07efad558be9d250f2948ec', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '9061de6330f87c1a7ea4036b06329e1780bf615f', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'e2928dc4514a94428e1a04c3763ebf6b421012c2', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '53c67bd01572adc3bcb31038210e5f4629f035ac', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '2baa864bfe16cc3199118b00000c6365bac37d10', class: {
                 "table-row-group__rows-container": true,
                 "table-row-group__rows-container--is-hidden": this.isVisible,
-            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '731e91f15a6db5a97798cec7263099d4cd16747b' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '25e948439ec9edced501dac3694ce52354d17f17' }))));
     }
     static get is() { return "swirl-table-row-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,6 +13,9 @@ export class SwirlTabs {
         };
         this.initialTab = undefined;
         this.label = undefined;
+        this.justifyTabBar = undefined;
+        this.tabBarPaddingInlineEnd = undefined;
+        this.tabBarPaddingInlineStart = undefined;
         this.activeTab = undefined;
         this.tabBarTabs = [];
     }
@@ -71,7 +74,7 @@ export class SwirlTabs {
         }));
     }
     render() {
-        return (h(Host, { key: '826275f0ee5a211a398a1738a2743d21a6c15d3e' }, h("div", { key: '1fe18c1cd29da99a619a51f242095b77fec78cb3', class: "tabs" }, h("swirl-tab-bar", { key: '6c07d61f48a546945f752c526de203898fc79035', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs })), h("slot", { key: 'e52aa024117d57e6cd3140b0bcb6080c2dd52c6c' })));
+        return (h(Host, { key: '3e3b1953f8ded8140c8ebd2dc74a8defbd99aa39' }, h("div", { key: '031c086ba6e61ea5cf780cae242bac8cfda63c42', class: "tabs" }, h("swirl-tab-bar", { key: '3aa3a8700c05695dbc1d87f82848324f76ccdcd8', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart })), h("slot", { key: '6f23039c5cdef250e7fe980d4f53bc59b5b623d1' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }
@@ -120,6 +123,75 @@ export class SwirlTabs {
                 },
                 "attribute": "label",
                 "reflect": false
+            },
+            "justifyTabBar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarJustify",
+                    "resolved": "\"evenly\" | \"start\"",
+                    "references": {
+                        "SwirlTabBarJustify": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarJustify"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "justify-tab-bar",
+                "reflect": false
+            },
+            "tabBarPaddingInlineEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-bar-padding-inline-end",
+                "reflect": false
+            },
+            "tabBarPaddingInlineStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-bar-padding-inline-start",
+                "reflect": false
             }
         };
     }

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

@@ -19,27 +19,21 @@ describe("swirl-tabs", () => {
         <div class="tabs">
           <swirl-tab-bar label="Tabs"></swirl-tab-bar>
         </div>
-        <swirl-tab aria-labelledby="tab-tab-1" id="tab-1" label="Tab #1" role="tabpanel" tab-id="tab-1" tabindex="0">
+        <swirl-tab aria-labelledby="tab-tab-1" class="tab tab--active" id="tab-1" label="Tab #1" role="tabpanel" tab-id="tab-1" tabindex="0" style="padding: var(--s-space-8);">
           <mock:shadow-root>
-            <div class="tab tab--active" style="padding: var(--s-space-8);">
-              <slot></slot>
-            </div>
+            <slot></slot>
           </mock:shadow-root>
           Tab 1
         </swirl-tab>
-        <swirl-tab aria-labelledby="tab-tab-2" id="tab-2" label="Tab #2" role="tabpanel" tab-id="tab-2" tabindex="-1">
+        <swirl-tab aria-labelledby="tab-tab-2" class="tab" id="tab-2" label="Tab #2" role="tabpanel" tab-id="tab-2" tabindex="-1" style="padding: var(--s-space-8);">
           <mock:shadow-root>
-            <div class="tab" style="padding: var(--s-space-8);">
-              <slot></slot>
-            </div>
+            <slot></slot>
           </mock:shadow-root>
           Tab 2
         </swirl-tab>
-        <swirl-tab aria-labelledby="tab-tab-3" id="tab-3" label="Tab Number 3" role="tabpanel" tab-id="tab-3" tabindex="-1">
+        <swirl-tab aria-labelledby="tab-tab-3" class="tab" id="tab-3" label="Tab Number 3" role="tabpanel" tab-id="tab-3" tabindex="-1" style="padding: var(--s-space-8);">
           <mock:shadow-root>
-            <div class="tab" style="padding: var(--s-space-8);">
-              <slot></slot>
-            </div>
+            <slot></slot>
           </mock:shadow-root>
           Tab 3
         </swirl-tab>

package/dist/collection/components/swirl-tabs/swirl-tabs.stories.js

@@ -13,8 +13,8 @@ export default {
 const Template = (args) => {
     const element = generateStoryElement("swirl-tabs", args);
     element.innerHTML = `
-    <swirl-tab icon="<swirl-icon-emoji-satisfied></swirl-icon-emoji-satisfied>" label="Tab #1" tab-id="tab-1"><swirl-text>Tab 1</swirl-text></swirl-tab>
-    <swirl-tab icon="<swirl-icon-emoji-mood></swirl-icon-emoji-mood>" label="Tab #2" tab-id="tab-2"><swirl-text>Tab 2</swirl-text></swirl-tab>
+    <swirl-tab icon="<swirl-icon-emoji-satisfied size=&quot;20&quot;></swirl-icon-emoji-satisfied>" label="Tab #1" tab-id="tab-1"><swirl-text>Tab 1</swirl-text></swirl-tab>
+    <swirl-tab icon="<swirl-icon-emoji-mood size=&quot;20&quot;></swirl-icon-emoji-mood>" label="Tab #2" tab-id="tab-2"><swirl-text>Tab 2</swirl-text></swirl-tab>
     <swirl-tab label="Tab Number 3" tab-id="tab-3"><swirl-text>Tab 3</swirl-text></swirl-tab>
   `;
     return element;

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

@@ -16,7 +16,7 @@ export class SwirlTag {
         const className = classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, {
             "tag--bordered": this.bordered,
         });
-        return (h(Host, { key: 'a7e7462eac54e144fc9d1d442d33287c480eefce' }, h("span", { key: 'b758ec2a9c31032caa720bfefaf769f3f2cefe6a', class: className, part: "tag" }, h("span", { key: '65c171c46715749bbc22c1ceff96963589e298ac', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'd1ea6ea0df8612c3c4f2a4bb9a4d5b0be5f69279', "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: 'f9d220ded4892a78413f4b5415b3083842fcd0ef', size: 16 }))))));
+        return (h(Host, { key: 'b67e7321084a551a2ff203d672262d40f25b6962' }, h("span", { key: 'db89192e386e1b8e984c7ff5a8fcc8e8407900db', class: className, part: "tag" }, h("span", { key: 'a3adcc737835666ed52e6a04922974637b4bc745', class: "tag__label" }, this.label), this.removable && (h("button", { key: '9104229361b9746841db84a0ce88545947e2a6e1', "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: '8f0d79c563ffa74bec22ea400c3d43ff22a9ca69', size: 16 }))))));
     }
     static get is() { return "swirl-tag"; }
     static get encapsulation() { return "shadow"; }

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: '532fc3d60139b1b6c27a3e2713f94e1a3a855d45' }, h(Tag, { key: '944a5502b8d218989035dd89c9ce1f33d0003399', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'bb53161691a0f57a003360b3437d8c6fc34fd29c' }))));
+        return (h(Host, { key: '2b93f1fd4b860a46c4ecceadb8b16d3d0c698c12' }, h(Tag, { key: '91598eaf45494a8055a7fc6901e9798cf0ca83c2', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '472da5530334b2775e88755c9f56f6be31356d61' }))));
     }
     static get is() { return "swirl-text"; }
     static get encapsulation() { return "scoped"; }

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

@@ -140,7 +140,7 @@ export class SwirlThemeProvider {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: '223fbf196fd8820057cf6fcad63c0a4fb79f857d' }, h("slot", { key: 'cfee0ee18a800539578bcf78dc91c634ecbab4a8' })));
+        return (h(Host, { key: 'd79607757815f73e2014208120fc80024a39b8f4' }, h("slot", { key: 'fe79de29bd350fc0dbc5263104107a0b241bb431' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,7 +21,7 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: 'c57156683aae337861dcd5bc9ac4a4a3834693d0' }, h("span", { key: '7f860b92681aab29bf9ee0fb405659725cfd9d3a', class: className, role: "group" }, h(ImageWrapper, { key: 'ef46386d1a1954e71b8efa5d8adb6a11195b19a8', class: "thumbnail__image-wrapper", type: this.interactive ? "button" : undefined }, h("img", { key: '0fd8a6e29c7be7307225a7efb07023b6e7c21cd4', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'd03daf08486f6431a265428311781e6ba7f6fd00', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '902cacfb7a276918f17348a770d438f5e8b3ddaa', label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { key: '76857c76c1ea6edd565cde449af823ce44f20d4d', class: "thumbnail__remove-button" }, h("swirl-button", { key: '4524aa7cc50718441f3c3acb75d5dd8bb6abe414', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { key: 'b6764d7a85c179b67e31cf4fb765350d873e5f5d', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: '8692ee74e68449714b38624068b752b6161d5797' }, h("span", { key: '4ab8f19328c2f4c709f0cee1cb5b66a46c2b1995', class: className, role: "group" }, h(ImageWrapper, { key: '865c97c657654115b45c1fb8b56e25991929e244', class: "thumbnail__image-wrapper", type: this.interactive ? "button" : undefined }, h("img", { key: '327eed3af1c571292c7d990d2c3c0f4897dd3ce0', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '34eb2fcd51dff98463568bedec7d1304a455d28a', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '64527a842053083bf67321400382b5b6e2ca1867', label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { key: 'dc9492d8753140e87bd0f1ab6972dac842bfc273', class: "thumbnail__remove-button" }, h("swirl-button", { key: '56a9d205434856073471b0fa47fd9d73e1814fcc', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { key: '0adb76f35e7b9b147d573702e3f7d805cc3c9f75', 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: '087470a25a636637a76115ab0ff510da54bfc7eb' }, h("div", { key: '0077a5739e08dab8704b3011fff0d7afb3c8f051', class: className }, h("input", { key: 'c6eca2267d8119e8f51eb88aa747e075e855b598', "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: 'd00906292b067660030de37a91f77ff97ab58143', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'd41f5e930109c876a4a81a1d948c587783a0adac', size: this.iconSize })))));
+        return (h(Host, { key: 'cfbcdbba8f5d06429416befe68144539e3faeabb' }, h("div", { key: '98e5ffa81a5bf564c8a7eeffd1af3569121d73bf', class: className }, h("input", { key: '50bb867f72fed47b8878008e5c43d5763b322182', "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: '55dd13b9b1a4ebd29177d3a7a51ac0ba27484ede', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'd0a70e3c32206562138f5bae6f2e3f593141b64b', 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: '35695f50ea63a19bb96de63dd68a7667a679356f' }, h("div", { key: 'f8e3c2c30bdd6867274c548e3a745a4a3591b503', class: className }, this.icon && (h("span", { key: '43dea51f1849ccf1c7064b9522d793d0e16f49a4', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '5171e135301ba31ac09e9a5fad3090803e7d82d4', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '13a75cb56789364ee8193c571c86b4f752743a8a' })), h("button", { key: 'aeaec3b3e2770da4db5834735cf1d85eb13be6d3', "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: '039599ec0303620b134c1bc580468a1bf176b066', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '44c0e7c5caef9346a5aab20d61b3ca6f524b9bb5' }, h("div", { key: 'e9fe678eef8ee633009d9943e165f11c169fdd21', class: className }, this.icon && (h("span", { key: '459f13f5bbc4a58c9300bf8e496af4ea9a504dc4', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'c4968c38176aee26ca4a63d6b3963b9b6860cd1f', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '8c7da7b6491f02145bc63684fe3f9aead9b7ef6b' })), h("button", { key: 'c749ce63db5cc48f5734957b52fb5b82fd76b002', "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: '28b36e7afd397f18d4b76ddc74daca78d31a7af9', 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: '1db8b2f832869490670c34067ae5fc8e19d7f987', role: "status" }, h("swirl-stack", { key: 'a616e31585de124b6f953151ec71cada1e8f051f', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '336ab967756993cdddef8b82c5df8679d413adef', role: "status" }, h("swirl-stack", { key: 'cbe539dec76ac6c7f21a45adbc6257bd24da108c', 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: '93dcf545129b0037257412e87c2a5723a2cbd70c' }, h("swirl-stack", { key: '2200658e9fa82b528b594ac267623fe9bdb4050b', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, h("slot", { key: '94a5dc9998cfdc6b064c1e749c49663cca87b5d1' }))));
+        return (h(Host, { key: 'a3c4eb79f0d8b117b341efc10a786637fd779280' }, h("swirl-stack", { key: '40b557fc51a8076a242c858814cd06d8be851470', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, h("slot", { key: '992538241f2b3c1af5b6e43344c40fdb163cc8bc' }))));
     }
     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: '03fbc0a205e7fc6ab4caf3c25153108cb332e94a', onKeydown: this.onKeydown }, h("span", { key: '67440b05dfffb0f797720e0817a19b6eb6a4f648', class: className }, h("span", { key: '7f4e9715d29a88af39b051d705b159c37ffe42f7', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '71d597a32e6a16ae688482a75fa823d09424d2c7' })), h("span", { key: '2e7bf8796bcfa4a0721a578a29e29e6b66d99b64', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '439c818a49a55fa2406b41fa167f56c41f23be77', onKeydown: this.onKeydown }, h("span", { key: 'b6bde44079615456d5608902120a13e4160e6ff6', class: className }, h("span", { key: '9ba46d08fa9595647595c7b197233b92f86d2774', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: 'bcb14d7117697ad1260fd85c31cd354958be900a' })), h("span", { key: '099aa66cb293a5f653851e131cba3cff51be72ea', 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: 'f9ac600db0ef8778651018a38c69d800b8ed9f59', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'ee843dd7927f410ec0695027cb867e18d3bf1de4', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '5b2549165b80b6d8389bf1d61d655c34beeb89a8', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '75719accc2de267f5bb0b9edb81e521880b320ca', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'd6cb38268148b8e6fb3cfce4b62f7a68b4e0b08b', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '1b26897acb27c52dc577bbdd68afe23d37adf390', 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: 'a7babeb938b410e0970531f7da01ca005965d5ee' }, h(Tag, { key: 'c8295cd8c94d5f51cfec174cda19c7ecf014698b', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: 'f71557acbd64a0e5734a64d1ec2a511ca71bc466', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '30883336f5913392b020d0e871db8660d948b98d', class: "tree-navigation-item__label" }, this.label))));
+        return (h(Host, { key: '05323823aaaa62d30389a916c414925192c22923' }, h(Tag, { key: 'd37c27733d7713567aef8702a9f1fdc149cc3aa1', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: '3b4ff404ac78d65c44c6a31bdf2496b73f2704ef', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '1bf22dc15ad09a0a97a7aba1ccf85722b369b9b0', 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: '353b42897498e1a4ae831b6e6d2ce006baec4b31' }, h("button", { key: '92fb7e94931a6f47eb6b0587a73ab1c593c7f463', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '2401a169dcbe7571a6ce09d35285a9618702b95b', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '7a63ea12f7664f4df68378f0f5d7ad530be21739', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'add3328b53b1b39ce37a06d22d84290f2f43cb26' }, this.durationLabel), this.duration)), h("svg", { key: '4fafda86c3af69163f076c6a47bdb4bca39a72a1', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '10a4dfb3019eb05773b6b5b9785c77c8b5ba806b', 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: '01bec4265deabd11a6acd8894981a81c30901366' }, h("button", { key: '60454a9a0e84ba55e19243581d9fbc4f6157a5f1', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'e138f91bb0f33c075fb5f9afb41efd05a7744ba4', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'd86b558394bd60590581ce9d190d75994554d23b', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '79d5a65826c9f4ad393c932a50e3f761e113912d' }, this.durationLabel), this.duration)), h("svg", { key: 'b706265ed6c592c9878f684f4bdd18023b04ae1a', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0b1a9a1a3bacdf7a27c3f214c344f531865c9546', 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: 'b8c75db895ecc0c742653bbbcc581c7212cbde14' }, h("slot", { key: 'ab2c52a65df62b35663584e39f8e1f503d008f30' })));
+        return (h(Host, { key: '49e54acf33cb8ded01b58d531bf8991922957915' }, h("slot", { key: '20091107f45c63017d0df53c634457d2638b55d5' })));
     }
     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: '1d4b0a2f4bdcd7e2052a63a07ec22daea4ee6725' }, h("swirl-app-layout", { key: 'd685c698a7f4b3fd548ed42d8c905d3bd059997c', 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: 'c0719852bd514fdca02b98ac1dcec63794918707', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'd33195d3745ffb837619cd7005803403c5ded775', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'd2dd338762d34ac1561669915f184944273af2a4', label: "Sort items" })), h("swirl-stack", { key: 'c19a6d05303614f27e9dbd920b47b05ad56faa73', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '1f5bf8be4a7549ca579cfd286e612c04e1f08041' }, h("swirl-heading", { key: '05bafffc84381ff995565c3994702b89a25a1067', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'bac305a48969bf409f86c02e20435fe4e2105405', 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: '529e9719807f76ecb830222093dd50f94e388509', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '2f23690de58570c17b15cbc7a2fbd30991d54dbd', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '248e5846fe70b28f7d1d4b8b9dcd43da80948665', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'f3315188bfcab9cbe89cb663da77c79c409a32b5', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '8216fa2ec56ca85ae4b5ad544483fa91726c3d2c', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'ca0cc0ea8c16f0849466c7adb08f820b580bed06', value: ["ascending"] }, h("swirl-option-list-item", { key: 'fbe21a77b8b7e283300eb13ade304e132102065c', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '235560c0163c67931ffea6ee5d5f830473a14c76', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'c15a7d91f4d9c50877f0ba8cd7eb595bc15b9e69', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '873fd3228cf65cde43538643594532b4f86febd0' }, h("swirl-app-layout", { key: '28b8d67502bc7afa2279829502db1073dff4bbc0', 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: '5012cadd4c5cfa239ff184a18674f560ad15dc2b', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'a7747ff5d768821765e84096cf95c63f84a7e76e', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '60dd5df7ea62dad9d19e78c1db3ea8f4ab1c01c4', label: "Sort items" })), h("swirl-stack", { key: 'd3112752cf7748528bf0fb90b691be433a88151e', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '81143f27640d9f9af9dc25a8e0f1db96d2e57b8d' }, h("swirl-heading", { key: '055204be24df62c4d570218664fc159921be9f38', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '975354c19efa9809725c09aa81255103bc3b1d6c', 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: 'a6e5046f1b95953cb9832b7e255df2225aa45c88', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'b0f01e8e609f6959d80ba2ce8f704a9d9d6f265d', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '45730461aa0cd10f0b83a5e3a8efc22a2c54ced3', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '96ab69daa0b6ddf85d56f068b52c562eaebc2aaa', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '9f696d7716f99c542f3a2289eff418f3cdba34e8', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'acbb44fcc3a24b831bd837604bc93abb0414ab04', value: ["ascending"] }, h("swirl-option-list-item", { key: '735aa543cddb003960c0804e8c9da0eff7afcc63', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '9a3157c6536c37d26cea9855f798af8d202a294a', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '7a1cb37d202920a00518a7c00c8e2c5b2ec7c8bb', 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"; }