@getflip/swirl-components 0.285.0 → 0.287.0

package/dist/components/file-manager.js

@@ -90,7 +90,7 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: '190b1e5695f2bb8b03a00d2a4e496bd00d09a301' }, h("swirl-app-layout", { key: '7907adf47e5c8d6c4e03b162b84e3b011aa8b3b9', 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: '86f0a83e2295e7fa30b77f74f88f45c6ac8e50e4', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'a574aa6a3e11d6acf7dba1ab63e47071937d8fcf', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'f9c572b5bb81ee8b49ddd4708d2ed1a20d2512a4', label: "Sort items" })), h("swirl-stack", { key: '01b68ecf5b141038291ea05823fc3c07e7b48668', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '03a2bb0589fcc90290390fffc2d8d43a6310d936' }, h("swirl-heading", { key: '128a17deca25cc760d0c67ea3a2af989bbd76162', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '94ded472f785bcb3b7c91b3e07d0998242cdfc8e', 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: '269e411033840d17150c39b74692e28a6fced62a', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'b566c774ef5c06bcf17ee5c6dda7248ab8a46477', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'eb639d1c031a96822252cb66c4d60a940c57cfc4', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '92639660b01b3dfd5d92a0abd8f9019c66baa896', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '2d17fcce26c39e2b867a8811ab7668a90d265fd5', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '4a3ba39b370be490fd74ba6b400928b9e48f9129', value: ["ascending"] }, h("swirl-option-list-item", { key: 'f38d53b1ecada1e94af75e0bba06db6274f9a5ae', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '5c326e2053359dec242a04e4f0f74dcd1537274f', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'f3bbf96da04a1bc69d72bf7b4457cd609667df16', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '6603abe64ac9ea6436bf164e5863dbe252485444' }, h("swirl-app-layout", { key: '41bf19429c03eedbe5b53a27a9e1f5ac53199872', 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: '9c27bc74c66a7551ff7d10c7e97a168e13a53ff3', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '347b1f00fc38adee4d9c3c8e61b068341b46bba1', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'd4cfe8cf0018329a5bd5c0aafeb1b7d814848fc2', label: "Sort items" })), h("swirl-stack", { key: 'f5dfe41009bb7ce695eb7751e5d9c7da0de5b49e', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'a32447f4da4b23c479eda986074cc6872fccec6c' }, h("swirl-heading", { key: '1b195e5c58b6b0547c2513279500ffac6708f5e9', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'fd5e67c61cccabf95c49dda8a797c1ffde13d244', 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: 'f3df316e5f0b4f83b5bb08b9909ed926f7c52ed9', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'f923387944645c02ac03e23395213b176ed09203', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '61a6233730516d6e3a9ee37f777372f1c68d428f', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'b1d547fbf54276b014329c6585b161531181a138', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'b076f7e20dd0d765480f8f42a0510231956f315f', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '730c7e0f5a54eac3d34270d34523b586b060cd13', value: ["ascending"] }, h("swirl-option-list-item", { key: 'd42dd5d600b0e67b3e11bc89374dd633f6024d47', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '2aeeffcb320b8e4614ca86557db63fe533e44adf', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'bd7b9b047b2ed441d1f7b0545f4423c46b5e150b', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 }, [1, "file-manager", {
         "selectedDirectory": [32],

package/dist/components/index.js

@@ -85,6 +85,7 @@ import { SwirlIconCloseSmall } from './swirl-icon-close-small.js';
 import { SwirlIconCloudUpload } from './swirl-icon-cloud-upload.js';
 import { SwirlIconColumn } from './swirl-icon-column.js';
 import { SwirlIconComment } from './swirl-icon-comment.js';
+import { SwirlIconContrast } from './swirl-icon-contrast.js';
 import { SwirlIconCopy } from './swirl-icon-copy.js';
 import { SwirlIconCrop } from './swirl-icon-crop.js';
 import { SwirlIconDarkMode } from './swirl-icon-dark-mode.js';
@@ -456,6 +457,7 @@ const defineCustomElements = (opts) => {
             SwirlIconCloudUpload,
             SwirlIconColumn,
             SwirlIconComment,
+            SwirlIconContrast,
             SwirlIconCopy,
             SwirlIconCrop,
             SwirlIconDarkMode,

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

@@ -68,7 +68,7 @@ const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordi
         const className = classNames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '29710e3b90bc91e4290687f120dda4dc8172bf1a' }, h("div", { key: '68680d0041529a5cf74ca84139c505d38987eb71', class: className }, h(HeadingTag, { key: '0148138907529f3c1eab7cb95d35e8c05d56fc6a', class: "accordion-item__heading" }, h("button", { key: 'f72a42c42a7ee1bf35646b44fa7e289f572e23c8', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: 'fc9f06dbd96372ededa39d68334aaf33b53a94e2', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'd4df097cc2b96c6216e9dfc94486e08f571e3954', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '3606ddc91d2e808421137cd781ef682938b02f78', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '501fe59ef0b0e4692c65f8cdfd24ca1ac9335001', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'e389b4dfdc9306f07043ff902be7e538ee89c92f', glyph: "expand-more", size: 20 }))))), h("div", { key: '0b796af4c2c698547e9c54aa435443892d2047d4', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '4cfa18cc7900a67b0d24ce55e5b5da1edf2b8a7a' })))));
+        return (h(Host, { key: 'ce93a57fef055a3b912b9d74307caa48e9792c9a' }, h("div", { key: '7b164b2586f089ec5d03777873a2df1474a5c1d3', class: className }, h(HeadingTag, { key: '95e160a7ce0199ae5f42504386b9023a3c7ebc9d', class: "accordion-item__heading" }, h("button", { key: '0b046a3e376f888e084a1d0ee1edd87ac99b852f', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: 'cb13c9193027463ea70f3e0179d3231768415552', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'b7a68f4b9c771e68d58ffac6aa8f64b548bd1d16', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '6422613b1f9847cde1ce24a9d5360da2ec6b027e', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '258fee1808b32595ef78cbc67c25a825a82a3f4c', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '4db06cd86fe17b6785ee700986816d4c8870f45b', glyph: "expand-more", size: 20 }))))), h("div", { key: '172b05165c975966d837595f7cecce43a3562441', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'b8340c9735970792ab184c10b6ab1d3d15c9be6e' })))));
     }
     get el() { return this; }
     static get style() { return SwirlAccordionItemStyle0; }

package/dist/components/swirl-accordion.js

@@ -46,7 +46,7 @@ const SwirlAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordion e
         });
     }
     render() {
-        return (h(Host, { key: '0da292c39800abd564844ef83efd150ae18f9bce' }, h("slot", { key: '5267813019864387c8853836bcb5e7609b8498f7' })));
+        return (h(Host, { key: '55af41200054fe3f630d7fc1e9a6e051ad53b6ba' }, h("slot", { key: '9714a1232064b82c0d2047aefb4b87228931e213' })));
     }
     get el() { return this; }
     static get style() { return SwirlAccordionStyle0; }

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classNames } from './index2.js';
 import { g as getDesktopMediaQuery } from './utils.js';
 
