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

@getflip/swirl-components 0.361.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 (1784) hide show

package/dist/esm/swirl-icon-web-asset.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SwirlIconWebAsset = class {
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (h("svg", { key: '509910f06a2199a913b45e822223c95d82d16c9b', "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: '25aac79da40a999dc349d34db11561955d761098' }, h("path", { key: '09b0f66e450aa0958f9d8b0eac3e4b207232f68d', d: "M2.66665 13.3332C2.29998 13.3332 1.98609 13.2026 1.72498 12.9415C1.46387 12.6804 1.33331 12.3665 1.33331 11.9998V3.99984C1.33331 3.63317 1.46387 3.31928 1.72498 3.05817C1.98609 2.79706 2.29998 2.6665 2.66665 2.6665H13.3333C13.7 2.6665 14.0139 2.79706 14.275 3.05817C14.5361 3.31928 14.6666 3.63317 14.6666 3.99984V11.9998C14.6666 12.3665 14.5361 12.6804 14.275 12.9415C14.0139 13.2026 13.7 13.3332 13.3333 13.3332H2.66665ZM2.66665 11.9998H13.3333V5.33317H2.66665V11.9998Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'a86387c0ebfa56e6da6df2cf6cc477dd2540c1c3' }, h("path", { key: 'f8609e646174915c62ace5b8589554d0c32a9c3b', d: "M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'b4ba50031bdc66f74e02bbaedab9a201bf1da81c' }, h("path", { key: 'ec09ad363d75200e1c1d55c2ec95e346f0533c0c', d: "M4.66665 23.3332C4.02498 23.3332 3.47567 23.1047 3.01873 22.6478C2.56179 22.1908 2.33331 21.6415 2.33331 20.9998V6.99984C2.33331 6.35817 2.56179 5.80886 3.01873 5.35192C3.47567 4.89498 4.02498 4.6665 4.66665 4.6665H23.3333C23.975 4.6665 24.5243 4.89498 24.9812 5.35192C25.4382 5.80886 25.6666 6.35817 25.6666 6.99984V20.9998C25.6666 21.6415 25.4382 22.1908 24.9812 22.6478C24.5243 23.1047 23.975 23.3332 23.3333 23.3332H4.66665ZM4.66665 20.9998H23.3333V9.33317H4.66665V20.9998Z", fill: "currentColor" })))));
+        return (h("svg", { key: '515d445ab9e99560e793eb63c8cfe5f0c69383ff', "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: 'f9f9f7897ab8c650d46767d86ace60e88a99dcc3' }, h("path", { key: '8bba9d2d4769010ab2614a38a99ea1d10aa71933', d: "M2.66665 13.3332C2.29998 13.3332 1.98609 13.2026 1.72498 12.9415C1.46387 12.6804 1.33331 12.3665 1.33331 11.9998V3.99984C1.33331 3.63317 1.46387 3.31928 1.72498 3.05817C1.98609 2.79706 2.29998 2.6665 2.66665 2.6665H13.3333C13.7 2.6665 14.0139 2.79706 14.275 3.05817C14.5361 3.31928 14.6666 3.63317 14.6666 3.99984V11.9998C14.6666 12.3665 14.5361 12.6804 14.275 12.9415C14.0139 13.2026 13.7 13.3332 13.3333 13.3332H2.66665ZM2.66665 11.9998H13.3333V5.33317H2.66665V11.9998Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'e241ead07b27dd8b664975e91e6393cf4b6f167f' }, h("path", { key: 'a79444e270bc5ae267e87af27f928fd7a6c7d00e', d: "M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'bea6e02652d44f08df6c7808cb7ab684ca6c093f' }, h("path", { key: '6a235d0276f49fd0c1226e918b377a65afde37f1', d: "M4.66665 23.3332C4.02498 23.3332 3.47567 23.1047 3.01873 22.6478C2.56179 22.1908 2.33331 21.6415 2.33331 20.9998V6.99984C2.33331 6.35817 2.56179 5.80886 3.01873 5.35192C3.47567 4.89498 4.02498 4.6665 4.66665 4.6665H23.3333C23.975 4.6665 24.5243 4.89498 24.9812 5.35192C25.4382 5.80886 25.6666 6.35817 25.6666 6.99984V20.9998C25.6666 21.6415 25.4382 22.1908 24.9812 22.6478C24.5243 23.1047 23.975 23.3332 23.3333 23.3332H4.66665ZM4.66665 20.9998H23.3333V9.33317H4.66665V20.9998Z", fill: "currentColor" })))));
     }
 };
 SwirlIconWebAsset.style = swirlIconCss;

package/dist/esm/swirl-icon-work.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SwirlIconWork = class {
             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" })))));
     }
 };
 SwirlIconWork.style = swirlIconCss;

package/dist/esm/swirl-lightbox.entry.js CHANGED Viewed

@@ -306,7 +306,7 @@ const SwirlLightbox = class {
             "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" }))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-list.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const SwirlList = class {
         }
     }
     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' }))));
     }
 };
 SwirlList.style = swirlListCss;

package/dist/esm/swirl-menu-item.entry.js CHANGED Viewed

@@ -107,9 +107,9 @@ const SwirlMenuItem = class {
         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 }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-option-list-section.entry.js CHANGED Viewed

@@ -10,7 +10,7 @@ const SwirlOptionListSection = class {
         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' })))));
     }
 };
 SwirlOptionListSection.style = swirlOptionListSectionCss;

