@getflip/swirl-components 0.218.0 → 0.220.0

package/dist/cjs/swirl-icon-work.cjs.entry.js

@@ -20,7 +20,7 @@ const SwirlIconWork = class {
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (index.h("svg", { key: 'dcfb8c7516469f3031d6aa34b0a6ef3491f84286', "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 && (index.h(index.Fragment, { key: 'e37d3e349e2b15b882004dc615517ff546d9ba7c' }, index.h("path", { key: '957a4afcebbfe1fa815bee83b67a571406225964', 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) && (index.h(index.Fragment, { key: '9111eadcfb8f6da5730f0a0aa3b8291c12e8c3dc' }, index.h("path", { key: '941ebb89a11eb50cb04b6656cabdb584781c214f', 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 && (index.h(index.Fragment, { key: '7fb3b8a13eeb9d68aa2eaf6c9e5d804addb7816b' }, index.h("path", { key: 'c0823dc0a18a69c3605edade63989f2d14e88065', 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 (index.h("svg", { key: '4e88f72f3ffad925a8162070dacf122e6623fbc8', "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 && (index.h(index.Fragment, { key: 'ee8df2e1383e704ede913ed7518bcc7bbab764c9' }, index.h("path", { key: '31e6a1a8968995b90918060d508bf7091718de01', 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) && (index.h(index.Fragment, { key: 'ffc677d3ab4577f966e41d07cbf06cb296cdb5c5' }, index.h("path", { key: '8f7fc6db476e31a8ff5204a7052d93f7f71ce4c9', 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 && (index.h(index.Fragment, { key: '108111e99d73a87c0b3e85099221d7afeea7030d' }, index.h("path", { key: 'cef2b2c5b12a77272c0e6a63c09931d6d00911cb', 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 = SwirlIconWorkStyle0;

package/dist/cjs/swirl-image-grid.cjs.entry.js

@@ -26,7 +26,7 @@ const SwirlImageGrid = class {
     }
     render() {
         const className = index$1.classnames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
-        return (index.h(index.Host, { key: 'a2d6a77a82226db844b21118c6042c9efa960531' }, index.h("div", { key: 'e1f57f636073578ae510abdcc87a3a492030cd9f', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: this.aspectRatio } }, index.h("slot", { key: 'e7e88d0aae8b68eb1cc6521f5330dd5029e8a12c', onSlotchange: this.updateItems }))));
+        return (index.h(index.Host, { key: 'de4a1f5f21b67efb12441c4e74d9dfeb234ff2f9' }, index.h("div", { key: 'a2aa67b921e7c3f644b8966759bf02aa04093bd0', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: this.aspectRatio } }, index.h("slot", { key: '0be2c058b854b886cbc1e918d614f66a3f8241aa', onSlotchange: this.updateItems }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-lightbox.cjs.entry.js

@@ -268,7 +268,7 @@ const SwirlLightbox = class {
             "lightbox--hide-menu": !hasMenuItems,
             "lightbox--hide-toolbar": !hasToolbar,
         });
-        return (index.h(index.Host, { key: 'a6451b3c5b5669eff897bfc3449f55401eeddabe', onKeydown: this.onKeyDown }, index.h("section", { key: '79c5a26621145e98009410738db58f17e9b05280', "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 }, index.h("div", { key: 'eb95c3bae8d9e81b16f7ec0d2fec108c50c75bd2', class: "lightbox__body", role: "document" }, index.h("header", { key: '6823a6bd30479dc5f4319e850fe5857b04294449', class: "lightbox__header" }, index.h("button", { key: 'd78d3dae03f375d4b93f9eb19f466436ffedade3', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", { key: '1af36574fa29f10b74fbb96c0694fa734ca72b3a' })), index.h("div", { key: 'bc54167b11eb7daa2f7233e8d1af8c2f9c7a07f0', class: "lightbox__toolbar" }, index.h("slot", { key: '6eab449a8268bee4c6cc8414119e92273d7de13f', name: "toolbar" })), !this.hideMenu && (index.h("swirl-popover-trigger", { key: '1f74172b99f058af437fbdc9ef2b8ee787da1644', swirlPopover: this.menu }, index.h("button", { key: 'a5c44db2f99ae94771e24645bf9ccda910fd2627', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", { key: '7b45cf52c732ca0fefb705b57e02c760549e2db6' }))))), index.h("div", { key: 'a2c89da8d0f94ef4072e295eafa5d018436d5cd9', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: '799e0896ae78facc55252c1944d9a894ae567016', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: '44ea5b82f984d98465d649aa511d225ebeacc4a9', onSlotchange: this.registerSlides }))), index.h("div", { key: '23e72fcfeab86dd8710d23dff99e010534186b2f', class: "lightbox__controls" }, index.h("button", { key: 'f9689cebe30ef8dc410e6540fb21d8939f881396', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", { key: 'b95902df84cace03df4f28329e9f1f9085c224f8' })), index.h("button", { key: 'cdc8578495cafa71fbf9d05b37c6b989b7079290', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, index.h("swirl-icon-arrow-right", { key: 'eb9eb45c38467c6fb693d676b85f5bdf0d3c3088' }))), showPagination && (index.h("span", { key: '172582c50a8002ec8411208a80bbf8685ff4270e', class: "lightbox__pagination" }, index.h("span", { key: 'f6ddb1c1036946377502690c4d46306df725e88b', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.h("swirl-popover", { key: '829be0c0bf0ffce894d049cbbb8d309de14f287b', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", { key: '84a933f2ec19b8c52bfa199773f690f3a269c0c0' }, index.h("div", { key: 'efa98bd3158d818b30b6fad3fd88e03f2974382d', class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { key: '4006574b7962c02363f5ec575227c8300f850fe9', class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { key: '4d932193f1602d97a7d9c0bb3cac5993d1a0d06f', alt: "", src: currentThumbnailUrl }))), index.h("div", { key: '92da41f41e180722b332647455766486be0c41ff', class: "lightbox__file-info" }, index.h("swirl-text", { key: '617249bc0d9dba3dd62d35e10139da85ed80577d', truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { key: '45b628f59f8ad9406cc719fd9974a38f363babee', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && index.h("swirl-separator", { key: 'a8c0d46a4cb502f0c21929d73a805c987319a862' }), index.h("swirl-action-list", { key: 'ca1b1cf760e72d69ccd5abfc02f8ab07841ac92e' }, this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: '46384569ce732a455b577820738c286709361bee', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: '0371a4ee9b17ffbb313a2e8439516e52e93ae9f2', name: "menu-items" }))))))));
+        return (index.h(index.Host, { key: 'e77d197660a703953ba1d6d3857ef2d7176c8534', onKeydown: this.onKeyDown }, index.h("section", { key: '6d50e52f22e20a2111703de600972a086c0ebe19', "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 }, index.h("div", { key: '1abc1f64769758cd816a424c962570d692d31b87', class: "lightbox__body", role: "document" }, index.h("header", { key: '5bcd260c72bda642d6427abc44d74c85f6f7dfe5', class: "lightbox__header" }, index.h("button", { key: 'd2b1d7e14d52b1283e400dd4c8df13e2bb19f744', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", { key: '8927399729d541d87d6be4f82baa90d51e1f51ea' })), index.h("div", { key: 'ebdfa02ff0862bd94c96247e77e7f13af2be2a57', class: "lightbox__toolbar" }, index.h("slot", { key: '9993f92e956dd436d4e14cb45ff0cb00b782fb7c', name: "toolbar" })), !this.hideMenu && (index.h("swirl-popover-trigger", { key: 'c95f5408be5740ec4f8406430210c7e26cde9100', swirlPopover: this.menu }, index.h("button", { key: 'cea389a771cee628917d91158ab47c800aa20175', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", { key: '21aeafc0be54c7e39f577856c2392c0f512d9aea' }))))), index.h("div", { key: 'aa805db3810e8d66f884c4c77ccea459751bf7f0', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: '0a65beadc3152e86bc4074bed4dcce83dbcca2f9', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: 'd650b3aca9346fc8bd25997b881427d178450af9', onSlotchange: this.registerSlides }))), index.h("div", { key: '15f49fd8da0d749b9340b53bba40df2367d04881', class: "lightbox__controls" }, index.h("button", { key: 'b5e8d2d493f0fb4bc103085c4b7fdad49af1b219', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", { key: '024f34daf3c28322e45931047254eac3279dba13' })), index.h("button", { key: 'c56f936faea0b619c88ae3770c29d75ae682618d', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, index.h("swirl-icon-arrow-right", { key: 'b04dc0ae64309ed3d6b50f5341282d9ce9a4f253' }))), showPagination && (index.h("span", { key: 'e8b4a13c69c6f6afebd54e2dbc9b81c8b9b5e8ba', class: "lightbox__pagination" }, index.h("span", { key: '787f65b5dbd696892129edac0e8db14e4d6abaee', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.h("swirl-popover", { key: '8c19f40fe5306850bb3aa17b599883720ce423ff', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", { key: 'c1234b1bfb1eeb005a399e453593fe86639426e8' }, index.h("div", { key: '4992e46e7ca023911c68eb1619b501fdb9d35405', class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { key: 'ab7a923dda0477545aa01cd582f68082a651876b', class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { key: '8f5f000ca7ca3a9ba4bed536474a1d7421db71a4', alt: "", src: currentThumbnailUrl }))), index.h("div", { key: '0e16bd1a93156d3382e3d8757cd4703ecd6de64c', class: "lightbox__file-info" }, index.h("swirl-text", { key: '27ab6d629fa70916c03f0c20f18dd232309d118f', truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { key: 'effe250571e8d03bee06a5530aea88811e2d4ac9', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && index.h("swirl-separator", { key: 'd4bf376ca4fef49aa7082a03f3003ae48a38be30' }), index.h("swirl-action-list", { key: 'd54f60b6923e5e18f91b82bbc251581519f88abe' }, this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: '12fa845fc0aba41a8830062aa2adabee3c607043', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: 'c94bbc49415887b6960416e2a35412ba8ab02061', name: "menu-items" }))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-list.cjs.entry.js

@@ -18,7 +18,7 @@ const SwirlList = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8ad30096bc0537a9918b103f96ea4b7f1ae84059' }, index.h("div", { key: '123afaf19fb770a4d11e3f4758641e2ee41fec70', class: "swirl-list", ref: (el) => (this.containerEl = el) }, index.h("slot", { key: '7d988b3f14e8a77578df365a20bce26d00dc2401' }))));
+        return (index.h(index.Host, { key: 'd16e40e8a758a079aa9860d90c021dade8beebda' }, index.h("div", { key: '146b803331ef64d90e2506b2018084c74626b9f6', class: "swirl-list", ref: (el) => (this.containerEl = el) }, index.h("slot", { key: '230881f2c9b46a02865e50d41267a8acf2f7d830' }))));
     }
 };
 SwirlList.style = SwirlListStyle0;

package/dist/cjs/swirl-menu-item.cjs.entry.js

@@ -105,9 +105,9 @@ const SwirlMenuItem = class {
         const className = index$1.classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (index.h(index.Host, { key: '5ef4bbb0134d22f651c90fa0e1cee868484a13e6' }, index.h("div", { key: 'cab80d7b5d532b1c52f2e11ec564c26ae3ff49fb', class: className }, this.parentMenu?.variant === "selection"
+        return (index.h(index.Host, { key: 'fafe95aa9397039039ec5f71dcddfe1351726e4e' }, index.h("div", { key: 'e28e17f4a752b7e9e4875d157f272bdffd3fdd45', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), index.h("slot", { key: '4186ab4dd1f57adf93ace66414bfaaaeddcb6c1b', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), index.h("slot", { key: '02b2b8a79f265c2dd3054130e1bece803c945258', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-option-list-section.cjs.entry.js

@@ -13,7 +13,7 @@ const SwirlOptionListSection = class {
         this.label = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '26ed4f4d267525732dd32419a6ba2dc81aa77a18' }, index.h("div", { key: 'c33e5d85409d94953ca0c986e500626d6aebd5f9', "aria-labelledby": "label", class: "option-list-section", role: "group" }, index.h("span", { key: '86e79904eeb8e498c3428f46581ac0c0753fb299', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), index.h("div", { key: 'cb723a2c9192c6384e550b2c33bdf4a6d2f18190', class: "option-list-section__items" }, index.h("slot", { key: '1890fa460d588be3c57f16cffa6933555efc113d' })))));
+        return (index.h(index.Host, { key: '7832c066d756dced4a52cac10f6c7eaa2661f8bf' }, index.h("div", { key: 'a649220c09dc5a1b7c496c7599b7dfd319dab829', "aria-labelledby": "label", class: "option-list-section", role: "group" }, index.h("span", { key: 'f3ad9fc84c6f302eaf218d6a70e12a1f32b1b756', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), index.h("div", { key: 'd29fc5cf8dbf9b004548a596ff74d9896d82cab5', class: "option-list-section__items" }, index.h("slot", { key: 'ec35d551ccf1c6ae4ee5cf6cacabe59cb57c788f' })))));
     }
 };
 SwirlOptionListSection.style = SwirlOptionListSectionStyle0;

package/dist/cjs/swirl-option-list_2.cjs.entry.js

@@ -338,7 +338,7 @@ const SwirlOptionList = class {
     render() {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
-        return (index.h(index.Host, { key: '0bb4bb34c860168d4b8691cb5a53507a0a5e17b8' }, index.h("swirl-visually-hidden", { key: 'afd976b1bcb9ca48acbf9a7be7d9f1fdd6962de5', role: "alert" }, this.assistiveText), index.h("div", { key: 'e8f5d37473048f521a6868d5d1abc98dfbf8885d', "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 }, index.h("slot", { key: '404a24838c3a35d696ee7f4d629938dcd1d2a163' }))));
+        return (index.h(index.Host, { key: 'b2415f923db3c6ad75f3707bb45bf019162b710f' }, index.h("swirl-visually-hidden", { key: '93e72527b94ceabd8c94dbe86798e79b15bc6e44', role: "alert" }, this.assistiveText), index.h("div", { key: 'd0c53b14b21b22bceb2229edbac38328b60f1b3a', "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 }, index.h("slot", { key: '0441cf1b507abbf3559545c052d7d78eabab4e5b' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-pdf-reader.cjs.entry.js

@@ -191,15 +191,15 @@ const SwirlPdfReader = class {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (index.h(index.Host, { key: '88b8767c4d65382b32d9c96432d2fee802f7c5ae' }, index.h("section", { key: 'de94dc0b05166ba078704e408513828b7b602457', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'a231e172a9065dbbc98cb8b6dd2d8eae061f8b5e', class: "pdf-reader__body", role: "document" }, index.h("header", { key: 'f5c514833f742eeced324b08d4095412ed0b7ae9', class: "pdf-reader__header" }, index.h("span", { key: '4dad5837da881ee4deb7a21ef22b3ab326edc758', class: "pdf-reader__header-left" }, index.h("swirl-button", { key: 'e81450e56405e0000f71644705a3588ed34f6f40', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { key: 'a613301dcc0ea3f9820d7bddaa8c327fe426f07f', class: "pdf-reader__label" }, this.label)), index.h("span", { key: '3c6d278c0d9f973b7ab4d9e467c7da4238a3e7dc', class: "pdf-reader__header-center" }, index.h("span", { key: 'd4460f21eda92089010877ee8b0173320892bada', class: "pdf-reader__zoom-button-container" }, index.h("swirl-button", { key: '03042f46801d2cb6aca716a66f16d0c7699b3bac', 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 }), index.h("swirl-button", { key: '80c83fca0ea973acc1280a272cbfe31e2f245a25', 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 })), index.h("span", { key: 'f691e366f313a9863dfcfcc3a3789b91780e3a30', class: "pdf-reader__zoom-select-container" }, index.h("select", { key: '443b050a701f386d44e40086c7e5025a44c9a3fe', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { key: 'a5cb105cf30c424c6f8b89a2b5db12a8423c899e', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("swirl-icon-expand-more", { key: '1cc7592bb6a68b0e9808fe667447fde1ddb7305e', class: "pdf-reader__zoom-select-icon" }))), index.h("span", { key: 'fa6ea388add89a03640d00ce54d3c5a6b06714d2', class: "pdf-reader__header-right" }, index.h("swirl-popover-trigger", { key: 'cc60d413d25d6df62c60418d161a6323c1a30c6e', swirlPopover: this.menu }, index.h("swirl-button", { key: '108f3e7dd57cd39fb59cfdc50cc200aaf6671d16', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), index.h("span", { key: 'ea20d1254affa666e34d1661f4182f25e1c4e9e4', class: "pdf-reader__floating-tools" }, index.h("button", { key: '8685cb3c7b4198745344e937dbf409596f3c02a6', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, index.h("swirl-icon-menu-book", { key: '80a017d7a1a4fb85df80f7bd2e7a972726f4daed' })), index.h("button", { key: '27c9876a51fdb34efb2fc8a4c469356af1ae97c9', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, index.h("swirl-icon-file-copy", { key: '15d8d67b0d22d5692e78971bc812675407537f88' })))), index.h("div", { key: 'a123dee7510f198977dffc44a0e685868bf75a53', class: "pdf-reader__content" }, index.h("nav", { key: '037345a4d3590906694d189112b88eca4805c6a3', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && index.h("swirl-spinner", { key: '3276931fc8fbe92a8daa76455cd2863737ec9539' }), !this.loadingThumbnails &&
+        return (index.h(index.Host, { key: '19737265f69824938073976f581b1271e74670f4' }, index.h("section", { key: '96367a61da4385bd51fba24b550f649f78a86073', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '39cb46d3e0bb20ab3845d16aa2438a54a886f472', class: "pdf-reader__body", role: "document" }, index.h("header", { key: '9f36fcd71e1951fa66ddd6b56cc0c2f118791e48', class: "pdf-reader__header" }, index.h("span", { key: '049dcf0cea5b048d874f51f7557b2c14eb6bac25', class: "pdf-reader__header-left" }, index.h("swirl-button", { key: '15f38f9ac3a899b5062c25c55f2890500dec9ca5', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { key: '97a1c1d35d8ae10db26a117959d0d30cd43fa127', class: "pdf-reader__label" }, this.label)), index.h("span", { key: '2e4f6883ba867eef6cb9c9441f8ac5056890fe93', class: "pdf-reader__header-center" }, index.h("span", { key: '5e3f6f06681c27f6883c5ea84390cbb357d3dbff', class: "pdf-reader__zoom-button-container" }, index.h("swirl-button", { key: '963352b83451d2131429e7fd19fc81ec7332e0ee', 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 }), index.h("swirl-button", { key: '1e18af4f7aaad566f232e4ca601ae53fa879306b', 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 })), index.h("span", { key: 'aee95045af3e10d2440ec9cfd9d0099f837bc0a1', class: "pdf-reader__zoom-select-container" }, index.h("select", { key: '4a55b5fd27ad78ef81d79df634866b6565ef3449', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { key: 'e2446ce8f4523bbe5789bec8c63f824b5e0330b1', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("swirl-icon-expand-more", { key: '269d928e5e86a21925f060b8c74bbed1c0c9b26b', class: "pdf-reader__zoom-select-icon" }))), index.h("span", { key: 'ff7942296c9758d7d31fb83f11326a86339fade3', class: "pdf-reader__header-right" }, index.h("swirl-popover-trigger", { key: '05abaf0e7e7cbcc511ad612c461c2bd6eb71c80e', swirlPopover: this.menu }, index.h("swirl-button", { key: 'a20af72f0b9c852628f6e17d68cb2790b77e5b61', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), index.h("span", { key: '3e5dc269ad859cabf1d507bd17430762665d6bcd', class: "pdf-reader__floating-tools" }, index.h("button", { key: '6f8cf030d6076e37de5069afcf5d8b4186fb2a5e', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, index.h("swirl-icon-menu-book", { key: '0bfe741aa23c26981f9b83eec15f786f317d8387' })), index.h("button", { key: '5478329957d3d866b61bf9abc5b1147ec17f7b4b', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, index.h("swirl-icon-file-copy", { key: '09825f409225705c1e7d6068bcb68808ea7cac51' })))), index.h("div", { key: '5bd4f80418793803a02a13fc0a5b828575ce26c0', class: "pdf-reader__content" }, index.h("nav", { key: 'ce988af374074b41e5a5dfd6e45a88885f45e1bc', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && index.h("swirl-spinner", { key: 'd7ce5dadda0742481e3c5f208ed2f4d2c14b7aaa' }), !this.loadingThumbnails &&
             this.thumbnails.map((thumbnail, index$2) => {
                 const thumbnailClassName = index$1.classnames("pdf-reader__thumbnail", {
                     "pdf-reader__thumbnail--active": this.visiblePages[0] === index$2 + 1,
                 });
                 return (index.h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index$2 + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index$2), type: "button" }, index.h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
-            })), index.h("swirl-file-viewer", { key: '5b2df3980826a7954f3bb21ab0c72ef0ca6b8d4b', active: this.active, class: "pdf-reader__viewer", 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 }), index.h("div", { key: '92517fd9c930ab8f1712907937aec3b4b7691d4d', class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { key: 'e34a648ac1d7f531c44ad54d604fca456436127f', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("swirl-icon-fullscreen-exit", null)) : (index.h("swirl-icon-fullscreen", null))), index.h("button", { key: 'e5cbdf5ca651c1ea34e6688233a23ab834f435bd', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, index.h("swirl-icon-add", { key: 'd4eb05c751e18a8a7f232880c28c129b5d0615b9' })), index.h("button", { key: '73de0b5f8c1c4765f4716bec93c709a9ef8206b5', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("swirl-icon-remove", { key: 'd98dc20cc1276f77a97732617d0e1026b081b956' }))))), index.h("swirl-popover", { key: '88666117d11ecd030b72e4f83c13a923fe66091d', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", { key: '7096281b8456ba36bf23c33ec6f34b050087615d' }, index.h("div", { key: '1eaa8f07bdd39b7958b8725a4abc2c7f60098db1', class: "pdf-reader__meta" }, index.h("div", { key: '8cf0a7762471adbaffb01f73fd2938a659a30285', class: "pdf-reader__file-icon" }, index.h("svg", { key: 'b2a6230441a08c46e2e13ba90cba9ac236355ab1', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, index.h("path", { key: 'ab566923200765341c650104ea4e46e929f8344f', 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" }), index.h("path", { key: 'ca95396e903470a68715dd520b99d567892b0fce', 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" }), index.h("path", { key: 'cdedb88764e13f91a661778b825dbd973ff7793e', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), index.h("path", { key: 'b3e9296111501c8c71f9d4e2ddc5b360648ca663', 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" }), index.h("path", { key: 'c5b2beb520c7c251ba3d6b1baac0cdf2c450f7f8', 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" }), index.h("path", { key: '3f34504ea1abf2944a8a719da3124c61f153dabd', 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" }), index.h("path", { key: '789c2f3e360383028998a043548233d81bec574e', 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" }), index.h("path", { key: '5816ff1ec9aec7cb7376920d7e58155e51f4ab12', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), index.h("div", { key: '59ec835e287860c2d9027e9dad0c3a1ce36dd782', class: "pdf-reader__file-info" }, index.h("swirl-text", { key: 'e4a6bfcd1a41c8720f5f76c12b392dc44c6a08a0', truncate: true, weight: "semibold" }, this.label), index.h("swirl-text", { key: '8e0f79a89a100985a63e26ca090166e7f6a0f9c9', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && index.h("swirl-separator", { key: '47e64da12c68bfd877c7fad8a90f40f3d40c9077' }), index.h("swirl-action-list", { key: '688d67d52eb71b626bf54abd46b1a95bdd2b7fac', class: "pdf-reader__menu" }, this.printButtonEnabled && (index.h("swirl-action-list-item", { key: 'f2a994804688e228eb5db3d3f4019d114b3369f0', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: 'c24988dd8279a124f705797a1f33ad1c637bf658', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), index.h("swirl-file-viewer", { key: '0f473bc2cea4f66dd4c4109c1d46b92f8dfb4f13', active: this.active, class: "pdf-reader__viewer", 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 }), index.h("div", { key: 'cd1f4ce666fd9c82c657e8ffd4c64a5e3fb77c43', class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { key: '28433da50230018fe401e779e4503f3f3e93b3c0', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("swirl-icon-fullscreen-exit", null)) : (index.h("swirl-icon-fullscreen", null))), index.h("button", { key: '4bccf557a3b842184d759192ddd7d41d6b5be305', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, index.h("swirl-icon-add", { key: 'e11186caadf6292f4cf73b4ae435defd9f64fb35' })), index.h("button", { key: '861462f1c7d071b529aff7685c1f022c0691c6f1', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("swirl-icon-remove", { key: '7cef658b3504acd7f32404f03bd3fcf46a56b465' }))))), index.h("swirl-popover", { key: '9e3b57005c50a051eeb16084f904ba1660d24f4a', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", { key: 'eeec0d8c747ca344cef973f0f0e3f091922659c9' }, index.h("div", { key: '5f76ef9f887e27d550e9af2f80937eba8f3d647d', class: "pdf-reader__meta" }, index.h("div", { key: '47b05622a91509254344bb5a2fa2d6657fd389b0', class: "pdf-reader__file-icon" }, index.h("svg", { key: '1f598c152060cdf17ce7f9344231683266f59808', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, index.h("path", { key: '9cbb2b559393aabfdaf4c0e05e0859a3a4cdcc7c', 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" }), index.h("path", { key: '73d9ca4f76e5fe3cd288df2adb8657793c418457', 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" }), index.h("path", { key: '5ce046c68d3232dd18e2b9ebc0488dc6d7fb4ab3', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), index.h("path", { key: '112c10c855d3b093cd8d57eb57f5b717ccb1ee2b', 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" }), index.h("path", { key: '7fa8c654eca5c103cb6b5360fde452122a6b077d', 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" }), index.h("path", { key: '6a26d3be0049f2f2722c4d49633ee927bbe9d472', 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" }), index.h("path", { key: 'bd2f03038fd79c3ed56a0f96812a616f3e7eecdb', 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" }), index.h("path", { key: 'ce672689a97937776c8270111bcde880577fcbe6', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), index.h("div", { key: 'ef65ef514fb3a1aafdcbe421dc1fd3919bbca217', class: "pdf-reader__file-info" }, index.h("swirl-text", { key: '661f553ab7a8bb82b297743625a5a090ff291784', truncate: true, weight: "semibold" }, this.label), index.h("swirl-text", { key: 'b340616293bf101f8009714c3ac6575050171d4f', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && index.h("swirl-separator", { key: 'c3e7c98425c1b6dc03c28055f70d4d05f2c29db9' }), index.h("swirl-action-list", { key: 'd72e8dc6d64ce4aa71378d2d2276064ddf077aae', class: "pdf-reader__menu" }, this.printButtonEnabled && (index.h("swirl-action-list-item", { key: '25e40dc42f0e92b649246ef82017fc929c73cbb6', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: '93041f31b73064c5fd52ecf8f907a0b1fd5da176', 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 })), index.h("slot", { key: 'da77660ce4ad864a43c1f39a81590d8c45d69401', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: '45b9d61fa1997c72377ded499fa3fe406bf3d532', name: "menu-items" })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-popover_2.cjs.entry.js

@@ -436,7 +436,7 @@ const SwirlPopoverTrigger = class {
         return isActive;
     }
     render() {
-        return (index.h(index.Host, { key: '82a8dfc13e4d2b9b9a915a37d8dcad58c3881362', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, index.h("slot", { key: '64f0fb00addb63e6c41324fe9d08b8ce810326b3' })));
+        return (index.h(index.Host, { key: '586d13d26514cecbc36c2a83ac3171c3a87edef4', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, index.h("slot", { key: 'a2500b2e4bc64bf04961d57d197d97853b097437' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-radio-group.cjs.entry.js

@@ -47,7 +47,7 @@ const SwirlRadioGroup = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5efe1c51549015deaf2d4261de5bf93daa319deb', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, index.h("div", { key: '46f4016f4ea501d66e3bde4037ab243b6d98d18c', class: "radio-group" }, index.h("slot", { key: '856e42c56b0ca0e7bf9ecb4c4461ce3d33d7024b' }))));
+        return (index.h(index.Host, { key: 'a49cb989d72150f93d43a7e0d62cafaa4bfabc89', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, index.h("div", { key: '62bf5e3eb9bdac3e2c17b31514dc94cdb9fe634b', class: "radio-group" }, index.h("slot", { key: 'b9a54f4e760efc43fced225331c9568f86c1466a' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-resource-list-file-item.cjs.entry.js

@@ -47,7 +47,7 @@ const SwirlResourceListFileItem = class {
         const className = index$1.classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (index.h(index.Host, { key: '727c65aea2ea074bec9e05041a4f549cfcc86d46', role: "row" }, index.h("div", { key: '9dd9838512afa738a49d23a41f233652c243a624', class: className, part: "resource-list-file-item", role: "gridcell" }, index.h("span", { key: '07e28f216ed01632f76156e7088b89698002a919', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), index.h("span", { key: '8ee6f76a6ef750263233d46cdd466e6930eec671', class: "resource-list-file-item__label-container" }, index.h("span", { key: '0e12e8563edc13cea7221d0825efbdd6af583d4b', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (index.h("span", { key: '56c42aae6920075ba4d587ef7e57fba6b0801ca4', class: "resource-list-file-item__description" }, this.description)), showError && (index.h("span", { key: '14b7ef5bdb33bcbbc588eaddb0e2baadcdb19c95', "aria-live": "polite", class: "resource-list-file-item__error-message" }, index.h("swirl-inline-error", { key: '300d6f9cbe8258f1575d3c00185aa32b694c5115', message: this.errorMessage, size: "s" })))), showSpinner && (index.h("span", { key: 'b9395ff3f8c579b22744043e71899643b2ae8f7a', class: "resource-list-file-item__spinner" }, index.h("swirl-spinner", { key: 'c008b601885c78837900c379475f5a27124fe1f7', size: "s" }))), showRemoveButton && (index.h("span", { key: '0142e3672ac5bb9a62e788d7ee1a24644f906807', class: "resource-list-file-item__remove-button" }, index.h("swirl-button", { key: '4aaa16305e19c8b2789b89ef5c79a69c78045515', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (index.h(index.Host, { key: '5803d289d532ba0ff61e7669ee049b42b0c6c8ca', role: "row" }, index.h("div", { key: '7bd8025075e247d0196c363810098e33075fa47a', class: className, part: "resource-list-file-item", role: "gridcell" }, index.h("span", { key: 'b7ad82665ee5a3aa1a8d5ec45ccad9feedf76c83', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), index.h("span", { key: '0f3b1c4357f784b60eac618779eec051a4a3fbf2', class: "resource-list-file-item__label-container" }, index.h("span", { key: 'ee85317fbdbe0e1800fdac522196b63266fa1cdb', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (index.h("span", { key: '364ddf9d3f0c0317d941a4d3e9170023b825eb80', class: "resource-list-file-item__description" }, this.description)), showError && (index.h("span", { key: 'af2dad0b2736ba7eb916471de1bb08d13e5e9511', "aria-live": "polite", class: "resource-list-file-item__error-message" }, index.h("swirl-inline-error", { key: '9e922cad27ae691f0f5699dadcd902df672111db', message: this.errorMessage, size: "s" })))), showSpinner && (index.h("span", { key: '2072bc804350e9bca76f57550d375ea8ed0bca9c', class: "resource-list-file-item__spinner" }, index.h("swirl-spinner", { key: '7a75e22228554f87f5f63216f909ab25b56a0654', size: "s" }))), showRemoveButton && (index.h("span", { key: '6bdfa88e9ccf1c4bd23806a0e36c97142101121d', class: "resource-list-file-item__remove-button" }, index.h("swirl-button", { key: '343593c2452e3ed66c27e3d6582d476a0577e387', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
 };
 SwirlResourceListFileItem.style = SwirlResourceListFileItemStyle0;

package/dist/cjs/swirl-select.cjs.entry.js

@@ -129,11 +129,11 @@ const SwirlSelect = class {
             "select--multi": this.multiSelect,
             "select--search-loading": this.searchLoading,
         });
-        return (index.h(index.Host, { key: '3adc49a6d6ce0db2403cae131be7c5e50e3b79f4', onKeyDown: this.onKeyDown }, index.h("div", { key: '0528e332cb08b2b4653a408a3acea7c8d37824d1', class: className }, index.h("swirl-popover-trigger", { key: 'ff52a802c7894d57d9366e4ad9a16f8c031af54d', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.h("input", { key: 'efe6197c1b4765133301811c64393fd68466c0e2', "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 })), index.h("span", { key: 'f1638eedb3f350ac665a4432fa579da988a3706f', class: "select__multi-select-values" }, this.value
+        return (index.h(index.Host, { key: '84e02741750365b7f5daf3eba1320ed205cfd5a6', onKeyDown: this.onKeyDown }, index.h("div", { key: '14a54ae967dbac57c447935d305cee87d81f4667', class: className }, index.h("swirl-popover-trigger", { key: '3a53a2b9bead76c006a497782061f9d3f425f6c4', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.h("input", { key: '146b480206fc147624bf6b0ba675d968f529150d', "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 })), index.h("span", { key: 'b298fd5a5dcf3df6d62f7a7bcaca429a65d31884', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (index.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 })))), index.h("span", { key: '849a572970f9632875c155a439d5b43e42573735', class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.h("swirl-popover", { key: '831f911f034dd7297bc2e35de9e975f105200c79', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (index.h("div", { key: 'f7dac2dd1845ce73fa34d2d6b4f09261bbbda81f', class: "select__search" }, index.h("swirl-icon-search", { key: '261f81ac757cd561147aea6856db66f44a5ecc9e', class: "select__search-icon", size: 20 }), index.h("input", { key: 'ccdb3f6b18832dd0ec0482eea50355be818794ab', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (index.h("swirl-spinner", { key: 'ab0251ffc07ee2697e651380e0c7334cf6673dba', class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { key: '954d1ca701ad12b0527fb2f4557ac44044786604', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { key: '4fdbb489c14badd02c662bd3a19ca9d6c4901da0', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: 'd052ad7433e07bc70c7caa4c35465c138a95640a', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: '65b9f9b655f7aa9a402e84fc31048f04bc2ce09d', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), index.h("span", { key: '0fa4a1e14e4982a46e8367b7339ce66e2f0b7006', class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.h("swirl-popover", { key: '651479bcbd3ec58ef080e5879d35d8a217a951ef', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (index.h("div", { key: 'ba18886b2bd17ab25110697bc07561816a0dd827', class: "select__search" }, index.h("swirl-icon-search", { key: '9cedf138fe91b2f69b0114e450b1376b1a4ce45e', class: "select__search-icon", size: 20 }), index.h("input", { key: '4339e3b86c6ace20bd9206dc107442082dde1d65', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (index.h("swirl-spinner", { key: 'f6339fc323e441a9d6301f6693d73f80fd07811b', class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { key: '28d88888aaa0c65ae236e626bc76c4e605b28302', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { key: 'c70f20cacb9d66e65c226605e64af1a18a96ebd1', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: '09a661d90430c91ed6cece69ab2413e1b0cd18e0', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: '4abb059c6615744648b716865ee1e45e53246a14', onSlotchange: this.onSlotChange }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-shell-layout.cjs.entry.js

@@ -6,9 +6,11 @@ const index = require('./index-6aba64ed.js');
 const index$1 = require('./index-9f94303c.js');
 const focusTrap_esm = require('./focus-trap.esm-a1e3774c.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:14rem;--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.2s;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);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:hover{width:var(--swirl-shell-extended-nav-width);padding-right:var(--s-space-12)}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover){scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover)::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}@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.2s;animation-fill-mode:forwards}.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__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;border-bottom:0.0625rem solid var(--s-border-default);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-4);right:var(--s-space-4);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:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.2s, box-shadow 0.2s, width 0.2s;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:static;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.2s;inset:0}.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.2s;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 var(--s-border-default)}.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);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>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>*{max-width:100%;flex-basis:100%;max-height:3rem}@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--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;border-bottom:0.0625rem solid var(--s-border-default);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-4);right:var(--s-space-4);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{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout{flex-direction:row;flex-wrap:wrap;gap:var(--s-space-16)}.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>*{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 var(--s-border-default)}.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 SwirlShellLayoutStyle0 = swirlShellLayoutCss;
 
+const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
+const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
 const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
 const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
 const SwirlShellLayout = class {
@@ -16,6 +18,25 @@ const SwirlShellLayout = class {
         index.registerInstance(this, hostRef);
         this.sidebarToggleClick = index.createEvent(this, "sidebarToggleClick", 7);
         this.skipLinkClick = index.createEvent(this, "skipLinkClick", 7);
+        this.collectNavItems = () => {
+            this.mainNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item"));
+            this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"));
+            this.toggleNavItemLabels();
+        };
+        this.toggleSecondaryNavView = () => {
+            if (this.secondaryNavView === "grid") {
+                this.secondaryNavView = "list";
+            }
+            else {
+                this.secondaryNavView = "grid";
+            }
+            this.setSecondaryNavItemsTiled();
+            localStorage.setItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY, String(this.secondaryNavView));
+        };
+        this.toggleSecondaryNavCollapse = () => {
+            this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
+            localStorage.setItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.secondaryNavCollapsed));
+        };
         this.onNavigationToggleClick = () => {
             this.navigationCollapsed = !this.navigationCollapsed;
         };
@@ -25,9 +46,14 @@ const SwirlShellLayout = class {
         this.brandedHeader = undefined;
         this.browserBackButtonLabel = "Navigate back";
         this.browserForwardButtonLabel = "Navigate forward";
+        this.enableSecondaryNavGridLayout = true;
+        this.gridNavLayoutToggleLabel = "Grid";
         this.hideMobileNavigationButtonLabel = "Close navigation";
+        this.listNavLayoutToggleLabel = "List";
         this.navigationLabel = "Main";
         this.navigationToggleLabel = "Toggle navigation";
+        this.secondaryNavCollapseLabel = "Show less";
+        this.secondaryNavExpandLabel = "Show more";
         this.sidebarActive = undefined;
         this.sidebarToggleBadge = undefined;
         this.sidebarToggleBadgeAriaLabel = undefined;
@@ -36,8 +62,11 @@ const SwirlShellLayout = class {
         this.skipLinkLabel = "Skip to main content";
         this.mobileNavigationActive = undefined;
         this.navigationCollapsed = undefined;
+        this.secondaryNavCollapsed = undefined;
+        this.secondaryNavView = "list";
     }
     componentWillLoad() {
+        this.collectNavItems();
         const restoredSidebarState = localStorage.getItem(SIDEBAR_STORAGE_KEY) === "true";
         this.sidebarActive =
             this.sidebarActive === undefined
@@ -45,6 +74,14 @@ const SwirlShellLayout = class {
                 : this.sidebarActive;
         const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
         this.navigationCollapsed = restoredNavigationCollapseState;
+        if (this.enableSecondaryNavGridLayout) {
+            const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
+                "true";
+            this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
+            const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
+            this.secondaryNavView =
+                restoredSecondaryNavigationViewState;
+        }
     }
     componentDidLoad() {
         this.focusTrap = focusTrap_esm.createFocusTrap(this.navElement, {
@@ -55,6 +92,8 @@ const SwirlShellLayout = class {
                 },
             },
         });
+        this.toggleNavItemLabels();
+        this.setSecondaryNavItemsTiled();
     }
     componentDidRender() {
         this.focusTrap?.updateContainerElements(this.navElement);
@@ -80,6 +119,7 @@ const SwirlShellLayout = class {
     }
     watchNavigationCollapsed() {
         localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
+        this.toggleNavItemLabels();
     }
     watchSidebarActive() {
         localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
@@ -96,18 +136,49 @@ const SwirlShellLayout = class {
     async hideMobileNavigation() {
         this.mobileNavigationActive = false;
     }
+    toggleNavItemLabels() {
+        [...this.secondaryNavItems, ...this.mainNavItems].forEach((item) => {
+            item.hideLabel =
+                !!(this.enableSecondaryNavGridLayout && this.navigationCollapsed) ||
+                    (!this.enableSecondaryNavGridLayout && this.navigationCollapsed);
+            console.log(this.enableSecondaryNavGridLayout && this.navigationCollapsed);
+        });
+    }
+    setSecondaryNavItemsTiled() {
+        this.secondaryNavItems.forEach((item) => {
+            item.tiled =
+                this.enableSecondaryNavGridLayout && this.secondaryNavView === "grid";
+        });
+    }
     render() {
         const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
+        const hasSecondaryNav = Boolean(this.el.querySelector("[slot='secondary-nav']"));
         const className = index$1.classnames("shell-layout", {
             "shell-layout--branded-header": this.brandedHeader,
+            "shell-layout--secondary-nav-collapsed": this.secondaryNavCollapsed,
+            "shell-layout--has-secondary-nav": hasSecondaryNav,
             "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
             "shell-layout--navigation-collapsed": this.navigationCollapsed,
             "shell-layout--sidebar-active": this.sidebarActive,
         });
-        return (index.h(index.Host, { key: 'd315ef28d130e1fc10dbbb606916511b19d5f467' }, index.h("div", { key: '0f0a269b0f8a6b67eb039200fa8f9b98eb3e6ff3', class: className }, index.h("header", { key: 'b2b9f59f8f2a25882700bcf3451893b635983213', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: '859222c097851110652ea89a109362d2ed280e8c', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: 'b75223a555142320f107769fecd742d511d4a6ae', class: "shell-layout__header-left" }, index.h("button", { key: '4f0f4e227c7cc52666b35aaaf079259823fbb8a8', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { key: '91be8a326377ea330cacc6709124d2aad2fd814f', size: 20 }), index.h("swirl-visually-hidden", { key: 'd742eed3900bfd966d2ea543eef723f394097f5f' }, this.navigationToggleLabel)), index.h("a", { key: 'a0d9176d0c12ac010436d845fb36c97908584c95', class: "shell-layout__header-tool", href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: 'a6bfcfadbe6d01de1262b14e89da7871b405d985', size: 20 }), index.h("swirl-visually-hidden", { key: '1ff0d966b54c8e91daa775e37b3c02f6dd44cee4' }, this.browserBackButtonLabel)), index.h("a", { key: '2469f599e06633f40d50ddacfead004b77cf96c4', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: '4364d444a04b0aca533db2a2bef2ac6089922a98', size: 20 }), index.h("swirl-visually-hidden", { key: 'a48f450f8cc1f1726266d3ada9a36803a1328a0a' }, this.browserForwardButtonLabel)), index.h("slot", { key: '714ad146e5ad43a86c018536837a4dc23eed628a', name: "left-header-tools" })), index.h("div", { key: '87ad0ef7c7a0f35a658d9b0daf57118e4df99598', class: "shell-layout__logo" }, index.h("slot", { key: '3f330d36bc1568e469cc4310481a25448756146d', name: "logo" })), index.h("div", { key: 'e42f13ae9171d0cd442d855b5df4cf745311fc41', class: "shell-layout__header-right" }, index.h("slot", { key: '7427bfe33b59833bf7311a9905d4e8286deb6cf1', name: "right-header-tools" }), index.h("button", { key: '532a25c69f87f7f5c8d6e87190e416b39d52b03f', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { key: '5f93d9089940880c88f4e800e05e304a67e47adf', glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", { key: '39923c54703bf9e908c7a7e8926a6fb5a98e7f3a' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { key: 'fa3ee522e8bab1b665e07c90ead0a747d1dc5dd8', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+        return (index.h(index.Host, { key: '7623fb08b60fe150f78537cc7ffeb34ea08c5a8b' }, index.h("div", { key: '179a5334ff4a02e6761a4c3f061155bfcc886bac', class: className }, index.h("header", { key: '6029510b35fe789874ca90b95ecd9df72f055e79', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: '0ed34ec676012469679ac5310b4b4cef83bd9a1a', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: 'eb98efcc123b3b1438e3d6df18425085c33fc67a', class: "shell-layout__header-left" }, index.h("button", { key: 'fe70cdc5600c04b3d1eb8ab17b0ddff2419b5f9a', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { key: '5dbb38292980a18a5e0219977d785224309bbf69', size: 20 }), index.h("swirl-visually-hidden", { key: 'c5771fdc7066ee88f9ecf31861d696b18c811533' }, this.navigationToggleLabel)), index.h("a", { key: 'dcce38cd4e283fbe5a9efae02e1dd15927b37b4d', class: "shell-layout__header-tool", href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: '8ad40c88adc3f96df42af2db27e96fec8c965deb', size: 20 }), index.h("swirl-visually-hidden", { key: '8dd482cb80a11db8aa8a73886beb5ad2f3e780f0' }, this.browserBackButtonLabel)), index.h("a", { key: 'fe9ca3ea97e5c380d1d26f1c4dab70cce01e7992', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: '3241be06da7641df9ffe6ca5875f5a90b508e50a', size: 20 }), index.h("swirl-visually-hidden", { key: 'd024e25f155ae3fbc2102fd70e362e7b1b57cd78' }, this.browserForwardButtonLabel)), index.h("slot", { key: '2716c16471633c1b29f7a436d8c58a650d8d1f2a', name: "left-header-tools" })), index.h("div", { key: '883257e625335186493da36c0fdee5fe83adbc0d', class: "shell-layout__logo" }, index.h("slot", { key: '3ec15894bb6676a965423ddd0d269ee9e8f6b7cc', name: "logo" })), index.h("div", { key: 'caf685dc0a904fbf021cbbeab27ca39cb21d5e85', class: "shell-layout__header-right" }, index.h("slot", { key: '8c1323440c8f909ea1ec7b57ba7ed01c1e97837a', name: "right-header-tools" }), index.h("button", { key: '15435a247715f42cee8d2735befb5236d3fe7a40', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { key: 'dd8f71593d240e0b175043da2c15392032080984', glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", { key: '7fe157d80af2602ef5ab024335fc6ce1738515a2' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { key: '55b851f1e3506aea0b77f9579b2b560a1cb16a43', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '7dedf8360ed4d5bad6228994937523529b4ebc89', name: "avatar" }))), index.h("div", { key: 'e6cb8aec3c3232b048eca5315973504298225491', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: '4c1711ab0f9a2a6554bca5591d06bb4331d52c82', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: '3c8b393dbc5072d3498617d81fd899dd068b1b85', class: "shell-layout__mobile-header" }, index.h("slot", { key: 'f03b98afb12df22f7502477d662eb9a4767a6b08', name: "mobile-logo" }), index.h("div", { key: 'dc644d1a4d3ce0844414e3d9aed5df5a2383146a', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: 'af5fd7eb5adfe2fbf7170fb58a6c610b0fdfd3e7', name: "mobile-header-tools" }), index.h("button", { key: 'e709eb9c0e474d9bf0ed0577b06c83c4d8390d3b', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: 'f32e67084a8f7842a3a1d7970859ac3b544e4b3c', size: 20 }), index.h("swirl-visually-hidden", { key: '7e8537486fbc8a18c59d9e5dd4ac9ecfa34e1195' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: '5b39736a4651a3f1a4b83c1c268f24f8f1d35cdc', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: 'fb8ad9ebf0e751b3981bc32c19294c59dc5c4547' }, index.h("span", { key: '7fea308c53db770627e68f5e135c685c14b2a07d', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: 'b16f2836271b334cd7e8613df6c5f891832eb166', name: "nav" }))), index.h("main", { key: '2a9acbf31b45d97353fee7cd41d7b769f64c0acf', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: '035eab0952e753770127806112197ca4f196478d' })), index.h("aside", { key: '0c71632f9124d09b737f4d250afa173aa4197cf8', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, index.h("div", { key: 'bf5d4394a89307bd3ef4c2762b3ca029d82acc56', class: "shell-layout__sidebar-body" }, index.h("div", { key: '67621e75a1574bb45aa371b111ed9ffb811b9f24', class: "shell-layout__sidebar-app-bar" }, index.h("slot", { key: 'c25c4bbf3b657a370d7b3c91e2a198983092eefb', name: "sidebar-app-bar" })), index.h("div", { key: 'f5c37a506eb847cb28982785cc2b5469a701b553', class: "shell-layout__sidebar-content" }, index.h("slot", { key: '004e271b40ecb19582e7fcdabd092c2007cfeda9', name: "sidebar" })))))));
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '30faf24857b927774b5f99fb81bf969b7e9e79d9', name: "avatar" }))), index.h("div", { key: '3d306e78d42951897ce5fbeb3e4bbb020a8b705b', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: '1241e5d10b77daa77454d8f3157d4905c951bfd9', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: 'f1f10b0a9b928c9788fa45950b6db93f112f1b00', class: "shell-layout__mobile-header" }, index.h("slot", { key: 'ea2dd9d1b0721eb1cbee2194ae609f9b8efeb7e8', name: "mobile-logo" }), index.h("div", { key: '91684c95ab397db06f8fffa3302beeff90b34eef', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: 'a3b51069cb48e2624c99a3e36271cc9076ebc6b9', name: "mobile-header-tools" }), index.h("button", { key: '72faa9f199a14964662724e8deb2a96c527364b1', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: '3258dbb5f8b839cfc98d73e4620df3c7bc33260d', size: 20 }), index.h("swirl-visually-hidden", { key: '2e480b97affdfd914c3ab4ede0907b6b82d67ff6' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: '1a5350c2b6ef8a787345fc8a9f5824da2d6fd22f', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: '359d25014c23a189979e44eb8680f55b5a088e76' }, index.h("span", { key: 'b4890f60b20ca0c63a153f0fb5f7bfe49f4bf76e', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: '449ba439cf0185fd7bafe10e6122512e17471b9e', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: '753b0f3c050cfe1147f742bbab983ec9e2238b2e', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: 'c1cddd993040685ab1b587235bb0d8fc12f1945e', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: '9b0906021e329b2b35b62c0a6fa70e178b59df03', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: 'f4c6ca124dea40f980dab7980e39c26860d399e3', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: '500d0d44d9dc457b97b2cc0685178eb56b6a7494', hideLabel: this.navigationCollapsed, 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" }), !this.navigationCollapsed &&
+            !this.secondaryNavCollapsed && (index.h("swirl-button", { key: 'ac2ff76954943a20902c6733f87899a8b6186b34', 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" }))))), index.h("ul", { key: '845b1077674331b52d0226edec5fdca9d0de61d9', class: {
+                "shell-layout__secondary-nav-items": true,
+                "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
+                    this.secondaryNavView === "grid",
+            } }, index.h("slot", { key: '9729bdcef478c6d17aacd38a15e9f0dc83376bfd', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: 'b362c844b7cf75636b3f21537b45d2aca90a84d1', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: '869588df1374626baf1533895a826ad1b72770c4' })), index.h("aside", { key: '5fe6572ca71fc826296dceb3c86eaa557f492bcf', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, index.h("div", { key: '5a1ec6fa64fa3487c5bbfbac7c0a936f7b8484f5', class: "shell-layout__sidebar-body" }, index.h("div", { key: 'f76b0b784ae026799817e58a543383dfd03d3b6b', class: "shell-layout__sidebar-app-bar" }, index.h("slot", { key: '9a44404c205282ab06d9dd60bb08fe5b9907c558', name: "sidebar-app-bar" })), index.h("div", { key: '54b8de1ea6ef504ce7d0c308388393e736f4377e', class: "shell-layout__sidebar-content" }, index.h("slot", { key: '907b5f09dc7023209f22c3b1f272cd2c98655d27', name: "sidebar" })))))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "mobileNavigationActive": ["watchMobileNavigationState"],
         "navigationCollapsed": ["watchNavigationCollapsed"],

package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6aba64ed.js');
 const index$1 = require('./index-9f94303c.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  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 .shell-navigation-item__icon {\n      background-color: var(--s-background-default);\n      border-color: var(--s-border-default);\n      border-radius: var(--s-border-radius-sm);\n      border-width: var(--s-border-width-default);\n      border-style: solid;\n      overflow: hidden;\n    }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n\n    --swirl-app-icon-size: 2rem;\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__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  min-width: 2rem;\n  min-height: 2rem;\n  height: 2rem;\n  width: 2rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__label {\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__badge {\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\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__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: 1.5rem;\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-width: var(--s-border-width-default);\n      border-style: solid;\n      border-color: var(--s-border-default);\n      border-radius: var(--s-border-radius-sm);\n      background-color: var(--s-background-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    flex-direction: column;\n    container-type: unset;\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(swirl-app-icon) {\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__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      text-align: center;\n      white-space: normal;\n      text-overflow: unset;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\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__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__label {\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__badge {\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\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__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 SwirlShellNavigationItemStyle0 = swirlShellNavigationItemCss;
 
 const SwirlShellNavigationItem = class {
@@ -13,21 +13,24 @@ const SwirlShellNavigationItem = class {
         index.registerInstance(this, hostRef);
         this.active = undefined;
         this.badgeLabel = undefined;
+        this.boxed = undefined;
+        this.hideLabel = undefined;
         this.href = undefined;
         this.label = undefined;
         this.target = undefined;
-        this.boxed = undefined;
+        this.tiled = undefined;
     }
     render() {
         const className = index$1.classnames("shell-navigation-item", {
             "shell-navigation-item--active": this.active,
             "shell-navigation-item--boxed": this.boxed,
+            "shell-navigation-item--tiled": this.tiled,
         });
         const isLink = Boolean(this.href);
         const Tag = isLink ? "a" : "button";
-        return (index.h(index.Host, { key: '3b9da06bc8489be23524c44ba9e4233d41634b45' }, index.h(Tag, { key: '3bc1cdd3d85cf6195f6b849aef3c381721aa759c', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, index.h("span", { key: 'cd96abd061bb4c1e5111dbab8394df4014f75a08', class: "shell-navigation-item__icon" }, index.h("slot", { key: '31985243bc935898b51a9413b876dfeda6a86f2f', name: "icon" })), index.h("span", { key: '87d93d23051272547d1fc87d84a2ae89bb0dadc8', class: "shell-navigation-item__label" }, this.label), this.badgeLabel !== undefined && this.badgeLabel !== null && (index.h("swirl-badge", { key: '5681f67acd44b648464cb1710c4b05adeeb5acf7', "aria-label": this.badgeLabel, class: index$1.classnames("shell-navigation-item__badge", {
+        return (index.h(index.Host, { key: '10b9cb3f83a9d67135206f1e038887107fba0bbb' }, index.h("swirl-tooltip", { key: '46180efa727f07d7479b6fb22f59ddc458dd059d', active: this.hideLabel, content: this.label, delay: 200, position: "right", positioning: "fixed" }, index.h(Tag, { key: 'bc2123ae4c96e28835328dbde63824e8e7bffcdb', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, index.h("span", { key: '78890b527f8d61ee407f04b3dd4a5103056d7579', class: "shell-navigation-item__icon" }, index.h("slot", { key: '1967e2f135b86fb8a0fa24ca8a66b9478de52c7b', name: "icon" })), !this.hideLabel ? (index.h("span", { class: "shell-navigation-item__label" }, this.label)) : (index.h("swirl-visually-hidden", null, index.h("span", { class: "shell-navigation-item__label" }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (index.h("swirl-badge", { key: '55d63c7515f2acca98b6eef0d411737926835329', "aria-label": this.badgeLabel, class: index$1.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 index.getElement(this); }
 };

package/dist/cjs/swirl-symbol-account-circle.cjs.entry.js

@@ -16,7 +16,7 @@ const SwirlSymbolAccountCircle = class {
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
         const className = index$1.classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (index.h("svg", { key: 'dc279a66368a26bcc47fa09795dc4e4b11e7627a', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, index.h(index.Fragment, { key: 'bababc781f41248f5d6f1ac2ec45675de6d55f20' }, index.h("path", { key: '273c715cf195834f53d558311c3dd41f73dce15c', d: "M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 5C12.5933 5 13.1734 5.17595 13.6667 5.50559C14.1601 5.83524 14.5446 6.30377 14.7716 6.85195C14.9987 7.40013 15.0581 8.00333 14.9424 8.58527C14.8266 9.16721 14.5409 9.70176 14.1213 10.1213C13.7018 10.5409 13.1672 10.8266 12.5853 10.9424C12.0033 11.0581 11.4001 10.9987 10.852 10.7716C10.3038 10.5446 9.83524 10.1601 9.5056 9.66671C9.17595 9.17336 9 8.59334 9 8C9 7.20435 9.31607 6.44129 9.87868 5.87868C10.4413 5.31607 11.2044 5 12 5ZM12 19.2C10.8119 19.2 9.64219 18.906 8.59528 18.3441C7.54838 17.7823 6.65678 16.9701 6 15.98C6.03 13.99 10 12.9 12 12.9C14 12.9 17.97 13.99 18 15.98C17.3432 16.9701 16.4516 17.7823 15.4047 18.3441C14.3578 18.906 13.1881 19.2 12 19.2Z", fill: "currentColor" }))));
+        return (index.h("svg", { key: 'e333a2e8dc074dc1e94a782c1e946cf5dddcc38e', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, index.h(index.Fragment, { key: 'b7a9d4ff19be1213c3026b31cf547f54473647ea' }, index.h("path", { key: '5dbcb2d3938009117a1bc508636b8e3ec91c4fa8', d: "M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 5C12.5933 5 13.1734 5.17595 13.6667 5.50559C14.1601 5.83524 14.5446 6.30377 14.7716 6.85195C14.9987 7.40013 15.0581 8.00333 14.9424 8.58527C14.8266 9.16721 14.5409 9.70176 14.1213 10.1213C13.7018 10.5409 13.1672 10.8266 12.5853 10.9424C12.0033 11.0581 11.4001 10.9987 10.852 10.7716C10.3038 10.5446 9.83524 10.1601 9.5056 9.66671C9.17595 9.17336 9 8.59334 9 8C9 7.20435 9.31607 6.44129 9.87868 5.87868C10.4413 5.31607 11.2044 5 12 5ZM12 19.2C10.8119 19.2 9.64219 18.906 8.59528 18.3441C7.54838 17.7823 6.65678 16.9701 6 15.98C6.03 13.99 10 12.9 12 12.9C14 12.9 17.97 13.99 18 15.98C17.3432 16.9701 16.4516 17.7823 15.4047 18.3441C14.3578 18.906 13.1881 19.2 12 19.2Z", fill: "currentColor" }))));
     }
 };
 SwirlSymbolAccountCircle.style = SwirlSymbolAccountCircleStyle0;