npm - @getflip/swirl-components - Versions diffs - 0.360.0 → 0.362.0 - Mend

@getflip/swirl-components 0.360.0 → 0.362.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 (1791) hide show

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

@@ -11,7 +11,7 @@ export class SwirlIconWork {
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (h("svg", { key: 'd09d9e173966303d9782873b145a3bd0bec463d6', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: 'c7cb68e09f797cc528565dd20b9288059d6422cf' }, h("path", { key: '36d94b306a9fa297e68aacefe0066293ecb8dfbb', d: "M2.66668 14.0002C2.30001 14.0002 1.98612 13.8696 1.72501 13.6085C1.4639 13.3474 1.33334 13.0335 1.33334 12.6668V5.3335C1.33334 4.96683 1.4639 4.65294 1.72501 4.39183C1.98612 4.13072 2.30001 4.00016 2.66668 4.00016H5.33334V2.66683C5.33334 2.30016 5.4639 1.98627 5.72501 1.72516C5.98612 1.46405 6.30001 1.3335 6.66668 1.3335H9.33334C9.70001 1.3335 10.0139 1.46405 10.275 1.72516C10.5361 1.98627 10.6667 2.30016 10.6667 2.66683V4.00016H13.3333C13.7 4.00016 14.0139 4.13072 14.275 4.39183C14.5361 4.65294 14.6667 4.96683 14.6667 5.3335V12.6668C14.6667 13.0335 14.5361 13.3474 14.275 13.6085C14.0139 13.8696 13.7 14.0002 13.3333 14.0002H2.66668ZM2.66668 12.6668H13.3333V5.3335H2.66668V12.6668ZM6.66668 4.00016H9.33334V2.66683H6.66668V4.00016Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'c8a75e95652f5d3149e8d5ed0e55592d9f82d062' }, h("path", { key: 'd37996c9a48e50aa73b3e12ec0001a35853b26e2', d: "M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V8C2 7.45 2.19583 6.97917 2.5875 6.5875C2.97917 6.19583 3.45 6 4 6H8V4C8 3.45 8.19583 2.97917 8.5875 2.5875C8.97917 2.19583 9.45 2 10 2H14C14.55 2 15.0208 2.19583 15.4125 2.5875C15.8042 2.97917 16 3.45 16 4V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V8H4V19ZM10 6H14V4H10V6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'df0e271d500dd20ad7226b34fd31ca4bcbaf50b4' }, h("path", { key: 'e856f0b6c58a6b85c30dffa1331d08834427833d', d: "M4.66668 24.5002C4.02501 24.5002 3.4757 24.2717 3.01876 23.8147C2.56182 23.3578 2.33334 22.8085 2.33334 22.1668V9.3335C2.33334 8.69183 2.56182 8.14252 3.01876 7.68558C3.4757 7.22863 4.02501 7.00016 4.66668 7.00016H9.33334V4.66683C9.33334 4.02516 9.56182 3.47586 10.0188 3.01891C10.4757 2.56197 11.025 2.3335 11.6667 2.3335H16.3333C16.975 2.3335 17.5243 2.56197 17.9813 3.01891C18.4382 3.47586 18.6667 4.02516 18.6667 4.66683V7.00016H23.3333C23.975 7.00016 24.5243 7.22863 24.9813 7.68558C25.4382 8.14252 25.6667 8.69183 25.6667 9.3335V22.1668C25.6667 22.8085 25.4382 23.3578 24.9813 23.8147C24.5243 24.2717 23.975 24.5002 23.3333 24.5002H4.66668ZM4.66668 22.1668H23.3333V9.3335H4.66668V22.1668ZM11.6667 7.00016H16.3333V4.66683H11.6667V7.00016Z", fill: "currentColor" })))));
+        return (h("svg", { key: 'ea360bd35764e474c21f82b7f036de55823b0e71', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '87ab5fe1816682aa07a1280994c22632342d4171' }, h("path", { key: '290cc51d73ff1c7f9302ab3d0ace126ee870c9d4', d: "M2.66668 14.0002C2.30001 14.0002 1.98612 13.8696 1.72501 13.6085C1.4639 13.3474 1.33334 13.0335 1.33334 12.6668V5.3335C1.33334 4.96683 1.4639 4.65294 1.72501 4.39183C1.98612 4.13072 2.30001 4.00016 2.66668 4.00016H5.33334V2.66683C5.33334 2.30016 5.4639 1.98627 5.72501 1.72516C5.98612 1.46405 6.30001 1.3335 6.66668 1.3335H9.33334C9.70001 1.3335 10.0139 1.46405 10.275 1.72516C10.5361 1.98627 10.6667 2.30016 10.6667 2.66683V4.00016H13.3333C13.7 4.00016 14.0139 4.13072 14.275 4.39183C14.5361 4.65294 14.6667 4.96683 14.6667 5.3335V12.6668C14.6667 13.0335 14.5361 13.3474 14.275 13.6085C14.0139 13.8696 13.7 14.0002 13.3333 14.0002H2.66668ZM2.66668 12.6668H13.3333V5.3335H2.66668V12.6668ZM6.66668 4.00016H9.33334V2.66683H6.66668V4.00016Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: '5a1b3a1a629033f45c2b7b0a2f19e94bd7c86c8c' }, h("path", { key: '963bc568225fedb239a1b41a863ab658f7dbb0d9', d: "M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V8C2 7.45 2.19583 6.97917 2.5875 6.5875C2.97917 6.19583 3.45 6 4 6H8V4C8 3.45 8.19583 2.97917 8.5875 2.5875C8.97917 2.19583 9.45 2 10 2H14C14.55 2 15.0208 2.19583 15.4125 2.5875C15.8042 2.97917 16 3.45 16 4V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V8H4V19ZM10 6H14V4H10V6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '1eeb46c26a1cb065eaa64fc04b9b02f7253028bb' }, h("path", { key: '5e609eafb89933812040740b654c54bf1f955928', d: "M4.66668 24.5002C4.02501 24.5002 3.4757 24.2717 3.01876 23.8147C2.56182 23.3578 2.33334 22.8085 2.33334 22.1668V9.3335C2.33334 8.69183 2.56182 8.14252 3.01876 7.68558C3.4757 7.22863 4.02501 7.00016 4.66668 7.00016H9.33334V4.66683C9.33334 4.02516 9.56182 3.47586 10.0188 3.01891C10.4757 2.56197 11.025 2.3335 11.6667 2.3335H16.3333C16.975 2.3335 17.5243 2.56197 17.9813 3.01891C18.4382 3.47586 18.6667 4.02516 18.6667 4.66683V7.00016H23.3333C23.975 7.00016 24.5243 7.22863 24.9813 7.68558C25.4382 8.14252 25.6667 8.69183 25.6667 9.3335V22.1668C25.6667 22.8085 25.4382 23.3578 24.9813 23.8147C24.5243 24.2717 23.975 24.5002 23.3333 24.5002H4.66668ZM4.66668 22.1668H23.3333V9.3335H4.66668V22.1668ZM11.6667 7.00016H16.3333V4.66683H11.6667V7.00016Z", fill: "currentColor" })))));
     }
     static get is() { return "swirl-icon-work"; }
     static get encapsulation() { return "shadow"; }

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

@@ -303,7 +303,7 @@ export class SwirlLightbox {
             "lightbox--hide-menu": !hasMenuItems,
             "lightbox--hide-toolbar": !hasToolbar,
         });
