npm - @getflip/swirl-components - Versions diffs - 0.296.2 → 0.298.0 - Mend

@getflip/swirl-components 0.296.2 → 0.298.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 (1751) hide show

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

@@ -36,7 +36,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'a127e248e3fceab33f9b5cd71726e589884f8c08' }, h("slot", { key: '6186c8608fe321f2d7ccbe412d03aebf0c67b366' })));
+        return (h(Host, { key: 'd79f39615c4a806c565258eb9875d1272a90fb02' }, h("slot", { key: '18be93ceeeb76245dcf92061ac969a7b49bd37ff' })));
     }
     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: '9912336775c2532382821b2209a1b48a65e6e865' }, h("div", { key: 'ca62514d43014590acf4521c0f751b8c5d2183d1', class: className }, h(HeadingTag, { key: 'bd5b6f13cf2740ebc5d1f9fb59d24f61467812ba', class: "accordion-item__heading" }, h("button", { key: '1bbd759b89d5cedf399cc20d3e24511330ccbe20', "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: '826e0bfabe1fbdf988555d90e6da0afb6ebb4e3f', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '8e218b1786d3261625a9bac0f90a0aef15f2b5a2', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: 'ea9fe7c19affc28d1dcea431e33ae72763d0b767', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '2adc3f65e44c9ab9b70dcfeeea9568d91a4cc52b', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '2031e4e7b9b08a428eb4f406287dabef4d85889f', glyph: "expand-more", size: 20 }))))), h("div", { key: '6086716993b5702405478f45e7259bc8d52ee6f9', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '75efb121a31901fefb57f72830e3123d526273b6' })))));
+        return (h(Host, { key: '027eca8e100997e077b0768d158dd4f0199c3033' }, h("div", { key: 'e2afc1887d9b70646a8a1b8b0e382af2d3aa5ccd', class: className }, h(HeadingTag, { key: 'efc5b14c99373524b68672fa8fd268de2afe0fba', class: "accordion-item__heading" }, h("button", { key: '1e21c2b4d8d3612cdddd3c2c4f3bdaccab6e394b', "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: 'fcd513558a99a04636114c7677f4bd5c7c2d0f91', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'fc6eea82d94fd6656d106d7f2ebe5089eae63628', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '150db63ec08beb59d0daee7d3c09b6d85b7428d7', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '9f99cde2bf92897c754a20328e534f70c999c683', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '3ff127641a8494ccf728b52be3dcc2fdf6949a7f', glyph: "expand-more", size: 20 }))))), h("div", { key: '9e2431b5f68d49b734586e1d261a97d9092ea3f4', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '5ba670d8e1484bae528f51ede23f21350c113d17' })))));
     }
     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

@@ -90,7 +90,7 @@ export class SwirlActionList {
         });
     }
     render() {
-        return (h(Host, { key: '37339869bab4a9aa81791f84d38451de0104d168' }, h("div", { key: '21d32faabb06850785a904a275da30862f98ca13', "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: '872037b1cca2d5a76f5a63353d8489d5e329611a', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: 'cb793b95fbadce7885f9ffd2df7a86e1d11ba687' }, h("div", { key: '7c2d0453c968ffb4280db7c1f15849795a19f9f5', "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: 'afc7aa5790d37dc0e660aae4289c91745d849d1c', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class SwirlActionListItem {
     }
     componentDidLoad() {
         this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
     }
     componentDidRender() {
         this.forceIconProps(this.desktopMediaQuery.matches);
@@ -50,7 +50,7 @@ export class SwirlActionListItem {
         const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
         const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
         const className = classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-        return (h(Host, { key: '7b4f52c16da4f4f5c2c9a51856c9aae7e9c04f23' }, h("button", { key: 'a74a9c60edc2a183c04f93e9030554c551ceba67', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, h("slot", { key: '9bb61a72d80c55a35e0dc3c809d8bebb7ff30437', name: "avatar" }), this.icon && (h("span", { key: 'ba49170992a1dc9e6d8b68e64af781273bf4b7e8', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '3284724f84d3d6e018f244cde0a7ddc233f7459d', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: '2084ba440fee7881921d10781ab0100c8aef26d6', class: "action-list-item__label-container" }, h("span", { key: '81d4f0652172c6e468b7a6d5c2381d05905d5e22', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: 'f09d273290bfc00630c592ed45013b565845eb5a', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: '06cfa9c3a1af2b53a472b472529267549b4926de', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '7ab7dd54bb3f1e2c9cac00dbf98775e18f66ab98', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: 'f2bd1ae7bf49c5e22757dbdb23fada915ab13e2a', name: "suffix" }))))));
+        return (h(Host, { key: 'cf72c77a7238b89ac5737fbd26a4f9c5fb8d2aaf' }, h("button", { key: 'b883df9fba48c6f1e3fa18cb2acbddcb1c4f7903', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, h("slot", { key: '2903ffa6a0b97a9d1f30a3ab485a5f4625016893', name: "avatar" }), this.icon && (h("span", { key: '687e8b468e26a239a45829f5448e3f4fae991a18', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'db6fa0aa9ee28b495febd9278f464add1d195295', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: 'd64137da6c8345faf3fb14f6963b267e2bc83f91', class: "action-list-item__label-container" }, h("span", { key: 'a7e623ccfdaef36bd426f4e0121337926a04132c', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: 'eae257be5f0974019afdd7a1517c2efed55d397c', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: 'f6837cf900a859145f4360ec9d407ea51659c0f0', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '4aa5cd117be445a278cefcd6c7ffaea2e72a642e', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: 'c496345eea881fc5d6742710a053aa45cd4d94e6', name: "suffix" }))))));
     }
     static get is() { return "swirl-action-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class SwirlActionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '45209a11f46a6ba497b4c3d461ba3781cb0d57a8' }, this.hasSeparator && (h("swirl-separator", { key: '937e89a08f4697ddbcaccb1343b3355cb73227bf', spacing: this.separatorSpacing })), h("div", { key: 'ccddbc647093e14a09c62e3dedc55069b6c57114', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'e80da46246f9e3ead338d4b64af8ae9aa9387f01', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '8b6a8493e5b09d0c98b744592d4e422c9206bfeb', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'e02a428d84f4afabb1a66c32f4ce04775724d87e' })))));
+        return (h(Host, { key: 'd86ace949877affd32ca7cab4e3f0d4531fcc16a' }, this.hasSeparator && (h("swirl-separator", { key: '8c63131c65b9757bc82c893c9733731d401998f2', spacing: this.separatorSpacing })), h("div", { key: 'd3b093965aa160b2596998739bf74fc9e9423d96', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'b3453329dd293d766f1613d822a33f9e7392e6eb', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'd32adcf0bca646ecd736857c1ed27faf7c13d6d5', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'a0ff52ae37648692d6b6890cc5e781f084df9fd7' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: 'ce5423e05738bc7881dd6f9d678bdb1092a34165' }, h("span", { key: '6cc990326010d117bf9bdbc3087e5f82de856c76', class: className }, showImage && (h("img", { key: '474e88894b36fbd2e934b4613b474b87768f3c40', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: 'c4bc17d99f83fcb30b971b0084e33d3bc9199970', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: '18668b1b36052a50087ca49a711fa39dd23ed647' }, h("span", { key: '2e62fb4176cbc9029370c9ade98d85973a53595c', class: className }, showImage && (h("img", { key: '50c4908d815251a971731721e7aafdb3a7080962', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: '6650b12d71a7ddd6b255513192f1c632aca7845e', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class SwirlAppLayout {
         });
     }
     componentDidLoad() {
-        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
         queueMicrotask(() => {
             this.isDesktop = this.desktopMediaQuery.matches;
             this.restoreNavExpansionState();
@@ -349,14 +349,14 @@ export class SwirlAppLayout {
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        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"
+        return (h(Host, { key: 'e9ce1a534b9acff55e07b798afb306e07a619a81' }, h("section", { key: '4d328d6707d7dff74ad9c6016af1ada8f1384e28', "aria-labelledby": "app-name", class: className }, h("div", { key: '2b7e59a9abf6c8d1379136e1446ce7e708974f43', class: "app-layout__grid" }, h("header", { key: 'e3e8a94655fa12bc7daa7b9ae984217654d5d8d0', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '4842de5ed8cb9d055f75426f09d4c4221ce3248c', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '24607acca33855b93dba77e0cab7b43cc19dbf6f', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: 'b5e0b5c1ab49c9a77de1e6d8c9157cf907a5d331', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'de84a867b3b81da15a8a1a91feaf3d555b05d830', 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: '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 &&
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: '7a146162ce324567d3bd9ac1e94fb4270e841491', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '01e4e8588d68a858b3199883255a4de4a5890bf3', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '89125641f790dfc3134265a212768b6aa8f17f25', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '695f0de46afd902d3d69bd85d74ef9915a5a9c75', class: "app-layout__navigation-controls" }, h("slot", { key: '2f239735632860d0edfe5fb967bac05b21f14452', name: "navigation-controls" })))), h("nav", { key: '3bc5df6af2555a12164b8695f2b1b637ec2d086d', "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: '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"
+                this.navExpansionState === "collapsed" }, h("slot", { key: 'd5e1ac3dc3187e1b4761b83d66d4fa98c7c4e3b4', name: "navigation" })), h("section", { key: '422313cc9de344ef4b66a37f0f69b709b6f71687', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '46ea9b5669da12d8e78151977dc55b1e197e8dcb', class: "app-layout__app-bar" }, h("span", { key: 'b35d5938aadcdffa64b8927c096bb3f5b87fa349', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '2be2762f6d1cfdf8f569006557b5c51b8fc28b36', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'edfb91e719c8b77c73e945ca138f334fca56540b', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'e8cc48db20975a04dd63a8dc86c39b86bbb5630f', 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: '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" }))))));
+            this.navExpansionState !== "expanded" && (h("span", { key: '8c96a9e2f67470bd86c72d66272306901585d81e', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '36b26a023643f6fc3f43d2df344583004ee60b78', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'b005af6a600db164a8251478d8d6f0b63dad6d48', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '829e1e1145543dbb9658566051e69d28095ed4ee', name: "custom-app-bar-back-button" })), h("div", { key: 'e25d3fe097657c6ce637d075d7f886faebb8dcde', class: "app-layout__app-bar-content" }, h("slot", { key: '7913c7ce6ca420a4ea5c6640e57e8718c5b8cdc5', name: "app-bar" })), h("div", { key: '5f6df0102cebfcaaa4e2bde25e218e6a506c81ca', class: "app-layout__app-bar-controls" }, h("slot", { key: 'b4b19bf2bb4a51732f9ea647758b42721169aa5e', name: "app-bar-controls" })))), h("div", { key: 'a1cbbdffab4675813ee104abcdcf5722ad33242e', class: "app-layout__banner" }, h("slot", { key: '0fc317305b8d94dc2670f2731ab7ac841ddad69e', name: "banner" })), h("div", { key: '6c434829a6c78aeaea9f084735122d685b1ca636', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '5ab35d69d738ac114725661f296f89624ce5aa21', name: "content" })), h("div", { key: '14a299ef135a30d6f8975db14bdb668e79c39b7b', class: "app-layout__bottom-bar" }, h("slot", { key: 'b6f039e3ca95a896c38bfa97943b46f21d0688e4', name: "bottom-bar" }))), h("aside", { key: '403077f3384c185e97eb0205f11a932e4c1ad76c', class: "app-layout__sidebar" }, h("header", { key: 'a951e471e8363a025b4ba1ce377e7e1ef17d7e79', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'f6e9ca768e57b30b3faa072250fe9c0cba196b5c', name: "custom-sidebar-header" })), h("header", { key: '1ff00d0311949b3bdacb38ebef268a5b6e3aa00d', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'cc5a33cb40af30a16fdd9442fc34de516022c15d', 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: '96241a517463e025991a2c376e450e5128086209', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'a0f11ec60312ab95b56ae4465f23cd0e60f8c3e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'ed6139ae751d7701098e441d9bde7faa10d6ea1c', name: "sidebar" }))), h("span", { key: 'ea00d4875343af4d76c96c3591931b342098c0e4', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: 'd29b393a6ac566bf7b3eac1b6080f7da67e25b7f', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '7952de1a32de0b06d50911abcd9267ccb323e819', name: "floating-action-button" }))))));
     }
     static get is() { return "swirl-app-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class SwirlAvatarGroup {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: '2167ae83d47c069fd687a223f6d3220a05571d0e' }, h("div", { key: 'ad824d7e97d1705593c328a3a04cc72382950460', class: className, role: "group" }, h("slot", { key: 'e85bb42969d592919524148734e73e9393f24dea' }), this.badge && (h("span", { key: '1bb9ecdeed5974a6ced80414649945106ac82904', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: '6e450a07e7a605f78a47dff3e476ad065a739437' }, h("div", { key: '81af3f871b919312fa62b64899246cb3608680eb', class: className, role: "group" }, h("slot", { key: 'b582e1b748839a296dd61fd2a918246230d0ed46' }), this.badge && (h("span", { key: 'c5f83c4964f58208243f595a49e5df1b4d56cb4c', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get is() { return "swirl-avatar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class SwirlBanner {
     }
     componentDidLoad() {
         this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
     }
     disconnectedCallback() {
         this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
@@ -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: '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' }))))))));
+        return (h(Host, { key: 'be4bdebb17f5f9611c21c9eded65510ce2cf8427' }, h("div", { key: '2153f4b7cc6565e5a525f1131ce48b74ee2ebc7a', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '010865c0f43d00bfff18d7c510f48b191bb5b025', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: 'e33800d612c9bf594e3db60acf599357b0851383', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '03e082a2db918623b06b1487fd2bdfc6f270e08e', class: "banner__text" }, this.content)), showControls && (h("div", { key: 'a2041ef90d239380260e150581b7b06ed5dbc4b2', class: "banner__controls" }, this.actionLabel && (h("button", { key: 'c8a469c6d1ac12a9ba66fc1b3a4fdf252aeb8c52', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: 'a49e1ac3a5188b0344794fd93f7d5d56f3a520d1', "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: '95f2d21a48eeb6c5cc845d1dc674502ed89a0467' }))))))));
     }
     static get is() { return "swirl-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class SwirlButton {
     componentDidLoad() {
         this.forceIconProps(this.desktopMediaQuery.matches);
         this.updateFormAttribute();
-        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
     }
     componentDidRender() {
         this.forceIconProps(this.desktopMediaQuery.matches);
@@ -95,9 +95,9 @@ export class SwirlButton {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        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
+        return (h(Host, { key: '9c5a6973ea658678167f384b99703c2a5cc932e6', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'd8d39728274e53aef4a028478ecc6834539c975f', "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: '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" }))))));
+                : {} }, Boolean(this.icon) && (h("span", { key: 'f8c59b55181804a88e7fbea215955394581085d0', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'f10549e0f2a5a0ad195bf7a9622dd6764f22074d', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'd20e1abea1853532c4db9285554e08c01bbd2110', name: "icon" }))), !hideLabel && h("span", { key: '1953a32f75eab8d16f8d8b370869b58d7293b83d', class: "button__label" }, this.label), hasTag && (h("span", { key: 'ba2fd1ab2514f309dbe41b07440a1e034173756b', class: "button__tag" }, h("slot", { key: '79d7921baa4f8744ee3f1328f73f7427c4bf89ba', name: "tag" }))))));
     }
     static get is() { return "swirl-button"; }
     static get encapsulation() { return "scoped"; }

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

@@ -13,7 +13,7 @@ export class SwirlCarouselSlide {
         const className = classnames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: '30539973b6ab487e7469d57d7fddc2b5528c363c', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '24a72fd7084f06db1e8dd2635e7c9bead7df6cf4' })));
+        return (h(Host, { key: 'ceffb757f56b25570828a4d5074818ed33f822d6', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: 'd7858f141ba68421c6b531832a6fb1b9ce6c176c' })));
     }
     static get is() { return "swirl-carousel-slide"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,7 +26,7 @@ export class SwirlChip {
     }
     componentDidLoad() {
         this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
     }
     disconnectedCallback() {
         this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
@@ -49,7 +49,7 @@ export class SwirlChip {
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: '9b1e52461918edbaac63ee90bf5a3e553f9d310e' }, h(Tag, { key: 'dcbc86988cd9e4227c8d567c84daa76b9ac739cd', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '04997af02a853a3baa62a1f26bcc2a6d7f0d0e23', class: "chip__inner" }, showAvatar && (h("span", { key: 'd58d29238444cdd44a7a4d1fc8e1f1dcba15c6d7', class: "chip__avatar" }, h("slot", { key: '59705540be0270d9c03dc282d0b95323baddc4fc', name: "avatar" }))), showIcon && (h("span", { key: '8d568bc86288170c642834787f6f62d14385cfe1', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'b8242740bd0becbd22b2569a9dee60ac46146f46', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '8dab74c41f4521d82cdc1aa7abac3d0a12c76af9', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '9ba51b553551ff5c0d2e163fc9c5b7106089bca7', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '730613d93c56281943e0a036cc2afad9e967b1f0', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: '06051a334307deb3d0e0b4de1b4fa23a986c4a17', size: 20 })))));
+        return (h(Host, { key: '3fa170e58fcdd39a85afb56ec10f8f77615eb9b9' }, h(Tag, { key: '4e96ce9cd653f9afa6a335734a25c10f92c42edc', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '9b6107cc84794c069d0ff46031b886b3f0d4b78e', class: "chip__inner" }, showAvatar && (h("span", { key: 'd8a1a42f5ddede7223b78b617171eff7dd065906', class: "chip__avatar" }, h("slot", { key: '1bc65807864057fca37fcfec7599bf3606e9384f', name: "avatar" }))), showIcon && (h("span", { key: '0baa6dc9f1241a05a11882a4bc748963241e681d', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'd215f1a4d64e8b41648aaa19571f23c90e8a1fc1', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '173af6fba33eb25cc8d07a24e38757dd5738138b', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '46bc43fcc5da5d003bfb71991941fa758d8bae36', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'eb8945c1ca5f26d8d95776c6cb6de10b1b9d985a', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'c554907b6bcbfbf0b35da2091209b9256e60e545', size: 20 })))));
     }
     static get is() { return "swirl-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -64,11 +64,11 @@ export class SwirlColorInput {
         const className = classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: 'f4b210728d2dab17496ba08660e3571f9cacdc3f' }, h("div", { key: 'efb95089a96cf9120741e212d7398c2a68beffd9', class: className }, h("input", { key: '821e90e0964a3a9be0925e74b8dd71b789eff0c8', "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: 'b46d7e2f9758e51473029523aa710cdf8258c545', swirlPopover: this.pickerId }, h("button", { key: 'ecedca689d662827174ad1b81030493b9ca7a1e1', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: '6e1b10816dbedff68bea262e40c021699b70efd3' }, h("div", { key: '5b29f918032f4ebc460b733d6653944ed6e70d26', class: className }, h("input", { key: 'c4011397ab62dad48635a75dd6d82d6823694185', "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: 'd1d1ef15b41b815c1de320e121af7627029f5534', swirlPopover: this.pickerId }, h("button", { key: 'fce34dbb05daaaa0da9edf43862fd70c31891f7f', "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: 'ab1a8724bf3e1aaecfd92af4cff02575dbb70a5c', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '78769426685284ff424c87ddc43062fbbb9adf19', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'cba38d4c28c6b9c2f1dee2b9a3de3e8aa3b79fc8', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: '0d4d06c0bb4b0637a1319d68ac6bfb79956050dc', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'f82ee4119af41821fa5664499d04a9039767c30b', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '229f3536f3d1566092da3b9edf909386917ba531', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get is() { return "swirl-color-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -122,11 +122,11 @@ export class SwirlConsoleLayout {
             "console-layout--sidebar-active": this.sidebarActive,
             "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
         });
-        return (h(Host, { key: '55382641883ca84190aaf206eda8ee2371677302' }, h("div", { key: '9518a5bf8834e58c58a5eadbae5d69da69ed0eaf', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '32e8a7e89fbd34fe2369e51fcf256047ca665f31', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '1489fd403ae32fed62db279538c71c110e7a3b9b', class: "console-layout__header" }, h("div", { key: '308d2ec0abff2c614a2e6fc22cb851cec4d170ae', class: "console-layout__logo" }, h("svg", { key: 'ef8af50646106fd9095ec486ab7edb927115a228', 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: '4ffb8da8a77ba36718bab9737fadeae81305707e', 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: 'd32ce97a8434da9a8a736e2c539e4137dd0e9f3b', 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: 'baf96dd80112e4c1efa38aa8df9463317d751a86', 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: '69398ffe4efa1c29d815e203b95f44ec17244ed0', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '73deccd54520b3b1b787dea968785bc6bffb76f5', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '7a613bad605c07d6dbb1aa533cc7471e572ffa0d', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '7d5833cdb8716ac1139775cac4fd35b66643e2e1', name: "navigation" })), h("div", { key: '9b619abfb289f4462f399c2cfbcb1fc13990e86d', class: "console-layout__user" }, h("slot", { key: '91df851942daaaf611dc784d703fb3d91db75ee3', name: "user" }))), h("main", { key: '22168b5844ebed0f00d071c0897b48fc23df4c20', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'c2a5388612f400d163dbc6474fce9c7ed65dcf6f', class: "console-layout__app-bar" }, h("span", { key: '91de605cd9589a84c226ccb3e70d5fb37985e69c', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '3375cd56ed6b8c7ac8d765dc67ace1bff2d59f9c', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: '9eae3a95be22ea7aaf4e20341df8aa853825cff6' }, h("div", { key: 'c2439333a98ff2c31a67163f162064c7f4b484a8', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '0c5a275f17e499b6800b582454e9d30f006892a7', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '8217e531bda8f3231922c4c79b4827fd846132f6', class: "console-layout__header" }, h("div", { key: 'bb1b2ff46f199f45d46dbb3cd11f5942effd40d2', class: "console-layout__logo" }, h("svg", { key: '85232e92114e98cceb292120d3031bf769ef41f9', 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: 'a5b1c28db029d8f5eeafcd8ca9ba108d60fe6d23', 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: '5369534901d1bd825f3dadbb1b0777cbc3038c58', 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: 'cb700811147a9e80c1b989e214f656ec3a71f341', 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: '788e2f63db212f1cea1932f97cc45592ad35bff7', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: 'cc3432abedf3b5d5d4f64a50b9b6c5fbb79e7b8d', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '30656dbc948badce7c9c2fcd0c07c0c25cbd10c5', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '7f2cf3cdafd97528f4ebe7e501cb558e657b7b3c', name: "navigation" })), h("div", { key: '7e4de3ee5974d5db6c8ffe73b398178e6315c7ac', class: "console-layout__user" }, h("slot", { key: 'ef6611b1d4fd1f7871bee6f8aa816429a3d59305', name: "user" }))), h("main", { key: '5ef5b41374886064a1096afa69821a0e2a2c65a8', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '757777dcd0731014dcd7cd6b328ee4a0eb268af2', class: "console-layout__app-bar" }, h("span", { key: '85a212b35525e99ef43c22ed9d2c10f45cdd1448', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'c0e9d8bec6380e420316133cbe8fdbe7cb69dd7e', 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: '8a571901ac4ba6b1abbe2131c27d66d2e043f45e', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'a0b90d6a97b14a28ccf58fa726794927cc2683dc', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'd6f3453a6123d0b3d18415ad41eee47f53ac21bc', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '54e23f908184e7b58347d2f4e3cae569f02cbbed', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'd3fc76a51365c677e8287e27acd8c3ace3d5b297', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: 'c5eb672729505730f3851d78493f0c37f238a037', 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: '32384ab5403fafd5c4a9ccd608d7f8f637599982', class: "console-layout__heading-container" }, h("swirl-heading", { key: '53c671addacb3c7e1f08a44b97ae04daf35c84fc', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '84ec881d9d82afc6eac05841b476c3ee26733c5a', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'd9226c9fa947b0c43ed390d81d2e38aa16939d1b', class: "console-layout__heading-container" }, h("slot", { key: '9c7eebe531698ce08c7c36b26fb142facafa0428', name: "heading" }))), h("div", { key: '5341c5d6958bbf963e310a398aef23e99e071e0a', class: "console-layout__content-header-tools" }, h("slot", { key: '0c550b87dd833f18161e78d99e2f08583cda5bfe', name: "content-header-tools" }))), h("div", { key: 'bdf655db92f6704e40dac1d62fefb949bbebd3d2', class: "console-layout__integration" }, h("slot", { key: 'fa4b861802ad73ad39da7609a6ad4e78b3422304', name: "content" }))), h("div", { key: 'a76dc713a45689e9fe4eb11053f3056f29c7a8e0', class: "console-layout__overlays" }, h("slot", { key: '9e938275349485e24f67f58aaa2f6c11d2d7dd77', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '776c5688dd5df6666069723090bb55a4eb25b4bf', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'c5097c74e1e9c7d25d41a0401ae57fef87380f8b', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '6e97cecf6d158d16fb5b2cead14e0736c3276cb2', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'c2e81d97acec2fe6ab22b32f7347d56095028137', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: '64ca8252b455e5e192577d66d74e443d0dd29b54', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '88b482a6ca62d18e16b6a595ebf7bc1a121f5edd', 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: 'fdf655d69778fd56858f3cc81fa7d4aff8fc296d', class: "console-layout__heading-container" }, h("swirl-heading", { key: 'f223e7adc7c37f9edd595a424abeaa81cdef1b4b', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: 'a4634f4e08e5e0059aa85161a1d62bfc1cca60fe', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '6efc46ef5ee44716c095a4ab67220ec93e467c17', class: "console-layout__heading-container" }, h("slot", { key: 'b3dd442e78f2ed1ad9dc443d94b725a675c67c04', name: "heading" }))), h("div", { key: '3ecc3f90eba6abd910779b7b7824e7e3976162c0', class: "console-layout__content-header-tools" }, h("slot", { key: '88a89549069fe0037819566a37f15be9c577450d', name: "content-header-tools" }))), h("div", { key: '6af01cc21666c89c474023596f3f2913a3798d29', class: "console-layout__integration" }, h("slot", { key: '8cde850848d0423876b8e059335a7c9081d33315', name: "content" }))), h("div", { key: '1c8d18fd34a993f6a4d0c0563053e2ea2284b966', class: "console-layout__overlays" }, h("slot", { key: 'fca6923277da32bb48620b88952a6bddf54e76f3', name: "overlays" }))))));
     }
     static get is() { return "swirl-console-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -89,7 +89,7 @@ export class SwirlDateInput {
     componentDidLoad() {
         this.setupMask();
         this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
         // see https://stackoverflow.com/a/27314017
         if (this.autoFocus) {
             this.focus();
@@ -148,7 +148,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '7f69f0ce8597ad322510331a8cbb79479d21181a' }, h("div", { key: 'ec24b30f274d46792fddbe02b94694bc69c91cc2', class: className }, h("input", { key: 'edb7f355cfa77cc0c79501d9bf15f09eaedda5bf', "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: '98cb4b0c8f7445671c2310f72cedaae71f3cec76', swirlPopover: `popover-${this.id}` }, h("button", { key: '62880cf97edc8c7b4b6f4f1afc2f2b6c25c3e71e', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'da1bae29e544207b77987a163cf40830d553d6d9', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'e011209e205dc9c534c5dcdf01d83d5ed67244b5', 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: '52514f01386ef24f845b0f0c670c2e73d187dfe3', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '40aee0ed18df588c7e7de56ac15d2a899229240d' }, h("div", { key: 'ec0931b258f5de0aed8f4bb474ee7fafdb6f015b', class: className }, h("input", { key: 'e167d4115c27b58cdb35b135dcbd90c048063cb2', "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: '8935b2ae6de652d302dacf729a1d10c1e98b1a83', swirlPopover: `popover-${this.id}` }, h("button", { key: '1f409c2f827c813b76e06aa7c10204c5e5984dc4', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '0ae84ce7a870a5a6ccb6de23db3f90aaeedafc7d', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '8770b10b3bee1fffd7a71afad25cc889882b17f4', 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: '26269ce9a256f6dfedceeab811a427dd642a8aab', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     static get is() { return "swirl-date-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-date-picker/swirl-date-picker.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class SwirlDatePicker {
         const startDate = this.startDate instanceof Date
             ? getISODateString(this.startDate)
             : undefined;
-        return (h(Host, { key: '26f740cfc83e9c017ef6f66e12da2fa28b61a838', onClick: this.onClick }, h("wc-datepicker", { key: '31758155598bfc8e3f95ac24163d6222080212d1', 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: '1308d168101e84afb51948b884bd3d3f7f3f7322', onClick: this.onClick }, h("wc-datepicker", { key: 'b3e0237ce70711cd55b0a7b037be042dd150f247', 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 })));
     }
     static get is() { return "swirl-date-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlDescriptionList {
     render() {
-        return (h(Host, { key: '265ee77a49320add007518f90b2309698c5a8052' }, h("div", { key: 'eefe7b2b4002947d891c3f2df9da587d3b493f78', class: "description-list", role: "list" }, h("slot", { key: '506b3c1c16ed49a151791431d1aa8076defaa412' }))));
+        return (h(Host, { key: '4b78ebb93142286f1ef92e9d10c983b2d502b7da' }, h("div", { key: '027a87f126bfba1c115bada780930ebc4b8fe75d', class: "description-list", role: "list" }, h("slot", { key: '8a339cb49294c12d1aade958869d83d44b61c4cb' }))));
     }
     static get is() { return "swirl-description-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class SwirlDescriptionListItem {
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,
         });
-        return (h(Host, { key: '8052944a07ed9d134f59a1e07a30cdadb34e9cc5', role: "listitem" }, h("div", { key: '53f2be38cc7518826139930f5595d8cc21fa7d0d', class: className, part: "description-list-item", role: "group" }, h("div", { key: '8d75cbc7c439cb40f6e6b3ab29ec0ae0366bffe2', class: "description-list-item__inner" }, h("div", { key: 'b4649be338a58f3b4a9d124843f5bf7b83a7a063', class: "description-list-item__text-container" }, h("div", { key: '08b496049fc23ad0130263cf807f13e83bd775b2', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'b4722a977bfa2382bd09988f985be99a9264a139', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'a063649f6ebdea9e6344266689edf6466f0d4e38', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '00fdd32e8f0e83a5ae69d8bba04c0c9bb3216478', size: 16, tabIndex: 0 }))))), h("div", { key: '989a9a632667504013f6f233ae66c0fb700acee5', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '573596a4c662d82dabf25107b7cfea727ce57032' }))), h("div", { key: '140917f2ebd409b59037e7028234aa3c384bac42', class: "description-list-item__tools" }, h("slot", { key: 'cae6b40790ee4703902863b24fdc9934335f4e70', name: "tools" }))), h("div", { key: '84528a4a1be9e278ce0f6aedf588ec278f490488', class: "description-list-item__additional-content" }, h("slot", { key: 'c39b94bb7102854a4397f3e4d421c6252876ff3a', name: "additional-content" })))));
+        return (h(Host, { key: '24880ec932f85f8bab070358ae74e878204143fc', role: "listitem" }, h("div", { key: '9a78a10403d03af454a390a51c16995e2344e7d7', class: className, part: "description-list-item", role: "group" }, h("div", { key: '7f292225fe34a0fac3c35b43e8273d4971444f28', class: "description-list-item__inner" }, h("div", { key: '864991f1dd047f7d9b4144e69471bd30b89382fa', class: "description-list-item__text-container" }, h("div", { key: '3d8c04ef6093c9991451b2b9ec4e9c581c54adbb', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'ac9ea268e5eda1b38197d1bb751fed2bad808aec', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '3f74b2c7f2a0a717b1e55c520b8d11f9c38ce45c', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '3e84e0f69502f70ebf0a291ee64f431504965f5e', size: 16, tabIndex: 0 }))))), h("div", { key: 'd97314eb88bccdf407b57a57f684dbe6a841a948', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '584f7856d02da64e26b8b797765b981ba9201429' }))), h("div", { key: 'd825fd7c81cd524270c9aef203545a0ee96c0ce7', class: "description-list-item__tools" }, h("slot", { key: '040c4051e05ef3fe5dbfb0cd37bb1d53c2aaec42', name: "tools" }))), h("div", { key: '2484790fd02dcba4804912fb5c0fee859126a61a', class: "description-list-item__additional-content" }, h("slot", { key: 'eed20e643f70742967513d9690049b6de819489c', name: "additional-content" })))));
     }
     static get is() { return "swirl-description-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,10 +158,27 @@
 @media (min-width: 992px) {
 .dialog__controls {
+    flex-wrap: nowrap;
     justify-content: flex-end
 }
   }
+.dialog__left_controls {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  padding-left: var(--s-space-8);
+  width: 100%;
+  min-width: 0;
+}
+@media (min-width: 992px) {
+.dialog__left_controls {
+    width: auto
+}
+  }
 @keyframes dialog-scale-in {
   from {
     transform: scale(0);

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

@@ -3,6 +3,7 @@ import A11yDialog from "a11y-dialog";
 import classnames from "classnames";
 /**
  * @slot slot - The dialog content
+ * @slot left-controls - Controls displayed on the left side of the default ones
  */
 export class SwirlDialog {
     constructor() {
@@ -64,7 +65,8 @@ export class SwirlDialog {
     }
     render() {
         const className = classnames("dialog", { "dialog--closing": this.closing });
-        return (h(Host, { key: 'a5fd9957ee1f6b462bf2ea2407440b12d4738633' }, h("div", { key: '90399caa37036793ddc37748d92c21c6350a8c41', "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: '4ffa78466b93d6d6fc6c33e5d2e2148d7ef218c5', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'c681b602073ab9582cc7be0bec8aa9308c988471', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '9bc53bd477d094e66422e3b388029447f07392bd', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'be71995b7f384b0f13dfbf7cd34177100da2fcf5', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '5a987f7f2b753a172ec41e3f731fc9ed792bd4b9' })), h("div", { key: '2135d8e7ad566e70d6a84ad242ec2f9e7c7ffabd', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { key: 'ed9b0276e88a240a9710e756a657bea90bf1d45e', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '42d50dddb7fa679b461be848d0c3a6e2d86a938e', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
+        return (h(Host, { key: '28c9ab3143ae5d89b412ce3b454ec4f33b784555' }, h("div", { key: 'ddbc29e88279d1af1eb6f7643da359956ac60213', "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: '82b52ce661d86bacec6b6876c1754ad4bdd851c3', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'a8eaad88e1ead3803d0899fe1b4e59c7addca478', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '32dc2e42e48027b0f3358512074e86cfbed4de01', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '72df5ba9ac77e7e18c0452faa87301d0e02dd19f', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: 'b6de1f09ad34130808f728bab33becf401e62712' })), h("div", { key: 'e38094098bcfc56e16ac5479378055419938638e', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, hasLeftControls && (h("div", { key: 'aca3d7fc6972ce8def114e6eca3d2be4a2164c3b', class: "dialog__left_controls" }, h("slot", { key: '5d492b98348889a6cb3d14f136ff7f250001e44b', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: 'e952115137e9624b9687dc04ced686bc304bc452', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'a283862cd82238c7e0f91676816c10612b40884a', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     static get is() { return "swirl-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -290,4 +292,5 @@ export class SwirlDialog {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -26,6 +26,35 @@ describe("swirl-dialog", () => {
       </swirl-dialog>
     `);
     });
+    it("renders left controls", async () => {
+        const page = await newSpecPage({
+            components: [SwirlDialog],
+            html: `<swirl-dialog label="Dialog"><div slot="left-controls">Left</div></swirl-dialog>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-dialog label="Dialog">
+        <mock:shadow-root>
+          <div aria-describedby="content" aria-hidden="true" aria-labelledby="label" aria-modal="true" class="dialog" role="alertdialog" tabindex="-1">
+            <div class="dialog__backdrop"></div>
+            <div class="dialog__body" part="dialog__body" role="document">
+              <h2 class="dialog__heading" part="dialog__heading" id="label">
+                Dialog
+              </h2>
+              <div class="dialog__content" part="dialog__content" id="content">
+                <slot></slot>
+              </div>
+              <div class="dialog__controls">
+                <div class="dialog__left_controls">
+                  <slot name="left-controls"></slot>
+                 </div>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <div slot="left-controls">Left</div>
+      </swirl-dialog>
+    `);
+    });
     it("can hide the label", async () => {
         const page = await newSpecPage({
             components: [SwirlDialog],

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-clap.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class SwirlEmojiClap {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '9b96c9a451c399967da4c53f13646e302602402d' }, this.size === 16 && (h("img", { key: 'c46eba4749de12b688f3d4239683c7ba98bbc643', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '8144e5ff9ca8f6bc2a994f5dacefc955d3fcb577', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '1d979623ec1e573d79ca91a3eabd8dbd507f9ea6', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: 'c7fc001a3c3439d4cc3a0407230710d8add3823e', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: '55946d457c6b90f68070700d8d838aaec9285513' }, this.size === 16 && (h("img", { key: '3d796699a16e2429faca254e59feed6efc055392', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'dc7c386da99f56cb9986510b290adec32be7667d', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '6e0560137146a842a608504c17ec35c03a0e1950', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '283966368fe8a330e2a61d4f4b2c3dd8fb29ee21', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-clap"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-happy.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class SwirlEmojiHappy {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '554c4f230c56edb3ceb99a818540abe652814254' }, this.size === 16 && (h("img", { key: '564f51d92489a4494350b9ab30a208014fe77adc', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: 'c7995c941ada9f73ed37c8b5aacce12306218bf0', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: 'd4710c86a2f02f6424d6140e4ca1a90fd8ff128f', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '2a0f36b55295c8a63d099e7120e25ffbae131896', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: '6575e541c858c25499eb3da24f58c2ae8c92d5be' }, this.size === 16 && (h("img", { key: 'bbb3f35cbf4d6fc370ca03e24699a37aa5bfbe0e', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: 'c87db071ba761f502fc87af468b131e8d5072902', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '42b0c96ba35f6ebcef3bef3391af9ddbb20ff14b', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'd010607a5e3bb73641dbb1345c9a7a10e6698288', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-happy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-idea.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class SwirlEmojiIdea {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'eeffa7893c56f287965b9f346df8b3c355cc44ef' }, this.size === 16 && (h("img", { key: '8ab53192ca60e85962e33e4052cbeb674be144a4', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '8ccb432bb3df149a8cd0af7a95a6fd31a34800d8', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '791c4ff50fe31659a3b5c0e1bf3cd58b78675de4', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '3ba6e64c942228239bce970ecf9c8b5089e9eae8', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: 'd76d88b7adcf216b21ab9e5f85d24e1c2230d1a5' }, this.size === 16 && (h("img", { key: '368856c7039321bd2426126b32a54325d8574164', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '5a611f1be2feeb89872584a71fb73ef7c69da42b', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: 'b5a9d9986e471c88b1889e80a19765e83d1fc483', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'bec5a64b895f668f79ceb840900651d4f2cb7715', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-idea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-love.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class SwirlEmojiLove {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '8524a14ca4e1a683ff50ee39f7ec9dc494932672' }, this.size === 16 && (h("img", { key: '9c39c173602017ceb3ca45c27f86592dbb592159', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'c88dc235b8eb3852412cbba62f8f67c95f42aa20', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'f301e438a5aaaaba34aa959dfb26b7181baa9046', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'd3fe14d4a50ddab2c5207393b5298a380822bc51', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: 'd31814cf9accd0bcde6b3383657c857f6930e039' }, this.size === 16 && (h("img", { key: '41dc9a67d4e337e19006f02e0f46f842e279db77', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'b16e34d8b5e8ba68e5dbd9d1ba1cb337ae28ae0f', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'eb8da22f8cd6bdd8bc4068df3c198b791a9dea29', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '9e65271c4985810eebe8effb98e915fa722f1915', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-love"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-sad.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class SwirlEmojiSad {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'fd9d57786315e9ae443e76fdcb3f1999e870cf99' }, this.size === 16 && (h("img", { key: '61621208631fff8e893563c91e47e28e7b2abb1e', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '3fcc49677697f61cbdc32b371a5f46df1fba64ac', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: 'cc9afcbf5748a0feb8f862932bc938a76531e5da', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: 'd4445ee2d7bc3441d904666a96e4365e088129d0', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: '0a11af16e509876de3c89e11413ff1feb77f761f' }, this.size === 16 && (h("img", { key: '0d4452cb84750dfaf68ef08d179cfb53cd21750b', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: 'e892906e513d1b2c0de1149dc577906c568e91c3', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: 'df681dee5e402ef3ab5ed3c727b21d512cca5f77', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '5a672d730dbd83057be66132b56530ebdff69116', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-sad"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-thumbs-up.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class SwirlEmojiThumbsUp {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'c025c780f7441d6a656629e83ddd046dabcb4bf0' }, this.size === 16 && (h("img", { key: '4831bf857098847e83e09cc39ade04cd26e0ac36', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '8b1337239ed4910092c1a49f216e732cf66f5813', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: '63a7d02492a7822fbaabf8d025e8444fccca57a1', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: 'b07d6f14038b9a20ee34de60c1c4baaa7cdd5425', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: 'dc060b6fc70283f8a8f6891d8bdf28910dc57833' }, this.size === 16 && (h("img", { key: '7483b30c471f8927eefb1844acf6b3213396bfaf', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '77a5b6012ec8fe66d7c7c49492900084d56bfd04', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: 'dfe93ab3a4d95962093fbaa9dfa0a9b74cd33003', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '821cdfd7bb5e8da7d98a37273b912ce81cc76cac', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-thumbs-up"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SwirlEmoji {
     }
     render() {
         const Tag = `swirl-emoji-${this.name}`;
-        return (h(Host, { key: '7f0d0373b98606f1b993ed6ba547c589b39b4ae9' }, h(Tag, { key: '39a7e4bc8e6983be2a5347c0ffe91740ab98a015', label: this.label, size: this.size })));
+        return (h(Host, { key: 'c7abdc67c354e143381e8240dfdaa48f6e4f8c3c' }, h(Tag, { key: '500c97ef03874563133209bda16cd9bb5b7ad916', label: this.label, size: this.size })));
     }
     static get is() { return "swirl-emoji"; }
     static get encapsulation() { return "shadow"; }