-const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
+const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}";
 const SwirlActionListItemStyle0 = swirlActionListItemCss;
 
 const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionListItem extends HTMLElement {
@@ -18,6 +18,7 @@ const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionLi
         this.disabled = undefined;
         this.description = undefined;
         this.icon = undefined;
+        this.iconBadge = undefined;
         this.intent = "default";
         this.label = undefined;
         this.size = "m";
@@ -39,16 +40,20 @@ const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionLi
         const icon = this.iconEl?.children[0];
         const suffix = this.suffixEl?.children[0];
         icon?.setAttribute("size", smallIcon ? "20" : "24");
+        const iconBadge = this.iconBadgeEl?.children[0];
+        iconBadge?.setAttribute("size", "xs");
+        iconBadge?.setAttribute("variant", "dot");
         if (suffix?.tagName === "SWIRL-TAG")
             return;
         suffix?.setAttribute("size", smallIcon ? "20" : "24");
     }
     render() {
         const showBadge = Boolean(this.badge);
+        const showIconBadge = Boolean(this.iconBadge);
         const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
         const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
         const className = classNames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-        return (h(Host, { key: '06605ecf01b587dbfb1de890ba776cdb72926c5b' }, h("button", { key: 'c70ad0ecbc3e58a6b5c8543c37907346f3301284', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && (h("span", { key: 'e250cabb8119ad251d4d3d70cd080408f2122d5d', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '28361e8c9cd8696c3661d7263d550a66c87fd26e', class: "action-list-item__label-container" }, h("span", { key: 'c8d504ca27d5ba2d1c8979ce45dda984c1e48436', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: '303dec5fe699a2c47a4e9e5417d06e3285a30d6f', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: '96c4500b611acc6a1cb40cbb8b6088deffb273b6', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '739d6e49ad6890a23c1b12eea9037da43c9c9e52', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: 'a391b536421efd55d4132772d143ec89e757c9d8', name: "suffix" }))))));
+        return (h(Host, { key: '7b4f52c16da4f4f5c2c9a51856c9aae7e9c04f23' }, h("button", { key: 'a74a9c60edc2a183c04f93e9030554c551ceba67', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, h("slot", { key: '9bb61a72d80c55a35e0dc3c809d8bebb7ff30437', name: "avatar" }), this.icon && (h("span", { key: 'ba49170992a1dc9e6d8b68e64af781273bf4b7e8', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '3284724f84d3d6e018f244cde0a7ddc233f7459d', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: '2084ba440fee7881921d10781ab0100c8aef26d6', class: "action-list-item__label-container" }, h("span", { key: '81d4f0652172c6e468b7a6d5c2381d05905d5e22', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: 'f09d273290bfc00630c592ed45013b565845eb5a', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: '06cfa9c3a1af2b53a472b472529267549b4926de', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '7ab7dd54bb3f1e2c9cac00dbf98775e18f66ab98', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: 'f2bd1ae7bf49c5e22757dbdb23fada915ab13e2a', name: "suffix" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlActionListItemStyle0; }
@@ -57,6 +62,7 @@ const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionLi
         "disabled": [4],
         "description": [1],
         "icon": [1],
+        "iconBadge": [1, "icon-badge"],
         "intent": [1],
         "label": [1],
         "size": [1],

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

@@ -11,7 +11,7 @@ const SwirlActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAct
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '40bda032cab1a7b0f79a2b5881d9326b062156ea' }, h("div", { key: '0c82c51957b3707724636f33193023c7344b8104', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '58f78c65728f336de01b7cb903566aa8becbaaeb', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: 'ba803eaa5eb3b24d0c7cbb4c71f014bd708a36ce', class: "action-list-section__items" }, h("slot", { key: '456bbed6e34639d50f1b00efa172c4e7ea50461c' })))));
+        return (h(Host, { key: '297688f160ff018c0a2ecce9cb2bd2334a63b4ed' }, h("div", { key: '410c162413ca42fc3ea67cb8f242d425b565bb1c', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '5c65d4afe15c9c7beed9b475e22f20c5ef4bbdfb', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: '43ee7a618f4780e75b5d9434060807a0adeb522b', class: "action-list-section__items" }, h("slot", { key: 'fdccbc861430f3f6bc839e8166adfb64640fc56f' })))));
     }
     static get style() { return SwirlActionListSectionStyle0; }
 }, [1, "swirl-action-list-section", {

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

@@ -80,7 +80,7 @@ const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList e
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
     render() {
-        return (h(Host, { key: 'a9c578bd188dd7099dc6e730a9e7e0712b141376' }, h("div", { key: 'a59a86d89fac7df60915f24dda0a311d1315178f', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '59950a3821a5dfe5813605c14f5527e3cf257c96' }))));
+        return (h(Host, { key: 'b16da7e5d0b8b4c9ee3e9160c013e5a2385d6900' }, h("div", { key: '1eeb9a88ebd644dd22c32022aabd83a9454dd2dc', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: 'a2cbd9841b0a94a4fe40346c86301f548232d81d' }))));
     }
     get el() { return this; }
     static get style() { return SwirlActionListStyle0; }

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

@@ -64,7 +64,7 @@ const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends
             paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
             paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
         };
-        return (h(Host, { key: 'e3c441ae152c5f32628341d93ab9c01267fdcd14' }, h("div", { key: 'f5d2d48ddb1a3226e0fb5ca4789ff59ddd866dec', class: className, style: styles }, showLeftControls && (h("div", { key: 'c9f3c6f1cab3c15d99f373ddc53ee6dce3e51a6a', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: '9ae0620bef35977af26de20b4fbe7725062ab0d0', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '05e57714c3649dbf722d74f135d0c5fb7591e16b', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '54d48e492a7cbc94e7784829ce4288e339e38526', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '65637f25c16f60d7b7028a8b985520688439a2a8', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'b46ca47a50c9ff3f938d0adc4e5145e1c4d7a6d5', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ce4bbb821ad76249caf680965853aefed6bbf041', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '75042cd5d3c9c5f82d1d8c2b5a1ba156890f83a0', class: "app-bar__cta" }, h("slot", { key: '195d9d91da4e64688b281f0a7c5cd8dfdd3f661d', name: "cta" })), h("div", { key: '92fdfb5748e8e1578205c97c13ff361fd3020fac', class: "app-bar__heading" }, h("slot", { key: 'c62711620a9b717c340bfac1a92f8eb639207fd0', name: "heading" })), h("div", { key: 'cd37b16d36b2115ca3c63adbae7635b5a412ba38', class: "app-bar__center-controls" }, h("slot", { key: '1b884ef50fdbf39da5bb738174defa6e17b93efa', name: "center-controls" })), h("div", { key: '9dc46b4fa36e8d34837c26aed63b4bb80c2c08fe', class: "app-bar__right-controls" }, h("slot", { key: '83aa64ac31b9a68f6777e8ad75a0c1ad262a815b', name: "right-controls" })))));
+        return (h(Host, { key: 'f21458799a37778b5c7078c2f9679e4b323c306e' }, h("div", { key: '3ef4a4192a9422eb196869d72d7918057ed4427d', class: className, style: styles }, showLeftControls && (h("div", { key: '0f1c91a944780502d4253fc29a4119364b050f23', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: '300dec3bcb2e8d077c85d44549eb3fd43cd389b8', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: 'b703037e0f9cbf948cb2ffbe8fc708adc5b12808', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '7636c5ca8f7c835a873931e97064ebdb4e734f47', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '807553c0a0ba911a725aa22e4e10156e4a3a1f38', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'ae37678f60560b2cf13e75bd4e31f2da51db9371', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'd38fa06e1b0b2e6bfa37401ab22c98bba39f1a82', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '018f6e09dd24883fbcbbe045f5d90b2f1feb2a71', class: "app-bar__cta" }, h("slot", { key: '8691491e1759aee6b4a553ba7b4ed0794995a0bf', name: "cta" })), h("div", { key: 'e944c68e3d6a76818e98a8bf66d3c38f8e7484f9', class: "app-bar__heading" }, h("slot", { key: '2430a78a86602115a27f363139eec4520b3f8a00', name: "heading" })), h("div", { key: '5fbaca57c7b1dd1207f3fcd941ce583397bd5d9e', class: "app-bar__center-controls" }, h("slot", { key: '134470957f50dca26f9d5eb199caa5d02e9d61e5', name: "center-controls" })), h("div", { key: 'd7ad558e053ea6e76d24a317136669c338b95049', class: "app-bar__right-controls" }, h("slot", { key: 'a5a2d0dda80b23e3b855b4a84f834af53f24236f', name: "right-controls" })))));
     }
     get el() { return this; }
     static get style() { return SwirlAppBarStyle0; }

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

@@ -27,7 +27,7 @@ const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon exten
         const className = classNames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: 'fcfbd3332b8ffdc129b4a5b336054a2f4b7c0cf2' }, h("span", { key: '1d085a88743d7341f83709283300a7e4fecb76b2', class: className }, showImage && (h("img", { key: 'bc9cac7895c5f9e0b58348a01dc6a4d14834b3a0', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: '74fef35e39cc3b2f19c11e1846659d369218bda9', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: 'dd70f3b87a44a926c7b4da93b9e81a1eed6e2d97' }, h("span", { key: 'b2428a9fca48e5a9ad36dc345298254afefe2c90', class: className }, showImage && (h("img", { key: 'a0c55e77b3e238de83246752a37d9a376f624a6b', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: 'bedcd164cd1cc1fd698bcf74598e66c4d718e0c8', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get style() { return SwirlAppIconStyle0; }
 }, [1, "swirl-app-icon", {

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

@@ -349,14 +349,14 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: 'e4098dcdd2f208b1dd2fce4fa4239c5115610fae' }, h("section", { key: '74d1b87b9cc1f3444dbd0d4f9f9438691b6a038f', "aria-labelledby": "app-name", class: className }, h("div", { key: 'ba69ff7c4ca1304e68681f21538fc51293557d66', class: "app-layout__grid" }, h("header", { key: '2d0cf6c6c14f4e5cc65f80e29ed83da677298d91', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: 'ad33a7a8bbcf159a339500af5dfb1fdbcec832bb', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '6430dddd996413590a4a44c1f8b10605e2846e15', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: 'bb382dd6ed579a103df8d2db491704e50f46e989', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: '33b7c62a2929be9f5faed27e6bb382a03860909e', hideLabel: true, icon: this.navExpansionState !== "expanded"
+        return (h(Host, { key: '2192bf3336762dea743265d083becd45482eedbf' }, h("section", { key: '3f8a980332d4f0ff89cb8b54731d06e2ed6923b5', "aria-labelledby": "app-name", class: className }, h("div", { key: '5b4efbeacb72bd6854e13b60017f16b49c7d3470', class: "app-layout__grid" }, h("header", { key: '496182fbe63fb76e8039079c7efc2a77f2c2f7be', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: 'aa33206028b8895027099dbb0ae1a702e132e039', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '58b240a3dfa39c69700f68b4c9a149077e48bead', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: 'a3e6c91b9f57424f46c9bf9ba7550328552a26ce', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: '37b5cbee5f7207cd453471eba7d071bd7693bed5', hideLabel: true, icon: this.navExpansionState !== "expanded"
                 ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
-                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: '6a949d43a362498d9b0dd9b833b4ff6da672f551', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '8e94dc58d62a8acd872830f939c56d60ac80dfe6', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '2d5b82a5179556db32cdf8af3a1803e89fe7295d', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: 'c6870ca94e78496a41c7d6cb2bfe8adcb97b7fee', class: "app-layout__navigation-controls" }, h("slot", { key: '265797c583cf51b061f883a66522a61478ff543f', name: "navigation-controls" })))), h("nav", { key: '07b5b0e935513aab2e09f43a185abbc37829dc2a', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: '1b76d9241b88495dba00de2e6fb98926ee1d2861', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '51b1e6a6accad4a4173034e12e5aef256fd4d4af', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '3aa52779b10916a02cb8af0ac538311a11752f9a', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '1d182d4371456b494ade1f9f076706879a198231', class: "app-layout__navigation-controls" }, h("slot", { key: '85b394015a62588dc44374b6a4950e2118529f4e', name: "navigation-controls" })))), h("nav", { key: '6992a88da55541eb067e905de93c8bc1a093b04b', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
                 this.collapsibleNavigation &&
-                this.navExpansionState === "collapsed" }, h("slot", { key: '7d41b776a7d30606a2a4f6bf9432507d3215c724', name: "navigation" })), h("section", { key: 'c62375fecbad605fdd6c8a989e1df595c8b9b53b', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '32bccc6df13d9c18bae6ffd3aa1321fba2adf681', class: "app-layout__app-bar" }, h("span", { key: '7761897c9f493da17376c38a90cc22e7770d7f7b', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '78436397b99689627a11f0a7b0b80ef79c7faf50', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '9503fe9dcb32ad8ac71132c9065305e471b3566a', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '1e4ba308c482b3b9c8aefaf04bd8e42d3599f228', hideLabel: true, icon: this.transitionStyle === "dialog"
+                this.navExpansionState === "collapsed" }, h("slot", { key: '68d20399402968c86fa57320274c5f047bd1ca7b', name: "navigation" })), h("section", { key: '52d59e9636b4ab053b0908bf990b73f48e6b5947', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '333ed1a7c47c50ca54c5cd50172aa3b7971913b3', class: "app-layout__app-bar" }, h("span", { key: '0c7fd56eb217ed64e3dd6308c88c71f97bae167f', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '5839a57d6e77288c0195a788e9a869e65063c465', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '0840f9bb0c1c1a40360e7a7b376498b2dd81a94f', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'e92ab3c9702c9121861996bf051ed972cbcf1af7', hideLabel: true, icon: this.transitionStyle === "dialog"
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
-            this.navExpansionState !== "expanded" && (h("span", { key: 'b2e67d86af90a03ce4e592b8c05344c3b0bd3bb7', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '900b525ab072ef7c2118ea4df022948e86d86441', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: '90e02383bd578c0ac5c4e71565c017d45da2e8ca', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '3dd9e2e8fff75b7df3c62904d129d7da833338b4', name: "custom-app-bar-back-button" })), h("div", { key: '5c47928c8c160efd11e8ba065aee682139c31909', class: "app-layout__app-bar-content" }, h("slot", { key: '595bb77fa075c7c93a1c01cce9f8646085271a71', name: "app-bar" })), h("div", { key: 'c38221c515655f0ea29b99130ceed886ba9a8346', class: "app-layout__app-bar-controls" }, h("slot", { key: 'cdeb2c4c92b528e7668b0ca75c8a6d9909586139', name: "app-bar-controls" })))), h("div", { key: '4451d20caf3c9bf625481bcb69339161f3ce59fd', class: "app-layout__banner" }, h("slot", { key: '55cdf9dc49401cdbf108429f5b88eabfb0a5a8fd', name: "banner" })), h("div", { key: 'bdfaed66354fb98f0261e6c1471acb42288d4a1f', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '61e27fdad1c8d00ef4784b9710f63f96fa6a1f7c', name: "content" })), h("div", { key: 'e2664aab92aac1ca42c4ae6214f0a0639c851dbc', class: "app-layout__bottom-bar" }, h("slot", { key: 'e8ed7aa1b4db87c99c04342a5a92592cc7558457', name: "bottom-bar" }))), h("aside", { key: 'd54e38fc2a6572fd906c2dc29fed83f393165c5e', class: "app-layout__sidebar" }, h("header", { key: 'e9d8da24a7a66e0c5603c7b3e596c61e0f37f485', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '4c9eef2c7776fb17e2b6a0ef29c191e1b01e1210', name: "custom-sidebar-header" })), h("header", { key: '0fbabae4205fcf10719c09b91137eb9976570f42', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '429a029aaf97c70501607e290d33a21851f5387a', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: 'c97527b8045a638d4a8ac6353b76412141495bae', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '98586801b5d898ded16c86930098d2c465f0f5b5', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'b9143060027fecaf71539b82148debb484e444e2', name: "sidebar" }))), h("span", { key: '65a9d8644e838ec685f6ed5733c185b991bc8ecb', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '478178ad5bf08c07a71bbb9c861374b7dc0019a4', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '5e00f2a754c8da6cb395c11347b4ae85f6d5ce3d', name: "floating-action-button" }))))));
+            this.navExpansionState !== "expanded" && (h("span", { key: '710f1bb3eabe05a6242399d7eafd75b888a5804d', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: 'f563b708831eb84fac2837c282b4b4b1425acea7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: '12571f31a669a614acfd32f7454d84d461607bb2', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: 'f7ff9464709e45343e507348182e381fe6ea384e', name: "custom-app-bar-back-button" })), h("div", { key: 'a666f10d9164da4ab09cd004b60e482e0a97e073', class: "app-layout__app-bar-content" }, h("slot", { key: 'ed2f67119740628b3728edc3667a187080e57c5e', name: "app-bar" })), h("div", { key: '2b6e269d6f7336e3c63f3682faa1a315c345649d', class: "app-layout__app-bar-controls" }, h("slot", { key: '8b156da7c2adfd5fa9d40053a07338a1480434b1', name: "app-bar-controls" })))), h("div", { key: '0b4579d78afefd3b85b90d0cef8707e778744ffa', class: "app-layout__banner" }, h("slot", { key: '689ccbd5956315c652b3ce5324983c0e8c6c7f82', name: "banner" })), h("div", { key: '10797e673aa548b3e3891f6ac52ba3192af4a0b3', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '7e7a12ce18cf8253aa2635cca54cefeb67ca739b', name: "content" })), h("div", { key: 'f72168b8c94062f8308ebd3b057200f8e573dd0a', class: "app-layout__bottom-bar" }, h("slot", { key: '01c84573749948a602bea15202a421e9207f2406', name: "bottom-bar" }))), h("aside", { key: '98fc39d9398c704382c9eda5ff8ecd480f560458', class: "app-layout__sidebar" }, h("header", { key: '51d7d5da2a7c49a2b7f2e40075439b7c67528fd6', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '3118ca488b32ff7a41a257d81bb0bcaee0223b8d', name: "custom-sidebar-header" })), h("header", { key: '22ce181e892eaf567682756c22091ec67fa79a6e', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'dd49fc0e2b3eb997250cf74b10b87eb0f7a3361c', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '3b9efe7bc6f5fdb423860806387843790c4d81f6', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'd251b48e76f0b4439f2de573cdd99fc22e98d141', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'ff32199befe85da72ba7f135ab2e14979f714183', name: "sidebar" }))), h("span", { key: 'b523374e50d55d49ae969d9dba0664b4c3d16229', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '6cd1a016a4ddff57117e55acf16e348f310ed4a4', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: 'db7051c0e81d62907746be98d713771e27cb0326', name: "floating-action-button" }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-autocomplete.js

@@ -223,17 +223,17 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
         const className = classNames("autocomplete", {
             "autocomplete--inactive": !this.active,
         });
-        return (h(Host, { key: '35803245ee554c6f4d3ead9f87a1cdf73343007f' }, h("div", { key: '0237472750287689c060557515ffcf6d208c2a6e', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
+        return (h(Host, { key: '7ccdc5bbc34c0b67dd4bc43558672bfcaa925370' }, h("div", { key: '5db7afde57cedcd7f2f76cf3d3bf41ea3d1121f7', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
             Array.isArray(this.value) &&
-            this.value.length > 0 && (h("div", { key: 'e06650357d144482792cb5a78ced14a49f77df6c', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: '2b93f17cae1e7d2683d41eb4da28beb9fd9c378e', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+            this.value.length > 0 && (h("div", { key: '99b003b46ce6aca813468233ec46b9746afd5863', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: 'ad3f43e26a3ee67ffc1fa4a980d8a8a412f89787', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
             return (h("swirl-tag", { key: item.id, label: item.label,
                 // eslint-disable-next-line react/jsx-no-bind
                 onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
-        })))), h("swirl-text-input", { key: 'fe61f1a45792f11098c08c9a519c7286288c3ff2', autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { key: '13c30246e60759e39e6f86b95286673d096e7724', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
+        })))), h("swirl-text-input", { key: 'b81c39bc6b02321f9ec1da7510e1ff5fefacf6eb', autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { key: 'e78b9b6e1179036e2c6133fab4e88e929450ba26', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
                 width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,
-            } }, this.loading && (h("div", { key: 'eb4fef11c6eedb9b5aa04ea9275f80d1249bad28', class: "autocomplete__spinner" }, h("swirl-spinner", { key: '8dd45fb707d886f01bcb8b7036a30fa6af4c0918' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: '95db25769911dcc9876eb94730adeb092844d97d', allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
+            } }, this.loading && (h("div", { key: '464609dbec26c61919d20b617afc2c8b2bb2a1ae', class: "autocomplete__spinner" }, h("swirl-spinner", { key: '57467b10cf6732da9d3e913994cad372cfc4bdbe' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: '2e377e61b4dc64f51d48f73f4f92ffee8fc5816e', allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
                 ? this.value.some((item) => item.id === suggestion.id)
                 : this.value?.id === suggestion.id, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.id })))))))));
     }

package/dist/components/swirl-avatar-group.js

@@ -29,7 +29,7 @@ const SwirlAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatarGro
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = classNames("avatar-group__badge");
-        return (h(Host, { key: '5b386bdc0c753d8ef01cbb733643a60e96ab89fe' }, h("div", { key: 'd3e47d6670ac21c8d202b76dbde2861f6bcaf57a', class: className, role: "group" }, h("slot", { key: 'a81602480b721dcd9b90b8c36c5f795d7a5d6463' }), this.badge && (h("span", { key: '224ac43404406dbcd768b812fc6940514b9ea36f', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: 'b002259b0fc555dd7c6d88e81be0b47eb990397d' }, h("div", { key: '3ebd30115f4866b87d995015f0e16bda6dbb4ad5', class: className, role: "group" }, h("slot", { key: '806e160bf43e964c3ac05db900b62d0bf420a903' }), this.badge && (h("span", { key: 'e40106fa24b4751600ac71bfcb4e1ebf338e2fc8', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get style() { return SwirlAvatarGroupStyle0; }
 }, [1, "swirl-avatar-group", {

package/dist/components/swirl-avatar.js

@@ -109,7 +109,7 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
         });
         const badgeClassName = classNames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
         const toolClassName = classNames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-        return (h(Host, { key: '58a018fec9dcb72f391e50040a6b4e6b4559751e', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: 'f44174ddb46d74bdeea62dd6f81846913c46b8ad', class: className, part: "avatar" }, showImage && (h("span", { key: '1ed67acba8ab9f7c154c7e6647c15dd991db55e1', class: "avatar__image" }, h("img", { key: '4efe8dcf0fa3c5a0aab5c0ec53ea09be8c49bccf', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: 'b8e05f3d8cefe38da0c24fb9fef0f215cff01f1d', class: "avatar__initials" }, h("span", { key: 'e57114e2cacf55923020e6fda9ad16bb6eecc887' }, this.initials))), showIcon && h("span", { key: 'd1d9ee462bf6574cf98f991b6b963d51963dfa3b', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'a7dfe378cb3f824094bfd59ce3c49bcbd3c3ded6', class: "avatar__icon" }, h("swirl-icon-person", { key: '162e29ddddd261833c31d679d4169fd056461ad1' }))), showBadge && (h("span", { key: '82a4f2a24fe237de8722e39a2a43030d24c7bf0f', class: badgeClassName, innerHTML: this.badge })), h("span", { key: 'aebe16ddb21e9ab756168a15d0e0478bc9c7fdd6', class: toolClassName }, h("slot", { key: '207a5c9b2b59e9e6dd4c424a5e8c968a5973b904', name: "tool" }))), this.showLabel && (h("span", { key: '5c76d712a42ef23ac0603e4c9268b57b621e4c1b', "aria-hidden": true, class: "avatar__label" }, this.label))));
+        return (h(Host, { key: '56ebefc98134484870d719fda35e05d311716032', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: 'd6a8354aeb6d7e8ae7a01de79f66fc481d0627ed', class: className, part: "avatar" }, showImage && (h("span", { key: '212b277b9361c2935a4a937cda716bbd5f79afa6', class: "avatar__image" }, h("img", { key: 'd037a0e2ee08c7a324383ca075be9fa21e1bfbeb', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '08f7d449924aa06a5429668cdc8ca1b9aff81212', class: "avatar__initials" }, h("span", { key: '96c8725ee16bc7334675c44541aea46a50670bb4' }, this.initials))), showIcon && h("span", { key: '0e1794e27361d8b5a1c52fd604fd9e7d037ffbdb', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'ab06d6de3e3a501d66f4584ecc36179158c145a6', class: "avatar__icon" }, h("swirl-icon-person", { key: 'ba5d839ad1e4f6229ecd9dcef13d7150407dcc65' }))), showBadge && (h("span", { key: '956fad51793775322e5b608ea4226029ebe21d78', class: badgeClassName, innerHTML: this.badge })), h("span", { key: 'ea68303bb71630ef8e08985a45ecddb6102e1e04', class: toolClassName }, h("slot", { key: 'ae8b5bddf5231b0ea69fae465d73485affa9f430', name: "tool" }))), this.showLabel && (h("span", { key: '40236aaed6670ed3359ee656837d54b54323a0a8', "aria-hidden": true, class: "avatar__label" }, this.label))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/swirl-badge2.js

@@ -20,7 +20,7 @@ const SwirlBadge = /*@__PURE__*/ proxyCustomElement(class SwirlBadge extends HTM
         const className = classNames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
             "badge--has-icon": this.icon,
         });
-        return (h(Host, { key: '06a07667ccb9474de7010dfc31c2119d651bb476', role: "status" }, h("span", { key: 'e677f471ca17db30f0fb63c53b4b175f1bb23082', class: className, part: "badge" }, this.icon && h("span", { key: '8773650b811868a363f29b63d35b890bbc97baf7', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
+        return (h(Host, { key: 'bae92c831dde2b32bfa7261d43afa1535c8e2e52', role: "status" }, h("span", { key: 'b0fae374f4fb64a1f08644f87583a4f566b0a37f', class: className, part: "badge" }, this.icon && h("span", { key: 'b315a6e43dd61d71651417182df6a1ca5f9d6241', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
     }
     static get style() { return SwirlBadgeStyle0; }
 }, [1, "swirl-badge", {

package/dist/components/swirl-banner.js

@@ -63,7 +63,7 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         const className = classNames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
-        return (h(Host, { key: '59ad8b46103af68b01514dffb4a8ffc3f7366135' }, h("div", { key: 'e7a44b513cc0e362187b7972bbe30370b9789b1d', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '4465f6f6ab0afe3231e25a52192a9f56d5756efe', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '4aa59545611d08217a0edb767ee34f5d7fc2e18b', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '91ee916917e08fd7d19277740a63c6efa2493910', class: "banner__text" }, this.content)), showControls && (h("div", { key: '49b0b4c1f8b83e60e033fd3729c1591f3ba961bc', class: "banner__controls" }, this.actionLabel && (h("button", { key: '3642186b3c70e2a2a2fef4ec21ab3cda77d345c6', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: 'a09f723ea799b686f0e06baeeb87590a1b60f1fa', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: 'caaba0ff27439dd72e1efd50178a253e496abd4d' }))))))));
+        return (h(Host, { key: 'e738d297a3c16fec81cb03bbcc0eec4b18fffe10' }, h("div", { key: '731ebb82ec0f46beea8aca6b9dbc305f18cab5ce', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: 'f817862b889d81a440725024a2632a8a532e425b', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '3022fbf7fc75fa93e5c01cc2697f0276d7d39618', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '89e76fcf3bd2099011359bfc27d02f3e06a34959', class: "banner__text" }, this.content)), showControls && (h("div", { key: '8e46586058861b274a00b7872c16858a2685bb1b', class: "banner__controls" }, this.actionLabel && (h("button", { key: '508bd8be18739c3c02309b31ed7e3c5053095a3c', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '8bea66c5271fd11dea470ffc61b33bd476170aa3', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: 'a9fbe97bcddf9cef64d2b97adb92f97c943d05d9' }))))))));
     }
     get element() { return this; }
     static get style() { return SwirlBannerStyle0; }

package/dist/components/swirl-box2.js

@@ -118,7 +118,7 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
             "box--scrolled-to-top": this.scrollState.scrolledToTop,
             "box--scrolled-to-bottom": this.scrollState.scrolledToBottom,
         });
-        return (h(Host, { key: '22989d7972a37c53b50f879639bff0581214d528', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '8628bb4a2474579564e1352967b8e4c48026c906' })));
+        return (h(Host, { key: '1fba3acf95ec0fcd18a7efe25fcc17344f8a576e', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '75059cde1d626d95784e32b76498d9f659c41386' })));
     }
     get el() { return this; }
     static get style() { return SwirlBoxStyle0; }

package/dist/components/swirl-button-group2.js

@@ -21,11 +21,11 @@ const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class SwirlButtonGroup
         const className = classNames("button-group", {
             "button-group--segmented": this.segmented,
         });
-        return (h(Host, { key: '663df05c0ea2f6abeb84e5e8d505d86182b8db03' }, h("swirl-stack", { key: '24b8bfa87aedd82c415c09ef003ba5fcfc77d65a', align: this.orientation === "vertical" && this.stretch
+        return (h(Host, { key: '9d7e0ea4b44869f77fa372f4ae4621b9f9dfe8dd' }, h("swirl-stack", { key: '6fbf8996d24abf7adbaa39d23b3db4eaa2b1bc60', align: this.orientation === "vertical" && this.stretch
                 ? "stretch"
                 : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
                 ? "stretch"
-                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: '06f198d3ec7d7a064a074358ba446fdc66595f0b' }))));
+                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: '6b9ba670905fae3fca44b764be75208ae03c9714' }))));
     }
     static get style() { return SwirlButtonGroupStyle0; }
 }, [1, "swirl-button-group", {

package/dist/components/swirl-button2.js

@@ -97,9 +97,9 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '9f7e6331c399db3c4bfd13decb2122be60e5e065', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '859b6ac29de2c34bb8d83195f15204e533e6def2', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: this.inheritFontSize
+        return (h(Host, { key: '635a1065811fc352a9be9a8afcd3214a9650282d', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'ff06cd64a1d8eea339c9ab0afea3e69623bd1b2f', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: this.inheritFontSize
                 ? { fontSize: "inherit", lineHeight: "inherit" }
-                : {} }, Boolean(this.icon) && (h("span", { key: '5c7f0e5a64b7a340f2150f389f20cd9316b187aa', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'd6a785644558af85728463ae5a91a0356597f234', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'fc0967d404034583af2e3de17f466cd16bb7a9b0', name: "icon" }))), !hideLabel && h("span", { key: 'adffba35ce4ab6113dbdcf9250d288f5ee0755d2', class: "button__label" }, this.label), hasTag && (h("span", { key: 'e9fd1d4ab56df41b7c20b54fd830735571273f4d', class: "button__tag" }, h("slot", { key: 'b102bba403ef8ec9f380fca6153ba242d789e0f0', name: "tag" }))))));
+                : {} }, Boolean(this.icon) && (h("span", { key: '51b0054616c9b26f5217591384fcef5f634d0a07', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '18bf3a811562dbb9489d9fae2fb192b7e178bad1', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '40d9cf93df9ff77687d3410ef1a4178a7a82a627', name: "icon" }))), !hideLabel && h("span", { key: 'd629db6c30a294022b29ae2ba1214e22f5581a53', class: "button__label" }, this.label), hasTag && (h("span", { key: '1e11954dd364ba68414048dd133b0429c049964a', class: "button__tag" }, h("slot", { key: '07bfc30e7f989e134e5733ba0c3c2251d1668a51', name: "tag" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlButtonStyle0; }

package/dist/components/swirl-card.js

@@ -87,9 +87,9 @@ const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCard extends HTM
             "card--interactive": this.interactive || this.href,
             "card--is--borderless": this.isBorderless,
         });
-        return (h(Host, { key: '4d6f94076fcdb889d3ce746039607d59be1cd2b8', styles: { height: this.height } }, h(Tag, { key: 'e90f4f6e05f6bce9dc7529e994ac20b78288075f', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
+        return (h(Host, { key: '9a0dc5d885be38ee2e94c7641257eb018e258ad3', styles: { height: this.height } }, h(Tag, { key: 'd863db3119f975a3f96e679b5a164c1ed792177c', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
                 ? "noreferrer"
-                : undefined, style: styles, target: this.linkTarget }, h("div", { key: 'b807d3babd972a8fe3ea78cf09f85a9ba3ef0c60', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '50785ca3afed12023065baf6f2a6a11d0fc694b2', name: "image" })), h("div", { key: '9cfb96ea5290cbb124c830bb3fb9b24db8d22764', class: "card__body", style: bodyStyles }, h("div", { key: 'b499e82609144d547db7ac0c3a9155d2f5c2edd5', class: "card__content" }, h("slot", { key: '5de143023d98501f3c98c319223aab370d42c46f', name: "content" }))))));
+                : undefined, style: styles, target: this.linkTarget }, h("div", { key: '02f660fa638a355f0bf9cc3fb57a9f728df27ef9', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '73c1a1cf4914865e23f5dc0a37d298b226673040', name: "image" })), h("div", { key: 'ed7413be702708dc44ed0b54c052602ec46aef43', class: "card__body", style: bodyStyles }, h("div", { key: '0ac40a967d3a3df98cb2094b9bbc76ef59c4c5d5', class: "card__content" }, h("slot", { key: 'beea6852b0cd7c32430e42c7bab74ae6990ec37f', name: "content" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlCardStyle0; }

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

@@ -17,7 +17,7 @@ const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouse
         const className = classNames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: '1e818397fe4302ceaba585b537c123317307452d', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '0dfc63ca13321615bb5b3295e767c9e4ed82bac2' })));
+        return (h(Host, { key: '8e51a221c5008156f57a983719cb0f4e89309975', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '68acc357fb4c3ea6f69e12e946e3cd13234b4fdf' })));
     }
     static get style() { return SwirlCarouselSlideStyle0; }
 }, [1, "swirl-carousel-slide", {

package/dist/components/swirl-carousel.js

@@ -146,7 +146,7 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
             "carousel--is-at-start": this.isAtStart,
             "carousel--is-at-end": this.isAtEnd,
         });
-        return (h(Host, { key: '7a23607d98ec5bc759fdcae7ba70df9a6940f187', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '1223f0cd4acd6556cce428276f2664201bddbad0', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '86a5e0b334e7bff828bb2477cf912d54b9489f2e', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '794a310026cec6b9203a99207e2aa4e732ff9e01', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: '98179d7a5467375248823e59e5f8d1f080d5b39c', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '0ff0113a8d91b2366b517da4ef9d9219062d32b0', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: '8c8ca585ecff7b41f8dfdc9e66bbcec0ed60a20e', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: 'e6370b762f1822d608c395a1ab5e257688b04de3', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '7958568cc3a087979a061cc8ab8e920a4b4cc4c0', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: 'faa888df896a1517ed6d4ad0ef411504fc9af373', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: '4ec9cec82b7d3b57c27606ba147147fee4908009', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '751e7e966e6f7b5b6051a83cd566e96a46424526', onSlotchange: this.onSlotChange })))));
     }
     get el() { return this; }
     static get style() { return SwirlCarouselStyle0; }

package/dist/components/swirl-checkbox.js

@@ -54,7 +54,7 @@ const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCheckbox ext
             "checkbox--invalid": this.invalid,
             "checkbox--unchecked": unchecked,
         });
-        return (h(Host, { key: '3f791853cc40f9cea14b696c97a7e0ffcbe83b2f', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '5343b2eb0c188c8bba2ac717d62de26711b29aa3', class: className, htmlFor: this.inputId }, h("span", { key: '0e3c767e4cf73aa2daddfb574f48a24f8753bc32', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '518d7373a43419fb06b5f4a5cee587bfe469ff89' }, h("input", { key: '389abda596f18256d386f233e6472bd3e091f63a', "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { key: 'c3ea514dbc59eb64e8e9f58f8d66c9460e09fc12', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: '03f2234bf274c734f1ddcd30e3e7fcb03f7c0e9e', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: '3676909668e487ad3eced64ca05aef2617e6c99a' }), indeterminate && (h("span", { key: '8b114f66464a5c125888ad3571993b71a4c51a6b', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '5d28ddb318680a3373d4ca771c972ff223d38b25', class: "checkbox__label-container" }, this.label && h("span", { key: '4baefd6cb705a6b9181c4e3c5653016f2713d653', class: "checkbox__label" }, this.label), this.description && (h("span", { key: '4beba68c4124354bcb15251332bf25c666787b9d', class: "checkbox__description" }, this.description)))))));
+        return (h(Host, { key: 'aac65bf193091a8bea9fba0400ba73214b59e3e0', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '07c5b04f6809c2a96796ae899305d6197e34948b', class: className, htmlFor: this.inputId }, h("span", { key: 'b6ff60df3a61f63c11880f553d65aef8aa5fd12f', class: "checkbox__control" }, h("swirl-visually-hidden", { key: 'c53b3f70f0137c69003fd7098b235fa2bcf37f33' }, h("input", { key: 'aacb2b661d7c7f90710b4c115730609a4e6305d2', "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { key: 'ef9cc2b5a745021f67f78f985146e325da793e44', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: '07f423ba9b9a5b43b89114a7b9a09287197ba09f', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: 'c2583703af27ed11acc996cf7e0beefc99149923' }), indeterminate && (h("span", { key: '90398aa1acb1cebf30ce3ae518ce8d0eec017410', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '5a5aaf43dcc186aa21934f5150f1f76445945a3d', class: "checkbox__label-container" }, this.label && h("span", { key: 'fee226c02adbd1b677a3e4657c0c8056c260daa4', class: "checkbox__label" }, this.label), this.description && (h("span", { key: '2e1bc11d4e655d1ca517531625ad2ea953753a07', class: "checkbox__description" }, this.description)))))));
     }
     static get style() { return SwirlCheckboxStyle0; }
 }, [2, "swirl-checkbox", {

package/dist/components/swirl-chip.js

@@ -56,7 +56,7 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: 'be1a929a9efe4fe6a6fee27f08218063ac03a8ba' }, h(Tag, { key: '2c816c3c7ba603c3c403947d9e2f043ea00c4061', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: 'e570bc840be98fd23d6ff46517115e1ea6e1a111', class: "chip__inner" }, showAvatar && (h("span", { key: '18e721ec9c55170f398e2b9d2df0be97a54626a4', class: "chip__avatar" }, h("slot", { key: '952ae3c808156b4a3f9d53e45d00af33d8f1d070', name: "avatar" }))), showIcon && (h("span", { key: '179d91ff81b35f53469f8f5816b73b7fe324f744', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'fa57586bd59ebd9c9722f3bbf64c5c37ab1ab5e6', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '4f15b8329caa1ff0de30812340c1ef6efead3797', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '5e349c092244b2aae8b33e485aa8794e22745a2a', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '94d8906bbef7392a08326f0e6ab6c63c98b6979d', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, h("swirl-icon-close", { key: 'd2ebf4e2cb3ad637ccd42fdefc4ce1d2e4b27950', size: 20 })))));
+        return (h(Host, { key: '285e189df4a4358b7d07fc91b9f06ea562d295af' }, h(Tag, { key: 'fb4d13ac4afbeffebc9b44b8cf5800e7f6063839', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: 'bee9a24a811db37cdf02f1b3fba4f82a213154ee', class: "chip__inner" }, showAvatar && (h("span", { key: '0887a96c9e1b4fe697d7d53a9df24baab62fd33b', class: "chip__avatar" }, h("slot", { key: 'b9f4d49ebba68e3102792392efc6cf3d1401af40', name: "avatar" }))), showIcon && (h("span", { key: '577e4bdfbc406cfd54fe507e3e75c1d9a0693933', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'b6660e15ca44dea2ab591a7ac292c567d4073c56', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: 'fb2eba1ae34bc3e7b137044c4bd5814fc68493e1', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '93eed0c553045420b30d05f660c93dae3b431ad5', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'abff273245b609e14c2e7bfaa505aff50ff9bc92', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, h("swirl-icon-close", { key: '22482cfa3b2da13e5a93a4fea5487b26850da6d4', size: 20 })))));
     }
     get el() { return this; }
     static get style() { return SwirlChipStyle0; }

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

@@ -458,11 +458,11 @@ const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput
         const className = classNames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: '9c6c2ae8eea70b1c7a3d655966f01eb10fa02126' }, h("div", { key: '9e9952887c16d3b416c733ce3f4b296f1a20bd84', class: className }, h("input", { key: '11f9f1059e8d0794b977d9de4092d3a663088c95', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value }), h("swirl-popover-trigger", { key: 'e1eaf6acc5216eac9720e49b0da4db3ed3d44263', swirlPopover: this.pickerId }, h("button", { key: '2835b722d009daf3018de69061a67274f6cf66a0', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: '914da429bdcdd6576cecfcf3dd90bf104d803a09' }, h("div", { key: 'dc9f505383021faba447463c50811027d4b0be6b', class: className }, h("input", { key: '909c98a18b7fda96f7ebe7341180736a91697f71', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value }), h("swirl-popover-trigger", { key: '906c3aba8ba37be0a08d19ac203ecadafd109ea3', swirlPopover: this.pickerId }, h("button", { key: 'd770b523445bc12b7171bc30eadd66ae922f6119', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
                 backgroundColor: this.disabled
                     ? "var(--s-border-subdued)"
                     : this.value,
-            }, type: "button" })), h("swirl-popover", { key: 'bc1d9f94ef65a8307e6e006f013d9a354576cbe7', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'd2e9af494473cfdc2031f77d39e4fa3c5fffb2ae', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'd90d1d25866639f722abd765de86985d865931f0', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: 'da0f865759500a54152e98eaf4dff87f0f7b9d1e', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '025409345855e9cd4d601c9b14a077b347f72c2d', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '635cfa8885c5de97f240f5def31e6bfb72afb42f', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get watchers() { return {
         "value": ["watchValue"]

package/dist/components/swirl-columns.js

@@ -12,10 +12,10 @@ const SwirlColumns$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColumns exten
         this.spacing = undefined;
     }
     render() {
-        return (h(Host, { key: '513552bd948ca6af6ce0514800f01150fa81aaea' }, h("div", { key: 'fd74ac26cfe66fc07aaa27ba5d54ffab58e1631a', class: "columns", style: {
+        return (h(Host, { key: 'e03996b556c972c081c2bd4283d006579cf3a1ba' }, h("div", { key: '95eee3bf0911dd60c08223ab389bc9a3e0a2a1a2', class: "columns", style: {
                 gridTemplateColumns: this.columns,
                 gap: `var(--s-space-${this.spacing})`,
-            } }, h("slot", { key: '72c0008f8f6c08239659b779794455864f7f7b08' }))));
+            } }, h("slot", { key: '0d364bfbce8fda3431817a1cf2b35b71160d46ae' }))));
     }
     static get style() { return SwirlColumnsStyle0; }
 }, [1, "swirl-columns", {

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

@@ -126,11 +126,11 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
             "console-layout--sidebar-active": this.sidebarActive,
             "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
         });
-        return (h(Host, { key: '75ed644620dd6dd6fbfe481181404f63b43bf668' }, h("div", { key: '930295355c9adad85f8d1fb0ffa72105ee9d81ed', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '2b135ece93effa297f2676feb8a3784153c990cf', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '2469171f4c53b0b47c0a11f2559273da03cc8e4f', class: "console-layout__header" }, h("div", { key: 'ea1785c30bdfc66f26d060e9b21e1bd95e08de7b', class: "console-layout__logo" }, h("svg", { key: '4d6a8b892200363145996ce3ffc1f5e9c66e20d9', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '310df4ff4e8cd172ebaa278bf30eb2cb2ffb2b92', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: '357d0b108de4f1a41a1f28ebd54ce4373900233f', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: 'fd78a60381f3b4899b8d2a9f64ad8e464e69d5bb', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: '675eaedbd6f6c31a2ee3863eb4f055d957476964', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '4aa22ee51a9b06aa5295491ce3bfb0d4591a3b0c', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '0eb660b82f53b80637d72d67b4f58be787a96157', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'f6db2aec137cf9a4a6b6a076178dbe88c740193c', name: "navigation" })), h("div", { key: '4ff4932553cf449eb7807fd4c02a6c98bf4f2a14', class: "console-layout__user" }, h("slot", { key: 'e03924c209585283216ac4caec3d9d3e0dba46fa', name: "user" }))), h("main", { key: '961a8e76f831093faa4dff577d16d5e219181b4f', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'c93823d2615478e3b372767dd552be282089d2f9', class: "console-layout__app-bar" }, h("span", { key: 'f67587cbd1b2c1486e52bd17f231d47fadeb7d13', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '1b35b8c259050f9ad810a3a677e042c3e18f2b78', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: '2db5b391b25a4665590f008e35a7133e3740993e' }, h("div", { key: '8ba813e893f548964f591f0d1655c4e0cbd8ea70', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '76472e0d687397141c873ae2a25eb38e39843d56', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '3b38a392bd81364080351c2f311672b5df507828', class: "console-layout__header" }, h("div", { key: 'd6b194cbf365788c27c8d00027f4358cd899ece4', class: "console-layout__logo" }, h("svg", { key: 'bdb40ba7a53faaf6fc8e479f111385b0cd22f802', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8378b374cf75d70e729718189dd7d107f9c8ebda', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: '4e31347e7cc6d25195a244e405a5134bdb19d710', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '1c125a0c36cacb1fb92e7fe7991923df9f9a49af', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: 'fb33153f45926b050c67622ffe444631fe116de6', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '3fb83c1507ae43de879d1d05f288d8a97bcc28e1', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '4e6a4bfd178a15d0383fb99f86cf406d7d2fff1a', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'c1ef39cddcf29fb6ed7a338d2bff9899e6307ab7', name: "navigation" })), h("div", { key: '48fa937e86087cd52386b7448f646c8c45055d65', class: "console-layout__user" }, h("slot", { key: 'e4d4c5cf87e5ac1f7c5fa5e9ff6668297f004e78', name: "user" }))), h("main", { key: 'bc1d3f71337f4a84594380c037369cd895af0b72', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '210396be91888ea7b5727ed47093800e0a76b5f9', class: "console-layout__app-bar" }, h("span", { key: '52fec0800bab51aed224663a427b88f50c8746c5', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'b8034edfb26b0300cf328eea185a5cb829f8c0e2', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
                 ? this.hideNavigationButtonLabel
-                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '008daa8874535ad343ed05aa7d77e8320ba2e7e8', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '4ad05c8d745647c68d431f898fe479bebe0c2a67', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '1f555370a62f9ed20268f130bf9cf4d21f1e79d6', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'f7fe8db11cba3e8597f4b57f8ec2e7373f5e6638', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'e21f508a98ae0f82e0f90e528fc9896379516936', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: 'd9bb9db7d5a63b843003ba1d71160c0195ea0c34', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: 'afd67e72011390767de47c60b7221f8fdffe09f4', class: "console-layout__heading-container" }, h("swirl-heading", { key: 'f37db40ba500a367f979bd0beabe9a5c0bdb7232', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: 'dc2a19713110e4637e5dc2d092441c0a4b7fb953', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '4a91698804092c72b94ff1b69df3629b7f56cad8', class: "console-layout__heading-container" }, h("slot", { key: '8cd7b053055d78586685446dad60258038b8efa2', name: "heading" }))), h("div", { key: 'd4119e94bdfb42de34b36d67297bc7af64e29fa2', class: "console-layout__content-header-tools" }, h("slot", { key: 'ad6c40d1e415f5e5d3584214a0d13fa21bf33877', name: "content-header-tools" }))), h("div", { key: '21542321dcd2e49c8999b50b64e71f8d3edd651a', class: "console-layout__integration" }, h("slot", { key: 'e5b7c28eb23edbdd6a55e2fa22c8bee71fb496c5', name: "content" }))), h("div", { key: '104a1dbbabc502cde4f5678268b30e391bbd39ad', class: "console-layout__overlays" }, h("slot", { key: 'aa0d9761d84593c32e7034345465f9b301b5d630', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'a391e3ecc5f8ee3e576276227b24fa5419248fba', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'd8c9da1bb54e97441adc0e04b3da896ac04a0f32', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '0e2343444f71afd7224ca36afd9d7cc659b96dc3', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '598a25aad6a74e5b219baf4ee59036a13d1ec043', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: '6135401a042b786b92bf22fad73fee97e3190ce4', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '9866d4c80241aefd063a4585ce1c4d9d21c79e3c', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: 'bd5f13fe196970a0aedc604ea15c82667dd65c6e', class: "console-layout__heading-container" }, h("swirl-heading", { key: 'b33949b33c74cab02caecba774533f050d9c8009', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '5f111197d4a3c3a10f8ae0c57f3133bf9ebcde0e', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'c2de6bb554b1d1b29d08e9321816da790e8a3341', class: "console-layout__heading-container" }, h("slot", { key: '21cf1be5dd431e5b896928de8c6721595b8f10af', name: "heading" }))), h("div", { key: '4c3081c3c4f43a238af9b948b7bb29912cb2320c', class: "console-layout__content-header-tools" }, h("slot", { key: 'b8d773e04dafc6badee7bd5fc83a3c810615279d', name: "content-header-tools" }))), h("div", { key: '83b248a0c10bd8df73a5d820f894466a964864a0', class: "console-layout__integration" }, h("slot", { key: 'a673f167c09ab6e462ff148f642d1e91078bd6ad', name: "content" }))), h("div", { key: '9b498fe607dbcad0e022d04d5a5874d18577ce58', class: "console-layout__overlays" }, h("slot", { key: 'f566fc3c3d482444bf662cbda07d605e6a261749', name: "overlays" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlConsoleLayoutStyle0; }

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

@@ -160,7 +160,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
         const className = classNames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '760d49e0cfa1b75bafd91f6dc63af304b4a28fb5' }, h("div", { key: '25f237684f05361f41874752d94825cc01c9563c', class: className }, h("input", { key: '13cbe35237ff39527df92a28c2f3efca2a64ac6d', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '295dfe2e795d26f4298c5cf4cb3c9295078b201a', swirlPopover: `popover-${this.id}` }, h("button", { key: '08d2905061476ab4ca9a1b720c31262c18ccded3', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '366515b84ffeebf39e9f99285f4e959906856caf', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '5ee771ea748a6f92c328f13e41fae578c951a94e', 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: 'f7ac32c0696428502a5cc850d061be0323089284', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: 'c8b74c70c640b1bb14d838e3e4b11d0ea0f15e46' }, h("div", { key: '08d52f52443b843c5c37fa1efc8d42b391761875', class: className }, h("input", { key: '6351f183e5d60608c7e45df46da9e42855685eeb', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '96256671f54b04d91f0d8e10ab9c3d4503bfb8fe', swirlPopover: `popover-${this.id}` }, h("button", { key: '8f160ec0fd7ba9ffe1c65c507292bc945cfb728c', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '099ed1cde09dd90bd012bc10ad1a5b805e9b88a7', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'b94ac3ff2a0d741932c06e37b69e5eee4629364a', 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: '6bf840ab981e45ab983b83801ada5728dc8f6dfb', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -44,7 +44,7 @@ const SwirlDatePicker = /*@__PURE__*/ proxyCustomElement(class SwirlDatePicker e
         const startDate = this.startDate instanceof Date
             ? getISODateString(this.startDate)
             : undefined;
-        return (h(Host, { key: '307829ba5710662434ecb629020f1865a2f5650a', onClick: this.onClick }, h("wc-datepicker", { key: '88b5b0a79692ca10a3c723ea369a63d5f61165ec', 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: '2a339c82ba69b94719200c02ddaeee1e1b226375', onClick: this.onClick }, h("wc-datepicker", { key: 'd390481c2b4eb2fe3ad03e039ef38d7cc5dfcea1', elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
     }
     get el() { return this; }
     static get style() { return SwirlDatePickerStyle0; }