package/dist/esm/swirl-option-list_2.entry.js CHANGED Viewed

@@ -341,7 +341,7 @@ const SwirlOptionList = class {
     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 }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -389,7 +389,7 @@ const SwirlTag = class {
     }
     render() {
         const className = classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-        return (h(Host, { key: '9adef891e6a3c9e4828aaeeb81b78f03d82d8249' }, h("span", { key: '1ff7716b71b685c24e5879d362769f97137ed612', class: className, part: "tag" }, this.icon && (h("span", { key: 'ce835439476db27a25bc62edf7bd5bf48126f515', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '79eeb3d0b2e083cc21a5d39a3740ad66e55739c8', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'b63cbe0f7b37390d64e90209cfc2ac5082437814', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '3c67c1364f03e75bf057aac9b9efac9f04ddfcb9', size: 16 }))))));
+        return (h(Host, { key: '56651b3a213f322f6e09d22cc0194fa91f831be2' }, h("span", { key: 'c2e39d3ba416b70f39068f4edb82369d7982e7e3', class: className, part: "tag" }, this.icon && (h("span", { key: '4e20db185956ae9627bb89876c0c179aea46c30a', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'df0a3fc8e1b846e99a580f2a8eec142ed5dfcca0', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'ef934aa9f376b6e1308914c06a5158167691cfad', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '4664c9f4cbb7e744579b69b51b254829cbc37748', size: 16 }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-pdf-reader.entry.js CHANGED Viewed

@@ -180,15 +180,15 @@ const SwirlPdfReader = class {
             "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" })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-popover_2.entry.js CHANGED Viewed

@@ -436,7 +436,7 @@ const SwirlPopoverTrigger = class {
         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' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-radio-group.entry.js CHANGED Viewed

@@ -40,7 +40,7 @@ const SwirlRadioGroup = class {
         }
     }
     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' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-resource-list-file-item.entry.js CHANGED Viewed

@@ -38,7 +38,7 @@ const SwirlResourceListFileItem = class {
         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 }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-resource-list-section.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const SwirlResourceListSection = class {
     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' })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-select.entry.js CHANGED Viewed

@@ -124,11 +124,11 @@ const SwirlSelect = class {
             "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 }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-shell-layout.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { c as classnames } from './index-orsBiyT_.js';
 import { c as createFocusTrap } from './focus-trap.esm-DIdMBZfn.js';
 import { d as debounce, m as isDesktopViewport } from './utils-D_MUFqkF.js';
-const swirlShellLayoutCss = ".sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:18rem;--swirl-shell-sidebar-width:21rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:\"header header header\"\n      \"nav main sidebar\"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n          --swirl-shell-sidebar-width\n        )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__main.sc-swirl-shell-layout{width:100%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@media (min-width: 992px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar-body.sc-swirl-shell-layout{border:0.0625rem solid var(--s-border-default);transform:translate3d(0, 0, 0)}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n        --swirl-shell-sidebar-width\n      )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.1s;animation-fill-mode:forwards}.shell-layout--sidebar-scrollable.sc-swirl-shell-layout:not(.shell-layout--sidebar-scrolled-to-top) .shell-layout__sidebar-app-bar.sc-swirl-shell-layout{border-bottom-color:var(--s-border-default)}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.sc-swirl-shell-layout{display:none}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-2);right:var(--s-space-2);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 992px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none;flex-basis:calc(50% - var(--s-space-8))}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}.shell-layout__sidebar.sc-swirl-shell-layout{position:relative;display:none;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.shell-layout__sidebar-body.sc-swirl-shell-layout{z-index:1;display:flex;width:var(--swirl-shell-sidebar-width);height:100%;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);flex-direction:column}@media (min-width: 992px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:absolute;top:0;right:0;bottom:0;transition:transform 0.1s;transform:translate3d(calc(100% + var(--s-space-24)), 0, 0);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 1440px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:relative;transform:none;box-shadow:none;inset:auto}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid transparent}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
+const swirlShellLayoutCss = ".sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:18rem;--swirl-shell-sidebar-width:21rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:\"header header header\"\n      \"nav main sidebar\"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n          --swirl-shell-sidebar-width\n        )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__main.sc-swirl-shell-layout{width:100%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@media (min-width: 992px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar-body.sc-swirl-shell-layout{border:0.0625rem solid var(--s-border-default);transform:translate3d(0, 0, 0)}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n        --swirl-shell-sidebar-width\n      )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.1s;animation-fill-mode:forwards}.shell-layout--sidebar-scrollable.sc-swirl-shell-layout:not(.shell-layout--sidebar-scrolled-to-top) .shell-layout__sidebar-app-bar.sc-swirl-shell-layout{border-bottom-color:var(--s-border-default)}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.sc-swirl-shell-layout{display:none}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-2);right:var(--s-space-2);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 992px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(32% - var(--s-space-8))}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}.shell-layout__sidebar.sc-swirl-shell-layout{position:relative;display:none;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.shell-layout__sidebar-body.sc-swirl-shell-layout{z-index:1;display:flex;width:var(--swirl-shell-sidebar-width);height:100%;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);flex-direction:column}@media (min-width: 992px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:absolute;top:0;right:0;bottom:0;transition:transform 0.1s;transform:translate3d(calc(100% + var(--s-space-24)), 0, 0);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 1440px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:relative;transform:none;box-shadow:none;inset:auto}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid transparent}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
 const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
 const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
@@ -18,6 +18,7 @@ const SwirlShellLayout = class {
         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";
@@ -160,10 +161,12 @@ const SwirlShellLayout = class {
     }
     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() {
@@ -199,25 +202,26 @@ const SwirlShellLayout = class {
             "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" })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-shell-navigation-item.entry.js CHANGED Viewed

@@ -1,20 +1,41 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-CWOhMVtL.js';
 import { c as classnames } from './index-orsBiyT_.js';
-const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  --swirl-app-icon-size: 1.5rem;\n  --swirl-shell-navigation-item-gradient: linear-gradient(\n    rgba(0, 0, 0, 0),\n    rgba(0, 0, 0, 0.8)\n  );\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-8);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n    --swirl-app-icon-size: 2rem;\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      overflow: hidden;\n      border-radius: var(--s-border-radius-sm);\n      background-color: var(--s-background-default);\n      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n    --swirl-app-icon-size: 100%;\n\n    height: auto;\n    padding: 0;\n    align-items: start;\n    border-radius: var(--s-border-radius-base);\n    flex-direction: column;\n    container-type: inline-size;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n      background-color: transparent;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n        text-decoration: underline;\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n      position: absolute;\n      top: var(--s-space-12);\n      left: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      min-width: 100%;\n      height: auto;\n      min-height: auto;\n      border-radius: var(--s-border-radius-base);\n      background-color: var(--s-surface-sunken-hovered);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n          position: absolute;\n          display: inline-block;\n          width: 100%;\n          border-radius: var(--s-border-radius-base);\n          background-image: var(--swirl-shell-navigation-item-gradient);\n          content: \"\";\n          aspect-ratio: 1;\n        }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n      position: absolute;\n      top: -0.375rem;\n      right: -0.375rem;\n      padding: var(--s-space-2);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      display: -webkit-box;\n      overflow: hidden;\n      color: var(--s-text-default);\n      font-weight: var(--s-font-weight-semibold);\n      text-align: start;\n      white-space: normal;\n      text-overflow: unset;\n      overflow-wrap: anywhere;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n      position: absolute;\n      bottom: var(--s-space-12);\n      left: var(--s-space-12);\n      margin-right: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n        color: rgba(242, 242, 242, 1);\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n        color: rgb(25, 25, 25);\n      }\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n      color: var(--s-icon-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n      color: var(--s-text-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  width: 2rem;\n  min-width: 2rem;\n  height: 2rem;\n  min-height: 2rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__text-wrapper {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n  margin-left: var(--s-space-8);\n  font-weight: var(--s-font-weight-normal);\n  color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n  flex-shrink: 0;\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__badge {\n    position: absolute;\n    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item--gradient .shell-navigation-item__icon {\n    --swirl-shell-navigation-item-gradient: none;\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n";
+const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  --swirl-app-icon-size: 2rem;\n  --swirl-shell-navigation-item-gradient: linear-gradient(\n    rgba(0, 0, 0, 0),\n    rgba(0, 0, 0, 0.8)\n  );\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-8);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n    --swirl-app-icon-size: 2rem;\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      overflow: hidden;\n      border-radius: var(--s-border-radius-sm);\n      background-color: var(--s-background-default);\n      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n    }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n        width: 2rem;\n        min-width: 2rem;\n        height: 2rem;\n        min-height: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--filled {\n    padding: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n        color: var(--s-icon-on-action-primary);\n        background-color: var(--s-action-primary-default);\n      }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n    --swirl-app-icon-size: 100%;\n\n    height: auto;\n    padding: 0;\n    align-items: start;\n    border-radius: var(--s-border-radius-base);\n    flex-direction: column;\n    container-type: inline-size;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n      background-color: transparent;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n        text-decoration: underline;\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n      position: absolute;\n      top: var(--s-space-12);\n      left: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      min-width: 100%;\n      height: auto;\n      min-height: auto;\n      border-radius: var(--s-border-radius-base);\n      background-color: var(--s-surface-sunken-hovered);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n          position: absolute;\n          display: inline-block;\n          width: 100%;\n          border-radius: var(--s-border-radius-base);\n          background-image: var(--swirl-shell-navigation-item-gradient);\n          content: \"\";\n          aspect-ratio: 1;\n        }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      color: var(--s-text-default);\n      font-weight: var(--s-font-weight-semibold);\n      text-align: start;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n      position: absolute;\n      bottom: var(--s-space-12);\n      left: var(--s-space-12);\n      margin-right: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n        color: rgba(242, 242, 242, 1);\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n        color: rgb(25, 25, 25);\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n    --swirl-app-icon-size: 100%;\n    font-size: var(--s-font-size-xs);\n    padding: var(--s-space-8) var(--s-space-4);\n    align-items: center;\n    height: auto;\n    border-radius: var(--s-border-radius-sm);\n    flex-direction: column;\n    container-type: inline-size;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n      padding: var(--s-space-8);\n      --swirl-app-icon-size: 2rem;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n        max-width: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n        max-width: 2rem;\n        max-height: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      max-width: 3.5rem;\n      height: auto;\n      border-radius: var(--s-border-radius-base);\n\n      color: var(--s-icon-on-action-primary);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n      max-width: 3.5rem;\n      max-height: 3.5rem;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n      line-height: var(--s-line-height-xs);\n      text-align: center;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      display: -webkit-box;\n      overflow: hidden;\n      white-space: normal;\n      text-overflow: unset;\n      overflow-wrap: anywhere;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n      position: absolute;\n      top: -0.375rem;\n      right: -0.375rem;\n      padding: var(--s-space-2);\n    }\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n      color: var(--s-icon-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n      color: var(--s-text-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  width: 2rem;\n  min-width: 2rem;\n  height: 2rem;\n  min-height: 2rem;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n  margin-left: var(--s-space-8);\n  font-weight: var(--s-font-weight-normal);\n  color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n  flex-shrink: 0;\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__badge {\n    position: absolute;\n    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item--gradient .shell-navigation-item__icon {\n    --swirl-shell-navigation-item-gradient: none;\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n";
 const SwirlShellNavigationItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.hideLabel = false;
         this.inlineLabelColor = "default";
+        this.variant = "default";
+    }
+    componentWillLoad() {
+        this.forceIconProps();
+    }
+    componentDidRender() {
+        this.forceIconProps();
+    }
+    forceIconProps() {
+        const iconEl = this.el.querySelector("[slot='icon']");
+        const smallIcon = this.hideLabel || this.variant === "default";
+        if (iconEl &&
+            (iconEl.tagName.startsWith("SWIRL-ICON") ||
+                iconEl.tagName.startsWith("SWIRL-EMOJI") ||
+                iconEl.tagName.startsWith("SWIRL-SYMBOL"))) {
+            iconEl.setAttribute("size", smallIcon ? "20" : "24");
+        }
     }
     render() {
-        const tagClassNames = classnames("shell-navigation-item", {
+        const hasSwirlAppIcon = Boolean(this.el.querySelector("swirl-app-icon"));
+        const tagClassNames = classnames("shell-navigation-item", `shell-navigation-item--${this.variant}`, {
             "shell-navigation-item--active": this.active,
             "shell-navigation-item--boxed": this.boxed,
-            "shell-navigation-item--tiled": this.tiled,
+            "shell-navigation-item--filled": this.filled,
+            "shell-navigation-item--inline-label": this.inlineLabel,
             "shell-navigation-item--gradient": this.withGradient,
+            "shell-navigation-item--hide-label": this.hideLabel,
+            "shell-navigation-item--has-app-icon": hasSwirlAppIcon,
         });
         const labelClassNames = classnames("shell-navigation-item__label", {
             "shell-navigation-item__label--light": this.inlineLabelColor === "light",
@@ -26,9 +47,9 @@ const SwirlShellNavigationItem = class {
         const tooltipContent = this.description
             ? `${this.label} ${this.description}`
             : this.label;
-        return (h(Host, { key: 'c5fe604eba70c09f532850d9547ac77e63907b68' }, h("swirl-tooltip", { key: '9189209fec8308e2c7ded881cc09735e4bb7de01', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'dfc5ee51c08a90d6d0299e897a148d97b76ebe86', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '44b87e21631ded76bd2f4baa1223a13adc9d4dfa', class: "shell-navigation-item__icon" }, h("slot", { key: '4f81888c8feaa9b613dd35ac959e17a2c154f25b', name: "icon" })), !this.hideLabel ? (this.tiled ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { key: '2640130ad0d30190f9c682bbc84e81edf0bf010a', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        return (h(Host, { key: 'cad673a0a9f38a18a82ab1f54622780e95103f90' }, h("swirl-tooltip", { key: '28dc1e5db2a3c904b2510f796ad7bb1066ee796c', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '221d94e96b760edc1249924297af2d13fb99f12d', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '4ea0230ff658a088276ca156b22bd4bfc96bfa03', class: "shell-navigation-item__icon" }, h("slot", { key: '9dfb7a37d9e0cbcb515c09c8562a9e75657e5b47', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("span", { key: 'e7c51b017a8c6f9b2044274e4d22146f135fef79', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'f9f73e35ca63f46cdf352167568b524e9c808124', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
                 "shell-navigation-item__badge--dot": this.badgeLabel === "",
-            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))))));
+            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-skeleton-text.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const SwirlSkeletonText = class {
     render() {
         const className = classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
         const lineClassName = classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
-        return (h(Host, { key: 'bd88ab3103abad7e11d29553316290644c50d45b' }, h("div", { key: 'e069ab7ed44155fdab0899d11bc7d67556b8ba8c', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
+        return (h(Host, { key: 'ca789c1979612c8121b0f1ec5727cd62c284edf4' }, h("div", { key: 'e7e45b74354223b9a0f389d3728691ebbd2774c8', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
     }
 };
 SwirlSkeletonText.style = swirlSkeletonTextCss;

package/dist/esm/swirl-status-indicator.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const SwirlStatusIndicator = class {
     }
     render() {
         const className = classnames("status-indicator", `status-indicator--intent-${this.intent}`);
-        return (h(Host, { key: 'c11d1de029c227a62ec754932dc3616780815386' }, h("div", { key: '332ab9d0fd8db2a1d3c0b562ef2ff849291e32a6', class: className }, h("span", { key: '65f5047f4f60da82f412e65013d4df2d27e3811b', class: "status-indicator__dot" }), h("span", { key: 'f8147947a90569a2da16d8fea70e105061330e85', class: "status-indicator__label" }, this.label))));
+        return (h(Host, { key: '9d4ad3865c14201d4c16055c54072fa09967c20e' }, h("div", { key: 'd9389cadd7bda120c5faf806da14a4be3fce7628', class: className }, h("span", { key: 'dbc2cf0fe7feb1362d1446cf1f22c13cc7a41ae5', class: "status-indicator__dot" }), h("span", { key: '9c5cbad193d526b4cb7e31df069f6e1e0139d600', class: "status-indicator__label" }, this.label))));
     }
 };
 SwirlStatusIndicator.style = swirlStatusIndicatorCss;