npm - @getflip/swirl-components - Versions diffs - 0.198.0 → 0.200.0 - Mend

@getflip/swirl-components 0.198.0 → 0.200.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 (280) hide show

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -2,6 +2,7 @@
   "entries": [
     "components/swirl-heading/swirl-heading.js",
     "components/swirl-action-list-item/swirl-action-list-item.js",
+    "components/swirl-app-bar/swirl-app-bar.js",
     "components/swirl-app-layout/swirl-app-layout.js",
     "components/swirl-text-input/swirl-text-input.js",
     "components/swirl-autocomplete/swirl-autocomplete.js",
@@ -55,7 +56,6 @@
     "components/swirl-accordion-item/swirl-accordion-item.js",
     "components/swirl-action-list/swirl-action-list.js",
     "components/swirl-action-list-section/swirl-action-list-section.js",
-    "components/swirl-app-bar/swirl-app-bar.js",
     "components/swirl-app-icon/swirl-app-icon.js",
     "components/swirl-avatar-group/swirl-avatar-group.js",
     "components/swirl-carousel/swirl-carousel.js",

package/dist/collection/components/swirl-accordion/swirl-accordion.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: '8164310633ef979061ffa19a7b7559a93951b664' }, h("slot", { key: 'eac2e80e25b9300dfb9b5efacf53e97c11cd9779' })));
+        return (h(Host, { key: 'ad20b40fee8a6ecbcf5078bcc67da0738792ee59' }, h("slot", { key: 'b4def8c0c8fde90a8f5431c033aefb7bf6e15842' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.js CHANGED Viewed

@@ -58,7 +58,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '4d16bbdd80e7e7de2c9233fd0990d2056f1918e2' }, h("div", { key: '663b2d9fcbdfd816e42f20a27fdf21b15f5c8eaa', class: className }, h(HeadingTag, { key: 'b588fac98fc927b31088f55d1a4a42077c7c93d7', class: "accordion-item__heading" }, h("button", { key: '93a756f44cbab598814774adcfedaefd6bddf37c', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '88aa6b5112d6cece27b33b053b31a76fb48e1e3a', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'dfb03ef35815cb5de6a7982fb8faa2176d422158', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: 'b9b1ea22c4b43f531b5b1819220f0089797ad8a5', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '11d5a1e2bfaaf84d8c0ec7c4eb37a2ed69475acd', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'b6209a67579e3800e250dbb6cc85ae38edf97537', glyph: "expand-more", size: 20 }))))), h("div", { key: 'dedd47f75b8aa3eabe5170bcb10c1815bae0489b', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'af9c88e96816a003f3126bf76aead45c0d4dc9df' })))));
+        return (h(Host, { key: '006861d6031bc49ef4c68d5e5aee2eaba58e0cc6' }, h("div", { key: '47c5fe06e4da5aff6b675d1b4ad5d223a73e5b3b', class: className }, h(HeadingTag, { key: 'd396f75989f831eddd66510f67c9f5ca523a1e80', class: "accordion-item__heading" }, h("button", { key: '9bfdb9f316d3d64356091ff35086493c153ad9ae', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '0696232de801d6c5aedac6bb1a8714f9c1b9362d', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '21c86a4e3a8956917fc15ea4387e697be2408beb', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '50fa0cd1da17d126ecd26757bcda453302dd2182', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: 'a05d59697919662a816363c92da91940ece29cf9', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'e99c77b661c4b4efbd1bf56c69a97f2ff12787c5', glyph: "expand-more", size: 20 }))))), h("div", { key: 'f5e7bbdc5025f952de1fb09bf19c1dae72f53c8f', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '4f755a5f113d956df138f0a7803bb8274149c4cc' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class SwirlActionList {
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
     render() {
-        return (h(Host, { key: '43e99f67cf6932db44df3821525f66e847ea7560' }, h("div", { key: '936f925f573d52544a1728ffc7be61af50d55ea9', "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: 'a5f9f50b6f3947a8a868a02527759ccfed9bf91f' }))));
+        return (h(Host, { key: '36322caabed257ed68473c6a2faef239318b2ebf' }, h("div", { key: '9a3c533acdd8f9ba50366f3c85473a59b1d97b1f', "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: 'b969b7469999bcdbe84fa81bd92858c1bd24b1ad' }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SwirlActionListSection {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '11b03762c4dd5f0231ba8448a2b59d7cb40e492f' }, h("div", { key: '25bb16b68f4e6c499d1969dc436b122b8e604b87', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'e8d33697e0528c1b9fa24841d984285e3d9573aa', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: 'bb5e0c93bcdb79495eab8545ca1213b704cc2704', class: "action-list-section__items" }, h("slot", { key: '279562f8571a3e4579a8a455857c0b6749d027b7' })))));
+        return (h(Host, { key: '44a9deefaca9838b3fd25179d39e7b9d961d5910' }, h("div", { key: '3f19a2ea5d7593b8516de8a8657ac7138bd65385', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'bba5651dde645a819341872f7bdf918abf1a5fdb', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: 'c59c1f6060488ec7995c4b582d30484905a45397', class: "action-list-section__items" }, h("slot", { key: 'fb444405ab1b8beb208044b641fbf16887880ffe' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,6 +23,8 @@ export class SwirlAppBar {
         this.backButtonLabel = "Go back";
         this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>";
         this.closeButtonLabel = "Close";
+        this.paddingInlineEnd = "16";
+        this.paddingInlineStart = "16";
         this.stepUpButtonLabel = "Previous item";
         this.stepDownButtonLabel = "Next item";
         this.showBackButton = undefined;
@@ -52,7 +54,11 @@ export class SwirlAppBar {
             "app-bar--has-cta": this.hasCta,
             "app-bar--has-right-controls": hasRightControls,
         });
-        return (h(Host, { key: '6e388dda9ffef64afa31b8c8459eb57bf96f4fed' }, h("div", { key: '1df5d686a248760beb5c7def4e631f73857fdced', class: className }, showLeftControls && (h("div", { key: '1ffff6f9233a3667412a41c406ff64d635163e1c', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: '46bfd07993a16398388cb6a90229e1d3ef74de5c', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '825955e782cf0d5335070339a4dce4a3d828ef19', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: 'e6fa7c44810105ca709f37f3c2852708d2680264', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: 'b1d8dfcd982b8aa8b9ca5de0f48d39db34ff2cfe', class: "app-bar__stepper-controls" }, h("swirl-button", { key: '4c28d257da981b5e9f3957428b9015eb954bef7c', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'da3ce3294de7848b1283bd578c1cc44125774289', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: 'edb99f5558d6bb0424a2f25aedda9eea6218f66b', class: "app-bar__cta" }, h("slot", { key: 'b32c4cdc062cb44aa0492770344bb11565795b38', name: "cta" })), h("div", { key: '69b1c2d31a364938e64501037bbc97f7ca69c22e', class: "app-bar__heading" }, h("slot", { key: '022ddeaecfde7a4352e1a123098736a92cd34f3d', name: "heading" })), h("div", { key: 'ce88acc0923db756f6197e87b12561690d2f4919', class: "app-bar__center-controls" }, h("slot", { key: '885ff0edacef21993abb094a7b0920a1d77129ef', name: "center-controls" })), h("div", { key: 'e823a044960e274b15fab2a1c495bad4ec46c929', class: "app-bar__right-controls" }, h("slot", { key: '3fd346d6300e188983476ed930fff62ec5529093', name: "right-controls" })))));
+        const styles = {
+            paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
+            paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
+        };
+        return (h(Host, { key: 'e3c441ae152c5f32628341d93ab9c01267fdcd14' }, h("div", { key: 'f5d2d48ddb1a3226e0fb5ca4789ff59ddd866dec', class: className, style: styles }, showLeftControls && (h("div", { key: 'c9f3c6f1cab3c15d99f373ddc53ee6dce3e51a6a', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: '9ae0620bef35977af26de20b4fbe7725062ab0d0', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '05e57714c3649dbf722d74f135d0c5fb7591e16b', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '54d48e492a7cbc94e7784829ce4288e339e38526', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '65637f25c16f60d7b7028a8b985520688439a2a8', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'b46ca47a50c9ff3f938d0adc4e5145e1c4d7a6d5', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ce4bbb821ad76249caf680965853aefed6bbf041', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '75042cd5d3c9c5f82d1d8c2b5a1ba156890f83a0', class: "app-bar__cta" }, h("slot", { key: '195d9d91da4e64688b281f0a7c5cd8dfdd3f661d', name: "cta" })), h("div", { key: '92fdfb5748e8e1578205c97c13ff361fd3020fac', class: "app-bar__heading" }, h("slot", { key: 'c62711620a9b717c340bfac1a92f8eb639207fd0', name: "heading" })), h("div", { key: 'cd37b16d36b2115ca3c63adbae7635b5a412ba38', class: "app-bar__center-controls" }, h("slot", { key: '1b884ef50fdbf39da5bb738174defa6e17b93efa', name: "center-controls" })), h("div", { key: '9dc46b4fa36e8d34837c26aed63b4bb80c2c08fe', class: "app-bar__right-controls" }, h("slot", { key: '83aa64ac31b9a68f6777e8ad75a0c1ad262a815b', name: "right-controls" })))));
     }
     static get is() { return "swirl-app-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +128,54 @@ export class SwirlAppBar {
                 "reflect": false,
                 "defaultValue": "\"Close\""
             },
+            "paddingInlineEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlAppBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlAppBarPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-app-bar/swirl-app-bar.tsx",
+                            "id": "src/components/swirl-app-bar/swirl-app-bar.tsx::SwirlAppBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-inline-end",
+                "reflect": false,
+                "defaultValue": "\"16\""
+            },
+            "paddingInlineStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlAppBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlAppBarPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-app-bar/swirl-app-bar.tsx",
+                            "id": "src/components/swirl-app-bar/swirl-app-bar.tsx::SwirlAppBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-inline-start",
+                "reflect": false,
+                "defaultValue": "\"16\""
+            },
             "stepUpButtonLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -21,7 +21,7 @@ describe("swirl-app-bar", () => {
         expect(page.root).toEqualHtml(`
       <swirl-app-bar>
         <mock:shadow-root>
-          <div class="app-bar app-bar--has-cta app-bar--has-right-controls">
+          <div class="app-bar app-bar--has-cta app-bar--has-right-controls" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__cta">
               <slot name="cta"></slot>
             </div>
@@ -69,7 +69,7 @@ describe("swirl-app-bar", () => {
         expect(page.root).toEqualHtml(`
       <swirl-app-bar show-stepper-controls="true">
         <mock:shadow-root>
-          <div class="app-bar">
+          <div class="app-bar" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__left-controls">
               <div class="app-bar__stepper-controls">
                 <swirl-button hidelabel="" icon="<swirl-icon-arrow-upward></swirl-icon-arrow-upward>" label="Previous item"></swirl-button>
@@ -107,7 +107,7 @@ describe("swirl-app-bar", () => {
         expect(page.root).toEqualHtml(`
       <swirl-app-bar show-close-button="true">
         <mock:shadow-root>
-          <div class="app-bar">
+          <div class="app-bar" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__left-controls">
               <div class="app-bar__main-navigation-control">
                 <swirl-button hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close"></swirl-button>

package/dist/collection/components/swirl-app-layout/swirl-app-layout.js CHANGED Viewed

@@ -197,9 +197,9 @@ export class SwirlAppLayout {
             "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
             "app-layout--sidebar-closing": this.sidebarClosing,
         });
-        return (h(Host, { key: '6669b2c98406333feee455553fe0d5d03d3244b8' }, h("section", { key: '1ee92631037025987491babda4e78ea63d35377b', "aria-labelledby": "app-name", class: className }, h("div", { key: '63ae4a87fbe7e728c81183def7afdf108588f83e', class: "app-layout__grid" }, h("header", { key: '6182b13fd6f4031aa0581c286cc4b517d3c5f66d', class: "app-layout__header" }, h("span", { key: 'f4932b66237cbdcab317641027ef62428b98dfff', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '684aa1471fd24535b36e75408a45f41bc03345e1', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: '8f0d872fb075ef91f0f62a514dfe25a0124f252c', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '7f6025c9f07eecb118fc6939ee0b0b78c4aee6d7', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: 'd635de3c9562eac9b4bce1c70baa8b90ae277b69', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '87fc56959a7f02183166ad6b356c4ac06316ccbb', class: "app-layout__navigation-controls" }, h("slot", { key: '8b091346c443dfe4383ac1a2e1500fbd2379b9b3', name: "navigation-controls" })))), h("nav", { key: 'f204ad5f648228d9a47e1fb47eab5e5b69631f02', "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { key: '02c4eef4f8b62ab328a370045174c245402f662a', name: "navigation" })), h("section", { key: '37bc6fa312a75e60f0a6702e41de1f5036efb008', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: 'c43967cff5d5cb3283707b063b0cb8fb14dcfec4', class: "app-layout__app-bar" }, h("span", { key: '410c2ebe8d9e737706cc307af7447c3b8ea0d75d', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: 'd9a962e75a42b2d4f333d5f12a42e1ea1a12951b', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '4ed9a8d4868bc5ceaf311b132f8f325144fa707c', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '442aa8979bc5c95ce973d41bbe7c28f2a991d11d', hideLabel: true, icon: this.transitionStyle === "dialog"
+        return (h(Host, { key: '6d961491aca6930666b7d587789eb3bff6bf1e2d' }, h("section", { key: 'e34654e362f28c3a57aa4716a3a10a86909d9aa8', "aria-labelledby": "app-name", class: className }, h("div", { key: '3e6cc02c9c3701e195a8a92f97f2fa49be7a5325', class: "app-layout__grid" }, h("header", { key: '7b4b7743aa9225c591f05705f18d50bd3009bfff', class: "app-layout__header" }, h("span", { key: '18050ae2d54fd438da16a6df7a57ecd80fac35a6', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '2a4a8d6f30c2e5e02ab512ff2be09197ea61c68c', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: 'c461ab4bd9f6f116cd6c019c0e967633946f0a5c', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '94a59959334c405d871b9d89b7d72c25a644571c', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: 'f5fd24b0ad24656831b66da8c024df6d1f5c62a6', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '04a2d228a04980e946b2d764bf1783a7c75a8e2f', class: "app-layout__navigation-controls" }, h("slot", { key: '1850db373293226330e64f6c45cb6d2b1792b6fe', name: "navigation-controls" })))), h("nav", { key: 'f90677d445f076e80615a73265e1abf5fd206821', "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { key: '1342aa7f9766d8bc7f5ceff39ae14b407871ba5b', name: "navigation" })), h("section", { key: '54bbd47bd318cf77ccfeee3ca0176504928d6c62', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '6861a37fd4fbafcf4389f9df561abc1010fe94b8', class: "app-layout__app-bar" }, h("span", { key: 'e92f067fbf50cca7931213bc75cf195210d5cd29', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '37c85dcf2fa77c37ea3aef4537c313ac14eb9ad9', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'a647140e357d1099774c239dbdb0c486aeedc74e', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '86b0502d617c12fb7123ef81c46126cc5ea18fca', 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 }))), h("span", { key: 'e98e6c634278149c73b9b064e7364aaa25eb97fd', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: 'f06666455e54a7dfcfa9b94aa47fc24db9281675', name: "custom-app-bar-back-button" })), h("div", { key: 'c7f9906b22f61219203162cd3dceb21afb807ecf', class: "app-layout__app-bar-content" }, h("slot", { key: '1ec7cb2569a93ad414b57f2da951aa4036592d57', name: "app-bar" })), h("div", { key: 'f951fa2be8b2a92175a0bd5b007e2fe131b79c35', class: "app-layout__app-bar-controls" }, h("slot", { key: '95bc12dd1a1695d05d972de033979231752fa0eb', name: "app-bar-controls" })))), h("div", { key: '73f3e5b01666ad0b8744d557d8ac620296de069e', class: "app-layout__banner" }, h("slot", { key: '4b3041a0fd7f6e4e4457b0868832e33cc76852a4', name: "banner" })), h("div", { key: '7143b730f21f69330a2d35081ed9fe8553757879', class: "app-layout__content" }, h("slot", { key: '88922dd8cb925df0e8905954c7740969c09c74d2', name: "content" })), h("div", { key: 'd28078f915fd03d80031749d7c46f45a43405b7f', class: "app-layout__bottom-bar" }, h("slot", { key: '5290d8ed20d1528c11c7389c64b8c89e3d9220e3', name: "bottom-bar" }))), h("aside", { key: '4fa7b0476c3ce9f0644de3a3bb91de47e13e2333', class: "app-layout__sidebar" }, h("header", { key: '5cc37ad993a66e0c5b452656877b026daedf2a22', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '85e16e72ca427e58b477b999b33f6eb8309b050d', name: "custom-sidebar-header" })), h("header", { key: '99bd578231f336f0e518556fa431c87570b06db8', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '17b6c0dfc018646775b7f21647a4fc5d71e32991', 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: '6c94f955b7792ea20dbaea185697c976532b0880', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'd582f3a4988013796c0130e7e9de2ae376bdd88e', class: "app-layout__sidebar-content" }, h("slot", { key: '8a22cc1a9d2fc54d860407685b7f1f00d72fcc40', name: "sidebar" }))), h("span", { key: '41d05516195ef0b8a39d0307bdd63b3686fb18d9', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '020fed78f1d6741cdf85113a370851596f826f80', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '7e4f9fb98d67d7befddec8a62b66659ddd22d232', name: "floating-action-button" }))))));
+                : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { key: '0d1bef25d834457390cc3f1e8a16af30ee8ec411', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: 'ef609f9b32db88320c940927939b2bd3f87a28e5', name: "custom-app-bar-back-button" })), h("div", { key: 'd885bbea33f0c6b046e8cd574f61623e3b7cc225', class: "app-layout__app-bar-content" }, h("slot", { key: '70189b7672d8b70f490c3efdfde15d82c0b5c48c', name: "app-bar" })), h("div", { key: '23b3747628acc4fd2c61ee54de55253a3fc41203', class: "app-layout__app-bar-controls" }, h("slot", { key: '1bb20b112b186544833b10d3f67d48b002773bbc', name: "app-bar-controls" })))), h("div", { key: '33bad47951b64672f1f838b96d51e7e9f9d7c832', class: "app-layout__banner" }, h("slot", { key: 'e59682438a1d7aaec36e143c0c07d69a2205a24f', name: "banner" })), h("div", { key: '322eab095e9bf9d01f331adccdcd8953fcfa9fd0', class: "app-layout__content" }, h("slot", { key: '259690ee199cdc0ac3d037733b54544ea2b483ee', name: "content" })), h("div", { key: '7495427d0a523a22268c19c4ae56c977b4e295d0', class: "app-layout__bottom-bar" }, h("slot", { key: '50cc7202f5bbec17324ca23378617831d9fc199d', name: "bottom-bar" }))), h("aside", { key: '781981ef566aa8717d94331549272e7b9d2eeb6a', class: "app-layout__sidebar" }, h("header", { key: 'e6df1707394682f125448c1cf770600539bb1cfa', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '6e6187ae87c94d9c2a2e7e6f573a384dcea43125', name: "custom-sidebar-header" })), h("header", { key: '7d9a21343c070d3a9aeea9236852be1a2cb12e1e', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '6f4a53a16176d30139d497f4b510586f3bef2252', 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: '6b32dc32a6844cfd258d0148a949f06fa86a222b', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '64914275c88e1843af23ad087774d48092c70a36', class: "app-layout__sidebar-content" }, h("slot", { key: 'c6667fcf5d7702704752360854d9181d8ff35652', name: "sidebar" }))), h("span", { key: '7b8347d1a450aaed9c2e31ae1f308f46a760227b', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '62393818e2205700c6b090dee8783049f95c747c', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '32708bdfa2a5a36fbc7cd79bf0012bbf1928db68', name: "floating-action-button" }))))));
     }
     static get is() { return "swirl-app-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,17 +200,17 @@ export class SwirlAutocomplete {
         const className = classnames("autocomplete", {
             "autocomplete--inactive": !this.active,
         });
-        return (h(Host, { key: 'a6b1864a1d1022a24c22a1b37e9953a3c232c2bc' }, h("div", { key: '57be24dac5a4c174bf7941c07a05b3431487dec3', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
+        return (h(Host, { key: 'e523e43c9a3f188b280212d75eb7cda439efa16a' }, h("div", { key: 'bc223dea7f5ee6dcfcb7ff1fec7548f3e70ba02f', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
             Array.isArray(this.value) &&
-            this.value.length > 0 && (h("div", { key: '6b8b6268c1b208b7cc378ee4a22f05fd4b30df51', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: '0b82d5899891d8ba4d07fe012cc1a8c501fdf62c', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+            this.value.length > 0 && (h("div", { key: '3cf9889c1c2398778346eb598232095472ac03ce', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: '710997aa77b59d1d997de03b32a91e699a7403a4', 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: '929f9be8b336bdae9c31e9bc2e98936cf9a3ff86', 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: 'a53953db455c7f3515cf394390c2c0089ed7155f', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
+        })))), h("swirl-text-input", { key: '67c627131a343cd5eab355baa0ce3d6113672a72', 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: '1fa4b4c6e1c2116779b3e019f138ceae18143397', 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: '44ce277c6dc3571ae5fb22f31eb28dce7c54f0d7', class: "autocomplete__spinner" }, h("swirl-spinner", { key: '4fdbda089dd91a9aab0f1559d753a239fbfaeb9c' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: '7be30b1c4ba99ceda255c507be07917d19e965ef', 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: '25bf6f40fc87b6273e8a627aab03c9de2d1a3130', class: "autocomplete__spinner" }, h("swirl-spinner", { key: 'e4e2d6ad0fca0adeea6770d339fcc310fd522083' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: '7c155395c8eca3d516610ee58c76b4da3465c7a8', 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/collection/components/swirl-avatar/swirl-avatar.js CHANGED Viewed

@@ -102,7 +102,7 @@ export class SwirlAvatar {
         });
         const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
         const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-        return (h(Host, { key: '38e7fdc01d2cecd4d17a2fa040c61ffe1c8a8592', "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: 'd3b5aff230c79d4b77fb68d7ba8627c9f1f457db', class: className, part: "avatar" }, showImage && (h("span", { key: 'f849bd9c9fb03744706fd2359d32e97f96331bbd', class: "avatar__image" }, h("img", { key: 'af33045f4385a047dbba8eb5336f1608552bb947', 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: '6d1bad70e7a6afa0d74780fc730d18b196193924', class: "avatar__initials" }, h("span", { key: 'b65c566aa22a4a208511967969aad5b8d9665f79' }, this.initials))), showIcon && h("span", { key: 'bc0f43846240cb026d6762814e1d8d0719e10577', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '046588d4ddc12fca345e48c691691f6404d0fd29', class: "avatar__icon" }, h("swirl-icon-person", { key: '67d6eedba866483ed582a06a6e6e3292cf3970c0' }))), showBadge && (h("span", { key: '682c1ab0a83634fedf76a5188992a5a7a55d68d8', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '815f38e18f11e8938f1483fee33a7cd51dba23a4', class: toolClassName }, h("slot", { key: 'c83f80bd8a67386bf75c7d7182e22f87352be94d', name: "tool" }))), this.showLabel && (h("span", { key: 'e71fb04bfb8f8a9dca53a13eb510d2c037bd07ca', "aria-hidden": true, class: "avatar__label" }, this.label))));
+        return (h(Host, { key: '6e71cf7f05ca78c5d2dbc3180fce8bb0bee5e18c', "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '0d7b2870ae59e6628e96c38a18c747ef8ee09c54', class: className, part: "avatar" }, showImage && (h("span", { key: '8cf1235dfb9e3b30262f61f6aeef2d251db1fc08', class: "avatar__image" }, h("img", { key: '83eb8aa8d9c16116440e2a50c3a921109e96a812', 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: '4dffa0b362fbbc7413000f5fc5006d3566daf0c8', class: "avatar__initials" }, h("span", { key: 'b0e1479398b0f8ac0304fba2c38fdfa66e072fde' }, this.initials))), showIcon && h("span", { key: '13640b63ff186ca7fbe6d72eca77359cdb0eb4bb', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '1bba16d3de264381aff4009ae5d2dfee9eb5f638', class: "avatar__icon" }, h("swirl-icon-person", { key: '004689c1bcd3d51b9cf8f8fce93a6923f8f41f6a' }))), showBadge && (h("span", { key: 'b2f9cd9ee49a3bf77781473a94ca68848f6299a4', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '29c112792ac8effec07fffadbf2b6997af304cfe', class: toolClassName }, h("slot", { key: 'a8e2bb8f60e382e86a0cb969af91ffc7195e5204', name: "tool" }))), this.showLabel && (h("span", { key: '4daf80748cdb5a3bacf5405e5ff58fd21febb37d', "aria-hidden": true, class: "avatar__label" }, this.label))));
     }
     static get is() { return "swirl-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-badge/swirl-badge.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class SwirlBadge {
         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: '2a45ce5f53ccce7f5f9adfbb89b0ccb2eeb8f32b', role: "status" }, h("span", { key: '0867e1cb3bcb784ac62b398b507b0fdde199980a', class: className, part: "badge" }, this.icon && h("span", { key: '4925c5a12325a6b138efc8111bf4a84291ad808d', 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: '33f35cb8399a9a9af91d771dff6b640b577c3b69', role: "status" }, h("span", { key: '95465982eb5690342abae2235b57644afd8cdd4d', class: className, part: "badge" }, this.icon && h("span", { key: '8a775d6ceb801d34380e82450879108dab4fcb37', 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 is() { return "swirl-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-banner/swirl-banner.js CHANGED Viewed

@@ -53,7 +53,7 @@ export class SwirlBanner {
         const className = classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
-        return (h(Host, { key: '907969cc89868087c70da427ad854e339fb36b5b' }, h("div", { key: 'a59f652cc95d0bc1d54a2386776f66d8f9024631', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: 'e5ff90cda82b6391958b5a2abb5d41bbeefc84dd', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: 'fc2645f499ff1722a87d66ec5ffcf8df6699583d', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'dafd92c3180fa570063d9daa5eccea6ec95a33d0', class: "banner__text" }, this.content)), showControls && (h("div", { key: '027794d1f08c9724c83fdfc492f00a2292c4d32c', class: "banner__controls" }, this.actionLabel && (h("button", { key: 'bea6ee6c86124ea90a7a031b3e27c2fd2aa3209c', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: 'b9450a6f407698029b4ad6c9596f6a70266c824f', "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: 'e8c3bd11a64f88886a8849e05eaa14e3d01ca79d' }))))))));
+        return (h(Host, { key: '7d1d0fe808a0d56888901519a1d2c7d7a5953703' }, h("div", { key: '6f0482657ddd0b91ba5ca740db378e3fa5cad176', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '82bc8952ea7cc638a13eb8997492515280793e70', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: 'd2d6aa7d78d04fdb16a5d9d632fef49977400690', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '637f8d6f03aa8b9ed71798b60a2a8b6f68c96e6b', class: "banner__text" }, this.content)), showControls && (h("div", { key: '8c6ed8081c22c3f9121223ea2dc6bd3918f1babf', class: "banner__controls" }, this.actionLabel && (h("button", { key: 'afd0254e27d026a1f828ec203eed23a6934c8dbe', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '7842e8dc33cfc78226ade9d5b8d141809efbb9e7', "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: '44118f5b5f92f476440b3adb6d33b3c88ef3b5a8' }))))))));
     }
     static get is() { return "swirl-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-box/swirl-box.js CHANGED Viewed

@@ -80,7 +80,7 @@ export class SwirlBox {
             "box--bordered-inline-start": this.borderedInlineStart,
             "box--cover": this.cover,
         });
-        return (h(Host, { key: '5036d24e9dabdf3d88144d74dc39ee57f8352062', class: className, style: styles }, h("slot", { key: '3d329ed23fdb6e82854c03894410c27f9de6f668' })));
+        return (h(Host, { key: '027b397f10e1f70fb7a0df7f63299949fe4ab7be', class: className, style: styles }, h("slot", { key: '57de1c7c3d70479fdc46e281475e4eed08d8a412' })));
     }
     static get is() { return "swirl-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class SwirlButton {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: 'ae93bfc51d8a1a45e982a1a64ea26953a4ac3315', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'aab4311c3b7031e209546880fb5d86dd5d2cbfda', "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 }, Boolean(this.icon) && (h("span", { key: 'd3d0797df3044b4c9044a77978531b89dd5109c5', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'ced043185f9922cd7ea93e95b1a5dbbb857be804', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'd062178e7e317848025c0ff6391a9eb0641280ab', name: "icon" }))), !hideLabel && h("span", { key: 'c6b641ef7ad985a2f0aeeea05fdc8818155e43a4', class: "button__label" }, this.label))));
+        return (h(Host, { key: '3080eccf4241cc3696536782d66e444e755ebe8d', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'e1678ccf0a907f6e124ffd90382d8436ece74b4d', "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 }, Boolean(this.icon) && (h("span", { key: 'a6bc374b9d89f2e8690c33ae24d811559b9813c7', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '907936643a16569d8ad7e0cb9c2293a44c8acf3e', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '258f476318ac7456fcca53a16ab1742b90bfdd7a', name: "icon" }))), !hideLabel && h("span", { key: '9f5a81854f0f3c05a70b10e0698aca6cfdc8d742', class: "button__label" }, this.label))));
     }
     static get is() { return "swirl-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-button-group/swirl-button-group.js CHANGED Viewed

@@ -12,11 +12,11 @@ export class SwirlButtonGroup {
         const className = classnames("button-group", {
             "button-group--segmented": this.segmented,
         });
-        return (h(Host, { key: '681f8a5713e3df77d224a8a67f8d0faf9324a8b5' }, h("swirl-stack", { key: '23f4129e4aae721d7253864faad544e3e4a4f41e', align: this.orientation === "vertical" && this.stretch
+        return (h(Host, { key: '9687c6322ffcef953cfbe5e06e4a6f8adf480833' }, h("swirl-stack", { key: 'ee585a4758153b42d0f146e0e7e96f2af5248be3', 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: '95ed9769652cb763410f69cc181291cbc79ab677' }))));
+                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: '978949b595ba449fe7b815b37e4526c2525f2bda' }))));
     }
     static get is() { return "swirl-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,9 +79,9 @@ export class SwirlCard {
             "card--interactive": this.interactive || this.href,
             "card--is--borderless": this.isBorderless,
         });
-        return (h(Host, { key: '7e813203295a4404476560ceb2fd9be0f65baab1', styles: { height: this.height } }, h(Tag, { key: '0e5ff6445bd88fbd0f036381f2ba263d39bd4b6f', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
+        return (h(Host, { key: 'f8cecba3a843c247f876ed7b3cf56c8bbfeaa430', styles: { height: this.height } }, h(Tag, { key: '85afe38f7753ea8ea9250abaee724a7f8d9108e6', "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: '46dddf46a39268eb0880f818cf75ad5d9c3dfbe4', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '387c7d9561b756c33723808d438a54ffe1132daf', name: "image" })), h("div", { key: 'd3125429757d21b599e2ade0d1577cb20dcd0743', class: "card__body", style: bodyStyles }, h("div", { key: 'd83ae81a23eaf7156e82f11de409272f8d112b3e', class: "card__content" }, h("slot", { key: '2e56f7bca41409d568358c61763b0264cb966f5b', name: "content" }))))));
+                : undefined, style: styles, target: this.linkTarget }, h("div", { key: 'b2928caa364fdfc8d038fb1011235b4314ec8a33', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: 'dfb6bacb00d851486db725151eb3a2d514492b72', name: "image" })), h("div", { key: '851a63e084daa1909fc030efd188d7c1251eea9f', class: "card__body", style: bodyStyles }, h("div", { key: '037c36a2f07355f42b2b95d2c2a9d9807fe02bd8', class: "card__content" }, h("slot", { key: '73a31f76e6d4af56cd2a925844f64c2d1167b1ad', name: "content" }))))));
     }
     static get is() { return "swirl-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class SwirlCheckbox {
             "checkbox--invalid": this.invalid,
             "checkbox--unchecked": unchecked,
         });
-        return (h(Host, { key: '9ce7a673ef9a88e4270cdc12803d534f2c6f021f', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: 'b36ecd889e3f0f1614c2bd87cfb78f64bd34b0f7', class: className, htmlFor: this.inputId }, h("span", { key: '7f86ad08873b47a92d25a327690a146673a179a9', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '34eb49b1daccd4a5ba281e8f3c7fae5bfd3d9eec' }, h("input", { key: '086e780b0cf9cd614fd2f346e42086afd63813a5', "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: 'c6e6f3b03b6d86c44b2722cf304843c95e35d133', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: '5acf25a349bd02b339fa82e56c31dff8baed3e9b', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: 'ed41399b1d02bf3a9979fc50372ae1b16e9917d3' }), indeterminate && (h("span", { key: '94d04c4b59ad6a9ebdf59dfd00a7cf1be3193944', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '280d603bb3628dcfe810957af5346f61b5589019', class: "checkbox__label-container" }, this.label && h("span", { key: 'b7c8d8baa6210b81765c9ead697423262fc8b07a', class: "checkbox__label" }, this.label), this.description && (h("span", { key: '4aa4382779e0a3f6661051903f989055deeb85d6', class: "checkbox__description" }, this.description)))))));
+        return (h(Host, { key: 'cc5e788a984c8a5162b3d41f8984623ea0b2ede5', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '6c755f03de94374b926845de8d23c2ffe88c0010', class: className, htmlFor: this.inputId }, h("span", { key: '767be761f571ab2860d4aaece65cea955884fe6b', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '03c17d3c4238b3cf12f5eaffea54ffcc06a5a41a' }, h("input", { key: '57f89f01c0e59bcd36c9cbf1445d75b66e5d06de', "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: '22c96b4bf96cd453892ccf9efd970e20d32f57d7', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: '09bcb150c233170cf5fdb0e0a112b70ae64f2b94', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: 'e14bd37c5a397a711a52855d58f8abc3b2b65810' }), indeterminate && (h("span", { key: '7873bc0ec60a7d7cf6cc465ac77b544851b44a14', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '667dfd4e4907c9966513064f04f4734a9cb964f5', class: "checkbox__label-container" }, this.label && h("span", { key: '0141f0b56214c9d1fc73f08cdd287572ff1f4529', class: "checkbox__label" }, this.label), this.description && (h("span", { key: '5d9fc09abccc81d2e6402b42c659380e75f72288', class: "checkbox__description" }, this.description)))))));
     }
     static get is() { return "swirl-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -49,7 +49,7 @@ export class SwirlChip {
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: 'e1aa3d6e5abc5b8652930e204fd2f21350e750c7' }, h(Tag, { key: '2a0ff52f994baa202f73b92e6cf372a03b71e3b4', class: className, type: this.interactive ? "button" : undefined, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined }, h("span", { key: 'a00655b888efce52d8651589b038b9b6ee790ce9', class: "chip__inner" }, showAvatar && (h("span", { key: '72a8708c65be771c72030fd12e3abd277221d0c2', class: "chip__avatar" }, h("slot", { key: 'bf7e00062f31a444d6d179da258ea9c1cce52822', name: "avatar" }))), showIcon && (h("span", { key: 'e814c8aa13d7f2b9485046ef33a9648f6b9c2167', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '3c73c90ff4d494ae6df80eed949d435cc7aff829', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '2747a1413733286a482b470dfa938003509414eb', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'e01822a19fbb2d65181207f35270f7448f0f3d7f', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'c4d588616125ac9d1cb7eb3a9fd3fa643265f20f', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit }, h("swirl-icon-close", { key: '10e6bb7a44465b160fd3d6e95e06144f3c455515', size: 20 })))));
+        return (h(Host, { key: '6ce267d94331ffa5cd45590f776819ca81f0269f' }, h(Tag, { key: '9d20a1ac9558e920e7924b86178920ec91b6b77d', class: className, type: this.interactive ? "button" : undefined, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined }, h("span", { key: '67ed858d088ff500b553db57276e99e94ba660c3', class: "chip__inner" }, showAvatar && (h("span", { key: '87e5bc08fc83e55f7d63dd3a38a18def3bfc0470', class: "chip__avatar" }, h("slot", { key: '3c7a52dcc434476313c61b43603ff3188758618d', name: "avatar" }))), showIcon && (h("span", { key: '16edc3a3da88e0e43eb81c7c8228e873e63e61df', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '951fc836655f2ba5046c2a9c8a56954087378fc3', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: 'bcda4f0a728956f5e18c642c316002c31e240443', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '6aed56a2fa7702b583203768f5b734db1b215f4b', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'b762ed266095ef2bc96ba3fee9e689f4e6865479', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit }, h("swirl-icon-close", { key: 'ba7b0ccef7688fe8f385f422b8a8418249abf46d', size: 20 })))));
     }
     static get is() { return "swirl-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,10 +5,10 @@ export class SwirlColumns {
         this.spacing = undefined;
     }
     render() {
-        return (h(Host, { key: 'a4a09d1bf9d6ffe04d31a4c472f42b22242e078c' }, h("div", { key: '78bd1eca4903375d2f0d21006baaf4763fde5376', class: "columns", style: {
+        return (h(Host, { key: 'be4c273a9e25e8b0c32d7e90de79e60fed795141' }, h("div", { key: '5b834a7d9a058f0c2177648bc7320cd22b407a38', class: "columns", style: {
                 gridTemplateColumns: this.columns,
                 gap: `var(--s-space-${this.spacing})`,
-            } }, h("slot", { key: '632c8a4105f12ac1446850d4fa83be1a25a81b85' }))));
+            } }, h("slot", { key: '56c43acdf48ce8184e7b75ccc3ad0016bd2e285d' }))));
     }
     static get is() { return "swirl-columns"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-dialog/swirl-dialog.js CHANGED Viewed

@@ -64,7 +64,7 @@ export class SwirlDialog {
     }
     render() {
         const className = classnames("dialog", { "dialog--closing": this.closing });
-        return (h(Host, { key: '8a02d0120254ac06ca0d61954c7084885da8ef38' }, h("div", { key: '5d92e664a780066b032a899eff8ee5eff2eee4a1', "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { key: 'c56a52b5cde29fe67080cfdcb3164635dcc79a65', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: '5ae0056d710553a031f257f6d6692766d4cf694c', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '5350d77dfe9461b9f7f8d94b93ae1951513dd483', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'a80c39327232878f05dd91a83a09ef444b91e12f', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '7970cb5f9cb056662c51ebc7e3bc84d4ef2a1228' })), h("div", { key: 'df1eb8b0a54beb35444b33a2ae72a6219555f2b4', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { key: 'ed47dc58102d7733da823ca5137519f933e972d9', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'edcb2c1f3d2640a4e9db3b8afe7ae5e3410975ce', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        return (h(Host, { key: '26954b78d9f2c39ea321e81285ffbed08b2d3773' }, h("div", { key: '7ce0e80ecafe7fc289c7549f430cff2b4491c7bc', "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { key: '4fcd019a45dacb18bf096743956176fbab60eacd', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f007c3fdb86297861dc7d4b22d1fce80cf21afd8', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'cfa055452fba83877207e1b8ee95cec9c3b82442', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '8c4bf02726a2a6d2c13d994649a81919cbba0e81', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '1558c8b2ecec2557d332c5ef7da1532943cfbf0c' })), h("div", { key: '48117a3902352da99f7801b062fed46eb7a6a6dc', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { key: '15fdebe09fdda48ecb39b52ba28cf1dfa0e0e322', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '8abd9032c4f11d2cc47e5ce5f204092828523917', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     static get is() { return "swirl-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js CHANGED Viewed

@@ -326,7 +326,7 @@ export class SwirlFileViewerPdf {
             : this.visiblePages[0];
         const showSpinner = this.loading;
         const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
-        return (h(Host, { key: '7cd381303edb62915bbde5549409bcf467bc1bac', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: 'f65efc22521c5dcae52686b3c1518865715b5d27', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: 'd516ee5c9d52f0e1172c83ac4cd28604aac4d4b0', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
+        return (h(Host, { key: '2d3e38cad8cea628df0e1155eb15445f56f99803', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '3008938faf485009c65dbac73b1534689e2a17e1', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: 'bfddf8fb94651405dab2b2c61f084e18b3e87902', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
             const viewport = page.getViewport({
                 scale: this.getScale(page),
             });
@@ -340,7 +340,7 @@ export class SwirlFileViewerPdf {
                     width: `${width}px`,
                     height: `${height}px`,
                 }, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" })));
-        })), showPagination && (h("span", { key: 'be800deec536186ccfccf6083a97c48054d0306b', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: 'ef996fa512c39cec9d98ce5fcbead15975e41cbc', "aria-current": "page" }, currentPage), " / ", this.doc.numPages)), showSpinner && (h("div", { key: 'a61a815702069b0b948bf3a2d07cc71cffe0b858', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'cb0fad578849aab272755ad9e0e455e22972ba81' })))));
+        })), showPagination && (h("span", { key: 'de4487f27fb7041473671caacd173d71f895b9c7', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '77874267a29e093d7f5f9ba4c3d0895e7c470713', "aria-current": "page" }, currentPage), " / ", this.doc.numPages)), showSpinner && (h("div", { key: '85fe73564deeb070ec42bf900636ca45f8399bd3', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'db5b9dee45c00ae4cbdac03640a3fec36fd36cc3' })))));
     }
     static get is() { return "swirl-file-viewer-pdf"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-form-control/swirl-form-control.js CHANGED Viewed

@@ -153,7 +153,7 @@ export class SwirlFormControl {
             "form-control--is-select": isSelect,
         });
         const LabelTag = hasContenteditableControl ? "div" : "label";
-        return (h(Host, { key: '6a5eef1a043c1a2254a2a16a7d98a70050ca26f9', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'c425f948fed90a0d20f76611a2fe567417565cba', class: className, role: "group" }, h("span", { key: '52f37ba370cb5da2d36b634495c0233eef484ea3', class: "form-control__controls" }, h("span", { key: '5176625a2e376e7cbae7f52aee4b65219e025a7f', class: "form-control__prefix" }, h("slot", { key: 'df8f2ef8aaf97c8872490146d04b59c5bec4ace8', name: "prefix" })), h(LabelTag, { key: 'f6d98695aa7af19ccc44842294f00f06efd905a2', class: "form-control__label", onClick: this.onLabelClick }, h("span", { key: '056780f15f1e6629a49893cd5ac55ee361d6b219', class: "form-control__label-text", id: this.labelId }, this.label, this.tooltip && this.labelPosition === "outside" && (h("span", { key: 'c95c4d95402ce6906e4aca631c06fa81d633562d', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '03ef8743b3432c19d733c48c3080564e165b2c34', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: '3ca927d8c68c491e895dc5feed39084754aef1e8', size: 16, tabindex: "0" }))))), h("span", { key: '35dc2f54fbaea91448022dc7aeae34706a4b97ce', class: "form-control__input" }, h("slot", { key: 'ceea7db800d9371484e1cad05fc27b6a5c53d741' })))), showDescription && (h("span", { key: '1bdc0b15f135eb9bcff9d0e2dd57cc812d8f8ee5', class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { key: '1fe5daeae0df8d63317447e562136e8fef72d578', "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '3db40b652f9741a660334fcae25bf35199a36e09', message: this.errorMessage, size: "s" }))))));
+        return (h(Host, { key: 'af46148f774d3bb04d4e808a66686ba12ddd580b', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'e282305055b190bd2eb36569c02eabf598dae3d5', class: className, role: "group" }, h("span", { key: 'a2bd20175356fd1c17fb8f09a56e61d35bf518e2', class: "form-control__controls" }, h("span", { key: '02ca095153f5f5d011ee7ea297ce66b919aaf616', class: "form-control__prefix" }, h("slot", { key: '898844a7fad51a09e9dbe73607ac002ca4d159ed', name: "prefix" })), h(LabelTag, { key: '058102fa4f4882bf0a78a6c224317867219385ce', class: "form-control__label", onClick: this.onLabelClick }, h("span", { key: '549eb4345a5fc0409feddebdf5318d5e5cdeda9f', class: "form-control__label-text", id: this.labelId }, this.label, this.tooltip && this.labelPosition === "outside" && (h("span", { key: '19c30c9165b5a82c4b6a0000e7ff543642fad032', class: "form-control__tooltip" }, h("swirl-tooltip", { key: 'd99a4469954fa2f165c42b55b9c5ae3e120b7c55', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: 'b109a8bdaa64e6cd53f9387bfcf4674921190ef6', size: 16, tabindex: "0" }))))), h("span", { key: 'd2a0d027f17680993de98b67b79ff15ece1a65d9', class: "form-control__input" }, h("slot", { key: '3a9ed204addcc57f3bdbc357e4ae31566d0e4cd4' })))), showDescription && (h("span", { key: 'acb6aac692734078452087dd8ae06c43adbf77be', class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { key: '6adadee57e6c4a3a42f513810ed2f344fb4f8bbb', "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '238c1ad310cc4ef4dd91117e6a86ffa33248c919', message: this.errorMessage, size: "s" }))))));
     }
     static get is() { return "swirl-form-control"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-form-group/swirl-form-group.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class SwirlFormGroup {
     }
     render() {
         const className = classnames("form-group", `form-group--orientation-${this.orientation}`);
-        return (h(Host, { key: '661023d74fb1af61b53e11e86a385d7a973ec9d5' }, h("div", { key: 'd1b8bf55d09e3ea7b5ae78799fc6cf41985407a8', class: className }, h("slot", { key: 'fc48ad0fb89c0ccd9dce2bab0aabf2958f53d257' }))));
+        return (h(Host, { key: '2e0236314e66e90b245065f56fa7a41c9290367d' }, h("div", { key: 'eb0d4cb779f7cf7eb92911af1dd28aa67b5182df', class: className }, h("slot", { key: '82e80790c2b56adb31bd06286f98d1b7e5416205' }))));
     }
     static get is() { return "swirl-form-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,7 +7,7 @@ export class SwirlIcon {
     }
     render() {
         const Tag = `swirl-icon-${this.glyph}`;
-        return (h(Host, { key: 'd8cc83c5f247888714f245fd73dc4254afe2b4c7' }, h(Tag, { key: '0d3dedb746e55fcc3156db832e0a0b733190ee26', color: this.color, size: this.size })));
+        return (h(Host, { key: '513d3eda3fc6ae104a894d6b8899fb5cf2cb6533' }, h(Tag, { key: 'f257e7c91e842275f82da470dbbd5e5f567b7ac0', color: this.color, size: this.size })));
     }
     static get is() { return "swirl-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js CHANGED Viewed

@@ -57,14 +57,14 @@ export class SwirlImageGridItem {
             "image-grid-item--has-error": this.error,
             "image-grid-item--has-overlay": this.overlay,
         });
-        return (h(Host, { key: 'c4968c202407e41281be8902071ad14a4747eeb4', role: "listitem" }, h(Tag, { key: '6ec6b4ef6c419ab73b5d42a46c8b5a1886326702', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '53d6fe626407eb5c05dbee78fd5f6728564ddbfd', class: "image-grid-item__background", style: {
+        return (h(Host, { key: '31248910e8c9b74c256eab3fda1baaf653c3344c', role: "listitem" }, h(Tag, { key: '74ac2ddd0f449ecd5f061dfff852b19026bc482f', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '4ebaf2e35d4ab5779600b88f967f23b5e6de7e67', class: "image-grid-item__background", style: {
                 backgroundImage: showBlurredBackground
                     ? `url(${this.src})`
                     : undefined,
             } }), this.loading !== "intersecting" || this.inViewport ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.src })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.loaded &&
             !this.error &&
             this.icon &&
-            !Boolean(this.overlay) && (h("div", { key: '3e3abef93d37e12bdc89f7842d1cf3eb90813940', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '41698eeb8b5fe9bc0c629744c74181f3410dbf05', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: 'c4865fa55230e676226d53f1b108ace9debdc821', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: 'e105f334c824af4cbbcd98b331668fb3cc4f2f04' }))), this.loaded && this.error && (h("div", { key: 'b132f19cc9ced0546258bc906baffbd40d6a63b6', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '22dee643b064947da11c2cd6ee8af6b513b75a58', color: "critical" }))))));
+            !Boolean(this.overlay) && (h("div", { key: 'b11a327a30e92ccce354176f35031e00af05b92e', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: 'e384b6006a277cb0e55c15d7547709e5e8de6694', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: '9d081ed42cb5fbed8eed67f91032285572cf1e1a', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '407c9627c45aff862bab130566301fbd662d0b7f' }))), this.loaded && this.error && (h("div", { key: '2258d9b2c00058dc851afe0ed7a509ddd298467d', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '15b48376686ef20e2629a06a9e05d8b5ea563602', color: "critical" }))))));
     }
     static get is() { return "swirl-image-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-inline-error/swirl-inline-error.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class SwirlInlineError {
     }
     render() {
         const className = classnames("inline-error", `inline-error--size-${this.size}`);
-        return (h(Host, { key: '9baedcf168d58e606f6712ad085bfeb873ff671c' }, h("span", { key: '7bbd2b6c4cdca638e3932646930df444d148af9a', class: className, part: "inline-error" }, h("span", { key: '436e25c857a51d36daed5d075ef3e46d915b14f1', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: 'ff0bb61fb5b9925039afe936eb2fa471fcc0917c' })), h("span", { key: '55662dcae8e70c70096202754c5fd7e38594dea7', class: "inline-error__message" }, this.message))));
+        return (h(Host, { key: '804d9512c703121f135c621ffe3f75f40f47526d' }, h("span", { key: '7b2fd3af5fa2c6140a3931c1c8df6ce891c3ab26', class: className, part: "inline-error" }, h("span", { key: '7a398c0cf6cc4008fa14e4332abcd1413048d42e', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: '0ed735a3b2d4c7490b1f92f80590019e2850d93e' })), h("span", { key: 'c7f52688925bdb9fade0b461319233b9a94d7419', class: "inline-error__message" }, this.message))));
     }
     static get is() { return "swirl-inline-error"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-inline-notification/swirl-inline-notification.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class SwirlInlineNotification {
     }
     render() {
         const className = classnames("inline-notification", `inline-notification--intent-${this.intent}`);
-        return (h(Host, { key: '8408d68742840129a9f0901554c773b30298ea02' }, h("div", { key: '1497c00610e0bf230c285a636d54534b4b5c23da', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("span", { key: '28e0ab5da0ffbf99aea9b1f02c2c33cfb4c86d22', "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && (h("swirl-icon-error", { key: 'd510a098fed2f16962588651a033e20f148c8de3', size: 20 })), this.intent === "success" && (h("swirl-icon-check-circle", { key: '60537b0b01f875f143cc500ac7dc0ff60b89a8c9', size: 20 })), this.intent === "warning" && (h("swirl-icon-warning", { key: 'b87aeedd18d5af51d0beda5f90c3b0a359bb6ea2', size: 20 })), this.intent === "info" && (h("swirl-icon-info", { key: '209d8046fb59ae486eef4aca49079a1cff6cedc5', size: 20 }))), h("span", { key: '13cae5bc2f3e77ab96c0293dbc735e28a7b59e7c', class: "inline-notification__content", id: "content" }, h("swirl-text", { key: 'b9b67394360aef93e226e13c2255b0e2aa444cc9', class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), h("slot", { key: 'd9e0a5d1ae5b8220e347a6a5cfbeacd1f525ac9d' })))));
+        return (h(Host, { key: '8e21f90f77594f0cc4a64e6cff99bdb35166ea70' }, h("div", { key: '43b8b7ee49f36a748859127f56ff0eca5d4f97de', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("span", { key: '81bcced39e396d677b14f22620f4a283202eb983', "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && (h("swirl-icon-error", { key: '8f1dea1971ae34e70dc6841efa991dd5688360c3', size: 20 })), this.intent === "success" && (h("swirl-icon-check-circle", { key: '8d48709d600fd93a415a31dbfd386cfc659f0d11', size: 20 })), this.intent === "warning" && (h("swirl-icon-warning", { key: 'faa4b3951d5d83264679b1acc7ba6e9e8ca9f872', size: 20 })), this.intent === "info" && (h("swirl-icon-info", { key: '5fe76a76f0c8c0e809d9e184115665c71824ca31', size: 20 }))), h("span", { key: 'f318fc8979d7d132455b05cb2b881308e708f3b2', class: "inline-notification__content", id: "content" }, h("swirl-text", { key: '2fc1a5088e28ec8e1d2c08a215a319abb8d71672', class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), h("slot", { key: '7ee8b88b3d040a295b13ac2065a0335e2a83768a' })))));
     }
     static get is() { return "swirl-inline-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-inline-status/swirl-inline-status.js CHANGED Viewed

@@ -39,7 +39,7 @@ export class SwirlInlineStatus {
     }
     render() {
         const className = classnames("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
-        return (h(Host, { key: '6f9f83b9aa29d7c0e3a11e0c09d41f0e9818813a' }, h("span", { key: 'ff5d3efb20f984f9e480de13ad6b865b06dac9c3', class: className, part: "inline-status" }, this.icon && (h("span", { key: '911613a1ee3af2907c904f4106924dd5709bdb63', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '8d6d3bf96d3d8556ef6b99bbca3c895a80865c6e', class: "inline-status__message" }, this.message))));
+        return (h(Host, { key: 'ccfd99f89e7005d6b03dcc1c8cd7cc7d8fd3e108' }, h("span", { key: '625ab5faff22280fe67340b3ffc1f90feaf237ac', class: className, part: "inline-status" }, this.icon && (h("span", { key: 'c9bdbc0d33f14b656a2bfc92de564a202cfccadf', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '1d3339349bf63d7f307be152d840c266da42b492', class: "inline-status__message" }, this.message))));
     }
     static get is() { return "swirl-inline-status"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-link/swirl-link.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class SwirlLink {
     }
     render() {
         const className = classnames("link", `link--color-${this.color}`);
-        return (h(Host, { key: 'a0f7b490b9a2dac91fa0786774a227cc0b8b150f' }, h("a", { key: '6a5798ccfc5fc02dd0bcfe5e1eb9dea2a791b425', class: className, href: this.href, part: "link", target: this.target }, this.label)));
+        return (h(Host, { key: '8bc85c462cefcd4b542d2b59494a1f95e70ffde0' }, h("a", { key: '21d84579f9ec88e09d766e7cd7038f27e92deaca', class: className, href: this.href, part: "link", target: this.target }, this.label)));
     }
     static get is() { return "swirl-link"; }
     static get encapsulation() { return "shadow"; }