npm - @getflip/swirl-components - Versions diffs - 0.362.1 → 0.363.1 - Mend

@getflip/swirl-components 0.362.1 → 0.363.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1799) hide show

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

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

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

@@ -303,7 +303,7 @@ export class SwirlLightbox {
             "lightbox--hide-menu": !hasMenuItems,
             "lightbox--hide-toolbar": !hasToolbar,
         });
-        return (h(Host, { key: '7f6be6f13f425eb2efd5ccc94a6bb71712c0fa8f' }, h("section", { key: '0788477eca3c76c45ab598e95bb337283ad6c20b', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '3a66395840f045a7de6065e129f2b09057d55088', class: "lightbox__body", role: "document" }, h("header", { key: 'fffe8d45e04cf494acd2a541718de9cc47a875cf', class: "lightbox__header" }, h("button", { key: 'd8ecd0ed4f6b5808e8b6b88f6ab909cdafc4263e', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: 'b904c3447e527180e8fc4c9761aca9a214fe6cec' })), h("div", { key: '57acdb3c06c754c5bf60f5e5e9757ebc89de93d6', class: "lightbox__toolbar" }, h("slot", { key: '06527231ac4290010c4fe34aed904b3f89df15cf', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '55c721ced438089b312bbbea1191c5a3f97e435f', swirlPopover: this.menu }, h("button", { key: '77060d3a0474567dfa372ef93aa05c4479b370f7', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '1c962faac2c01fe9467af48d01e2ac090263c471' }))))), h("div", { key: '2f0ca000620a8c23a36ec1f00ae39fe44e113d39', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '6f31a81ce7361d44753d3782575a3a6178bea7e4', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '133844ab8e3c6383d168dd2247e59844b040948b', onSlotchange: this.registerSlides }))), h("div", { key: 'bd1dec73494ec32ffd49ce4c74c840c6792ec1ec', class: "lightbox__controls" }, h("button", { key: 'dfe0e56f95f329856c90bffb55731453bd310fa2', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '5b2254043d1597b601931b4560a309585f5ee982' })), h("button", { key: 'de66d7b10cf628dc5ae23867cb66bf2054debe49', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: 'b6c541aac39201083923e7ff018281c5e2c5f341' }))), showPagination && (h("span", { key: 'ef7e293eaf6493f770f3d970114039787759877d', class: "lightbox__pagination" }, h("span", { key: '78105e6fc28878ae21b3af8f7a6c20f2dcc29d26', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '9b38d25720d30b88f3c9f697979c0171eb6ef1d7', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '232ecfd0ca2ed5dddcd353a02756a6394ea865c6' }, h("div", { key: '8d8da01c87d8fac284e0b2ddeda32aee39fdbdb9', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '34c0c0f35a91040ddf56f1c00e9abe441102b70d', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '9107df2bf56c495deb06a48172012f496c7e0a4a', alt: "", src: currentThumbnailUrl }))), h("div", { key: '766059cf298c5a202e901d00e27f84a58406dab8', class: "lightbox__file-info" }, h("swirl-text", { key: 'f8f20b9e0425223cf561efab33f2f9f99762c018', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '711e38e50401061ee45b5f3bd065b6f252ba7c53', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '3958a4b128f488b8d99db4ebd375e8c728d771e8' }), h("swirl-action-list", { key: 'bfc102c227898a53826236bb8067236ea19003f4' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'a4d166a5d704363232c3dbdb7f3b37fd8308aed5', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '252f55bf989f6322a780633fc0feb060bf32f2b8', name: "menu-items" }))))))));
+        return (h(Host, { key: '44d910830e39a36868fe66d53a63867f5fb3b168' }, h("section", { key: 'a7c5a890139cb8c2c7523916e6cf17620257539c', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: 'd10bfd490e4357b93bea59524e0f19c11c3e7810', class: "lightbox__body", role: "document" }, h("header", { key: '00b3b2e59b4032db3abdb2fcc2808897544149db', class: "lightbox__header" }, h("button", { key: '8b89ec0d67a43e6e8428ac89507ebdc235a95ef7', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: 'd03b3dd02e950027099f5d4536630f5e5aa0bc5d' })), h("div", { key: '8db361ccdb45adfc0fce5a6b128c13d5ed3f2733', class: "lightbox__toolbar" }, h("slot", { key: '8001809cc43fe056bcf86aa4681d7fe373e98f02', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '4168bd11c3667dfe1d582c1bffd2f17a7463c9fa', swirlPopover: this.menu }, h("button", { key: '89f77f50a11f80960b6d7f39e4666e18ae605e6b', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '3595d52f237c6ce012b2700e4d4417a97803e2b2' }))))), h("div", { key: '399160753822f2f0f1711bdd6366ec5522f9447a', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: 'b309112d65e9eed512136b47ae6150a55c4b4416', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '95e4849ed6439dee311ea66d834b6684743aba46', onSlotchange: this.registerSlides }))), h("div", { key: '62406e5da7cc9abba493ea1f9ef910460bbb2458', class: "lightbox__controls" }, h("button", { key: '1a64a164c299eed57192f52dfdcd0883c066b563', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '6242382bcdf891898f3789cb5540f392bf2d19aa' })), h("button", { key: '340d624373858a10bb7ba3d626ea988ad29d84ff', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: '7b3b2600b743b0952ece4341adc051470eba391e' }))), showPagination && (h("span", { key: '45d26dd55e5624692e4260c8b6ae5484c92f79d4', class: "lightbox__pagination" }, h("span", { key: 'fc83836a006e94b83e8cf5f5f741126f884e2975', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '85091a1d4d4fbc32fc74d3af716b95876fad2c50', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'bab174c78042d2643aaa75394d0ee35686930c5a' }, h("div", { key: 'c80b129793536f0375a13d01deabb41505666358', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '58acedc8dfe362f36ee02ea7b905368bed607a7e', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '6d60f865be2f0bdd82814156b377a0431d418aca', alt: "", src: currentThumbnailUrl }))), h("div", { key: '0f066e7a4716e726e7b816ad7a9d6cd7049241d6', class: "lightbox__file-info" }, h("swirl-text", { key: '1a239ec61e2afc202e3114796a47c37bd4a527bd', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: 'c4be1662bf79cfd1690f022bd8315eb584995be4', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '95f9496cd676af17c6b74d1406ec9cf425880699' }), h("swirl-action-list", { key: '9c734b754a5f0147b567c934265bceb643557478' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '623f4abebfe9506f62bfc592dc892fbb298c952c', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '4089046a45dd573437cbf4b095828a7f6ab9a2f2', name: "menu-items" }))))))));
     }
     static get is() { return "swirl-lightbox"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

@@ -9,7 +9,7 @@ export class SwirlOptionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '1127ea8e1b89aa1bd4c1d3348a197d592861543a' }, this.hasSeparator && (h("swirl-separator", { key: 'f426c4722d916cb5b18f7bb6ee231eb06271b02c', spacing: this.separatorSpacing })), h("div", { key: '0dce7898f76db7f13c2312b6ac5b20d00aeaa9cc', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '6d8e373b1540840cef7dc34996920235bbc12012', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: '4c83fae4b670a6136f54a9020d5986b2fbe79827', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'a717a93b3dd6863b415a368d48427cb2f0904920' })))));
+        return (h(Host, { key: '771df22b14cee7228fea2b337a2e1657caef0d88' }, this.hasSeparator && (h("swirl-separator", { key: '0ab3cc55ba61d078606604f1ca5db5b259aa43ec', spacing: this.separatorSpacing })), h("div", { key: '1ff69e05686a92e1a599bbfe49da333be178dc64', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'e0158975efa4255429b1616825ee55d0a23ce732', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: '7c53b0b484e8c22add4c065c47da24b606f8902c', spacing: this.spacing, align: "stretch" }, h("slot", { key: '68f19ef6a86bb8bc1e6782f080cb7596ddd51a0e' })))));
     }
     static get is() { return "swirl-option-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -174,15 +174,15 @@ export class SwirlPdfReader {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (h(Host, { key: '8500ac35d7a9380cd037c2b7f17adc706cfc6b53' }, h("section", { key: 'cf2d7c34831be477824b0c697ae0ca0b8d8baa81', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'd2a53c7cbbfd093de191745a6e5629321622b6e2', class: "pdf-reader__body", role: "document" }, h("header", { key: 'b32f611bb721c3cfc31c4d5fd1ae3eb46d027f2b', class: "pdf-reader__header" }, h("span", { key: '61cc92c181d5375503845dbe96ef0d56a9ba9f82', class: "pdf-reader__header-left" }, h("swirl-button", { key: '57994f8decbfac3e9863cc2a74d22082e1c79517', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'f3cc06cea6030c61d14efb62349e76aaa70005a8', class: "pdf-reader__label" }, this.label)), h("span", { key: 'a98497badc26330c84bfb503a86482eba924c303', class: "pdf-reader__header-center" }, h("span", { key: '926d7236986732e171c28276d5b7a2cba9f3c132', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '55bf749a36f39a933383666c5add4f2f62394e6e', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: '7ddddadc3f8f29babc3907aa8f117b1fe0667db3', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: '2bddd019b4f2b7e6caf6215395c2c55bef843669', class: "pdf-reader__zoom-select-container" }, h("select", { key: '60d79a7a8d3def70a3d1d8be9186c26d24a5dff4', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '70de3ddc1b70f8bd202d5aa03e11c75652735e27', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: 'a73793ec96df87ef0885bbb471ebef9dcbb2e4c4', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '4a34448c2cd7393c024df15f16bece14141fa58f', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: 'b9cc21dd515802086616c27c9b8269ee9be205b6', swirlPopover: this.menu }, h("swirl-button", { key: 'b9adc0c9b7bfcc4ec9d5d4dd9a86dcb369883064', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '71d94351684823613d8268dcd28f28e127e363f0', class: "pdf-reader__floating-tools" }, h("button", { key: 'a1589b08cc25ff3573c0c953cf25c439010977e4', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '8a396c1a609c22d8e0a906c1d3f39cc9bbc5d243' })), h("button", { key: '87ee784d61b0783faba502eb27ea3246013e7596', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: 'a1e197f99d553589b41c17762caba5985ee20183' })))), h("div", { key: '8e2fb4a4a4b203f08a739e2eb410b871a62a54b9', class: "pdf-reader__content" }, h("nav", { key: '72f79ca50eead8fd8ca2cb871d106ef44015048b', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '275c5173b3ac6e71fb3fbb08f2233e889216ad3c' }), !this.loadingThumbnails &&
+        return (h(Host, { key: 'f87b2b3a17aaf552e6f0dbc835b088eb536039ea' }, h("section", { key: '25b0731720226bed4184a5af5c71cf1e788ce48c', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'e92243994384e1f64b4d2428cac74b2530e758d7', class: "pdf-reader__body", role: "document" }, h("header", { key: 'ee43973e95458e858327f6aff41604960ef62b55', class: "pdf-reader__header" }, h("span", { key: 'd99b29226ab193058a2e0fff1c040ccf659afea2', class: "pdf-reader__header-left" }, h("swirl-button", { key: '8b8e4d8f98389f941ceac90cac49776411856ea2', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: '5e7997697d19d70423b2f165f91de9b16cb35caf', class: "pdf-reader__label" }, this.label)), h("span", { key: '9bcfde5a3c1a6b97cb43cc1ab927429684641a55', class: "pdf-reader__header-center" }, h("span", { key: '6c0132c6acc1e70364e821c1f739113b1cf522d3', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: 'd9ea9812f4733a4e3277c82116f68edfc53738a3', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: '11be2b56eee7d28c084f4e037cf2145a1faa9a51', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: 'bc9c90a84d42e856e12bbb0b8d3cb548779d8e86', class: "pdf-reader__zoom-select-container" }, h("select", { key: '181fcc00c792b3f3555eade3b54ef90d60c35857', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '3e98415364654611fd51e09ab695116bbc7f35ef', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: 'b423b9a5539bbb92ee274a71c58bf52b4f0301e6', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '77b0e060f06432b6e6bbb5772e5639e14ea49e9a', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '5a19c37fd2a0ad433dc3d4afe6a5ac42986b09b2', swirlPopover: this.menu }, h("swirl-button", { key: 'ae1142188d599d6356af3d0b4e95b83c5caa7c45', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '7acbbf877cd39623ec955d327e261b701f1d8ab4', class: "pdf-reader__floating-tools" }, h("button", { key: '70d0d3747756f09f3e11ea6ddf65c4babede31ec', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: 'e27fffb208d9833dc8e24bd3e04bd0fe0f8c0589' })), h("button", { key: 'e17bd59764ff227e1b8ff134246290cda9cfba7f', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: 'c58d3a80e58a10ce7632ce7ac28bcea58eccc224' })))), h("div", { key: '74d8c2e1ee69ad32af9b73ac2a496a764fadf477', class: "pdf-reader__content" }, h("nav", { key: '737e42464d5d2c6ba1efff03b3d03bdfff038f59', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '63b14085da166d9564ca9d6ccbf46d6561e90623' }), !this.loadingThumbnails &&
             this.thumbnails.map((thumbnail, index) => {
                 const thumbnailClassName = classnames("pdf-reader__thumbnail", {
                     "pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
                 });
                 return (h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index), type: "button" }, h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
-            })), h("swirl-file-viewer", { key: '86194207a35611f18c8cb82c8c338c94de37a9c5', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), h("div", { key: '951c58856aac66ccface90f7e388b1325d77068e', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '214684cff1897760d71b82669f4f01fd67fb64ce', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: '3fa42077f7ddb21195728621c76471e6943d3c8e', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: '859cd6c2a004ced15b6f69513a661ca13ff28a9f' })), h("button", { key: '8d9c8aaa1621c21b907c9ced14f6ecb99eaafd2f', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: '0b8db6eaf87572b7e28a34b442db0c0b95f07a5e' }))))), h("swirl-popover", { key: 'c6e12213f3906a65d985ccbcd2b970d3ed3a92eb', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'a2176c7e509319edaeef141aa5dfa36cfc73907d' }, h("div", { key: '471d382b2725c36fd77fdaa3fb94fd9763c8a466', class: "pdf-reader__meta" }, h("div", { key: '4473c102766e9ad549264403cc63d4a0430bc6d5', class: "pdf-reader__file-icon" }, h("svg", { key: '6a3affd88e0f8ca8cc70e6cd5e7acd350e717f56', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '8832e90d4514585a3bde9629a72275ee8843b00c', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'db49da23f164ebd4007637cdcab1ef1f503e2420', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '9f0400b81b5dfa108aa57d7939a9a02b5c31f0ac', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '86e8229c072850eafba3a375fc848a21790b85cc', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: '972ce44f68a375ac2765b1bf10a430f85f90fab8', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: 'c51a74036be29552666491562f69acf532c9ee64', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '4341198492825c0d8a9626a193571868c4e45411', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'c31325e24c209b898ceb74eee41014b16ab21d20', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '4fabf3d8ca73fd2ff60d7251ea3211687eff6bba', class: "pdf-reader__file-info" }, h("swirl-text", { key: '2dbeb43545edb344e190db390dddb09d24e89fb7', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: 'fe66eea3db0dcb7e00c0caec5fa0c23d18ffe02a', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '92270a3ea57335296b6acbf4097cf9d2c6760654' }), h("swirl-action-list", { key: '590012c2a20872ff4fdb56ff690c0150c8c6b818', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '4bdfeff3106d26131841a041fbebff37325656ee', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '6fe955007512ebff8c18efd3859c022ea50c03de', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), h("swirl-file-viewer", { key: '3858c868032472c3a59d514e91f58a5e460c0266', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), h("div", { key: '4242e07f8f5c8af6c93212aedb33af817914b65b', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '3b08e227ea2cc3ea9aae3d380f90f861f55184bb', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: 'ae351989ba28399ca41152f20cfaa3e1438b5600', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: 'c2b553e026fd580505dbd37c97f96a1a937db5db' })), h("button", { key: '0ee23b8b2ded7e117a7493ccb6c9dd2a90269bc2', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: 'c6c9373b8fef486199d6c6f0c40c30103d08dabc' }))))), h("swirl-popover", { key: '7c0b07d01e9e7fdc5df8f782b4c1f221ebd6b0dd', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'c735b038b60fd8a425057bbc745ba19600a28c68' }, h("div", { key: 'de929823da14fe898ca4f5f015677ec086432a58', class: "pdf-reader__meta" }, h("div", { key: '9c8d9abd3df26e0035521aa54199684c5e9b2865', class: "pdf-reader__file-icon" }, h("svg", { key: '2e01364248ea1b4f8baf4cb2f138927ee69e2406', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: 'b63ff107183509cea5c72ad8cdac419a61ac7492', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '993a8ebba103b08a1b3cb328516fb4a76da87d9b', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '70757211830be3d8ecb71b2729245238c22e6504', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: 'e17060418e5b6e4a9f55a7a071a0c5fdff893e33', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: '1c91b39fe992a45c49af2c1a3df633e19dd6ace1', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: 'a7d1b7d3ab97344a73a3ebef3c8e181d6e0099ac', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '5973e0b9ce3693c651f54716ba7e52f7bedda0d4', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'e3996205518df8bd5383db2c405f07fa45b80d30', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '33adf23b10eb44545baf003aeabd35b1ef53cc82', class: "pdf-reader__file-info" }, h("swirl-text", { key: 'c62b9ed3fc735956c07bf51554e85c2c3569d311', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '3f70a4750bf19d4a673f08f076ce95dae77228eb', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: 'a02b99f40ab20f2a6e90eacf4640e752ed595033' }), h("swirl-action-list", { key: '7b5e86ff8b0fbd6c80646141e88b59c904651878', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: 'db5d97aa1d4840357e18ecd20147c6e86d5a64f1', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '4ded273871f452184b41d9bd37b5292a8df6dcde', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
                 ? "<swirl-icon-download></swirl-icon-download>"
-                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '0d0b4ea34331c0a4837780a0ff363ae79274e611', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '186ede09cf84da2c4065d5aa3d554b617a3ee68b', name: "menu-items" })))))));
     }
     static get is() { return "swirl-pdf-reader"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

@@ -32,7 +32,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: '38391a818605fcaec3bb3198d7a016cff92870b9', role: hostRole }, h("div", { key: 'ab79dc14a4b589a75b5f0fb33e1a731db7a6980d', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: 'f3458f305d79bf7063a468cea1cef7439b2231c8', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '2bfe48d235a87a288630bfcea83b99092bae69b4', class: "resource-list-file-item__label-container" }, h("span", { key: '2ac5a98202ffa170b81a5212821d1b0535ddb3dd', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'f2787790e1d2d27a339aee44d5a358c5c53e3f18', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '49b4fa3a63dcbaf3be8719f6fac11c9d447ec443', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '2f4aa8edf11d680022ce1f184afc89d77952350d', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'aebf71578b85fded07ddf822c408aa9a516e665b', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '44c2305ff277599cc8819060e89848316d40bd00', size: "s" }))), showRemoveButton && (h("span", { key: '8f5e17566c8bf8acf8ea6c6779b4c86947945e26', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '23437d236e3f351bb4673774a1cf4e15d429869e', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: '8d7df714caf96ae412d4e0b49853f72d249aad4d', role: hostRole }, h("div", { key: '81ea67fb3c7773f0aae662a98c55f9f0c27a939b', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: 'bd4d4162d022394e4961b5770735c5314a4f14b1', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '3c7783464d3cdbae123f79842c41ac7193d17477', class: "resource-list-file-item__label-container" }, h("span", { key: '10b520ec9e47b3574122b5b5b99b0cb29ef07f5e', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'aabe9b9a894441922ee4ba37cb82b5c58dc0a3c4', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '7a7bb49fda62d453c698714cacaba79a7b73b0e6', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'd2f1a7c1e52313fd8f3772a807063524a71a6174', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '77a9633e4f48f45f59caad171da24ca63e144f8e', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '57afad00549fd06bf211a3b0c508d7498212d59e', size: "s" }))), showRemoveButton && (h("span", { key: '195ea94ca1753dda4d55e4804fac125be61bfdc4', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '176110b698c37080932fe6813db04bea3fef40e9', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
     static get is() { return "swirl-resource-list-file-item"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -118,11 +118,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: 'c533f5a8e9ea5fcd2c75698bf999cf5aceec9528', onKeyDown: this.onKeyDown }, h("div", { key: 'f1d75d71dd5fd569883082fb0cc36e0dd0acc616', class: className }, h("swirl-popover-trigger", { key: 'c949e7ed55431de42353f14a60dc7518796d19c7', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '63718ba09fff33c26b90d583c7bc62ffb805d492', class: "select__value-container" }, this.standalone && (h("span", { key: '61367a9a667d5dc266b333774f822685fbde46bd', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: 'ca4dbe77ea103c58b12548a7a714602f4e303644', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '111f3ac7c2f62ade6518b935d24cd180e12dec85', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: '0bcb3a3f377fde939dca3980358288d5f78c8ca0', onKeyDown: this.onKeyDown }, h("div", { key: '6833c3c7ef9e663469cc5f594da2f30e3c3fa777', class: className }, h("swirl-popover-trigger", { key: '32771d97198495ab16ac32365f3c3dc7f299bea9', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'f9e63d9d4f12ab0f2b316c89e6ea0130f6bfb6ce', class: "select__value-container" }, this.standalone && (h("span", { key: '36a6751c648a5bc2adbb63af26d74e7fa3fd1072', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '907e83a00b0ed9b42bf8fc445720607746f6afc2', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: 'ec1422d42126f825a4ef8254ae933da60785492d', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '1aac41b4a6d9ac91d1227622065b3c9682eb9253', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '1ab6fd1029534a3a9ef0896dcc073a55f48c00ed', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '97d19270357ccddfe54732e6c7e954aa89f565cc', class: "select__search" }, h("swirl-icon-search", { key: 'd319ae0563cdb4b8960f948a6bfe3120f78d5958', class: "select__search-icon", size: 20 }), h("input", { key: 'd7dc08fab7877ae9c9bed08961ef94bf14432a25', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '8440a2940b73149b8db60fbd5fc5f04a40ac97b4', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '853541359e3695d0d29d73fd025c2fc5842da386', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: 'cd9eaa70c8aa04656f53b2737eb3d10672d33d55', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '856c423dc7fb206a6a734cacdef4352cd2e90f87', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '2d253c5ca76038e5ab43e7ee7c048f6cd094f535', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '19252fe68708d54b2a6719db5075aaeb88909a6d', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '5700b4c62f397f0128c06b73ea39dc1c7f37030d', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '4753c2c5c75fd1aa9a54f1e77f955f5bb7e64e32', class: "select__search" }, h("swirl-icon-search", { key: '60a6bcf07d55ea548ab0ccd89730f956fe5e8405', class: "select__search-icon", size: 20 }), h("input", { key: '1c0897850fbf59456e7883c61c82b2f65baaa38a', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '3afd36022a16640bcc9a87e3fa4e2da3825c967c', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'd826f829792ada6d25699f9f357ac8e9ef845c36', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '3a56a48f6d504c56ea9deeedf13b7c99bb709ad6', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: 'a75b9cc0b6cded843353f3a416e04a510cf328e2', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'b07be8a7b59a0723474bcfc1b1a19965c0cd82cd', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -445,6 +445,12 @@
     max-height: none;
   }
+.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon ::slotted(ul) {
+      row-gap: var(--s-space-16);
+      -moz-column-gap: 0;
+           column-gap: 0;
+    }
 .shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled ::slotted(ul) {
     gap: var(--s-space-16);
   }
@@ -454,7 +460,7 @@
   }
 .shell-layout__secondary-nav-items--app-icon ::slotted(ul > *) {
-    flex-basis: calc(32% - var(--s-space-8));
+    flex-basis: calc(100% / 3);
   }
 .shell-layout__main {

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

@@ -97,7 +97,6 @@ export class SwirlShellLayout {
         this.collectNavItems();
         this.navMutationObserver = new MutationObserver(() => {
             this.collectNavItems();
-            this.setSecondaryNavItemsTiled();
         });
         this.navMutationObserver.observe(this.navElement, {
             childList: true,
@@ -136,6 +135,7 @@ export class SwirlShellLayout {
     watchNavigationCollapsed() {
         localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
         this.toggleNavItemLabels();
+        this.setSecondaryNavItemsTiled();
     }
     watchSidebarActive() {
         localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
@@ -208,26 +208,26 @@ export class SwirlShellLayout {
             "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: '9c751493caa90c8d209cdaf802f3a2471cf2c43b' }, h("div", { key: '0d6a9b9c3747723307c4afd71bfa12ac678863ce', class: className }, h("header", { key: '4ae8c6df5ca8a88a03d7ebd8ae9a376c1b0cc7b0', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '086c1bdd5bf9ec288cfd6c94d323d69062368a53', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'fd246e7a0d5bcb6e615c178a52b80a79dcb372e3', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'f65d96f20f2d61a91d880357a7d0af5fa8920c93', content: this.navigationCollapsed
+        return (h(Host, { key: '628b0239a6325d6e59d57a3ac122bd71c86332ac' }, h("div", { key: '62e3364f3d3f0a2529b34012b98970dc7afbc558', class: className }, h("header", { key: 'a4aaea70bae5ac06a8940a364623c0f1d9a0f7db', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'b119a9efebc481f0a89a7f6c8cbda5822c299657', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '65476e53eca4c4a13abe9d93f39a5d9b4eab2d10', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '3d6517107efcca90bd7e35e0821f785a1addc281', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '5738d3bf54bb5f193473fe526357e2db9a81be2e', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '179718ea90513e2fa688d0527edab4e0e2685630' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '3ad74046c3d2826bfd923989b5ddf00a3cf0cb09', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '4e4f4d2e355775dfb6ff15445672df7e51bf6df1' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: '5a8482c134dbe1c360b32acbaf1fa4827fa2e237', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '45360123d5147e80eeea2c3ec8a6b93350f1a3cc', size: 20 }), h("swirl-visually-hidden", { key: '0933277119b59c5d1336dcf42dca8c626a9e93c9' }, this.browserBackButtonLabel)), h("a", { key: 'e812ed7a623fb4d2fb97cf434ffdcf09cbfa51e2', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '5e78c3967302c0e5ba99f1e1922dca66a78f3f7c', size: 20 }), h("swirl-visually-hidden", { key: '228e4d052c359a30b5207b2463d8dcd270a5cb5c' }, this.browserForwardButtonLabel)), h("slot", { key: '922ad9dbc8f8e8ed3867d7b4993308ac43c7cf36', name: "left-header-tools" })), h("div", { key: '70b8cc0cbe8fa2f4439a96427c27b32309e82079', class: "shell-layout__logo" }, h("slot", { key: '7f5be19beae205048190df3462f342ceb80c7aa5', name: "logo" })), h("div", { key: '42ac3f772d663f7a0d3f977b79d4d692a01306b7', class: "shell-layout__header-right" }, h("slot", { key: '4afadfcc9a89264979dd24c418fad28ef043f019', name: "right-header-tools" }), h("button", { key: 'a1a7ffaa3260eaf2d91f30e24ecb121a0e4adc8b', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '5ea6514239f1d0bc5a18cad695257657dfe5a595', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '9d61e2a3d2ce3f7e8073cc96734679fc7e8a96c6' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '27eaec5b60d5dfbb4cf962d543c93f364b9e1c84', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+            : this.collapseNavigationButtonLabel))), h("a", { key: '0c4f8f92df65d9607166e4a1d07d9b2ecbc09a04', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '8c8df719671229b748f419711182b4b1d1b38a8f', size: 20 }), h("swirl-visually-hidden", { key: '974d1625c5f3a7bbe04faef98f68e51581777a00' }, this.browserBackButtonLabel)), h("a", { key: '9375147f7dba53cb62a8caa48a2b86373a5d656f', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '6c2b91011ce28f3f24252798d92b226d74389d36', size: 20 }), h("swirl-visually-hidden", { key: '05e66fdc139584c0e6b8d1b5b33fdf50aa636d52' }, this.browserForwardButtonLabel)), h("slot", { key: '5162118dfad58b80cb8f124b856dc438c7a6c473', name: "left-header-tools" })), h("div", { key: 'ab60ae994ef7e65eb932ada1af8f7d65d1cedf09', class: "shell-layout__logo" }, h("slot", { key: 'cdea707605a9b7c68dc0cc296820f6bc06297142', name: "logo" })), h("div", { key: '4c13e5878a20d867103b9feb3f9cb27aa6fef4d9', class: "shell-layout__header-right" }, h("slot", { key: '3c4acb3981f8b152893b2d212c64492eac0b7f53', name: "right-header-tools" }), h("button", { key: '71a135e5f35d75c982d1a8daf4df375b22587644', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '10ea578c29fbf33eb77c6b068b046e7be66ad516', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '51fccb8014557d06195689ec61b7255d4a0fb449' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '20d812a01969fd87159eff00da7f020e95b39f2e', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '750f08ca2df6dd1b200b33c1c4a74067a8355816', name: "avatar" }))), h("div", { key: 'f6b8966a7a8c0b3381667f88440a9b5aa6d6180f', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '99af15ebba4f59849a42c536b357c3119e72a369', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'e8f0f3c7c22f3424b5da244a4f9e35d68a6df16b', class: "shell-layout__mobile-header" }, h("slot", { key: '688378a54a44173cbe601f152460b8233b2c722c', name: "mobile-logo" }), h("div", { key: 'b355ee02bd82221aac2a805cb28655c85adaa831', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '79b8058933acb81b6068c7f047ad4361c261880f', name: "mobile-header-tools" }), h("button", { key: 'bea6783adf1ae60de494396600e5b772222e345c', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '9cc9b6f61948e8311f29c7b23aca1d95673ed434', size: 20 }), h("swirl-visually-hidden", { key: 'c8f3710ff32046e1474291bb8459b746b742e5b6' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '61a889dca67f3af0a728cc64d9a55325640eb1ef', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '9581c3fd6fbfb88eca016e77ad41735caa6c7a43' }, h("span", { key: '560779789e0792aa360defb0eef73e5c5bfd63cc', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '91670892f54522f80500d9a0855690e56534485c', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'd393078255ba73d63350c65a7ebb0a67a72b9286', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '4bfb0409ffcf41c1c4a89bae77a33fcd1cfa9358', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'e30f4ddfb5b82eb2f8979909b0cff098cb0e7c91', paddingBlockEnd: "16" }, h("swirl-stack", { key: '0cf8f58c0d38e87dc5393b13e0b880ae3298f3ef', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '5c93d538b2e1a1912fd105db17513b916cba0a35', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '0e4e5bd5060be685f7932bbb751c1d4018ca8501', name: "avatar" }))), h("div", { key: 'e13859eb6cb1241f2785cfd9d6e413d4b5377934', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '28712f6cae073f31ddf5008fd6c6a406eb96b143', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '3832ebc73dcf729177fcf52a8a0c7a49d65548cf', class: "shell-layout__mobile-header" }, h("slot", { key: 'a53481a65c10c81da3042f20f22cc0b7ab07a236', name: "mobile-logo" }), h("div", { key: 'de4d6a748d7807f43075af93263b3885cd10d0bf', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '6279924cf235bedfe903484b231c94710661b9fc', name: "mobile-header-tools" }), h("button", { key: 'c8bb1aa7eed100fb730c0ed9080c99ff653c65f2', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'a528085d6dbe080f92b94642d8598ce6b88353b0', size: 20 }), h("swirl-visually-hidden", { key: 'a96b1990f453de202370874d33bb39c17488353f' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'aa8b5c48091996f6b598e3dc40bb1c34993f2873', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '3ca6dfb2049669d5234827d2aaebdb4de3ebc129' }, h("span", { key: 'a95f9dbfa884188762b7f1f2f12f2874f0ddf386', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '5182c7cf4d4a8090f77ccd3ebb02fdc3310545f0', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'ae33f496399ad791199d20e5115b5ba5d7b4af52', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'b6fa20f6596cc6893191ebf8c73ab06729042df7', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '561badbcf05812085ab6deee1e8bc21d2c5114f8', paddingBlockEnd: "16" }, h("swirl-stack", { key: '3f7e37adc62d0e84c3766e99e6856d4f4f791f7a', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'e6c9ef70f5adc2cd706f587f2529c5e1f3eec275', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
                 ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
                 : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
                 ? this.secondaryNavExpandLabel
-                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '0c1998573727739df3a79333390edabf8b202b71', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '38cbe7241785b6f74ae8b097e5471fdfdfc37f62', icon: this.secondaryNavView === "grid"
                 ? "<swirl-icon-menu></swirl-icon-menu>"
                 : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
                 ? this.gridNavLayoutToggleLabel
-                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '0016ff5a602a91b8ceb9ae880430f1cf646417e9', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: 'f281e5540e6a30b69cf1b69d51749f74987c0bee', class: {
                 [`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
                     this.secondaryNavView === "grid",
-            } }, h("slot", { key: '713dd9ebb264042fd9d02fd4aca023b39f493b8e', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '731beca3e221213721ff45682fb1e92583ad3a85', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'cfb3e086eaa14d09b91957e46ad97372b4adcb92' })), h("aside", { key: 'cd5c9d5a4bdd1314dd91b6f66d2870b9ec2cb46e', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '3cffb268ef38cba98918b424d092b41217d2d045', class: "shell-layout__sidebar-body" }, h("div", { key: '4d16bd2adf9d09ead5ed0d0ebd5848807c932a2a', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '1098ee7a56eba10fb16fc7873d13d10b474bd3f0', name: "sidebar-app-bar" })), h("div", { key: 'aa5d4878ac74495f44486a598f7979359158ec06', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '9f6efd442c7955dd9a9c57e12ac68e5c81e3dfee', name: "sidebar" })))))));
+            } }, h("slot", { key: 'd4703ece0f8c3f0259a3475e546c4228a7e456a3', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '19866fcf65b21cd4822ffd3cfb8e114e61c64cb5', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '9fad863f37c5542b9c6942750a26a97819076040' })), h("aside", { key: '609c70a85bef0fe48088d3f065dbe951bdfd95c8', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '0ac65b1b87c2971771d9c539bf94b20c6173667e', class: "shell-layout__sidebar-body" }, h("div", { key: '86da5fdd6629ff641ccac52bd0590fb981c7fac3', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'f002916b3d97704079f70f0d5d961f6f49bd5905', name: "sidebar-app-bar" })), h("div", { key: '1b00cfdec4f37e7c457688438ce220df2c2599df', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '9f5c8633267ac25bc475db84b827b3f768d27924', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }

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

@@ -55,7 +55,7 @@ const Template = (args) => {
           </swirl-shell-navigation-item>
         </li>
         <li>
-          <swirl-shell-navigation-item label="Calendar">
+          <swirl-shell-navigation-item label="Calendar" mark-as-new>
             <swirl-app-icon icon="<swirl-icon-today size=&quot;24&quot;></swirl-icon-today>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>

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

@@ -44,7 +44,8 @@
     background-color: var(--s-surface-sunken-hovered);
   }
-.shell-navigation-item:hover .shell-navigation-item__badge {
+.shell-navigation-item:hover .shell-navigation-item__badge,
+    .shell-navigation-item:hover .shell-navigation-item__is-new-badge {
       --swirl-badge-border-color: var(--s-surface-sunken-hovered);
     }
@@ -52,7 +53,8 @@
     background-color: var(--s-surface-sunken-pressed);
   }
-.shell-navigation-item:active .shell-navigation-item__badge {
+.shell-navigation-item:active .shell-navigation-item__badge,
+    .shell-navigation-item:active .shell-navigation-item__is-new-badge {
       --swirl-badge-border-color: var(--s-surface-sunken-pressed);
     }
@@ -77,6 +79,7 @@
     }
 .shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {
+        border-radius: var(--s-border-radius-sm);
         width: 2rem;
         min-width: 2rem;
         height: 2rem;
@@ -185,11 +188,13 @@
   }
 .shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {
+      align-items: start;
       padding: var(--s-space-8);
       --swirl-app-icon-size: 2rem;
     }
 .shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {
+        border-radius: var(--s-border-radius-sm);
         max-width: 2rem;
       }
@@ -313,6 +318,18 @@
   --swirl-badge-border-color: var(--swirl-shell-background);
 }
+.shell-navigation-item__is-new-tag {
+  flex-shrink: 0;
+}
+.shell-navigation-item__is-new-badge {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.625rem;
+  flex-shrink: 0;
+  --swirl-badge-border-color: var(--swirl-shell-background);
+}
 @container (max-width: 4rem) {
   .shell-navigation-item__badge {
     position: absolute;

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

@@ -7,6 +7,7 @@ export class SwirlShellNavigationItem {
     constructor() {
         this.hideLabel = false;
         this.inlineLabelColor = "default";
+        this.markAsNewLabel = "New";
         this.variant = "default";
     }
     componentWillLoad() {
@@ -17,7 +18,8 @@ export class SwirlShellNavigationItem {
     }
     forceIconProps() {
         const iconEl = this.el.querySelector("[slot='icon']");
-        const smallIcon = this.hideLabel || this.variant === "default";
+        const smallIcon = (this.hideLabel && this.variant === "app-icon") ||
+            this.variant === "default";
         if (iconEl &&
             (iconEl.tagName.startsWith("SWIRL-ICON") ||
                 iconEl.tagName.startsWith("SWIRL-EMOJI") ||
@@ -41,14 +43,23 @@ export class SwirlShellNavigationItem {
             "shell-navigation-item__label--dark": this.inlineLabelColor === "dark",
             "shell-navigation-item__label--inline": this.inlineLabel,
         });
+        const hasBadge = this.badgeLabel !== undefined && this.badgeLabel !== null;
+        const showIsNewTag = !hasBadge &&
+            this.markAsNew &&
+            !this.hideLabel &&
+            this.variant === "default";
+        const showIsNewBadge = !hasBadge &&
+            this.markAsNew &&
+            this.hideLabel &&
+            this.variant === "default";
         const isLink = Boolean(this.href);
         const Tag = isLink ? "a" : "button";
         const tooltipContent = this.description
             ? `${this.label} ${this.description}`
             : this.label;
-        return (h(Host, { key: 'cad673a0a9f38a18a82ab1f54622780e95103f90' }, h("swirl-tooltip", { key: '28dc1e5db2a3c904b2510f796ad7bb1066ee796c', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '221d94e96b760edc1249924297af2d13fb99f12d', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '4ea0230ff658a088276ca156b22bd4bfc96bfa03', class: "shell-navigation-item__icon" }, h("slot", { key: '9dfb7a37d9e0cbcb515c09c8562a9e75657e5b47', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("span", { key: 'e7c51b017a8c6f9b2044274e4d22146f135fef79', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'f9f73e35ca63f46cdf352167568b524e9c808124', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        return (h(Host, { key: '8cdedcd426b2b2e2009c935f803d63426c4e4515' }, h("swirl-tooltip", { key: 'ef8e5f86988bbba1cfbe8c1dc446b6d3bb500446', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'f36579e7527c60cf9cd70565957b0b7dccf48c8e', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '69dfc89178aafac77250159e405bd5f4cc3e5e81', class: "shell-navigation-item__icon" }, h("slot", { key: '7ba883964fde4ebf9c38acb43a82c2d8994b4d0f', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: 'f4687790dafb0a89f136e3dc007533d2b1265884', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'a55a2eb28cf4d45c5f7f284f36508779cffee8cc', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
                 "shell-navigation-item__badge--dot": this.badgeLabel === "",
-            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))))));
+            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: 'ade609e7aca0567a3a81dbfb1b9c8b31ee24d45d', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: 'de0f0217eb8e3e5a3af86997931c60c638fb81b6', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
     }
     static get is() { return "swirl-shell-navigation-item"; }
     static get encapsulation() { return "shadow"; }
@@ -121,6 +132,25 @@ export class SwirlShellNavigationItem {
                 "setter": false,
                 "reflect": false
             },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "filled": {
                 "type": "boolean",
                 "attribute": "filled",
@@ -243,9 +273,28 @@ export class SwirlShellNavigationItem {
                 "setter": false,
                 "reflect": false
             },
-            "description": {
+            "markAsNew": {
+                "type": "boolean",
+                "attribute": "mark-as-new",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "markAsNewLabel": {
                 "type": "string",
-                "attribute": "description",
+                "attribute": "mark-as-new-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -260,7 +309,8 @@ export class SwirlShellNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"New\""
             },
             "target": {
                 "type": "string",

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

@@ -1,6 +1,11 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-shell-navigation-item.mdx";
 export default {
+    argTypes: {
+        markAsNew: {
+            description: "Only compatible with the default variant. Hidden if a badge label is set.",
+        },
+    },
     component: "swirl-shell-navigation-item",
     tags: ["autodocs"],
     parameters: {

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

@@ -7,11 +7,11 @@ export class SwirlSkeletonBox {
     }
     render() {
         const className = classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
-        return (h(Host, { key: 'b7d0def70588e3c02bf9256c5ecc6fa67bd7da21', style: {
+        return (h(Host, { key: '0766d24e9c6dd8b47f0cde12acc961798539a663', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
                     : undefined,
-            } }, h("div", { key: '90743565eeb02ab7384466699284c3ad9cca7e83', class: className, style: {
+            } }, h("div", { key: '78ef731b5c403dfe74d3034ac8bcef63e0bac16c', class: className, style: {
                 aspectRatio: this.aspectRatio,
                 borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
                     ? `var(--s-border-radius-${this.borderRadius})`

package/dist/collection/components/swirl-skeleton-text/swirl-skeleton-text.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class SwirlSkeletonText {
     render() {
         const className = classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
         const lineClassName = classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
-        return (h(Host, { key: 'ca789c1979612c8121b0f1ec5727cd62c284edf4' }, h("div", { key: 'e7e45b74354223b9a0f389d3728691ebbd2774c8', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
+        return (h(Host, { key: '77301b4779d053d7485e3fc056093c8aca75d56c' }, h("div", { key: 'd48fb445adb540f5fcc2a3c0fcfe64c263ef2be9', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
     }
     static get is() { return "swirl-skeleton-text"; }
     static get encapsulation() { return "shadow"; }