-        return (h(Host, { key: '87fa1757660c973dbae5823b630f6c1aacb6956d' }, h("section", { key: 'bf514b8ec54587cb28faa1e871e62e072cdddd4c', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '3a81e55c994f48c0bcc71b8cc76aaf1c552c2e3f', class: "lightbox__body", role: "document" }, h("header", { key: '09ec20b17aaaf6e28065c3cb943257bac2c4b7b6', class: "lightbox__header" }, h("button", { key: 'caf38e6c9cac8fb979ccb8e13c06e2741a24662b', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '5e9e261be0ee1c8a060a740a5b118a468cf649cc' })), h("div", { key: 'a674f3f969a5073276fe90877a768d77484dcaf2', class: "lightbox__toolbar" }, h("slot", { key: '6b37d5618751103a78a14c4fc51016f1fe517164', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '9e7d9422cbd8627d581ecddfbcf80f2b42f328e6', swirlPopover: this.menu }, h("button", { key: '5fa2dcbc6886c7222ff533d1898c6fcba45831ec', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '3f5413e886eb9b2b04cc1d1aac29fd5b2c70d9ce' }))))), h("div", { key: '31de43b8b9e5f25fe624645da3ee2a37e5b729b2', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: 'c15ef253dc1dd984710c37e3b274e2345a73223d', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '047e11f8ca6c80085a62295096a745a543fe1f11', onSlotchange: this.registerSlides }))), h("div", { key: '3743a3d06924ebde898a4937883cc3eda697cec6', class: "lightbox__controls" }, h("button", { key: 'f8ac9584a5d3e372d59bd7110bb8c8e72f284282', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '6ec071b89ca1e59b6d79f6d3c640679bc22b72a9' })), h("button", { key: '481553941358482be94283c3d13f87778764bb59', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: 'e8e20e0009b69294872055744f9b7d791b3d051e' }))), showPagination && (h("span", { key: '3f8b8c993b587d25858171bd8c7a19eac31918b3', class: "lightbox__pagination" }, h("span", { key: 'c30bcf0e7741d73fbdd465e9000ac7f6be6a3e2a', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '82dde5522fba8cc6ef2ddbad7a15df8f45d31c7e', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'a2c1a0d4999a0303c8f87284295465171780fd0f' }, h("div", { key: '0a7320976636fc21b491ccd13964440f919cfdc1', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '9506c53c8d417de50614164ec0ed5548e7a5ff5d', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '2227a41b8c7106cf320b2b5ac8d0d8a9d8f009e1', alt: "", src: currentThumbnailUrl }))), h("div", { key: '53e2c4eaacb5d1a0728faeab7816286821fd4ea6', class: "lightbox__file-info" }, h("swirl-text", { key: '69a3803499fba19bcb40e096ba1eef79d13b62a9', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '63e55115509b7c8addbdb1e742317240213c5938', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '0f3c9c71f388947b2eb4db1a2f2c362878f662c3' }), h("swirl-action-list", { key: 'f3f9e11653964a4937cf2ca2a8630e0cf78c319c' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '5f4690e1a245edf0d13ba98c080d8d5b72d5c507', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'fc27fdc462d7e178c0cb37ff22204c811e3c5ed9', name: "menu-items" }))))))));
+        return (h(Host, { key: '7f6be6f13f425eb2efd5ccc94a6bb71712c0fa8f' }, h("section", { key: '0788477eca3c76c45ab598e95bb337283ad6c20b', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '3a66395840f045a7de6065e129f2b09057d55088', class: "lightbox__body", role: "document" }, h("header", { key: 'fffe8d45e04cf494acd2a541718de9cc47a875cf', class: "lightbox__header" }, h("button", { key: 'd8ecd0ed4f6b5808e8b6b88f6ab909cdafc4263e', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: 'b904c3447e527180e8fc4c9761aca9a214fe6cec' })), h("div", { key: '57acdb3c06c754c5bf60f5e5e9757ebc89de93d6', class: "lightbox__toolbar" }, h("slot", { key: '06527231ac4290010c4fe34aed904b3f89df15cf', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '55c721ced438089b312bbbea1191c5a3f97e435f', swirlPopover: this.menu }, h("button", { key: '77060d3a0474567dfa372ef93aa05c4479b370f7', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '1c962faac2c01fe9467af48d01e2ac090263c471' }))))), h("div", { key: '2f0ca000620a8c23a36ec1f00ae39fe44e113d39', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '6f31a81ce7361d44753d3782575a3a6178bea7e4', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '133844ab8e3c6383d168dd2247e59844b040948b', onSlotchange: this.registerSlides }))), h("div", { key: 'bd1dec73494ec32ffd49ce4c74c840c6792ec1ec', class: "lightbox__controls" }, h("button", { key: 'dfe0e56f95f329856c90bffb55731453bd310fa2', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '5b2254043d1597b601931b4560a309585f5ee982' })), h("button", { key: 'de66d7b10cf628dc5ae23867cb66bf2054debe49', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: 'b6c541aac39201083923e7ff018281c5e2c5f341' }))), showPagination && (h("span", { key: 'ef7e293eaf6493f770f3d970114039787759877d', class: "lightbox__pagination" }, h("span", { key: '78105e6fc28878ae21b3af8f7a6c20f2dcc29d26', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '9b38d25720d30b88f3c9f697979c0171eb6ef1d7', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '232ecfd0ca2ed5dddcd353a02756a6394ea865c6' }, h("div", { key: '8d8da01c87d8fac284e0b2ddeda32aee39fdbdb9', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '34c0c0f35a91040ddf56f1c00e9abe441102b70d', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '9107df2bf56c495deb06a48172012f496c7e0a4a', alt: "", src: currentThumbnailUrl }))), h("div", { key: '766059cf298c5a202e901d00e27f84a58406dab8', class: "lightbox__file-info" }, h("swirl-text", { key: 'f8f20b9e0425223cf561efab33f2f9f99762c018', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '711e38e50401061ee45b5f3bd065b6f252ba7c53', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '3958a4b128f488b8d99db4ebd375e8c728d771e8' }), h("swirl-action-list", { key: 'bfc102c227898a53826236bb8067236ea19003f4' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'a4d166a5d704363232c3dbdb7f3b37fd8308aed5', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '252f55bf989f6322a780633fc0feb060bf32f2b8', name: "menu-items" }))))))));
     }
     static get is() { return "swirl-lightbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SwirlList {
         }
     }
     render() {
-        return (h(Host, { key: '582529c7824a7e710b9164e79147ebb6d34882ea' }, h("div", { key: '6aed068d5b6855b60a526ea9ec57a096e16af122', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: '4f51ef03706c7367dd326d3a2d2d8376f3da4f45' }))));
+        return (h(Host, { key: 'e886ed125152562d508f1bbfca36af3b6af11185' }, h("div", { key: 'c1c629772a8b3b8554061cb3fa1cf03cc0635620', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: '858885538cb7dd61a14140a5701bc4d12492a3ca' }))));
     }
     static get is() { return "swirl-list"; }
     static get originalStyleUrls() {

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

@@ -106,9 +106,9 @@ export class SwirlMenuItem {
         const className = classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '3fc48f2c0ce59216a9ce0218e86b034aafeaa378' }, h("div", { key: '90b0bd08585ea15956bc94377aab53c3fbfdd12a', class: className }, this.parentMenu?.variant === "selection"
+        return (h(Host, { key: '357d38b2f221ca6f6a184786fe029267dc47e945' }, h("div", { key: '71faaf60fe9a3e1fa65b0cbb93fad824dcd0f555', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: 'af916941e5243a52f88aebe3e24a60e607475e8e', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: '9968571d023a6c5af928ccb83eb957beb5b931f6', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import classnames from "classnames";
 import * as focusTrap from "focus-trap";
+import { getActiveElement } from "../../utils";
 /**
  * @slot slot - Modal contents
  * @slot secondary-content - Secondary content
@@ -93,17 +94,6 @@ export class SwirlModal {
         };
     }
     componentDidLoad() {
-        this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
-            allowOutsideClick: true,
-            // We don't always close the modal when ESC is pressed. So we manage the
-            // deactivation of the focus trap manually.
-            escapeDeactivates: false,
-            tabbableOptions: {
-                getShadowRoot: (node) => {
-                    return node.shadowRoot;
-                },
-            },
-        });
         this.determineScrollStatus();
         this.updateCustomFooterStatus();
         this.updateCustomHeaderStatus();
@@ -128,6 +118,7 @@ export class SwirlModal {
     async open() {
         this.isOpen = true;
         this.modalOpen.emit();
+        this.setupFocusTrap();
         setTimeout(() => {
             this.lockBodyScroll();
             this.determineScrollStatus();
@@ -191,6 +182,20 @@ export class SwirlModal {
         disableBodyScroll(this.scrollContainer);
         disableBodyScroll(this.sidebarScrollContainer);
     }
+    setupFocusTrap() {
+        this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
+            allowOutsideClick: true,
+            setReturnFocus: getActiveElement(),
+            // We don't always close the modal when ESC is pressed. So we manage the
+            // deactivation of the focus trap manually.
+            escapeDeactivates: false,
+            tabbableOptions: {
+                getShadowRoot: (node) => {
+                    return node.shadowRoot;
+                },
+            },
+        });
+    }
     unlockBodyScroll() {
         if (this.scrollContainer) {
             enableBodyScroll(this.scrollContainer);
@@ -226,29 +231,29 @@ export class SwirlModal {
             "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
             "modal--sidebar-scrollable": this.sidebarScrollable,
         });
-        return (h(Host, { key: 'be9b73a073d5ad2e710bf0c1b240e9f45df860ce' }, h("section", { key: '3ea9bb1a7aa078972190070cc10737399b782b16', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: 'a0e4446c7644d615e99fd5cbb5347695e3e481c4', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '1e8343e39eb77629cc9835283d89b0cbc9378a6c', class: "modal__body", style: !this.isFullscreen
+        return (h(Host, { key: 'c5c1e9d205414a6703f29de9cb94ca31d0b2e53e' }, h("section", { key: '147ee8b41dbb009b0c42cb0cbd47b4e4b2236ede', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: 'c5581d8ad582064afbbeb131c1767de2665c4a0d', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '1cbd4e90ce8aea3452c1256af3869e69711ed470', class: "modal__body", style: !this.isFullscreen
                 ? {
                     "--swirl-modal-max-height": this.maxHeight,
                     "--swirl-modal-height": this.height,
                     minHeight: this.minHeight,
                     maxWidth: this.maxWidth,
                 }
-                : {} }, h("aside", { key: 'e8d4387ca3170fb2dea7130c087aa687774814ed', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'a163ce46b9797d2504a3e5c6bee61d347c6434a6', class: classnames("modal__sidebar-header", {
+                : {} }, h("aside", { key: 'b5dc4279da991e8db9601e3a03bdb5d7d7519a3b', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '182b2e194d44bb34bc7208329f6c560bdc031a90', class: classnames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '2410cdaf7489291d3d3614c73023743a3536e01c', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '001c3921e63a984e7081b58eae914fa7ba835d44', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'b8cf6b1e2baa77700e93ecf9829276e5cbd42d22', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '4c60eef13700f51b91a0d2259fadcaade65cf9ed', name: "sidebar-content" })), h("div", { key: 'd68e8bbfbb078d74af9fc40bad2f133a43098009', class: "modal__sidebar-footer" }, h("slot", { key: '7d72dd8ee71fdbb56d96d55c707594ecc2fc6793', name: "sidebar-footer" }))), h("div", { key: '545a8f3569e9e38e0a5b766b56a0ee4016cac8d5', class: "modal__main-content" }, h("header", { key: '11a14c8055be6364c7a881f565ae4cf23304ae59', class: "modal__custom-header" }, h("slot", { key: '06365db0f0594c57b6049ca8aabd38f8e67048ef', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '543d7edea31e1fbd45f96ce8acb07539bef9c98b', class: "modal__header" }, h("div", { key: 'fe1803b2c451b0cd717cd4d4fbe1c1eb80f3cded', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'f278aa65e8dc869e8f616762645a31c394b81d61', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '3c8297ccb8edb389ccb1ba88e7ffdb2769837d72', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '02950b7a7d448fc7e77fea7d12ca073e367622b8', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '73f7fd8f43bb72470e6eb9fefd32eee81234e7ff', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '5004305bf8fecaf91a50907c07920fc44754362c', name: "sidebar-content" })), h("div", { key: '4f661235c09bb4b730d31a8159f44a3357adcaff', class: "modal__sidebar-footer" }, h("slot", { key: '4a566e09e71f6acb2c8431cec8985a4bb6185395', name: "sidebar-footer" }))), h("div", { key: '5e95bda60c880712cb063ae6ed67ea8964aabbe3', class: "modal__main-content" }, h("header", { key: '7b3f4be5bb206c96c517ad6dea314d35dda19fbb', class: "modal__custom-header" }, h("slot", { key: '802cb431d703e2dc5a6854716e00267518655cae', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '05f41ca8a6f6c668e412bbd8b1a0f7c25f4a3ae5', class: "modal__header" }, h("div", { key: '5946fb4497f1be9d5d542ef721c419a7e988f10b', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd631408b4ac4b107525d60649d7118144085f2c9', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '913550accf44d556410638bf5c4314a066534f66', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'efdbb168513ba5faded2a3e68792f29eea3a73cc', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
                 ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
                 : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
                 ? this.fullscreenDisableButtonLabel
-                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'a03c70736c99ed27d7d591044cd010e4dea688c7', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'd25236122a69cc01d032eae08e4807d6a43caad2', class: "modal__content-container", style: {
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'd9d93c08677a3c0a456b5d4c7a9d7fdcc44a6148', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'a9056a4b722d0a3891e5e902613e7054d557729c', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: '2815292bbc2d5eb6962183b393779be1eb526f8a', class: "modal__primary-content", style: {
+            } }, h("div", { key: 'c1367de68040ff0b637efa7a7eb66b361320fca6', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: '278c5b840b69535e7bd1b92eeb11fd1a1acae8b9', class: "modal__header-tools" }, h("slot", { key: '6d4cc0d12b52be14ecb4f8d17fe5e4296610fd04', name: "header-tools" })), h("div", { key: '2eb0a78cceb32d154d4f0781f72b107ef0857675', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '6e49292b835d28e871aca0cae5c655122f47e6ba' }))), h("div", { key: 'f3bfa745697ed50e408562aaeca5c7b18115791e', class: "modal__secondary-content", style: {
+            } }, h("div", { key: '9c729f9350a144e8b7af8e07c1f0d69cd320c4a6', class: "modal__header-tools" }, h("slot", { key: '488d261460a865fd207acd9031ad3bf8e53e9899', name: "header-tools" })), h("div", { key: 'c960da07fa2190d4af907d05801f61ecaf4dae4e', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'ff5be4e790eacffbce4ae3d67d43a1ba75f6a760' }))), h("div", { key: '89d368198cdc7156ca143ab9fcdbf9bf56cd7772', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -266,7 +271,7 @@ export class SwirlModal {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: 'bc465625138a38eff727b6d77f4b2a4d81b5d8c0', name: "secondary-content" }))), h("div", { key: 'e9bcde67ce749b6e2d4437205ed096aeba10b271', class: "modal__custom-footer" }, h("slot", { key: 'b31872b97ec952688037f8ad8a06f5f84ac7c817', name: "custom-footer" })), showControls && (h("footer", { key: '81b89f5408c6eace656904ef9ae0e9bbd41313d8', class: "modal__controls" }, h("swirl-button-group", { key: 'a22c8e6425837ac8193b9407060da27060838bfb', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '43dba207a1f3abe008485451a865fdd60bbcc0fd', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'd3c57dd2eb7e7a36a360aa7f4be0f74122561bbc', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, h("slot", { key: 'a4fc64dfed01d834f883ce21499178c60d5e8502', name: "secondary-content" }))), h("div", { key: '53044266cf7b39f383e28de0b33ff5d095bcb3bb', class: "modal__custom-footer" }, h("slot", { key: '25681e2fd02c846a8b9cdcfa951799730ef06f5b', name: "custom-footer" })), showControls && (h("footer", { key: 'a65853a33d5b554b18bcc141611d2470f22e6aad', class: "modal__controls" }, h("swirl-button-group", { key: '114cb44c508028261d83d958d3d7030c4f7d4771', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '7a6ef1b9e54a746ebba3d94ae11e56151c8bfa54', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '3e4a90e77da254714a95ee1e4f6c83193b17f6dc', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     static get is() { return "swirl-modal"; }
     static get originalStyleUrls() {

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

@@ -334,7 +334,7 @@ export class SwirlOptionList {
     render() {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
-        return (h(Host, { key: 'ea80dcd81a72def51703f4054bf810e45272fda0' }, h("swirl-visually-hidden", { key: 'd73e6b012bc1b2d557bf08a865fbb53104a7a205', role: "alert" }, this.assistiveText), h("div", { key: '12484bac376ad7715244852a59245e5e98183c46', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", { key: 'a6ee3867ea579c1a725a5fd517b8363bc08d77cb', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '03ab24f5e672f92c7e3fcac466e37edf08572dc5' }, h("swirl-visually-hidden", { key: '106f1c8218ce28e16939fd4c3a53ac3574daf192', role: "alert" }, this.assistiveText), h("div", { key: 'e57e32e47bbc20ec6850271fa6681a8e87a61830', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", { key: 'ecf1e5cfab9579b06c5288963392314eacb628aa', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-option-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -9,7 +9,7 @@ export class SwirlOptionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '2649a9025f735818bc64f90e54023a7645c4446b' }, this.hasSeparator && (h("swirl-separator", { key: '446eb225a65c12dd619295b55fb76715a2d6929e', spacing: this.separatorSpacing })), h("div", { key: '4dc624cb5c17733519d4ee90f009da98282e7138', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '8de7f379afad4b120b245637082a5de85b211883', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: '662220dd82f627503757bb0e3201c47f8c4fd904', spacing: this.spacing, align: "stretch" }, h("slot", { key: '561bcf972d5c9fc53606df40628d07498152a44c' })))));
+        return (h(Host, { key: '1127ea8e1b89aa1bd4c1d3348a197d592861543a' }, this.hasSeparator && (h("swirl-separator", { key: 'f426c4722d916cb5b18f7bb6ee231eb06271b02c', spacing: this.separatorSpacing })), h("div", { key: '0dce7898f76db7f13c2312b6ac5b20d00aeaa9cc', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '6d8e373b1540840cef7dc34996920235bbc12012', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: '4c83fae4b670a6136f54a9020d5986b2fbe79827', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'a717a93b3dd6863b415a368d48427cb2f0904920' })))));
     }
     static get is() { return "swirl-option-list-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.js CHANGED Viewed

@@ -174,15 +174,15 @@ export class SwirlPdfReader {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (h(Host, { key: 'd640822c497ddde4ed6536fefbefd85e8efa76c6' }, h("section", { key: 'a894412a12a14ac94a56923bbd9657b034eb313b', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '17d7054926b29ea2b914e6b16fa0046e0c10c9b4', class: "pdf-reader__body", role: "document" }, h("header", { key: '8ef605329306bdf5fa8440f012de5166aeade072', class: "pdf-reader__header" }, h("span", { key: '835b304dcbc06c5f98d013c2e5f7d60c9e773053', class: "pdf-reader__header-left" }, h("swirl-button", { key: '2bc5abb9022ab9e447c404b489e7f6e38dfe5d32', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'b692dcfc6b9e470e585bb60d1c80612a1b9a0d3a', class: "pdf-reader__label" }, this.label)), h("span", { key: '524eff07c7d9e90c2af4ba6e21cf84b716bb816f', class: "pdf-reader__header-center" }, h("span", { key: '3e40954817d570039a43e7448d6397f4488a716b', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '8e5b38ec974719b28adf81646d59da9bb3efa0e1', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: 'b548d45410391b1cc929cb3fbfa998b3d7440149', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: '5b535ea5baeac9282df7b84bae4b43c9cfdbe9bd', class: "pdf-reader__zoom-select-container" }, h("select", { key: 'd88a60d35e66903dcdc498ed69ee1b29fddc3434', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '35425e01ccfde3a03d3146fdea7417891672560b', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: '2734059bfc7369c5ed333b0eeef46fad8246c77f', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '24fb2930edec91cd58b1dd4ce9298768ee490852', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: 'bcd36453d58d0ede3eb28a350b2182a39bbbe672', swirlPopover: this.menu }, h("swirl-button", { key: '7ec26305b133e6f372ec3ab00e63da2747d144f8', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: 'aaae7930aee7685a22885e9de1eedd48ee081fa6', class: "pdf-reader__floating-tools" }, h("button", { key: '1dff5e85b5199551511e25a7144b004b18f96c55', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: 'ed76e4e817a30480600b6daa29df820121d121d3' })), h("button", { key: '7ec4c3be2f62f45d8e8d92af7acd17f718160453', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: '22832f4fe0f19fd205a4ebd9b877c9a0cd2f2480' })))), h("div", { key: 'e18611105884d1ea01b85730bdf0d9e93eab7c6a', class: "pdf-reader__content" }, h("nav", { key: '9a05b26762127f52fdb63a942860b01cfa52d307', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: 'fd5dfe15a444d65b6c87ff28546c1b2406d0333c' }), !this.loadingThumbnails &&
+        return (h(Host, { key: '8500ac35d7a9380cd037c2b7f17adc706cfc6b53' }, h("section", { key: 'cf2d7c34831be477824b0c697ae0ca0b8d8baa81', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'd2a53c7cbbfd093de191745a6e5629321622b6e2', class: "pdf-reader__body", role: "document" }, h("header", { key: 'b32f611bb721c3cfc31c4d5fd1ae3eb46d027f2b', class: "pdf-reader__header" }, h("span", { key: '61cc92c181d5375503845dbe96ef0d56a9ba9f82', class: "pdf-reader__header-left" }, h("swirl-button", { key: '57994f8decbfac3e9863cc2a74d22082e1c79517', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'f3cc06cea6030c61d14efb62349e76aaa70005a8', class: "pdf-reader__label" }, this.label)), h("span", { key: 'a98497badc26330c84bfb503a86482eba924c303', class: "pdf-reader__header-center" }, h("span", { key: '926d7236986732e171c28276d5b7a2cba9f3c132', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '55bf749a36f39a933383666c5add4f2f62394e6e', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: '7ddddadc3f8f29babc3907aa8f117b1fe0667db3', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: '2bddd019b4f2b7e6caf6215395c2c55bef843669', class: "pdf-reader__zoom-select-container" }, h("select", { key: '60d79a7a8d3def70a3d1d8be9186c26d24a5dff4', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '70de3ddc1b70f8bd202d5aa03e11c75652735e27', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: 'a73793ec96df87ef0885bbb471ebef9dcbb2e4c4', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '4a34448c2cd7393c024df15f16bece14141fa58f', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: 'b9cc21dd515802086616c27c9b8269ee9be205b6', swirlPopover: this.menu }, h("swirl-button", { key: 'b9adc0c9b7bfcc4ec9d5d4dd9a86dcb369883064', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '71d94351684823613d8268dcd28f28e127e363f0', class: "pdf-reader__floating-tools" }, h("button", { key: 'a1589b08cc25ff3573c0c953cf25c439010977e4', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '8a396c1a609c22d8e0a906c1d3f39cc9bbc5d243' })), h("button", { key: '87ee784d61b0783faba502eb27ea3246013e7596', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: 'a1e197f99d553589b41c17762caba5985ee20183' })))), h("div", { key: '8e2fb4a4a4b203f08a739e2eb410b871a62a54b9', class: "pdf-reader__content" }, h("nav", { key: '72f79ca50eead8fd8ca2cb871d106ef44015048b', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '275c5173b3ac6e71fb3fbb08f2233e889216ad3c' }), !this.loadingThumbnails &&
             this.thumbnails.map((thumbnail, index) => {
                 const thumbnailClassName = classnames("pdf-reader__thumbnail", {
                     "pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
                 });
                 return (h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index), type: "button" }, h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
-            })), h("swirl-file-viewer", { key: 'ca272800cdcdce3f605d5dd53e8f5218e0d5365a', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), h("div", { key: '7a3afef914735cea6c8f8d323d0314cdedafcd88', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '6ce33c4a84353606a3018d93a82bb5bb80852eab', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: '0c5e4a5f03a5464d58cc4aa8fbbb6758856684cb', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: 'ad2eb652347bce726c428778cefa2a86b7844402' })), h("button", { key: '6124db37e2b9949ffe3336cde0c05f7674052dc8', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: '07308f8707a4d12db67ede0edaacf5dcdb7073c2' }))))), h("swirl-popover", { key: 'aa8610df6a778e41b8949c719870b28148490893', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'b4653edd3d065c0a45a64d302ed831c5c2326f1d' }, h("div", { key: '86c3277b30ac4ffd473ef80998ea2e3f65ab4734', class: "pdf-reader__meta" }, h("div", { key: 'a1705e39a5808d6d417f794a1e0b090745cde415', class: "pdf-reader__file-icon" }, h("svg", { key: '59e728d12adfb423ff7a845d499bc2acec67d325', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '9079fda4aa5ab4d7f95105c299fb6ee08a976861', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '42313a2ab0097864e9fc2b618617e173d1914343', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '7ceb511cc2979f27a3a56142ab095376743cb430', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '219867316ec943d253510248dc90faad53cfd3a4', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: '7425b1c27eb035e5082acea5396a9821069f8f6e', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: 'a8b134dfca777404d7dab651f84d713ee02723d5', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'ffe9947dcf986dc3a66fbc71a24f4c4858396115', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'ce6cef0ccb00cce4db041141e53885356b4072a4', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '2a3d69a2bae283ebc0da01362b30b08b81be4c22', class: "pdf-reader__file-info" }, h("swirl-text", { key: '323a8ca322cd1d3cb4948e6dd98293135f7a493c', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '32f1982eb5d35c5d34c81c41dba5f4b13d732a10', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: 'd2197b52aa95cd58ae2a4608167a099a7866fd5b' }), h("swirl-action-list", { key: '5126f98bb47855b656121982e561379d8d279b94', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: 'd997f6db02b672185cf8a21a7fab542be822f71c', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '3b6d7bc4d3dce51f52259ce4135104f042120cf8', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), h("swirl-file-viewer", { key: '86194207a35611f18c8cb82c8c338c94de37a9c5', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), h("div", { key: '951c58856aac66ccface90f7e388b1325d77068e', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '214684cff1897760d71b82669f4f01fd67fb64ce', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: '3fa42077f7ddb21195728621c76471e6943d3c8e', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: '859cd6c2a004ced15b6f69513a661ca13ff28a9f' })), h("button", { key: '8d9c8aaa1621c21b907c9ced14f6ecb99eaafd2f', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: '0b8db6eaf87572b7e28a34b442db0c0b95f07a5e' }))))), h("swirl-popover", { key: 'c6e12213f3906a65d985ccbcd2b970d3ed3a92eb', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'a2176c7e509319edaeef141aa5dfa36cfc73907d' }, h("div", { key: '471d382b2725c36fd77fdaa3fb94fd9763c8a466', class: "pdf-reader__meta" }, h("div", { key: '4473c102766e9ad549264403cc63d4a0430bc6d5', class: "pdf-reader__file-icon" }, h("svg", { key: '6a3affd88e0f8ca8cc70e6cd5e7acd350e717f56', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '8832e90d4514585a3bde9629a72275ee8843b00c', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'db49da23f164ebd4007637cdcab1ef1f503e2420', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '9f0400b81b5dfa108aa57d7939a9a02b5c31f0ac', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '86e8229c072850eafba3a375fc848a21790b85cc', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: '972ce44f68a375ac2765b1bf10a430f85f90fab8', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: 'c51a74036be29552666491562f69acf532c9ee64', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '4341198492825c0d8a9626a193571868c4e45411', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'c31325e24c209b898ceb74eee41014b16ab21d20', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '4fabf3d8ca73fd2ff60d7251ea3211687eff6bba', class: "pdf-reader__file-info" }, h("swirl-text", { key: '2dbeb43545edb344e190db390dddb09d24e89fb7', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: 'fe66eea3db0dcb7e00c0caec5fa0c23d18ffe02a', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '92270a3ea57335296b6acbf4097cf9d2c6760654' }), h("swirl-action-list", { key: '590012c2a20872ff4fdb56ff690c0150c8c6b818', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '4bdfeff3106d26131841a041fbebff37325656ee', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '6fe955007512ebff8c18efd3859c022ea50c03de', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
                 ? "<swirl-icon-download></swirl-icon-download>"
-                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '214607d1c1544a141b3ac3b4e367d9dc699f404b', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '0d0b4ea34331c0a4837780a0ff363ae79274e611', name: "menu-items" })))))));
     }
     static get is() { return "swirl-pdf-reader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js CHANGED Viewed

@@ -153,7 +153,7 @@ export class SwirlPopoverTrigger {
         return isActive;
     }
     render() {
-        return (h(Host, { key: 'a9dbbd684351c3f093ed75840488858b4c5fa7a7', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'ffe04ab2c0b62bd8f3a1b2a5a4f38bf87d9d5b43' })));
+        return (h(Host, { key: '8635a9b181e3ddcd3c1a01e32f5a7b6dbc290dd7', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'c3d6eb7684eb1646cb6a05df4fda700d16c7e231' })));
     }
     static get is() { return "swirl-popover-trigger"; }
     static get encapsulation() { return "scoped"; }

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

@@ -33,7 +33,7 @@ export class SwirlRadioGroup {
         }
     }
     render() {
-        return (h(Host, { key: '3ee44a3685b374a4a64d64d8d9f27c55d9968fba', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '62cae5d54ad743f75563cb484ca4cd4df494db63', class: "radio-group" }, h("slot", { key: '9055959f1fa0d10426085d4f25bd0658086dfc3a' }))));
+        return (h(Host, { key: '20cfe3303ab24061ba0f0bf28e39d10321f0ddb8', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '4bff97ac404263b1a30d0fd34aa3397fac391502', class: "radio-group" }, h("slot", { key: 'd5fd563a1b5cc79e9b8491fb9df23f041f31ab73' }))));
     }
     static get is() { return "swirl-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -32,7 +32,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: '3a52a7255a427ab6396f791ee8a695d00741b393', role: hostRole }, h("div", { key: '55f72260143dc62cc7251aac3a52a3b0097661fc', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: '293366c071daa7169d928a900ad9b00e423c9715', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '611e669dd7e2528b9d4873fbc8f7b2568192b5db', class: "resource-list-file-item__label-container" }, h("span", { key: 'e131906aff73d463db83e3eb72381ad823187aed', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '58368a1de66d29889c73c3f2ff3e232b55124edb', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: 'fd3f062b5715a64740a7abaecf6680f50fb32f71', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'ed44119786798e9b8a6f20c1c7071c1e0f1ff8a0', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'f08302b6172b364b54137a1af236d852b998b4dc', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '4d06e8a7219cbb16042aeac05aa0f8ba52e87ecc', size: "s" }))), showRemoveButton && (h("span", { key: 'b68708b6e9cd567937c1b192e0bbfdd4f9c6aa3d', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '02dfba022ad65617bfb41609892691d7e7879a5d', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: '38391a818605fcaec3bb3198d7a016cff92870b9', role: hostRole }, h("div", { key: 'ab79dc14a4b589a75b5f0fb33e1a731db7a6980d', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: 'f3458f305d79bf7063a468cea1cef7439b2231c8', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '2bfe48d235a87a288630bfcea83b99092bae69b4', class: "resource-list-file-item__label-container" }, h("span", { key: '2ac5a98202ffa170b81a5212821d1b0535ddb3dd', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'f2787790e1d2d27a339aee44d5a358c5c53e3f18', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '49b4fa3a63dcbaf3be8719f6fac11c9d447ec443', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '2f4aa8edf11d680022ce1f184afc89d77952350d', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'aebf71578b85fded07ddf822c408aa9a516e665b', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '44c2305ff277599cc8819060e89848316d40bd00', size: "s" }))), showRemoveButton && (h("span", { key: '8f5e17566c8bf8acf8ea6c6779b4c86947945e26', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '23437d236e3f351bb4673774a1cf4e15d429869e', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
     static get is() { return "swirl-resource-list-file-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,7 +11,7 @@ export class SwirlResourceListSection {
     render() {
         const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
         const childrenListRole = role === "listitem" ? "list" : undefined;
-        return (h(Host, { key: '3aa275cb5306ae292f261074133b07694d4e8f21' }, this.hasSeparator && (h("swirl-separator", { key: '59c62b6ce718c480038bbf743071c5f1b888f6e7', spacing: this.separatorSpacing })), h("div", { key: '6939db84d5d07d2916078b9698a2f4ca756f1b21', "aria-labelledby": "label", role: role }, h("span", { key: 'daccdf3607dd8587f4e8a96010c31eab20e95920', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'd30d9b373687055ee872e5ae28ac7a5b036210ec', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: '91ac08d8f5c4ae0ff1db41098cc71c18fa241502' })))));
+        return (h(Host, { key: 'ad73b675f2dac3f2254fe5c934898e941a2ffb0c' }, this.hasSeparator && (h("swirl-separator", { key: '2c1d0912f9bf10ce6be35dc3e0941068a11364a5', spacing: this.separatorSpacing })), h("div", { key: '4a147e505b1ab8fc9848dacd25529f2eef3a33ed', "aria-labelledby": "label", role: role }, h("span", { key: '52a42ab51d2907a6585d4e0f4795f1ee7b6df4c5', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'd5f56d957bcf9ea86f1ebf5eff8d1649a58fdea0', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: '765f646046a5aaadb5e0d704c621961d8fc0948b' })))));
     }
     static get is() { return "swirl-resource-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,11 +118,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: 'd1031615d59be2e17c0b23ca7abf7c035b6cd435', onKeyDown: this.onKeyDown }, h("div", { key: '8dcde5f5d53860b31ca8841e7d6431575f0418db', class: className }, h("swirl-popover-trigger", { key: '6b0f87fe64afa581646b9dbf7f14060d031a4324', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '4b1952ba092b5a1d607282eea65364fae752d087', class: "select__value-container" }, this.standalone && (h("span", { key: '7eb072eea5dcc08ae527c4f7391d932309531543', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '2739933c28cabb4ed7d48203808cc3de78197927', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '9c6a02b0a8263236dc8ab24a1bd5e391aaa9e2bc', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: 'c533f5a8e9ea5fcd2c75698bf999cf5aceec9528', onKeyDown: this.onKeyDown }, h("div", { key: 'f1d75d71dd5fd569883082fb0cc36e0dd0acc616', class: className }, h("swirl-popover-trigger", { key: 'c949e7ed55431de42353f14a60dc7518796d19c7', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '63718ba09fff33c26b90d583c7bc62ffb805d492', class: "select__value-container" }, this.standalone && (h("span", { key: '61367a9a667d5dc266b333774f822685fbde46bd', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: 'ca4dbe77ea103c58b12548a7a714602f4e303644', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '111f3ac7c2f62ade6518b935d24cd180e12dec85', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '07b4f6abc769e957e0f677fd4307d99518ebfac3', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '96b0cd2a3dc850c0049e4feefd01f21605a7f162', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: 'cb770fb13680cbd18358f27d9ff57295891669e9', class: "select__search" }, h("swirl-icon-search", { key: '15a676fcc790937b3c895acee0a70ab0a6f1e257', class: "select__search-icon", size: 20 }), h("input", { key: '5a51f57e110484ed1247372e5ca20bd9f5548cf2', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '0ceaa6d772d31cc24717a20f002eed2746ca3343', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '3327d160e78a0858957b1fe53b105ec7d59e13fa', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '8c9b26e7b8c931e00f0ba166343b02e491ca80a8', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '7adab3b703802035c466dcda4eeb05ca9de7aaa9', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '044d1d53062aed1145ccd0d4a53ef30f8fc472e5', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '1aac41b4a6d9ac91d1227622065b3c9682eb9253', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '1ab6fd1029534a3a9ef0896dcc073a55f48c00ed', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '97d19270357ccddfe54732e6c7e954aa89f565cc', class: "select__search" }, h("swirl-icon-search", { key: 'd319ae0563cdb4b8960f948a6bfe3120f78d5958', class: "select__search-icon", size: 20 }), h("input", { key: 'd7dc08fab7877ae9c9bed08961ef94bf14432a25', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '8440a2940b73149b8db60fbd5fc5f04a40ac97b4', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '853541359e3695d0d29d73fd025c2fc5842da386', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: 'cd9eaa70c8aa04656f53b2737eb3d10672d33d55', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '856c423dc7fb206a6a734cacdef4352cd2e90f87', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '2d253c5ca76038e5ab43e7ee7c048f6cd094f535', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css CHANGED Viewed

@@ -434,18 +434,25 @@
     gap: var(--s-space-2);
   }
-.shell-layout__secondary-nav-items--grid-view ::slotted(ul) {
+.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view ::slotted(ul) {
     flex-wrap: wrap;
     flex-direction: row;
     gap: var(--s-space-16);
   }
-.shell-layout__secondary-nav-items--grid-view ::slotted(ul > *) {
+.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view ::slotted(ul > *) {
     min-width: 0;
     max-height: none;
+  }
+.shell-layout__secondary-nav-items--tiled ::slotted(ul > *) {
     flex-basis: calc(50% - var(--s-space-8));
   }
+.shell-layout__secondary-nav-items--app-icon ::slotted(ul > *) {
+    flex-basis: calc(32% - var(--s-space-8));
+  }
 .shell-layout__main {
   overflow: hidden;
   background-color: var(--s-background-default);

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

@@ -24,6 +24,7 @@ export class SwirlShellLayout {
         this.browserForwardButtonLabel = "Navigate forward";
         this.collapseNavigationButtonLabel = "Collapse navigation";
         this.enableSecondaryNavGridLayout = true;
+        this.secondaryNavGridLayoutVariant = "tiled";
         this.expandNavigationButtonLabel = "Expand navigation";
         this.gridNavLayoutToggleLabel = "Grid";
         this.hideMobileNavigationButtonLabel = "Close navigation";
@@ -166,10 +167,12 @@ export class SwirlShellLayout {
     }
     setSecondaryNavItemsTiled() {
         this.secondaryNavItems.forEach((item) => {
-            item.tiled =
+            item.variant =
                 this.enableSecondaryNavGridLayout &&
                     (this.secondaryNavView === "grid" ||
-                        (this.navigationCollapsed && this.isDesktopViewport));
+                        (this.navigationCollapsed && this.isDesktopViewport))
+                    ? this.secondaryNavGridLayoutVariant
+                    : "default";
         });
     }
     restoreSecondaryNavState() {
@@ -205,25 +208,26 @@ export class SwirlShellLayout {
             "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: '145beb59a3a61eb54bdf0afb62910673a7f68f15' }, h("div", { key: 'fc8670543e559badd26edfef174b5841e32252ea', class: className }, h("header", { key: '93a9731c41b24095664fae994204465809eba542', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '1d6650ff78b19704eabf838c9f8b6a62ab21255f', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '7827b786a8fbde3b4710538ca0bcb34cd778a378', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'c9d882a8a68ec78c4eae18a230302a34cc4291fa', content: this.navigationCollapsed
+        return (h(Host, { key: '9c751493caa90c8d209cdaf802f3a2471cf2c43b' }, h("div", { key: '0d6a9b9c3747723307c4afd71bfa12ac678863ce', class: className }, h("header", { key: '4ae8c6df5ca8a88a03d7ebd8ae9a376c1b0cc7b0', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '086c1bdd5bf9ec288cfd6c94d323d69062368a53', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'fd246e7a0d5bcb6e615c178a52b80a79dcb372e3', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'f65d96f20f2d61a91d880357a7d0af5fa8920c93', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '1ab392572c7b366b49f03819099b327a6859f1d0', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: 'f26f8e633330956653e7931f54e5b055f7750c45' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '5738d3bf54bb5f193473fe526357e2db9a81be2e', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '179718ea90513e2fa688d0527edab4e0e2685630' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: 'fa8a132b5745c58bc9ca4a5127a050d8e2a322f5', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'c3dcc838e7345e587f099a0bf99e76071b851fa2', size: 20 }), h("swirl-visually-hidden", { key: 'c2b34b9dcfacd0f0959250675fcf05477298dc6d' }, this.browserBackButtonLabel)), h("a", { key: 'c70433fe8b668436d7de5861ef5e5c6739c12f2f', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '33c060e8e5f99860be1f96e2e1e3a1b6c416af40', size: 20 }), h("swirl-visually-hidden", { key: '85f09cc5e891a723b5b12a64d04f396c73ad9271' }, this.browserForwardButtonLabel)), h("slot", { key: 'fb3e7a7eaa86bdc45db5960adba4600c8cb70cc4', name: "left-header-tools" })), h("div", { key: '67551617c815eff767e57b617c9f99170276f6ca', class: "shell-layout__logo" }, h("slot", { key: '7f0b8a256cc9380aa49070007cd23aefab158331', name: "logo" })), h("div", { key: '0985541a454b5615eb33b8acf908927005ac5339', class: "shell-layout__header-right" }, h("slot", { key: '7d26b8cd00a5ba0ed6c79c24db9a49262c7536ff', name: "right-header-tools" }), h("button", { key: '5dded5c0b6c0f4f9fc79c560fef3cf8b684f72c3', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '53e5e7158b05226fa1c5a80218cf56d63f935a41', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '3f7905b838a01000eb53c37cc2d3d7fe0b9fb261' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '3c2b8574d4f753bc1a0720f4f2bb8ade0802d0f1', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+            : this.collapseNavigationButtonLabel))), h("a", { key: '5a8482c134dbe1c360b32acbaf1fa4827fa2e237', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '45360123d5147e80eeea2c3ec8a6b93350f1a3cc', size: 20 }), h("swirl-visually-hidden", { key: '0933277119b59c5d1336dcf42dca8c626a9e93c9' }, this.browserBackButtonLabel)), h("a", { key: 'e812ed7a623fb4d2fb97cf434ffdcf09cbfa51e2', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '5e78c3967302c0e5ba99f1e1922dca66a78f3f7c', size: 20 }), h("swirl-visually-hidden", { key: '228e4d052c359a30b5207b2463d8dcd270a5cb5c' }, this.browserForwardButtonLabel)), h("slot", { key: '922ad9dbc8f8e8ed3867d7b4993308ac43c7cf36', name: "left-header-tools" })), h("div", { key: '70b8cc0cbe8fa2f4439a96427c27b32309e82079', class: "shell-layout__logo" }, h("slot", { key: '7f5be19beae205048190df3462f342ceb80c7aa5', name: "logo" })), h("div", { key: '42ac3f772d663f7a0d3f977b79d4d692a01306b7', class: "shell-layout__header-right" }, h("slot", { key: '4afadfcc9a89264979dd24c418fad28ef043f019', name: "right-header-tools" }), h("button", { key: 'a1a7ffaa3260eaf2d91f30e24ecb121a0e4adc8b', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '5ea6514239f1d0bc5a18cad695257657dfe5a595', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '9d61e2a3d2ce3f7e8073cc96734679fc7e8a96c6' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '27eaec5b60d5dfbb4cf962d543c93f364b9e1c84', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'dd842d448e0a8c40bbcbf9e6c471b65391e656aa', name: "avatar" }))), h("div", { key: '21ec3253f535a6e11fc4e4b9d3275be16bef3e37', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '03ccd71ba07a10b25e2e6cc08fa35d20583d0af9', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '67d4bfd1af203813d62cc33ec30536f1d583fd2c', class: "shell-layout__mobile-header" }, h("slot", { key: '5a58cb78d82a485208d78f18a6344d8e6700f9de', name: "mobile-logo" }), h("div", { key: 'f97151a5d10dc38914ca0724ab4ef91605748946', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'bafbae1b3c90f0b3e4b8b307bab0fdaa921e6865', name: "mobile-header-tools" }), h("button", { key: '7da04b4e2eb07e8c20a22d90fa213e2b30abd9ac', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '103e4618977f434370e1798d1a51d320640a0fad', size: 20 }), h("swirl-visually-hidden", { key: '5abbf1644bf262e8d35c6067ea1c828f020d91d4' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '142f08f462b8bf8399d2bf2d6422d6e7315c570c', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '85b00ace5e31af100ede2cc0131bac6b6f775e94' }, h("span", { key: '41a713f916dadcc7e49487fb8ae6c09fa00fcc30', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '16ce50afbb39c9b07fef6101acad2ec2c4ba4586', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '03b3ce1513e83a0479c032aef4cdffb465f1124a', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '65e40b6c023d7d7a4dac4c66497196ed97f82b9f', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '1bbf9dcf3f7d371e6d4741b2981c9c577ca561c7', paddingBlockEnd: "16" }, h("swirl-stack", { key: '8f1c8e98897eb678eebc599dac9dc4335e0182cd', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'fad25f850b48d068ae362d3af46480f0216f388a', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '750f08ca2df6dd1b200b33c1c4a74067a8355816', name: "avatar" }))), h("div", { key: 'f6b8966a7a8c0b3381667f88440a9b5aa6d6180f', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '99af15ebba4f59849a42c536b357c3119e72a369', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'e8f0f3c7c22f3424b5da244a4f9e35d68a6df16b', class: "shell-layout__mobile-header" }, h("slot", { key: '688378a54a44173cbe601f152460b8233b2c722c', name: "mobile-logo" }), h("div", { key: 'b355ee02bd82221aac2a805cb28655c85adaa831', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '79b8058933acb81b6068c7f047ad4361c261880f', name: "mobile-header-tools" }), h("button", { key: 'bea6783adf1ae60de494396600e5b772222e345c', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '9cc9b6f61948e8311f29c7b23aca1d95673ed434', size: 20 }), h("swirl-visually-hidden", { key: 'c8f3710ff32046e1474291bb8459b746b742e5b6' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '61a889dca67f3af0a728cc64d9a55325640eb1ef', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '9581c3fd6fbfb88eca016e77ad41735caa6c7a43' }, h("span", { key: '560779789e0792aa360defb0eef73e5c5bfd63cc', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '91670892f54522f80500d9a0855690e56534485c', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'd393078255ba73d63350c65a7ebb0a67a72b9286', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '4bfb0409ffcf41c1c4a89bae77a33fcd1cfa9358', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'e30f4ddfb5b82eb2f8979909b0cff098cb0e7c91', paddingBlockEnd: "16" }, h("swirl-stack", { key: '0cf8f58c0d38e87dc5393b13e0b880ae3298f3ef', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '5c93d538b2e1a1912fd105db17513b916cba0a35', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
                 ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
                 : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
                 ? this.secondaryNavExpandLabel
-                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'a25fd052e4f847f6cca797c0f75441c103b32d85', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '0c1998573727739df3a79333390edabf8b202b71', icon: this.secondaryNavView === "grid"
                 ? "<swirl-icon-menu></swirl-icon-menu>"
                 : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
                 ? this.gridNavLayoutToggleLabel
-                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '58194ffa9a4de1213d32d4cb3be20abad06767a0', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '0016ff5a602a91b8ceb9ae880430f1cf646417e9', class: {
+                [`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
-                    (this.secondaryNavView === "grid" || mainNavCollapsed),
-            } }, h("slot", { key: '0f8de170a58e97c7247e32bd299be70801c39d4a', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '4eaff45b2e6ab9fa6b0ba750c743e72cf599f520', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'b9c9733e3fdba52431a5ac69b515a6096b5ff2de' })), h("aside", { key: 'c6bf67f8577ae161af4d0870aee0924b9774a406', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '4dd11812f5c370fbed3964bf499aca4e442a8b82', class: "shell-layout__sidebar-body" }, h("div", { key: '856529398cb2ee871550a8e16d411efbb08505ea', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '19fe1d49a68109ec28235ea18b8389bc59c66ea2', name: "sidebar-app-bar" })), h("div", { key: 'cd69d10323442c23387b0f08f80a0e361b7737ba', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: 'f36a07e5d839b96d6150fdc10f03d3ce124b5596', name: "sidebar" })))))));
+                    this.secondaryNavView === "grid",
+            } }, h("slot", { key: '713dd9ebb264042fd9d02fd4aca023b39f493b8e', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '731beca3e221213721ff45682fb1e92583ad3a85', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'cfb3e086eaa14d09b91957e46ad97372b4adcb92' })), h("aside", { key: 'cd5c9d5a4bdd1314dd91b6f66d2870b9ec2cb46e', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '3cffb268ef38cba98918b424d092b41217d2d045', class: "shell-layout__sidebar-body" }, h("div", { key: '4d16bd2adf9d09ead5ed0d0ebd5848807c932a2a', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '1098ee7a56eba10fb16fc7873d13d10b474bd3f0', name: "sidebar-app-bar" })), h("div", { key: 'aa5d4878ac74495f44486a598f7979359158ec06', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '9f6efd442c7955dd9a9c57e12ac68e5c81e3dfee', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }
@@ -338,6 +342,32 @@ export class SwirlShellLayout {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "secondaryNavGridLayoutVariant": {
+                "type": "string",
+                "attribute": "secondary-nav-grid-layout-variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlShellLayoutSecondaryNavGridItemVariant",
+                    "resolved": "\"app-icon\" | \"tiled\"",
+                    "references": {
+                        "SwirlShellLayoutSecondaryNavGridItemVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.tsx",
+                            "id": "src/components/swirl-shell-layout/swirl-shell-layout.tsx::SwirlShellLayoutSecondaryNavGridItemVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"tiled\""
+            },
             "expandNavigationButtonLabel": {
                 "type": "string",
                 "attribute": "expand-navigation-button-label",

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

@@ -69,22 +69,22 @@ const Template = (args) => {
     <ul slot="secondary-nav">
       <li>
-        <swirl-shell-navigation-item label="Reporting hub" with-gradient>
+        <swirl-shell-navigation-item filled inline-label label="Reporting hub" with-gradient>
           <swirl-app-icon src="/menu-item-1.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="My absences" with-gradient>
+        <swirl-shell-navigation-item filled inline-label label="My absences" badge-label="3">
           <swirl-app-icon src="/menu-item-2.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="IT self-service" with-gradient>
-          <swirl-app-icon src="/menu-item-3.png" slot="icon"></swirl-app-icon>
+        <swirl-shell-navigation-item filled inline-label label="IT self-service">
+          <swirl-symbol glyph="shopping-cart" size="24" slot="icon" ></swirl-symbol>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="Office door key" with-gradient>
+        <swirl-shell-navigation-item filled inline-label label="Office door key" with-gradient>
           <swirl-app-icon src="/menu-item-4.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
@@ -181,4 +181,5 @@ export const SwirlShellLayout = Template.bind({});
 SwirlShellLayout.args = {
     sidebarToggleBadgeAriaLabel: "3 new notifications",
     sidebarToggleBadge: true,
+    secondaryNavGridLayoutVariant: "app-icon",
 };