@getflip/swirl-components 0.266.0 → 0.268.0

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

@@ -12,7 +12,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: 'ca0675ab3fe0be2f500652f50f73a4f0f273f8d8', "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: 'dbeedb0cd2d6e91069aafd7775bef9550b87fb62' }, h("path", { key: '8b61894f1f49233cb4e83bec4ec3549ee63eb920', 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: '194d8ecb9f9c055ab1bfac2a781023761bb3acff' }, h("path", { key: 'ae31270cb8a187fed653ed9329d330d70cc19366', 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: '738070a10199f383e125bafcc4b56bd8d61b530e' }, h("path", { key: 'df0184ef2642ef2c5bed535d0ab6d3a44b8a62de', 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: 'ed5d8b69e945fceb4f4627194b368fc8b35defe2', "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: '4fad81f02c3179bcb51039f3726a66c3dba46f03' }, h("path", { key: '51cadfe90adfc7a8052ce349608f5528452ff64b', 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: 'a2a4479f87cf40c77efa2bd8bda48d4215f7e3da' }, h("path", { key: '8982a4b73b4fd74af31c3b350934d2f79d7741b9', 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: '462da3c885b6f4d82d9552c9fe72d7c52541d536' }, h("path", { key: 'ed79c91e2f966bff27898b400358c48d28e60cef', 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-image-grid/swirl-image-grid.js

@@ -35,7 +35,7 @@ export class SwirlImageGrid {
     render() {
         const className = classnames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
         const aspectRatio = this.caculateAspectRatio();
-        return (h(Host, { key: '131a2f1d4bc02ef11544fe75620281c1efbbc1d9' }, h("div", { key: '4e0fb1757826047b25ecc8178524683669db8152', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: 'e7230813974979dfa72fc5ab7cfee32709074ab0', onSlotchange: this.updateItems }))));
+        return (h(Host, { key: 'e7e8e372f4de47865fffbde57246e2413a67897e' }, h("div", { key: '35de4b85b5aa523b71c004b44615f36ec64aa9d6', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: '4f1e65ca0cacd9da2888fd5d40fc0f15f421a876', onSlotchange: this.updateItems }))));
     }
     static get is() { return "swirl-image-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -290,7 +290,7 @@ export class SwirlLightbox {
             "lightbox--hide-menu": !hasMenuItems,
             "lightbox--hide-toolbar": !hasToolbar,
         });
-        return (h(Host, { key: '5091d7ad68a22c9f108f4b6444ca61299e19e93d', onKeydown: this.onKeyDown }, h("section", { key: '22e44c119b639c138417d7de65fce903f9a880a6', "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: 'c44e313164204b46b7c0f90c66c6ec88cc0c86b7', class: "lightbox__body", role: "document" }, h("header", { key: '714f0b60f6f5a4628597d05f01e26f51af9b622c', class: "lightbox__header" }, h("button", { key: 'a6d6e7686fdff259941a841d66599657170e78a7', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: 'c7ab8037f1d6c29b7a0cbbecfed0a05935c51e81' })), h("div", { key: 'eccb464316e65b996b1825461168fabd45060ef0', class: "lightbox__toolbar" }, h("slot", { key: '79fe67d01702805aa0d4d782c5e064815ce56441', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '6ad695f0f851d6358ac0ed0ac4954c9f56a4c8b8', swirlPopover: this.menu }, h("button", { key: '6d3523ca498bd4f90b980ef4cd153ac15ab5066e', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '30bab603971cffa4fc1d122083c5968a3c45bbe8' }))))), h("div", { key: 'df914453f12e9cffcce57622a80069833b50031d', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: 'e914e5be82334ff681d5321a5be7361c10594ffd', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '041180d84e10fac6af2afed393a2883ccc50638a', onSlotchange: this.registerSlides }))), h("div", { key: '718bd95bf8a6894f1fedc8c64d78ec8f1cfd6f4f', class: "lightbox__controls" }, h("button", { key: '84ecc8a8cc90976cb9b6a4acdd47a0a71f3dcb94', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: 'ca033c8402b043b5ea2607e45e4ffc5d87c1c6ca' })), h("button", { key: 'ec6dc09f5b63b90aa2d3d2b21053811db33f8550', "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: 'd2b0e6811d60f97a03a81c56f3e4bebb88c650bc' }))), showPagination && (h("span", { key: '222a41dfabf159666e38d76aaadd19723ea3ac5b', class: "lightbox__pagination" }, h("span", { key: 'a8021f590904cf34a98f4068d788a35b2288a284', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '3da3c712035b283f3cb05130d7ad2fb09893174d', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '908bff69d55fc4979420671f1ef16531caf1bfca' }, h("div", { key: '5972538b582f2a5eeb248d3ccab39cc429b16d48', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: 'bfe6203b3f2a3e75689ed7e63e7bbb462ec00085', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '0085e917737c87f71db96bce1590e4bc57da0aaf', alt: "", src: currentThumbnailUrl }))), h("div", { key: '9021a8df9b85c4585c83f604af42c01a46138dd2', class: "lightbox__file-info" }, h("swirl-text", { key: 'c053d2b1300661908b00aff29ffddc0be2bf85f3', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '3147970c036b12df99dacc1996c1d74d8088331b', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '44578f2800c2731301fce61e6eab96f72e71c0f1' }), h("swirl-action-list", { key: 'a96c5761523b2d6d3f51f3ac2137ab03fcbfd68a' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '1bbb86f455ef87e630a9e43acf0482f7b372a41b', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'a98ffbce0d553685bb029a43b305b787c13b25b4', name: "menu-items" }))))))));
+        return (h(Host, { key: '182721b4da10932ff66236698970f5f266e80901', onKeydown: this.onKeyDown }, h("section", { key: '5fc9c2a102ba14e780f6ce2e07728ac5d24b64c8', "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: 'b7c89b7e62db72a840942dcbbf5cfd52aa94d6f1', class: "lightbox__body", role: "document" }, h("header", { key: 'e6b316dfb277f560cc2177c4f765796a24885d12', class: "lightbox__header" }, h("button", { key: '7c90fbd0f7f9681638eb48c4433fdf9b5c1242e5', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '4bfc4fb287d2faca7bba848fca75a0bc8f5781ab' })), h("div", { key: '7bf6cd43b2314b1e122d729cfb73435e521a0984', class: "lightbox__toolbar" }, h("slot", { key: '8ae8fa83a821716493ab1bf54630e1ee0d7a0e30', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: 'c08ff668d327a8503b6caae8038d2a7454617fcc', swirlPopover: this.menu }, h("button", { key: '38abb5da9118863964c766ee815c551ade3f57a6', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '5f7d652c2b7e7764e42f34bf8e2ecda03d541ab3' }))))), h("div", { key: 'b4ead749cea4c4b4ee6749f0fc95efb07549d98e', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '2c78ef30f358a75428f51377fce1eca7541e9b9d', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '4a9502c0d46e6a4f6c3332bbefb0c9d3e64a99bf', onSlotchange: this.registerSlides }))), h("div", { key: '901c00133f19acf0694519f432e771a1e3293b32', class: "lightbox__controls" }, h("button", { key: 'e23aab9ee74f8b3fcfe956358a3ec09befe2d332', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: 'ef0d61b4838aa8fa5dc54d2b39620171b8692baf' })), h("button", { key: '379a247516b50ec0f6c07c83ddfe52a7935655b2', "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: '1dfa547cfae8a61f5cb8ad79ecf94ec286c416ed' }))), showPagination && (h("span", { key: 'a0d1021800a617687781617c64eb6ec9c65fb906', class: "lightbox__pagination" }, h("span", { key: '20b804989c1752b6f84ef99c333a7d18d68a38c2', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '51da5b8f6af5a93e5f61f1d8d8368a8c3e3fe4c9', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'e0638dc8f1f6bcaf3e6db1eaabf67c996c7277c7' }, h("div", { key: '1b9097881ef6eaa8c53182debd7cae22fb6b2eaa', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: 'ed9cfeb9e8cba34f7148e97f0841d4795141980b', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '757d2f1da76c1ba0857342ea78f326fe9a068870', alt: "", src: currentThumbnailUrl }))), h("div", { key: '4c856058c06fb568d0e2d0df582e6272e9e788b7', class: "lightbox__file-info" }, h("swirl-text", { key: 'ce6574e8f25ca186898b243b9ebd90e91aba85ec', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '2639c1ea66609a655d56f2fa72fe2111aa6936d6', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '81d6d7d1c19f9f7a609685789d08b8076f7ba7d9' }), h("swirl-action-list", { key: '163d8ec4b501c8d708eccecebc0aea1b34d55edc' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'b7b5bb2076a8aa75b05717037518a7d05b9ba5a7', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '34a3c9c4329fd58c771d8b1b17475c619f5364cf', name: "menu-items" }))))))));
     }
     static get is() { return "swirl-lightbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SwirlList {
         }
     }
     render() {
-        return (h(Host, { key: 'ed401bae25e64d56777076db81aa19fa6359cd20' }, h("div", { key: '15ca461f816481fdea5983727e908fa008dbe8b4', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: 'd64e763456a96a8e817f4de2a3060d6abf5e7296' }))));
+        return (h(Host, { key: '0ff05f133d5163b3f7904afe37b2bc1023d70e66' }, h("div", { key: 'b1247a6e8265ee32f48d3f182368726eae6666ea', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: 'e6b95a3fa785627f9d4f964b62becc3bfec5ce64' }))));
     }
     static get is() { return "swirl-list"; }
     static get originalStyleUrls() {

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

@@ -96,9 +96,9 @@ export class SwirlMenuItem {
         const className = classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '5de0194afd423bbfc5bb94055fdeb3864944bd12' }, h("div", { key: '26bce6d769092af5a82a7fd43bbe2d9832c35007', class: className }, this.parentMenu?.variant === "selection"
+        return (h(Host, { key: '57f6a4f2f691c07b215e69bb2e0cd814923bef81' }, h("div", { key: '50660bb1038357f12e245c77fde10331033c8250', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: '69a4e7560c211051bda64d99ea5481ac63a2c178', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: '1dd0221d81288f4612a589666d91892b1bdb321f', 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

@@ -326,7 +326,7 @@ export class SwirlOptionList {
     render() {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
-        return (h(Host, { key: '2a111a8e587cc1da1b4a1caa31f4e7554711c107' }, h("swirl-visually-hidden", { key: '2ab355b3104987d5e7c5eefd92cebef85be84cd2', role: "alert" }, this.assistiveText), h("div", { key: '2c889f818005c88556eafb33bc44030f9636c1ca', "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: '6dffcc755994b6a4cd3fa35b69da48bd9d3fc62c' }))));
+        return (h(Host, { key: '271eede297c6038b102cc68c5433a5f6fa943883' }, h("swirl-visually-hidden", { key: 'd27f5db7d40dba6419fd73d797ded32c0ad64932', role: "alert" }, this.assistiveText), h("div", { key: 'cf4b3ead532155f4866f627a724494e8bfeb7c33', "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: '45272e4bf68f4c26a387a975d57c4405cc9e53c7' }))));
     }
     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

@@ -7,7 +7,7 @@ export class SwirlOptionListSection {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: 'c60d1a306e6a9a0381efbb44ac2f1bbbf2e296a6' }, h("div", { key: '908896e81c22a62cab41819998ce081cee5e3280', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '3f392cd71848d6f297ffc13d8f518535d5633748', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("div", { key: '47ed492c5550478272730eb428f619fb597a7b03', class: "option-list-section__items" }, h("slot", { key: '1162e4a19ea3c72ebdee83f8de8fe336f1b7420c' })))));
+        return (h(Host, { key: '192ee1cc35b26fedae6ef0baf9fad107b0426006' }, h("div", { key: 'ebc6adb48fab5e738daf6af214445417f2c3ff07', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '3dc502ec95baf74c3dc3cbd47d61ead746b736df', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("div", { key: '1fcdf793d6ad6b98ba0c6366f6095b7161b6e82a', class: "option-list-section__items" }, h("slot", { key: '2dafe14cf93d419bc5db88a561d0e71967de4601' })))));
     }
     static get is() { return "swirl-option-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -180,15 +180,15 @@ export class SwirlPdfReader {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (h(Host, { key: 'ea187efd976ac1c62f135a79dcef44d568dfdc11' }, h("section", { key: 'f016646718e71363b51d3c1390fb054a70ae0fd6', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'bcffabf37d6cf74b65e352cc367b9b5bab8cebb7', class: "pdf-reader__body", role: "document" }, h("header", { key: '0c251fa1c173cf5b084456fa2976de3a757099e5', class: "pdf-reader__header" }, h("span", { key: '9ad11275e6c5dce95ef82d8fcf90623cf227dc9a', class: "pdf-reader__header-left" }, h("swirl-button", { key: '4b058380fbada5bc04a95b9b746f7f01e708b409', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'c9458def539730d9c476ed1624e7e7087590c046', class: "pdf-reader__label" }, this.label)), h("span", { key: '871f841c67b60603ecad507c52dfbb40a6d2035a', class: "pdf-reader__header-center" }, h("span", { key: '11ea04fabc115f50fa04fc04fb6f6ff10591c936', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '7067655b4760f0654a3bee56db18a887f08341ab', 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: '411463d7d41b0b2f8fd9a7d55446cc677fc09ee5', 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: '8f92fc27ce5d375c0806db38355758098c8dd4b4', class: "pdf-reader__zoom-select-container" }, h("select", { key: 'e826acb2179dd3e4c796e5fabdbe2516aa5235b6', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: 'ae309b798a9de2d9c0f40da0955926ad0b38ca62', 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: 'cc3ded7acd9c202099870d9860d3710b20f46023', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '415ac18d69477f6f81db5891f7dca54dbc5a66b0', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: 'e318e54dd4f267e467fb6e33f0f912c4f51090da', swirlPopover: this.menu }, h("swirl-button", { key: '9f737646e8b243d14b8e6030b38470eaa3396d12', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '7e121a9df59e91d9d1402f97f0a46ce3f8ee40ce', class: "pdf-reader__floating-tools" }, h("button", { key: 'ba1a3ba6c9fb780ae4a92604451a32740d32b081', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '936a82b2d56253d47117cd9576bf999ec7a841bb' })), h("button", { key: '22bc266c829179a21a37458ae933cacf52d70889', "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: 'cad3b3001f97fb04f1300df4440a83f1fee3872c' })))), h("div", { key: 'c604efc21097acf8b889f5c13481b8f76d4aea01', class: "pdf-reader__content" }, h("nav", { key: '80086da0977f6ce5cc50af9e2e17bcbb40b14126', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '6830b62c426b2e26c026f313d5a3763de993d010' }), !this.loadingThumbnails &&
+        return (h(Host, { key: '5d554d7bd32ebc66b403d5c21d7fced777886c91' }, h("section", { key: '453013c49d86db23b49f365ef27c9c29e101f700', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '59f56410a0c778be45c24d7031f075a78a9d9131', class: "pdf-reader__body", role: "document" }, h("header", { key: 'c48b990aea78709b61139d8e5cbb0e5a9b86bcc2', class: "pdf-reader__header" }, h("span", { key: 'ff3d2404df56cf3f187b655264d1ac3da2506a2b', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'ff250cfc67a23b91eeb6d32b0b8989df749fdc96', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'eb5239059c85855f44840e55a59ff94da5b99ae4', class: "pdf-reader__label" }, this.label)), h("span", { key: 'b061a920b4fd83b0c73a870958c199b9da9a50f2', class: "pdf-reader__header-center" }, h("span", { key: 'dad9534b7138f9919933fd0ffd91f3161b79f0c5', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '96962f4c16c47b2c5f7e33e67f08b026c463fc26', 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: 'fde940c0c7da04cb07637375f81f8fcf4d9af283', 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: '885616c90830e2a9752155b676eecac78924acf5', class: "pdf-reader__zoom-select-container" }, h("select", { key: '8bf9d54b48d2cbc72ed03ccc622fc8996ee1ff19', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '39ba600993eb7caa6031de24f7a806c7c11df802', 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: 'd4aeec1a552095c696ac13d9d4afebe06634d17f', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '73524a26c3ba2a03bc24697a0fbe621663f16c5f', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '02833ed4e04d18b79d87c4b4b73646a263bcbcf1', swirlPopover: this.menu }, h("swirl-button", { key: '457f218d101f80db89dcd302bf4bfeeb41f2512c', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '10e512f694b215949f1ff3548732f86b94ad8471', class: "pdf-reader__floating-tools" }, h("button", { key: '0e25b37a6d75b1bcf9d5020b45860cd3eace03f9', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: 'd4f3f2ea28a1df032fbefc8631fe456b58485f45' })), h("button", { key: 'ec85dbec8df0aa67773d1af6807bd5a57b4b32fb', "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: '4530bd763a7e88acea0632d6600476c69c680d40' })))), h("div", { key: '648c6f629ad3beff4d598a8b1cfac881485749e0', class: "pdf-reader__content" }, h("nav", { key: '80e3360a923467a972f051190330a47542d5855b', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '64072f09f98a776f3e6c95af45341a6306df1d73' }), !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: 'c9106d63e37c142b138ab1bdfe9e2d5b1d266155', 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 }), h("div", { key: '00fbd2a75b3f835e1e42de903126ed7dba4db19b', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '6734b5834f7df602acfecce8589faa4a0fce9fc6', "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: '576a96efc83a66c62524371294879a557b7f9e82', "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: '6ac5910acd6656e5f272b19c427ed67be09d238d' })), h("button", { key: '84a759e81b0a5b8b348897fec3d7f78ede5012d7', "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: '603adf8229eab1e17b9d911343674912e86d9431' }))))), h("swirl-popover", { key: 'b0f246508f9ffc9e619a97916ba24a37bb552472', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '4f5d3f0af23e47d24bde771260b2c45697b7a9bf' }, h("div", { key: '68891f3d23621de194d8560bf625fdf6e27a71ae', class: "pdf-reader__meta" }, h("div", { key: '486f46b1ca1bb26fd1025e3f75b1b25749ba1e4e', class: "pdf-reader__file-icon" }, h("svg", { key: 'fb798279ad5742a7222ad81c450db7ca5d2f7cde', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '80a769b0b5753b247fe5e1536e309a6061b752d5', 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: '4f0af8afff5363ef29e16024e53aac5b6265b289', 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: '024351a61e62372e77c99250ae4ab3af152cd3bf', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '9ee81bd28c40bbb1c52212b4457bb56765531aba', 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: '672f6625ced5eb4242dfc828ddbf94bd0134daa9', 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: 'e16749623a63768fecff446b7871bb23e259c50b', 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: '5790577079b80577618e1e2d0a4e1df7955e336f', 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: '9df98e681beac4ea080364a95e0366510f48dcf0', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '3300069e45af2d82da0b90af15d447ec668f2b06', class: "pdf-reader__file-info" }, h("swirl-text", { key: '40553bef94467d3df4c8001d9d501752da4cc997', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '0d319e82b0d4b0a5e9a856566969294f880293c2', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '4de3ae104223f033bebe5002c8c52ada7d873c5a' }), h("swirl-action-list", { key: '1c7c02fa093e0f4202133d6d27350cefd7abdcc5', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '164060085b3f41e7db66bf37d9e8f73366b29c89', 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: 'f4b7338eaa347eb53d032c1a6d5ec2efd78bc439', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), h("swirl-file-viewer", { key: '9c0cf47142e57c878cbbd1a2e0f362655165b288', 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 }), h("div", { key: '58211558433c2555f541c2578c0681d8938bfe8e', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: '661e2ab360794cfa447e10eb5af5f5a4a5bb3552', "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: '3ec9fa1f3edc72619d3faaf4b5b711b9ee379bac', "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: '12451b399bff204f384966989718850434266a3c' })), h("button", { key: '41edf1a746549be7d65dbe08990ddf08ffcc1091', "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: '5f0d609a5623b914470c30c76df3ce1f2d44a900' }))))), h("swirl-popover", { key: '4dc4442b054248f1e80dc0de624ef8bd455884ae', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '5ada62197c4bc3ca403c0695781999e9b99bd418' }, h("div", { key: 'b096c94c18984a9a1d517258369587bacb39c4f6', class: "pdf-reader__meta" }, h("div", { key: '5d5e5dc28224cda01d151cc1c2a5386a596978ea', class: "pdf-reader__file-icon" }, h("svg", { key: 'd08f4e6a825d6aa81c52afeff6efa41eeb9fc905', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '7472b337e774ff0c577f2b843eee2ebbf6ae5e95', 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: 'bdc47714d4d5c93a6b14fb264746235e6627ccac', 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: '99210c05a2abab4987715b92b0b4408ed220cef3', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '88701c2de6d32bb326e3b87d14a6169a1f7b122d', 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: '19836103fc4dc46a6828546db237a6696c3057dd', 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: '091a5f502512ad338ec4fc43def7903b3a2d1d61', 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: '5f2dcc174a6526b3209d0c84906d65e2d248df4a', 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: '92edb84540039be27ea3b52d3054f99b71fb9e4b', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: 'f964b44ee76945aed28867192f32b3a3db1a8164', class: "pdf-reader__file-info" }, h("swirl-text", { key: 'b694ff872631ace21483898b3f712fb7f4d99a7d', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '01ab58cef5c4120e59ae2e1fe2b8921769196d27', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: 'cdd1d47cba8bcef197902761639c6ad9ed6e96eb' }), h("swirl-action-list", { key: 'b60de759a56a6e941294a074bfc0602717d33055', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '7c0ce18b8d4a126169abb37c00ccc00a2eb7faf6', 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: '37a0497079bd17b586e731bc5b2337c98df4ec11', 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: 'b70cef8697b0f07adcdc8185ba1aadb0db8fc812', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'fad14d463fea7b1843799568031455fc1fec97f2', 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

@@ -158,7 +158,7 @@ export class SwirlPopoverTrigger {
         return isActive;
     }
     render() {
-        return (h(Host, { key: '5556177100d74e5cf1f7103b0180624de802ab66', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'faadd7fbaa3d62818779473090039cd506468aee' })));
+        return (h(Host, { key: '8867c30d9f11ad594513a2cafe2d72334310bab1', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '98dc49e17be5996164aa27b3b641cb123c2e9545' })));
     }
     static get is() { return "swirl-popover-trigger"; }
     static get encapsulation() { return "scoped"; }

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

@@ -37,7 +37,7 @@ export class SwirlRadioGroup {
         }
     }
     render() {
-        return (h(Host, { key: '5a35a5fc1015d5a132a406801316e601ecb1d8a2', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '89e8e6a7c76909db067de15e5f63cfd2d6bd01b5', class: "radio-group" }, h("slot", { key: 'b4db9402e9d7e9b78c97c419b7e6fe5e87bc94a6' }))));
+        return (h(Host, { key: '97e4af9559948ab407d58c5308f67ec282a896bc', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '98a882a5f9580c38af1f19fca145d6a355b50e18', class: "radio-group" }, h("slot", { key: 'bcc21f885d64b12786c9a7ea5a306de1db6e59e4' }))));
     }
     static get is() { return "swirl-radio-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list/swirl-resource-list.js

@@ -233,7 +233,7 @@ export class SwirlResourceList {
         this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
     }
     render() {
-        return (h(Host, { key: '882c278ba7c6ce9e5c36dac464e305a5d4eb53ed', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'c7e6fa068dfb9b0b921228b1e3291108036f31e1', role: "alert" }, this.assistiveText), h("swirl-box", { key: '5e240f6c846b458560af554c6dd7a31f2cbbb7b6', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: '0b78aa4271297059e598e806d4adf22e8fee4cc5', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: 'eab4163be70371447086cfb5346ae9f960daeee2' })))));
+        return (h(Host, { key: 'd315d1d99fa82b3d8052a80bae0e1420803c0173', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'cdcef18c7a04b90080db77e25028806559eb918b', role: "alert" }, this.assistiveText), h("swirl-box", { key: '33c0f0dd235f2371bbcd42d1066344e62874d8eb', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: '14bafd11537ca9ff900ebd5bf63fd4dbae93b792', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: 'ae7d48f6930aaf596c1da58b12e4228f72cf1ebc' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -37,7 +37,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: '579318538eceb607eddf5cd62b5527a72e93bf1b', role: "row" }, h("div", { key: '315dba6677c42b4daa67e1e7fdcfdabf75aed017', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: 'ec120fccf050714a0894f55341ffb85706adb0e4', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'a89aa95ef67608afa730b19ba2ecf83640cf5f0c', class: "resource-list-file-item__label-container" }, h("span", { key: '52a6313dcd4592ec8a4c56c3edfa80a484057039', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'cef160a9f951baa6de16f87d09d254ee2d7426f6', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: 'eef4707e547be338cab76a314974641985dee6dd', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'd4335ee78f5b711d44e584593e44a29f08d1c29e', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '2dcc494cb51c47b18d5879e1bb02b8364c172ce1', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '7e6d6c331ba917ba56633f50c19a8953d394fee5', size: "s" }))), showRemoveButton && (h("span", { key: '9d8bacc9710b2f5e939b2e53bd6b92fe5b03d1f4', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '8389a3c0965e6cf236c255ef3f7bd78bd3efc0f5', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: '52a21c836d395d3751a28cb38385d0338141f0a9', role: "row" }, h("div", { key: 'c8f6f83ea35a75cdc85c8daf1fbb8fbe47fc6f71', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '61ca6c7ae2ec79b2289cd915b2e2a95c86bc7751', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'dc9162751ab7bc3c4e40b53ec13932cc8910a020', class: "resource-list-file-item__label-container" }, h("span", { key: 'e620d6890dee3019492fc6e2930790766450ec4e', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '33972619d5d7a70f0a614698a01bb260a109503e', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: 'b3dd47b3fced83be904b659d51a3c467bfb39c78', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '5e20717f10da7cba9ffed0648208ff90b29dce0a', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'be1faccf84dfd6291805b457cc75c2942bc86fcc', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'f91f8360e549ce536e68ba6afd74d74bfed6ea76', size: "s" }))), showRemoveButton && (h("span", { key: '02b64ff26c81f3c12e56962de1373c55ccc44123', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '42deed1db50450dd71a556e3615ffb9e0b206534', 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-select/swirl-select.js

@@ -126,11 +126,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: 'e701f9d3ba6f9b97c8b05db09e3b710bfb894c79', onKeyDown: this.onKeyDown }, h("div", { key: '271b41377299ddf440965a6714016eee5cd1f8b5', class: className }, h("swirl-popover-trigger", { key: '03a8dbe3df7bb87c731298156f0b7f259309614f', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '4b6e5ef29e54aa034fe53a4ac9b2054fc4813778', class: "select__value-container" }, this.standalone && (h("span", { key: 'b470d723a02a1e953fdea027eeea1b8a70d67f98', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '7906a40d8ead89b300885ed2db8444cceddcf30b', "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: 'ebbd72b3f84ac1449d0e461e33c4b2183ed8ebe7', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: 'd96f58b39a95722977640faf40653744744c2a7f', onKeyDown: this.onKeyDown }, h("div", { key: '41fec17d6d21a06c9be38897b528ef8f67d17e54', class: className }, h("swirl-popover-trigger", { key: '37c777e67531259ef9f0e43ac55e1ee6f83500ce', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'dabae2a355c9246ba10c19ca9e439c81b1ea8ab3', class: "select__value-container" }, this.standalone && (h("span", { key: 'a60ea531668671a36b2d3ab7dbd77d1fb3127a04', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '676d09fe96b40c0300bee8d58388d29424080269', "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: 'e851ca3ac9c66f3d215aae499839fac24f7e08d0', 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 })))), h("span", { key: 'f0d837108f5a3021d7ced230fc624770e02a6aed', 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: '794161dd789d3e8e9ebc18ca0ff4284e82018212', 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: 'af70df3e9a7e03ed769c3f1b9f31ee6929a6346d', class: "select__search" }, h("swirl-icon-search", { key: '49733d81c70f34820a9ec376cbeb87d7859ff293', class: "select__search-icon", size: 20 }), h("input", { key: 'c9fe117ecbf55d9a557b6837bb4fe6875b4f1f94', "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: '1876644e158cc162850ccb29103b3876f6d1031a', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'dc305b33e627ad7a5074cb8b6aef1c6472e88583', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '2d74069f0dc3cd8c7fb14a3541049bd8bc968c5f', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '542d11abefd468048606b9acd6c8b304d1470774', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '816371f8f8950f2f94b6cc1286684faff69aa7d2', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: '602a540a0659c6c6c7ba9c12748625524480fe94', 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: 'fd70cb80b9d5cdd9c2109dcd0eda2681f8cb7bea', 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: 'f9b4fe3185deb284a67248871b3a4a4551b7647c', class: "select__search" }, h("swirl-icon-search", { key: 'db8353f28537dc2e72aca1d5f0ef527da0b23d49', class: "select__search-icon", size: 20 }), h("input", { key: 'c7109ffee7b03222b8f08b66b57eee168c2ec1b9', "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: '1548e44a3a75dca89a83d224f08ff61143ed4ea5', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '9bd1821f8bc45f95928165798c3ce8f5a275289b', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '01ac5f1f6c64dce86f5f2c57b90d96013ecc497e', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '37764df5ec2903f37a1f1771792b030967d83b88', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '9583663e2559b94c2eceff9d0f56b068845d5ad2', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-separator/swirl-separator.css

@@ -2,6 +2,7 @@
   display: flex;
   width: 100%;
   align-items: center;
+  gap: var(--s-space-8);
 }
 
   :host * {
@@ -11,6 +12,7 @@
   :host(.separator--orientation-vertical) {
     display: inline-flex;
     width: auto;
+    flex-direction: column;
   }
 
   :host(.separator--orientation-vertical) .separator__line {
@@ -19,17 +21,34 @@
       min-height: 1.125rem;
     }
 
-  :host(.separator--border-color-strong) .separator__line {
+  :host(.separator--color-strong) .separator__line {
       background-color: var(--s-border-strong);
     }
 
-  :host(.separator--border-color-highlight) .separator__line {
+  :host(.separator--color-strong) .separator__label {
+      color: var(--s-text-subdued);
+    }
+
+  :host(.separator--color-highlight) .separator__line {
       background-color: var(--s-border-highlight);
     }
 
+  :host(.separator--color-highlight) .separator__label {
+      color: var(--s-text-highlight);
+    }
+
 .separator__line {
   display: block;
   width: 100%;
   height: var(--s-border-width-default);
   background-color: var(--s-border-default);
 }
+
+.separator__label {
+  flex-shrink: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  font-size: var(--s-font-size-sm);
+  color: var(--s-text-disabled);
+}

package/dist/collection/components/swirl-separator/swirl-separator.js

@@ -1,11 +1,22 @@
-import { h, Host } from "@stencil/core";
+import { Fragment, h, Host } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlSeparator {
     constructor() {
         this.borderColor = "default";
+        this.color = "default";
+        this.label = undefined;
         this.orientation = "horizontal";
         this.spacing = "8";
     }
+    componentWillLoad() {
+        this.forceColor();
+    }
+    forceColor() {
+        if (this.borderColor !== "default") {
+            console.warn('[Swirl] The "borderColor" prop of swirl-separator is deprecated and will be removed with the next major release. Please use the "color" prop to achieve the same result.');
+            this.color = this.borderColor;
+        }
+    }
     render() {
         const styles = this.orientation === "horizontal"
             ? {
@@ -16,8 +27,8 @@ export class SwirlSeparator {
                 paddingRight: `var(--s-space-${this.spacing})`,
                 paddingLeft: `var(--s-space-${this.spacing})`,
             };
-        const className = classnames("separator", `separator--border-color-${this.borderColor}`, `separator--orientation-${this.orientation}`);
-        return (h(Host, { key: '31df25534223187cebaad9cda91e97c7c6d0f220', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: 'b6ca9955f2a8429d658dcc09308dd93503e41f1c', class: "separator__line" })));
+        const className = classnames("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`);
+        return (h(Host, { key: '9cb972d889442ef48f3ab65f6c60019822d93258', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: 'f776b4d21bd22a4c4a7d1960f6dda0c5f317a634', class: "separator__line" }), this.label && (h(Fragment, { key: '582ebc1523ef4670dccc0385839efe00297c608a' }, h("span", { key: '43adeaf3215ac01addc7a311d7ee39d74033aa82', class: "separator__label" }, this.label), h("span", { key: 'c9096ba71a04b585360117a9e8654c6f0ed708d0', class: "separator__line" })))));
     }
     static get is() { return "swirl-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -37,13 +48,13 @@ export class SwirlSeparator {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "SwirlSeparatorBorderColor",
+                    "original": "SwirlSeparatorColor",
                     "resolved": "\"default\" | \"highlight\" | \"strong\"",
                     "references": {
-                        "SwirlSeparatorBorderColor": {
+                        "SwirlSeparatorColor": {
                             "location": "local",
                             "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-separator/swirl-separator.tsx",
-                            "id": "src/components/swirl-separator/swirl-separator.tsx::SwirlSeparatorBorderColor"
+                            "id": "src/components/swirl-separator/swirl-separator.tsx::SwirlSeparatorColor"
                         }
                     }
                 },
@@ -57,6 +68,47 @@ export class SwirlSeparator {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
+            "color": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SwirlSeparatorColor",
+                    "resolved": "\"default\" | \"highlight\" | \"strong\"",
+                    "references": {
+                        "SwirlSeparatorColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-separator/swirl-separator.tsx",
+                            "id": "src/components/swirl-separator/swirl-separator.tsx::SwirlSeparatorColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
             "orientation": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/swirl-separator/swirl-separator.spec.js

@@ -7,24 +7,52 @@ describe("swirl-separator", () => {
             html: `<swirl-separator></swirl-separator>`,
         });
         expect(page.root).toEqualHtml(`
-      <swirl-separator aria-orientation="horizontal" class="separator separator--border-color-default separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
+      <swirl-separator aria-orientation="horizontal" class="separator separator--color-default separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
         <mock:shadow-root>
           <span class="separator__line"></span>
         </mock:shadow-root>
       </swirl-separator>
     `);
     });
-    it("renders with strong border color", async () => {
+    it("renders with strong color", async () => {
         const page = await newSpecPage({
             components: [SwirlSeparator],
-            html: `<swirl-separator border-color="strong"></swirl-separator>`,
+            html: `<swirl-separator color="strong"></swirl-separator>`,
         });
         expect(page.root).toEqualHtml(`
-      <swirl-separator aria-orientation="horizontal" border-color="strong" class="separator separator--border-color-strong separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
+      <swirl-separator aria-orientation="horizontal" color="strong" class="separator separator--color-strong separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
         <mock:shadow-root>
           <span class="separator__line"></span>
         </mock:shadow-root>
       </swirl-separator>
     `);
     });
+    it("renders with highlight color", async () => {
+        const page = await newSpecPage({
+            components: [SwirlSeparator],
+            html: `<swirl-separator color="highlight"></swirl-separator>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-separator aria-orientation="horizontal" color="highlight" class="separator separator--color-highlight separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
+        <mock:shadow-root>
+          <span class="separator__line"></span>
+        </mock:shadow-root>
+      </swirl-separator>
+    `);
+    });
+    it("renders the label", async () => {
+        const page = await newSpecPage({
+            components: [SwirlSeparator],
+            html: `<swirl-separator label="Label"></swirl-separator>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-separator aria-orientation="horizontal" label="Label" class="separator separator--color-default separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
+        <mock:shadow-root>
+          <span class="separator__line"></span>
+          <span class="separator__label">Label</span>
+          <span class="separator__line"></span>
+        </mock:shadow-root>
+      </swirl-separator>
+    `);
+    });
 });

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

@@ -212,25 +212,25 @@ export class SwirlShellLayout {
             "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: '6b8b7e5a019e31ae54af48814404cfba1e4a4bbf' }, h("div", { key: '401a8ced9b139f6926a3d8811bcbbb1dcf418ac8', class: className }, h("header", { key: '0d8e1005d32c193354781fb6b70414a98f537049', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'b04df490b640027b1aa9723bab43760583bc4c62', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '570dffa72ac0a236bb6fd9b9bd5f784634ce11ed', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'd7847082558a657ebc31abc65e104134c2df3e94', content: this.navigationCollapsed
+        return (h(Host, { key: '17b00d11eae1229d2bd7699a55b67e70b1caecee' }, h("div", { key: 'db18eafe24861b5bd76f15cd0ee941c6701ed1b9', class: className }, h("header", { key: '197f78657da2769875e5732935928d5787e50ab1', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '666ea22d6df9c28b22291cc85f5d42ba805b4c98', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '963e336d31a60e2dcfe80c0854fd4e795b795a8e', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'c81ffcc561ee1308ba163e50c5d0bbc875e95324', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '279330c15c11af394c9586885a6ece1e8a0ce1c5', 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: 'a43478f1b75eb4fd82330d1dfc2d72e0b39d352d' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: 'a7c381b547e2d104eac7552fa8a9de889bcc10dc', 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: '5602cd6b1fd4684a9f1f85dccfd43cd16ad3e849' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: '57961e4e297994644f56a286ad644764850c4346', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '93dd58115695063abf397c476b2e04dedf4fe292', size: 20 }), h("swirl-visually-hidden", { key: '6006b7a9a77625709b956d8ac7e9f34545aefe07' }, this.browserBackButtonLabel)), h("a", { key: '31fb6a7bc18cfcbf2e1e81f396c4f277e52204a5', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'b9f9f784c8149ac7f52ea72de5b2afb8fc7ede8c', size: 20 }), h("swirl-visually-hidden", { key: '0f557a4f2bc8738904dd2c47dfdae4f114416f91' }, this.browserForwardButtonLabel)), h("slot", { key: '9125a14aae30aab5611f9e70732abc0d9bbaf131', name: "left-header-tools" })), h("div", { key: 'acd41196a44372c905e9232ab323d445d54b81d3', class: "shell-layout__logo" }, h("slot", { key: '6507a5c45bbef1961da17e50afb70e700074fefd', name: "logo" })), h("div", { key: '4620f28376059734811025b365ef5d0d4ed61714', class: "shell-layout__header-right" }, h("slot", { key: '38d01acb4a00f1272efb7a00a80faa9759372df0', name: "right-header-tools" }), h("button", { key: 'aaa649a408c1f903dfcf6bbbc0cd9bc1afcf8168', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '50db759f09e9469eb5d284a0f20b3290cd0ed5a0', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '54000780ffbf6ac7fc244bee9f8edebe9a37ce9f' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '31bf8f1bb53eab361de741191fa42bef255d78e2', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+            : this.collapseNavigationButtonLabel))), h("a", { key: '262658907b46122c78b593c7b2578a8c156017f7', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '11098cd11fba0990c17172c7af2ae954a1d5c3a0', size: 20 }), h("swirl-visually-hidden", { key: '6bae1062507b98517c0e41ead9c7556c46b0af61' }, this.browserBackButtonLabel)), h("a", { key: 'ff1562492d8c24411cd9eb3c4a641cc18aed1bbe', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '3d386b42e242e6ee6632b033d270a2dd59ef289d', size: 20 }), h("swirl-visually-hidden", { key: 'e11dfe0692f77548cd0a60658358108fa5842551' }, this.browserForwardButtonLabel)), h("slot", { key: 'd6095224eb5060e3409f54a5f99344475cc07ad0', name: "left-header-tools" })), h("div", { key: '240b311d6592ef183bb804decdc6c13d4a3e89da', class: "shell-layout__logo" }, h("slot", { key: '6450dd73c21fc0cf5cd53cde6a614f27e128a492', name: "logo" })), h("div", { key: 'c789f7322e19654593143efbcd9dad267c34e3b6', class: "shell-layout__header-right" }, h("slot", { key: '257885a807f3ef94c0a36450c461646f2e01a077', name: "right-header-tools" }), h("button", { key: '6a4060892706a4d42c1ea6bd2f7c254ae8cf5617', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '1440eef67e58685bc1d40189227daf42e7a7bfdd', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'ec9579167cb424a7aface103ed06502bbcaef79d' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'eeee815041313f28d0155f785f7048d48a02cefa', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'e8c285271cd04de5134314826a19c551d9e6a55a', name: "avatar" }))), h("div", { key: 'c23f99b83f13824c26e87577f022495bed45895d', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '39ab7cdbb889d092b1a83503f949e329a7f1f9ff', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'cf578fcc67fcce3af5c791bedce5d559852c0a6c', class: "shell-layout__mobile-header" }, h("slot", { key: 'f99efd689e9b11708697efba160917dfd2a896a1', name: "mobile-logo" }), h("div", { key: 'f2cfc4785bfaba377cd318f0fdb45725a4bfff51', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '57b3d09fb0d4d7efc6d9f13a0971fc9df7ceba83', name: "mobile-header-tools" }), h("button", { key: 'be6836a6b91109047c12e8d39870cf6a68836c16', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '3c562ce770de3d403015c2673c53c35554516034', size: 20 }), h("swirl-visually-hidden", { key: '5b9c9ceb121457f5fa5aa47dfe78e0d0260b0ad7' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '68cc1ea9129ed844ce39b2ae30e72f80f9cadada', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'f085e3859a1372c0ed904bce22b5f43ba69da918' }, h("span", { key: '67ff4bc4e7382bfab9f337170adfca35cc25af40', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'a0b476356ad5e826786d46180c36719028b9a2f8', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '685a12f43a8b9c3a129cd1fa8ea2292f0b56dc34', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'd9af2a9970b1c88caed77a8f1a5ae750f6b50e80', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'beb1a3d618ecf9c74a7241c4d7023111143f2e9d', paddingBlockEnd: "16" }, h("swirl-stack", { key: 'dff40bf6acf0484dd578adf72f0a8c9197628826', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'efa544b9d35438ed04d33a5ec87779165833ee04', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '570fc5a1ca2e064f3f3933725452acc5e4809e25', name: "avatar" }))), h("div", { key: '3f49d766d9209f08c3e3653c1ce78fd585273c94', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'be5df7a4b8f250f8a44584a52b69d46ff456dc5c', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '48e7ccdbd3cc225147bca752b840bb312cd219f0', class: "shell-layout__mobile-header" }, h("slot", { key: '45b99b91fbae6f1080dbfe086647c92fdcafa49c', name: "mobile-logo" }), h("div", { key: 'bd192a898b4e3c1cade985e1391679359b182e04', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '65ed71994f1d81e4441761bf489a9b2743a39ecc', name: "mobile-header-tools" }), h("button", { key: '09ec54c25b97c1f55f496b2622d0b8871efc821d', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'bd5de205e915208f753006403fff018ceb66dc8d', size: 20 }), h("swirl-visually-hidden", { key: '98282a070ddb730bb37db2889d96baaefe2d31c2' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '0b776a2f5122b683abb1cf98522d03f28e3f144b', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '82c9680627aaceb940565222963984f6ad872983' }, h("span", { key: 'ad287c1d5d483d867b1db0fc4590e445ef5f985e', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '284bb7623cf7ff3cd93464ca35441d79d74a60ef', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'f898a0bcd0fdc9ded83eb3d2e3e279bd709f6fd3', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'efe24c98ec19e7f37b264880a77fda4db76ddf57', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'ef8b49f44e63feaa50cfe311bd7a7c961b14dcd6', paddingBlockEnd: "16" }, h("swirl-stack", { key: '22206a807ba5f0ec5cddfa2c1979334a86de7b7d', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'fe800871c8157700d8d3fa83aee6c0a62f92fa4a', 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: '4f496fc91034b22a5583e149520359efa2de2164', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '75025398c02bb5c95b7e22f9ae37d4d9dc27fc58', 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: 'bbdef4fea84464863bb65cc4607c074882cd3ed6', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '6cfa259b5704e27cee90835a3226165c6f8ffd32', class: {
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
                     (this.secondaryNavView === "grid" || mainNavCollapsed),
-            } }, h("slot", { key: '71acde4d5c09be3d0e8d4c6b76d385d40af474cf', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'eb6c9e056d0a32797eb26cdff982677ad5d6b787', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '8ec1575a680f0202eb16f7ec9071d8ec54173c27' })), h("aside", { key: '060a4a482323cd6c4c209ee61b944ce5dc51701d', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '40a9c3e447c46014bb684b43fc07aa2346cf2fe9', class: "shell-layout__sidebar-body" }, h("div", { key: 'c006ed74d337687fdcb24e9e9402327c444e639c', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'e66c8424d2edd5f23bdce1f78be7de67e9c70115', name: "sidebar-app-bar" })), h("div", { key: 'c62240b3c5c1230ce3b957d719df7076cd68f92d', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '183c71dfaf7cf57b74e93610f2aa2417bea3ce7b', name: "sidebar" })))))));
+            } }, h("slot", { key: '542a0d3951c79deae5fc847ae8a3738587d4811b', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'b450b7bcfcae9db9c8de8f038097b66582072220', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'b8553ec2275247fc2137a3691df00c3d6c5442ba' })), h("aside", { key: 'be877422ba3adcbdaee2362c7961956ff8d3cccb', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '88bd1559d52785be9914d7871ddaf6c8c90afb50', class: "shell-layout__sidebar-body" }, h("div", { key: '50272b6148cc8789a8a51428d30492126f0066fb', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '2d9d454f211743b56a0d263ab7188be5f6876193', name: "sidebar-app-bar" })), h("div", { key: '8b69c046554e50cdc11b172ca8c478668c66aa8a', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: 'cabd0283c77cf2484d56b8eda26a8cb0661bd3de', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.spec.js

@@ -19,6 +19,6 @@ describe("swirl-shell-layout", () => {
         <div slot="sidebar">Sidebar</div>
       </swirl-shell-layout>`,
         });
-        expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->      <div slot=\\"header-tools\\" hidden=\\"\\">Tools</div>      <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><swirl-tooltip content=\\"Collapse navigation\\" delay=\\"100\\" position=\\"right\\"><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-dock-left-collapse size=\\"20\\"></swirl-icon-dock-left-collapse><swirl-visually-hidden>Collapse navigation</swirl-visually-hidden></button></swirl-tooltip><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.back()\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></a><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.forward()\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></a> </div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"> <button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> </div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div><div class=\\"shell-layout__secondary-nav\\"><swirl-separator bordercolor=\\"strong\\" spacing=\\"16\\"></swirl-separator><swirl-box paddingblockend=\\"16\\"><swirl-stack justify=\\"space-between\\" orientation=\\"horizontal\\"><swirl-button icon=\\"<swirl-icon-expand-less></swirl-icon-expand-less>\\" label=\\"Show less\\" variant=\\"plain\\"></swirl-button><swirl-button icon=\\"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>\\" iconposition=\\"end\\" label=\\"List\\" variant=\\"plain\\"></swirl-button></swirl-stack></swirl-box><div class=\\"shell-layout__secondary-nav-items\\"></div></div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
+        expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->      <div slot=\\"header-tools\\" hidden=\\"\\">Tools</div>      <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><swirl-tooltip content=\\"Collapse navigation\\" delay=\\"100\\" position=\\"right\\"><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-dock-left-collapse size=\\"20\\"></swirl-icon-dock-left-collapse><swirl-visually-hidden>Collapse navigation</swirl-visually-hidden></button></swirl-tooltip><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.back()\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></a><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.forward()\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></a> </div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"> <button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> </div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div><div class=\\"shell-layout__secondary-nav\\"><swirl-separator color=\\"strong\\" spacing=\\"16\\"></swirl-separator><swirl-box paddingblockend=\\"16\\"><swirl-stack justify=\\"space-between\\" orientation=\\"horizontal\\"><swirl-button icon=\\"<swirl-icon-expand-less></swirl-icon-expand-less>\\" label=\\"Show less\\" variant=\\"plain\\"></swirl-button><swirl-button icon=\\"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>\\" iconposition=\\"end\\" label=\\"List\\" variant=\\"plain\\"></swirl-button></swirl-stack></swirl-box><div class=\\"shell-layout__secondary-nav-items\\"></div></div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
     });
 });