npm - @getflip/swirl-components - Versions diffs - 0.289.0 → 0.291.0 - Mend

@getflip/swirl-components 0.289.0 → 0.291.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1732) hide show

package/dist/components/file-manager.js CHANGED Viewed

@@ -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: '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" })))));
+        return (h(Host, { key: 'cf4d8f11fd4d0b88c9598a3f696555786f61e3f0' }, h("swirl-app-layout", { key: 'c09dcab1e6cae4c716d7632e8bef0c137daa2195', 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: '66bc9b1dfe00fc559f64618a0aad5c7fa60d668e', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '6b7489a7ce904bbbde241ded4fd66afc5839d60b', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '204b2c051855dbe9166288d67222e6bab8b5eecd', label: "Sort items" })), h("swirl-stack", { key: 'aaaec91d2fb59dfc3fad75fc6f8ac65b701210c5', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'cda0f6deb4888cd070e5d23542c5a29d15033683' }, h("swirl-heading", { key: '062cc15116315d21feee9d42beeaef4032682eec', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '3a0b965c85bf19da98249baed32caffd8f978076', 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: '86e9133be9b36f60ac8f6a9083b5ec2322d8932f', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '4e76be16045b9cbbb35df0c269542865b9d6024f', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '63da3d10e658273387a1c84c88333a2d356f61e8', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '599e73e13fa3e901955f9f6d7c185604d288a9ab', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'a41f004740d4b7a7abd52b4bec11d3b1ff60dce0', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '1316b6f0cf2c4e98e5f33bfbb5d66695ece98269', value: ["ascending"] }, h("swirl-option-list-item", { key: '58f06b9e639239a4030840743685409d16798466', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'd463e1d8db8bfe6056d28545f43c541bfdbb1ba4', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'c1fb103c4b288286f17a1acafa6ded3947aeea07', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 }, [1, "file-manager", {
         "selectedDirectory": [32],

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

@@ -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;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 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;border-radius:var(--s-border-radius-sm);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 {

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

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './swirl-separator2.js';
+import { d as defineCustomElement$2 } from './swirl-stack2.js';
-const swirlActionListSectionCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}";
+const swirlActionListSectionCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}";
 const SwirlActionListSectionStyle0 = swirlActionListSectionCss;
 const SwirlActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlActionListSection extends HTMLElement {
@@ -9,25 +11,41 @@ const SwirlActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAct
         this.__registerHost();
         this.__attachShadow();
         this.label = undefined;
+        this.separatorSpacing = "4";
+        this.spacing = "0";
+        this.hasSeparator = false;
     }
     render() {
-        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' })))));
+        return (h(Host, { key: 'dfafe6bc3d74e22fbf60f07d0179bf71455bf48b' }, this.hasSeparator && (h("swirl-separator", { key: 'fd93a18adf97d0fb37f6f76e14992915e095ae92', spacing: this.separatorSpacing })), h("div", { key: '099c87cdb2e411546228fb28863a27c0e541caa3', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '7f73b8d374df2e68576320ea2276fcb1322a4780', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'd2b9872ca56dc628d83f41472603563f6f3e35b4', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'd9f3b4d084938db64a49975a56397b13db610ba8' })))));
     }
     static get style() { return SwirlActionListSectionStyle0; }
 }, [1, "swirl-action-list-section", {
-        "label": [1]
+        "label": [1],
+        "separatorSpacing": [1, "separator-spacing"],
+        "spacing": [1],
+        "hasSeparator": [4, "has-separator"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["swirl-action-list-section"];
+    const components = ["swirl-action-list-section", "swirl-separator", "swirl-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "swirl-action-list-section":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SwirlActionListSection$1);
             }
             break;
+        case "swirl-separator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "swirl-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }

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

@@ -57,6 +57,7 @@ const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList e
                 this.container.setAttribute("tabindex", "0");
             }
         });
+        this.setSectionSeparator();
     }
     getItems() {
         return querySelectorAllDeep(this.el, '[role="menuitem"]');
@@ -79,8 +80,18 @@ const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList e
         return items.findIndex((item) => item === activeElement ||
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
+    setSectionSeparator() {
+        const sections = Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((el) => el.isConnected);
+        sections.forEach((section, index) => {
+            // First section should not have a separator if there are no items above
+            if (index === 0 &&
+                section.previousElementSibling?.tagName !== "SWIRL-ACTION-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+        });
+    }
     render() {
-        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' }))));
+        return (h(Host, { key: '5c5f8ce4ba462a70714635174966150d7c77e01b' }, h("div", { key: 'e31ab96f743bccedf0f6269cb87847d1451a9e2f', "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: 'faa491abcbabe70308c60b06e32f08c392e93d21', onSlotchange: this.setSectionSeparator }))));
     }
     get el() { return this; }
     static get style() { return SwirlActionListStyle0; }

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

@@ -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: '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" })))));
+        return (h(Host, { key: 'd600deeb8a687bb4845149bcf2bad842f5ecf1f3' }, h("div", { key: '1c662e5e543ccec7fa1aa92721e7e3c43fbf6e4f', class: className, style: styles }, showLeftControls && (h("div", { key: '1360ad530e65281d1756d3857020dc745d103695', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: 'd1abed9606942b05ca70dc6a334b81050c4c1fe6', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: 'fe72d1498779c96c01893eb7befdbccaa537b947', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '8dcb78f5b58bf6bc641c456cc8a58f9fb001bf09', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '70d556ed3057812ba3bae94a3137f50475971b5d', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'ff0f84da0dc691e84d549c269efab64ad4052c58', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ba47ee06389bd22569408c48b6bdcfc6fdd1d039', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '48ec84b6d54b8a2bc480467ae6b7556f8d2f6756', class: "app-bar__cta" }, h("slot", { key: '2303f169c07f38410740fd75ef788944ee23cdd1', name: "cta" })), h("div", { key: 'a03346495a15b78da499f5e5dc584e140ddb3a85', class: "app-bar__heading" }, h("slot", { key: 'dedbfa247ba4d1c31f04aa670f11499218fe9b4e', name: "heading" })), h("div", { key: 'cae7eea7759c04cffc983d4dd525b6bf87b8ee8e', class: "app-bar__center-controls" }, h("slot", { key: 'fd94d148cbedad08013203e9aba179165c7afedb', name: "center-controls" })), h("div", { key: '16e9c5e550774658b7b6ea93ff695564f6d7e65e', class: "app-bar__right-controls" }, h("slot", { key: '218d119f1d046ceff9a243c155a00dd730b76508', name: "right-controls" })))));
     }
     get el() { return this; }
     static get style() { return SwirlAppBarStyle0; }

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

@@ -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: '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 })))));
+        return (h(Host, { key: 'c56866be8b89817bc577b7081e3b2b0a859cd5d2' }, h("span", { key: '10581d1d8ae34c10133e0d8d911fc22a49625af6', class: className }, showImage && (h("img", { key: '5542d09f4e9afcead0d94d51208d8ab7fe3f1bdf', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: 'a6b5827035d9f8337232d00f2bc9bd7491ee6584', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get style() { return SwirlAppIconStyle0; }
 }, [1, "swirl-app-icon", {

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

@@ -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: '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"
+        return (h(Host, { key: 'bd1757d198f8e629b2e9754b47c30ebe5dc419a9' }, h("section", { key: '28b25940f98881967f1b39fabec35a839751159c', "aria-labelledby": "app-name", class: className }, h("div", { key: '52a19dc00ab90f4d0b774f84501e3eece9b4f42e', class: "app-layout__grid" }, h("header", { key: '820a3e03ad0c622e73df292141e78ffc5196f968', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: 'b3706641288a68f18319f0e4e5ba3ef47d6f398c', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: 'e5cacf0ebf353dd1760ef0b7dc124b0160554b12', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: '1e5e367858b4ae2ff731d96c9274c2dc580f47aa', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: '50d53650575d35d0fa744371e4b1b66b8c34632f', 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: '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 &&
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: 'c7ee551266b168aac662963dba75667cf201a48e', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '448cbde3919cdd986b7b49933d6afa8e96646db6', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '3c467742d3c0f80fe5aa56987c868a3b4e253988', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '80c04d971369df12490ae87d86664622aeb601b7', class: "app-layout__navigation-controls" }, h("slot", { key: '8e732928e682abe5eef49fc22614907f0fec0a91', name: "navigation-controls" })))), h("nav", { key: '71c3dc8235d56ce5c9cbfa5b701e020a735d6a22', "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: '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"
+                this.navExpansionState === "collapsed" }, h("slot", { key: 'f6a8b3b5bf48ca9a00017f907c7e1e4c245a129e', name: "navigation" })), h("section", { key: 'e44e1e6b08465e000378c80339b11680a1a8e725', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '3e0019dd933bc095980a871010a8723ebf95c89d', class: "app-layout__app-bar" }, h("span", { key: '1d2437a685cbba57563aa942c6dea4f5dc7ad728', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: 'a6f8147d45b2cc9aa877cb549f2e52e47a02975b', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '7678ad0057afab1ec8845940271a5e19d659c976', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '920ad1ff5b75f93179c4bf07ab56f3d042dd58ba', 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: '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" }))))));
+            this.navExpansionState !== "expanded" && (h("span", { key: '4356a054ba73b43ab719983f5e28f08618187c87', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '0dcc0b5175f72e651e9ba8fc54343bb8b10f044b', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'c409377d66e5d9653c3a4edacd00a7d1c36d41d8', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '19f1249cca6eb3d297c1bfb5c1237adf0563615d', name: "custom-app-bar-back-button" })), h("div", { key: '4d8ffb803fd1d60aeedc3abb27c2b587126b0809', class: "app-layout__app-bar-content" }, h("slot", { key: 'aa9769d6902c0dcea2873ed874d9efd39bcfdccb', name: "app-bar" })), h("div", { key: '87956c0906c878a60ba38a32ddd84b62e64c341d', class: "app-layout__app-bar-controls" }, h("slot", { key: 'de90973e95f87d557659269036fe3ba2ff841514', name: "app-bar-controls" })))), h("div", { key: '9092cbe26316ae42d16271d12ca0e22dba5f1d2d', class: "app-layout__banner" }, h("slot", { key: '442bba275cb42942e1f0910d9c02dda2a9af682f', name: "banner" })), h("div", { key: '924a188b2bbe99a0e75c70f1c7f5625995f1a099', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '94d6c1a191484f78595cc39eab5ff8229603d75d', name: "content" })), h("div", { key: '7c6aea10fad5a2852e7dd7c1faf2537e561ca7f7', class: "app-layout__bottom-bar" }, h("slot", { key: '425f8d91ec4c6970224cb8384ffa40c5f3242bec', name: "bottom-bar" }))), h("aside", { key: '7849759ec39060fa137dba9b466211568cd0746a', class: "app-layout__sidebar" }, h("header", { key: 'aaa9d7aaf245afee95d5b10bbe6cdd0fc3b0467f', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '9d215a803a91fe07e6f819a19ee44ff87e279fe4', name: "custom-sidebar-header" })), h("header", { key: '4c148f600be258693004721d74cfeacce295a54b', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'f4b0155f52a24d448fe3215d765bd5c6984f100e', 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: '69992a92cd4ec148de847b7235ec35b50d28beae', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'efba1faaebfc7fe100b0d53a1c5a5de79f5b7a29', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'f297a2f2db5bdafd7a88d7fea6fec50b8bac8e75', name: "sidebar" }))), h("span", { key: '4e87773e33eacaa27710a018e9f07803dc267ae9', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '704b7695fd2ece0c20f971f158e04cec95ffdb4f', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: 'a4c4bcfb8f498c7c6b878016ca84a29c7443c3d1', name: "floating-action-button" }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-autocomplete.js CHANGED Viewed

@@ -223,17 +223,17 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
         const className = classNames("autocomplete", {
             "autocomplete--inactive": !this.active,
         });
-        return (h(Host, { key: '7ccdc5bbc34c0b67dd4bc43558672bfcaa925370' }, h("div", { key: '5db7afde57cedcd7f2f76cf3d3bf41ea3d1121f7', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
+        return (h(Host, { key: '58eeefcb57a5715a133f49b6cc147862402fda63' }, h("div", { key: '7dc51102fd166c185a5f6927b13e001eba0399d8', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
             Array.isArray(this.value) &&
-            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) => {
+            this.value.length > 0 && (h("div", { key: 'cdf129384b1551bf4a5dab9a95fb2a62c4f2538d', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: '4cf38354d4c4a5cea92f37bfaa6a6f9adc81834f', 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: '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: {
+        })))), h("swirl-text-input", { key: '615bcb83a20ddf04af8e452a6f0c5bbccc957c0a', 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: 'a7b788178aa3d66047833cd8b349d3c402901b7f', 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: '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.loading && (h("div", { key: 'd4c81fd79ce26e5929ab0cf9f271d855c96c0b41', class: "autocomplete__spinner" }, h("swirl-spinner", { key: '3931c2a99a601c738dbb33112a70a62183e1a455' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: 'acf7cfc83b7ed1f3900196e35b8b3e7e533fc029', 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 CHANGED Viewed

@@ -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: '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) })))));
+        return (h(Host, { key: '78018239a1c8f9278ef5a8abfd2dbc311b76c825' }, h("div", { key: '94ade5b8ac0c59495932de68c674a168574d1d18', class: className, role: "group" }, h("slot", { key: '935d17128ed1a22965d69cd3ce08f5a2b672c5f7' }), this.badge && (h("span", { key: '622c34ba05bb395f49c21406c7652e678c49189c', 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 CHANGED Viewed

@@ -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: '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))));
+        return (h(Host, { key: '728b1c63a1b2a83f38a22c7aabc7281cf87181cc', "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: '4653cdc720fbfa7e04ff92b204c266c46c9d1f09', class: className, part: "avatar" }, showImage && (h("span", { key: '6a742f467537cb5098ea514ec57f766afea784cc', class: "avatar__image" }, h("img", { key: '3d42bc8cd849bafbd523536e5a9daf36194416cb', 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: 'ba8b221b627b68d0104cdb9e9aeaa7efcddbb8bc', class: "avatar__initials" }, h("span", { key: 'ed96f4a5f63fe453aef0d9833955404bd80930b5' }, this.initials))), showIcon && h("span", { key: '61952863d9cac6fcd3246cacacab6fa56c18ea8c', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'e827fc7897548ff5231e27d1687cec451b260ec8', class: "avatar__icon" }, h("swirl-icon-person", { key: 'f32fbe68cd752e18c9805ce58f55401db0b52bf8' }))), showBadge && (h("span", { key: '39452f2011d57ee16ed2fda13e851ecd1246cdc4', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '54bfc129b7161a8a46fe70dc85dd2567946e5b51', class: toolClassName }, h("slot", { key: '31097c526f73b003862fcb01196b2675c5b2fb9a', name: "tool" }))), this.showLabel && (h("span", { key: '08ee5038dd0a5df32c0f5e3cb36b6853f26618d5', "aria-hidden": true, class: "avatar__label" }, this.label))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/swirl-badge2.js CHANGED Viewed

@@ -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: '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))))));
+        return (h(Host, { key: 'c938981e31370bb4416c224c132ac00fe4b60f45', role: "status" }, h("span", { key: '16cdacb8ab5e87a5258899f963640ab788e4a4e3', class: className, part: "badge" }, this.icon && h("span", { key: '69281f42c7ce44c57619886b2796b6bcd01f5267', 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 CHANGED Viewed

@@ -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: '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' }))))))));
+        return (h(Host, { key: '2b926334556876ce750c890243dac923d8ae5b75' }, h("div", { key: 'f7aefa810673bd5e18a5c14aac01a078298df404', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '9712a2db49d78fc6228e91f696e442c316b62231', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '5632af1834cd2ffd0918628e53dcbc766fc0c29c', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'f5bfc1bf786936873522b8c42763166b9bb4b22a', class: "banner__text" }, this.content)), showControls && (h("div", { key: '18b8931ee8cfdbecca4ac7330049321023f3f1fb', class: "banner__controls" }, this.actionLabel && (h("button", { key: 'b6c7913a77b3872a74ba8c2770803379d268e5c3', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '9119dad3a6d3526e5aebbd0ede243373b7072252', "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: 'b0a59c1a5104ee71bc31be6c2f5648afbf1748f1' }))))))));
     }
     get element() { return this; }
     static get style() { return SwirlBannerStyle0; }

package/dist/components/swirl-box2.js CHANGED Viewed

@@ -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: '1fba3acf95ec0fcd18a7efe25fcc17344f8a576e', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '75059cde1d626d95784e32b76498d9f659c41386' })));
+        return (h(Host, { key: 'c8296ade3ea2dcaa4e14897557c343b433de562c', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: 'a0029e22b4fc9b60cb679af27f7ae66d366c0ef4' })));
     }
     get el() { return this; }
     static get style() { return SwirlBoxStyle0; }

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

@@ -21,11 +21,11 @@ const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class SwirlButtonGroup
         const className = classNames("button-group", {
             "button-group--segmented": this.segmented,
         });
-        return (h(Host, { key: '9d7e0ea4b44869f77fa372f4ae4621b9f9dfe8dd' }, h("swirl-stack", { key: '6fbf8996d24abf7adbaa39d23b3db4eaa2b1bc60', align: this.orientation === "vertical" && this.stretch
+        return (h(Host, { key: '3ba97e21adc41e84cc00510846c4afa0908a0346' }, h("swirl-stack", { key: '68274c5d09b125086e29a2c47351f66d1f2b6bc4', 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: '6b9ba670905fae3fca44b764be75208ae03c9714' }))));
+                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: '8116255c942708969132eab81ef8ecaeb2a29ff7' }))));
     }
     static get style() { return SwirlButtonGroupStyle0; }
 }, [1, "swirl-button-group", {

package/dist/components/swirl-button2.js CHANGED Viewed

@@ -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: '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
+        return (h(Host, { key: '644f280827046e78c58e7c45647c5c0552e95463', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '23a5862e91f6f7d9fd6a2dd85e9c75bc90c559a1', "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: '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" }))))));
+                : {} }, Boolean(this.icon) && (h("span", { key: '37948fe0cb6315080a42a0a0e9d7f14df87db473', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '39cb7279f339fc9b102edc990202adc71424cca0', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '9b176cfb970a3eabc3de0222cdb2dcc09a74017e', name: "icon" }))), !hideLabel && h("span", { key: '2784fc9b630954936434165b537358d5950083ae', class: "button__label" }, this.label), hasTag && (h("span", { key: '8e2335251d17103e3f79200090be9af69e4420e3', class: "button__tag" }, h("slot", { key: '101ab368afa228413d9aac05caa7b77ddbcc858d', name: "tag" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlButtonStyle0; }

package/dist/components/swirl-card.js CHANGED Viewed

@@ -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: '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"
+        return (h(Host, { key: '9275906a65a55264d2b70c2f7e406315a267eca6', styles: { height: this.height } }, h(Tag, { key: '0ea75344d70f0ba3519ca36d37998e899b03e8a6', "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: '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" }))))));
+                : undefined, style: styles, target: this.linkTarget }, h("div", { key: '20b1197520e50ac5d3a6e1f6675042123d6e46ef', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '48d19587d91bc3f40144e2657c687d893011875e', name: "image" })), h("div", { key: '90dd49534a31e78955060233c963bef48fa8067e', class: "card__body", style: bodyStyles }, h("div", { key: 'bb667238706643cf3825658574a211304c4556c0', class: "card__content" }, h("slot", { key: '2f3abe22d702b215efdbae2337547ef09c902521', name: "content" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlCardStyle0; }

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

@@ -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: '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' })));
+        return (h(Host, { key: '586ca217167d855d2e5e1e1a521beab5a27bb23b', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '9d928988be479790873dfc70b2c6b8dc8e922308' })));
     }
     static get style() { return SwirlCarouselSlideStyle0; }
 }, [1, "swirl-carousel-slide", {

package/dist/components/swirl-carousel.js CHANGED Viewed

@@ -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: '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 })))));
+        return (h(Host, { key: '1fa2ce01d868f592ea8101ef88f2769eddfcf0fa', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '8c650518f2eb1b419f706a7e055f9edd49ad613e', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '4a3f6b512d7f2ba3a564be80b94e3148241e63a5', 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: 'c292c6470e30a50326186fc0b50b9621b2e60c80', 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: '3c507ac4ea5d2d23fbf095f3cca22cc20ce9911f', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '3c3ab23d3bb493846d58f5c4fe04ede0fe42cd79', onSlotchange: this.onSlotChange })))));
     }
     get el() { return this; }
     static get style() { return SwirlCarouselStyle0; }

package/dist/components/swirl-checkbox.js CHANGED Viewed

@@ -54,7 +54,7 @@ const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCheckbox ext
             "checkbox--invalid": this.invalid,
             "checkbox--unchecked": unchecked,
         });
-        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)))))));
+        return (h(Host, { key: '1302f330a8e8fbf8b2bf2e7c76c6b9774a2c6873', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '7df27dbf4743e80131e6697ec90cee8396395131', class: className, htmlFor: this.inputId }, h("span", { key: '7167d9b7541cfca0e0ea144e0cce24d95b1c810a', class: "checkbox__control" }, h("swirl-visually-hidden", { key: 'bd19cd4962c6f78740d0d254a9df03dde765cdc6' }, h("input", { key: 'e563ee4a0f7b778ea95732cf7ecd21ea94602843', "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: '4fc4fd4b0e9ed81c33e005fac4178705e2ed1867', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: '6d99a544dcbe107ebd3a4fbc7aac9323a93a2d54', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: '47e4430ef0b41b1db4cc91b475291eb383662b8a' }), indeterminate && (h("span", { key: '85fe9a77ea85b0849c7b13d38b792f997645eb50', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: 'c5912f5c2a4f2261db44b5c48014ae51c308119c', class: "checkbox__label-container" }, this.label && h("span", { key: '6a86f766c67934f201e5d9b29cd4979736b42ec5', class: "checkbox__label" }, this.label), this.description && (h("span", { key: '803078f5b17fe605b1b72047f2aa7ab0d1c7ec04', class: "checkbox__description" }, this.description)))))));
     }
     static get style() { return SwirlCheckboxStyle0; }
 }, [2, "swirl-checkbox", {

package/dist/components/swirl-chip.js CHANGED Viewed

@@ -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: '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 })))));
+        return (h(Host, { key: '05b8680724d152529810288fa4a6a835e2488cd4' }, h(Tag, { key: '87d8281da93e971161e0cc3053dee52ee4c2f2bb', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '541f56e530084de7e6896abc33db09758b24e4af', class: "chip__inner" }, showAvatar && (h("span", { key: 'cb4321c3fce54288b95cea98a949ea442ea23ca4', class: "chip__avatar" }, h("slot", { key: '37cd09f6dbe6875517218c67522bb6cfea143f32', name: "avatar" }))), showIcon && (h("span", { key: 'cca23fed70438f36426392747afe684d15cee069', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '1a0889c515f3bd5aa30fb12c4fc282ae5c182034', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '6586785bdacc047240d85bc3052d882239258c13', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '10b78831efe8e93bbcb1252edc2a305a9726f92b', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '769154e1604c700c9255ef8f0392869eebd40d7c', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, h("swirl-icon-close", { key: 'f1c854780118e8a7f8bc1686f1d383f78daac5d8', size: 20 })))));
     }
     get el() { return this; }
     static get style() { return SwirlChipStyle0; }

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

@@ -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: '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: {
+        return (h(Host, { key: 'bc57ec96cf0ff668339f39dddfb47c414fa8c1e5' }, h("div", { key: 'a95fd7bed226abb450a619fad33ee20bca2820e8', class: className }, h("input", { key: '4258a0ff5056c20551b97e0c10059f6135162058', "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: '2d15dd236ad6ee2b8460fdd274c0570bcad41237', swirlPopover: this.pickerId }, h("button", { key: 'f7e8b065cf4097335c9d9b700213720d118c3b7b', "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: '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) }))))));
+            }, type: "button" })), h("swirl-popover", { key: '9b4b295fe4bc8e3e8dff9c24a0b0a721f45e36af', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '5567baaf023384901b2f4b6a99c9ea7d8ef02e94', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'f0320d15cfccc76de04357c7e7d7f40fbfb20148', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get watchers() { return {
         "value": ["watchValue"]

package/dist/components/swirl-columns.js CHANGED Viewed

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

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

@@ -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: '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
+        return (h(Host, { key: 'c1b758ad245bd022657e526f08bd9f3dc0fe6335' }, h("div", { key: '95d3a1e759dd4cf3c19dd15a7cfd40d6690edf61', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: 'cad75ddf36657fbcef65e143b31d7232234bb7ba', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '8738846e08f4a0d037d96d2427a069016bd1bd20', class: "console-layout__header" }, h("div", { key: '18ba83dcaa72f6742f67d3ae411460f902d1a422', class: "console-layout__logo" }, h("svg", { key: 'b08b89b3842d372db4803ff212245b51789f8b8b', 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: 'e21f5c1f89f25825fe90ffff640a7e189c5f443c', 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: 'd22307f5349e0730459058d49c07d698f23c9979', 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: '3c84ba987421435ec6cc598dce1c3a92d1e17b4a', 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: '769278b88013d6593a523e6d752dd00d195dabaa', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: 'ae2146da16068290f352b47a1273cd5a692abc7a', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '2a83c8ea8d27a90cf5421a32c662697e1d2cfd6e', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'b3b282c2170a4863f6bee4b43d4640668988961a', name: "navigation" })), h("div", { key: '85595e0bf37e7b61e1068c7123f0cd956f1965dd', class: "console-layout__user" }, h("slot", { key: 'cca595839cd794b89648756e91b76a2dd8f68cc6', name: "user" }))), h("main", { key: 'b39da5df85c9644e1ab6c41af4ba42c12be00eef', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '4c0742a0934f533069841d97e13493cba1d92687', class: "console-layout__app-bar" }, h("span", { key: '9f3d93b8f7fc7820f5982508cbbbdc1e8fc2c810', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '61fc64852a416b23c3dcdf25e90597601df06dd7', 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: '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" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'ba9a5043aa327b141e69061ed07387230094a1f4', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'dde6006825234fc6b242151ebc3d5215a0fac006', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '6374b3788af4e3eb5b1aad8d1807acf5b0e25b8d', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '137230b322fe5382ca626dede3867d32089602d3', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'aa055784fc4b91e4f6d722f96e95156f69949092', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '24c1519afb1e22612d238f157a7c52ce91d1af15', 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: 'ad3b761a07d6b8bf16eeb2622a66f24f09a717e1', class: "console-layout__heading-container" }, h("swirl-heading", { key: '2e8dacb981bb49547ed212d2c54778f16d7e125e', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '8ed914b94bb65159cae4a0e7ede02142eaab2d18', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '252adf38bbcb2b67012873a41a32ad902078c215', class: "console-layout__heading-container" }, h("slot", { key: '8e0c3e9e127e8351eea264a4365fac4eee772a8e', name: "heading" }))), h("div", { key: 'fa46067f10afc98a5972d47b3c30fdae072c0b28', class: "console-layout__content-header-tools" }, h("slot", { key: '858229681f110298267942f0c0f879e09df6c16d', name: "content-header-tools" }))), h("div", { key: '380e5a52ad4bccc19799eb39a71d40d9cf830cb8', class: "console-layout__integration" }, h("slot", { key: '782a7249da08c352199f444ee1c715f46d520305', name: "content" }))), h("div", { key: '6fe33a4bcbe2c71b6fecbab9bfa9b78668131434', class: "console-layout__overlays" }, h("slot", { key: '57edf109fcd1d74c711baba09f5437dfadb4e441', name: "overlays" }))))));
     }
     get el() { return this; }
     static get style() { return SwirlConsoleLayoutStyle0; }

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

@@ -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: '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 })))));
+        return (h(Host, { key: 'e9d635db3a168b95fcca96188056b49207c8e91b' }, h("div", { key: '20c70165f47384f4874137123e52ce33d94e55fd', class: className }, h("input", { key: '704ed89602be3fb69f924d54ff5b20bd7c757354', "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: '64af677a7835454f386cae65a8a6064da6bd0033', swirlPopover: `popover-${this.id}` }, h("button", { key: 'e25604a9d3715f22cf6b12687cffd6e1a212f796', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '0236505d92419cb3731de9dd36564ec7b2bebe2b', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '3855a4097c021893c273164dbe63ebc6a09b8b89', 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: '08fbc95483cc5f48acbd07467ba129aceef13bfd', 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 CHANGED Viewed

@@ -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: '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 })));
+        return (h(Host, { key: '647b445e4757ec9d05878dba55e2155e333092b2', onClick: this.onClick }, h("wc-datepicker", { key: 'd7eb1f7133265fc4e7576bfef28168dbd99ff980', 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; }

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

@@ -24,7 +24,7 @@ const SwirlDescriptionListItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlD
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,
         });
-        return (h(Host, { key: '6eef8b77f662ab513cdf7ec3e77ffba5d04a2c0f', role: "listitem" }, h("div", { key: 'ef46cc16888dfe6c281fba61fc0e7cf11e68acfa', class: className, part: "description-list-item", role: "group" }, h("div", { key: '510ba63b840901b58bd80b62c93f892f71acd471', class: "description-list-item__inner" }, h("div", { key: '3f3b0141e290701dc4fc616b7748c8aa0ae1249f', class: "description-list-item__text-container" }, h("div", { key: '79a04631caf1348dfec36e8900d63fd401ee2a46', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'fd66547765550d7730f314adeeac9ec281de4c59', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'b26a696fc58ed62b8e0e5a7cc99441fe01d21772', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '623486729a3529d7581b9a3dfad1278ca27c17b1', size: 16, tabIndex: 0 }))))), h("div", { key: 'ed847fadaaf3391618e9f370c57213818ae4c5b5', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: 'b1aa7882aada2bbf3377c81d8b5f3eea6cc03287' }))), h("div", { key: '88b5a7557143b1ecd73b7bb92b4d49d45932dbff', class: "description-list-item__tools" }, h("slot", { key: '4f3b814d5bb973dec2cbc2fefe9315879b528bee', name: "tools" }))), h("div", { key: '3511d41246613379fd98a150ccd5c3ae7d1bc3ef', class: "description-list-item__additional-content" }, h("slot", { key: 'd3cd932efa2d4cf92194fc4b41b0b95cbad3983a', name: "additional-content" })))));
+        return (h(Host, { key: '7aeddd25b119a169b9cd2c29cdda495dedb87c38', role: "listitem" }, h("div", { key: 'a2b9205979a1179b3bd855d5c712f6dbf0e1e654', class: className, part: "description-list-item", role: "group" }, h("div", { key: 'bf7af656f9b33ec18e3af090d4446dbde9a3bc14', class: "description-list-item__inner" }, h("div", { key: 'b1633f9cf4ba4cedb98fc820f8c765da41c129e2', class: "description-list-item__text-container" }, h("div", { key: '90ac544fd97cdb777d180b6b144ca984db302b22', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'b25700db1e35b8e43cdf818f665ebec87c49fa32', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'd1fd31249175d208410a59780cac1e6deb341cce', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '43d0a6d32a31f29ac24af3b03fa069283677b347', size: 16, tabIndex: 0 }))))), h("div", { key: '740fa8b3bbe78dd2776217411b00a7e026d4a96d', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '47dfe3909e58ce08b17b09064f1c2265aafa0f56' }))), h("div", { key: 'b75cdd492a79b38163b63da4b307ddb6956f9df4', class: "description-list-item__tools" }, h("slot", { key: '681fff8c243276c1c4c8dd144a62e679e58065e2', name: "tools" }))), h("div", { key: 'e92d04c18d98a6464bb711a78448d60f8efcf470', class: "description-list-item__additional-content" }, h("slot", { key: '96c0c4b12fffa95a63bd3c042838983148306739', name: "additional-content" })))));
     }
     get el() { return this; }
     static get style() { return SwirlDescriptionListItemStyle0; }