@getflip/swirl-components 0.266.0 → 0.267.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: 'd77249a8c905486dcec36193771a51634716327c', "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: '43ff177b64a626010e7ba9ce522724e98a275a00' }, h("path", { key: '5a551ba21bda857b2813bcfe99ed2598fc5d59aa', 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: 'eb0e0b815e267a3677a96f1030675cbffe593e6a' }, h("path", { key: '6da4c713aadb2049bf425dd090b4e7d4af0fa10e', 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: '0c214a3bab11e7addcb5a8c31eaef31748e64b4d' }, h("path", { key: 'b358f55cb96c51903bbcd87ae3470911973aa470', 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: '12fc3eeb0dae54fe250ef0c199513a02e4d831ba' }, h("div", { key: '46a007ac6e0f56ec67d154417c9eec25cec3173c', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: '3d7125391c414838e66087ff857037359912e5af', 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: '98f62f3ac82ea2f6bf51418d5e5dd5ae72f40b2a', onKeydown: this.onKeyDown }, h("section", { key: '7f20948d23c605af5eedd8ab198dde7c8efaaab5', "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: '771dca60974515f9ea68d67897af219734f762e5', class: "lightbox__body", role: "document" }, h("header", { key: '9e0805cf27b65fb8696eb8f74e8bf016e956d3f7', class: "lightbox__header" }, h("button", { key: 'd61315da899bb4662c95c04237f020beab92870e', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '86c1dd17ce51a0a6606f515549b1ade91dc9c94c' })), h("div", { key: '112f7b8503ba9a60c8501c22b159c56aaedb5c94', class: "lightbox__toolbar" }, h("slot", { key: '25b236956b53c9fc6a1491935c2e7549596b88d0', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: 'e3a6da3ab4bd365edea578403c2423c19c9f188d', swirlPopover: this.menu }, h("button", { key: 'd6a586cb88390ca61f469ba3f5fdb1123f3dbf8d', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '3c5b41b69bf2d36f11e39a941b5a195303fd6182' }))))), h("div", { key: '25900ba1f59d9b0d0c9740f0f98aae4edb0dcdcf', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '621f3dc314c7e05400fa07812a638760e96acaed', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '29841a89b8ed6d68bdf88da780bfb3e3df0f3608', onSlotchange: this.registerSlides }))), h("div", { key: 'a6908638571cc40a1b48a6f0bbf02d6f9cc2132a', class: "lightbox__controls" }, h("button", { key: '9fb9d1bdfac9e2187670dcc6aca013070eaeed26', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '552baa00056045ba4406ef89740b776383876645' })), h("button", { key: '18315eaa040f3209f1e4f0a79f0644a2b904149f', "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: '2c680b29da54be24dbccacb01c424b4964074e7f' }))), showPagination && (h("span", { key: '97c86b358a6351e5a766865b3f994b8c9037e9f1', class: "lightbox__pagination" }, h("span", { key: '14ca08330d1a2b294d250fda0d3ced54c99784d7', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '23dc5fc87c315b06fa50bf88edaac3be0dabdf40', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '902333bd5740acad13dc08ddcf86cd1f1b19ba79' }, h("div", { key: '63a2d45dd987c9f425337115ffb9de0140628fe7', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '37f89eb892622c1db85155d97e92ae06b0cf5852', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '1f53d7749c0fa0cd7eddeec2957980588b9634c5', alt: "", src: currentThumbnailUrl }))), h("div", { key: 'baa7388a73419cf9f3caf1f20c438fe4180e4ae0', class: "lightbox__file-info" }, h("swirl-text", { key: '88da9c4898548435dfe2b9bf830766f93f48847f', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '254fea26c405fb31932efac73a3095d3e4b84e50', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '79c76df09e97e0bddfaa2b5c37758e873a856344' }), h("swirl-action-list", { key: '7fd48cc5c0143d2417c7fc6020f6413057d7ab96' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '0c0b08313bc6024c2608ef94d7786402a2b453eb', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'a204bda981ff576fbe506de7e1bf64d1c4344818', 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: '8a4350729b04e736b2247c3a7bb933493023c5e0' }, h("div", { key: 'b5acfb60151a398fb2c868def046d7e0007f096c', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: 'ecc811055484654cfdc716686518125e62d3135e' }))));
     }
     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: '7d49afad6eb16b6afa0643d728cf3ec10da7d4e3' }, h("div", { key: '25f51ad06e5c7601c9147cca06a54f68975ff91f', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: '69a4e7560c211051bda64d99ea5481ac63a2c178', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: 'ec29697fe582b6fa33d848d014b366ce2f5013df', 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: 'b9321b81c31641fe029c204960c439b870d3df64' }, h("swirl-visually-hidden", { key: 'dfb0d5a2aa1017cb89cd3e78397885a3d00e7839', role: "alert" }, this.assistiveText), h("div", { key: '5f1d8c008c57e9dbdb8cb0a528cfbf2e8a92cd6d', "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: '4ab9e18ec5bf1759e78631926eede184610e4bba' }))));
     }
     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: '4f372ba0d5e00b59b04a8f3d07a1660fb519467c' }, h("div", { key: 'adf4f090bb04627358dd321117d27a83f94983d7', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'c0b36c8b1e1e69f4c8c3b55474eb828d4b9e5832', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("div", { key: '1555c2b3b0f45b0111071f6dfd118d6ba3ee7e5a', class: "option-list-section__items" }, h("slot", { key: '9ec0b4590125b99f51f8147b29e8ba5e41ed51ec' })))));
     }
     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: '8bb3a4644d8dffde556f511325dc622074dcfc6e' }, h("section", { key: '8139809857aec3b8f02c107965bc371417eff4d7', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '97c82754453e986f49f9d85a99f86db0a3b79ffa', class: "pdf-reader__body", role: "document" }, h("header", { key: 'd8f7af2a10b2a8b70a2ac7ee74d406d5740f0cca', class: "pdf-reader__header" }, h("span", { key: 'd306be19ee47a3565cdedf971e34d2830f393a01', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'd47f7b7891735e64341ded3660fffc013f85a983', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'cec426d7f4d2f7f2f604bd1656cc489f625ca45d', class: "pdf-reader__label" }, this.label)), h("span", { key: 'fe368c34278c5bea1e95e7e9634ef5049d1e8c7e', class: "pdf-reader__header-center" }, h("span", { key: '3e021ce97c89bb22c156ce2729971493cf28a682', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: 'd39dad24b6dcaf7b973e599909526acd052bfe63', 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: '777ba22a986d17e1ee61b79dd2fd734706a68ec3', 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: '6be021663afecd85e07670dfe597b830f0d54d4a', class: "pdf-reader__zoom-select-container" }, h("select", { key: '9bf5f1c911c484f5b1b0a2010d76328e499e5f6a', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '970ae39a57a85b77ddd6cf2ad955a989e138ac0b', 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: 'cfdba1bc72492d7f98068ed80a7fc61913884bd6', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '9d174335c6b7a3f5891f0170b27ebb2403120b75', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '84e493a6cd9a895d8818d1c75d15254ec246c4bb', swirlPopover: this.menu }, h("swirl-button", { key: '4a1d0945cf9be3719490d76031a16191e6560fb1', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: 'cf64313a77ed2684be8292c688ac5e8462d7aebe', class: "pdf-reader__floating-tools" }, h("button", { key: '62f2c13b94d1df1c7beb8c1f47b07b7b785ff640', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '7e02e4e43f42998cae8a2d78cf530cfd4a8dd90a' })), h("button", { key: '65895b0fcee4abc3d1385c16ad82ff4793ec3634', "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: '73025ba29613366154280348c4386983c014b36b' })))), h("div", { key: '30e4c8c56fe7c5c12750a2f9caa0817c95fbd202', class: "pdf-reader__content" }, h("nav", { key: '138794f905d9a9873b1280abc0e9d9ab1434e579', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: 'a9528358dbc90c2c767b429bab9eaf13b466862c' }), !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: 'c39cec26248b0062fd3547f28a033de083d3417c', 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: 'f5070b8ee20ca49b438c968aafc469d12f4f29ed', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: 'd875ef803e580e4e6743dada774dc251836f69bd', "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: 'cf21532e34b98d698c4aeb3a6d6ee72b11f9be06', "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: '6b45a43d79b81379a315c24c2512c6877d3bb682' })), h("button", { key: 'b752f725b07aad2a2ca5dcadd3ab2e6c8158990e', "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: '5d3d9ad74acffe6d59764445d86a9d26d59e5215' }))))), h("swirl-popover", { key: '4605a098b1ae988dffaee7f9afe3e05ff9d7a66b', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '81e9b9d05d063107beec2d2d2b69392c36db5f11' }, h("div", { key: '4e367b9517d90db31a8f3f0fab6a361093312182', class: "pdf-reader__meta" }, h("div", { key: '00a44ec1a89e3c9df24a84e604ab24ad20e5a439', class: "pdf-reader__file-icon" }, h("svg", { key: 'bd418b959464a7c0f0d5269829d1cfcbdaf75f75', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: 'c0be2763e8c8601bdd238fe311780df65bb96200', 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: '9be50d5663efa838d37c2ccc36097b8d577a47ef', 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: 'a74a8837b080bf203b136aca4acbd5215f2f063d', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '9ca32e931c3afefad222ae84784a53371aa6c318', 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: '0829084200dc7564b00472f637712444e83abdf1', 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: '01a4db442f1fc7071c093d052495bd92239219db', 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: '435d04ef5903977345d2fbbacc04e90b45151898', 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: '53ad9c319de743c3c923ebd7d39dba556bb5d430', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '9790be9877a3c988d04295f07ae272543e4a4496', class: "pdf-reader__file-info" }, h("swirl-text", { key: 'f74809a7d1f0a22174b465de79fbf4b54a5929cc', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '956efb25757920389516b5bd9c0f0b2bd9736c67', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '63af1e08249a1044bc3b8b2a99cd4a4bfe695035' }), h("swirl-action-list", { key: 'f62ae746b0c159146805ab0495f11eaf367da039', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '35394de71acd34785ef33419cb7cd6c4d9c01e2e', 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: '2afcb5861fe88373696ed0713e97e94ac1c89e1c', 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: '3ed0a1db275140a94a7e396d0195018d3ad63ea3', 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: '0303dc8aaae885b55f35195e9389c7acdc3d26e6', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'a6aaef51137de89606cfd6f8d089dd771e4d6de4' })));
     }
     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: 'c1ac65d395d809831408b173eef311f5429a29db', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '809192e3c38d82ee454dd678d7867da2fa37291e', class: "radio-group" }, h("slot", { key: 'f6091ba51e1e9a9485de39a6179527d495690f10' }))));
     }
     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: '46ec2087e6eb20038b2d8cb230848ef6bc6a965c', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'b10376ce8dc5d2fae4011463cab70342ee533c80', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'e8c8856c6dc29b758deeb811db0d6cefef4b8237', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: '6e83af0f081d4b3267882db7b905560ef671ecb3', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: '828641ba660ef54f8d2aa9500ca25b3ba71eec2b' })))));
     }
     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: 'ed3b1d549b80282def71a568403363f8cac942c2', role: "row" }, h("div", { key: '398f1ceb4077bbc2ffc7ddb3f2b83b97894ad471', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '5d4ada5b089da73d50b9addf4687a78c4add68dd', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '32a280050159b2012ddf2733dec3c133705774eb', class: "resource-list-file-item__label-container" }, h("span", { key: '6a78181db63c459a8e24b3bedb1ef9e9133105f9', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '8753c35c77dc90d4d00811595dbf41028fa4e15a', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: 'b1d20f0472af678712b9e4dbe1c37b7025ec68d3', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'e6955860aff4ce92da99c15739694a3582128aa0', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '4c56279ad65a1a33dcb95590f9a7d68e43143054', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '86a632bc3f53255f238a5ecab72d1d9b0833cddc', size: "s" }))), showRemoveButton && (h("span", { key: '598a6e8e07bb7734e239e080654e547937191c24', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: 'c42dcd258d0a596b785731ca8b17aa8a60c692ab', 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: '16272cabb1fdc05b44e35522fea2a73c46b052c8', onKeyDown: this.onKeyDown }, h("div", { key: '2046e934978fad6a5e678f2d4afd2b9ac2cf2109', class: className }, h("swirl-popover-trigger", { key: 'ac11030d674f4bc125ccef04135d6b1311427631', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '0f540c46b5700ae6db1045afdc3b2de7bab6b357', class: "select__value-container" }, this.standalone && (h("span", { key: 'dab694d57edc2124797ea540d440a652b3bbbdaa', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: 'e538fc7f86054e38a78d2ccc6d0b201ca8ae4751', "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: '588bf0aad80ae8ebf0184ad3fe952ebcbfd1c562', 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: 'ce354ddd8a6b13ed926760f054d68d08275d017d', 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: 'c03c226cbf13bea7c46b56aaf922eff8445d9116', 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: '727339615d442d1142669d94eb367b3f860d21c8', class: "select__search" }, h("swirl-icon-search", { key: 'e254c2abb1bd1680f2639dd291d77c6fbc2b301d', class: "select__search-icon", size: 20 }), h("input", { key: '75d7c003ffacdd2f24ca4ab0db7d7f3cb8cdf4f5', "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: '5d39f63188e8bfd0bbcdb1077db8ca7164edd8d4', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'd97a3c459deabe6655d77544264cc305076b0d2c', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '05058f94cc75c9aaacfe007557ce54313b7dd996', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '08fdc8789a83e778f3fcf9dc0e3a32ae1a41b5b3', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '722d6174ae66a89d7c535308c50887d33d94e0b4', 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: '466133424140c4b89cee0524befd62a08188d89b' }, h("div", { key: '446ea0c269a7585184079dfb142db57b449433ea', class: className }, h("header", { key: '0a1bc2d94efd10b879d5a11b386e0514b0e84f8b', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '88b963978f9f182f98099573db8c4eac524fbdbc', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '6eb044eaf8911dc80c31dc9aa35736e48d262be1', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '75560c382393eb303b6e994265cb83ffc13776e1', 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: '82f1c3fb238078328a5cb884eaeb0d37ada536cf', 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: '6090ecb778b334a7d31f18f653dbc6b19dec565e' }, 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: 'e37d181f9a8b0ddb4bd597256edd38c78cb5cd4e', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '3d1a4e89c11eae93290179da3dd41784b6e924b0', size: 20 }), h("swirl-visually-hidden", { key: 'aa791ac9b2c7e690fa256ef1d7c1bfb9195b60fa' }, this.browserBackButtonLabel)), h("a", { key: '49623f83190e7b3269a2250512efce72c8711be6', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '401b78b5d8743023f8a55b8f7ec0f2d1a0026691', size: 20 }), h("swirl-visually-hidden", { key: '29453133affaaf9bcf6ba6df7273d83b2e44dc6c' }, this.browserForwardButtonLabel)), h("slot", { key: '9c93c87720dcf20734626bbf2c3a3d74c8297fd0', name: "left-header-tools" })), h("div", { key: '47989de14b13b153046610482b42b4a7fc2b1f71', class: "shell-layout__logo" }, h("slot", { key: '18110539b90e8f6e0b8af4207504d9d8de4baaf4', name: "logo" })), h("div", { key: 'ff454fc82904bf9a47a28a7e866f8b6dbc99bb61', class: "shell-layout__header-right" }, h("slot", { key: '5914154944154a1dc76da290d519af32f26fa27a', name: "right-header-tools" }), h("button", { key: '17613cf14bb8faffba53fa11c95e4394a196805d', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '5e4e38fe9860405f32374f3c73e10660ce62fce3', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '4de13b847d14430d3ca31acf569e01f6eb3736e6' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '75fdf494cf43315ba127b4be412f34905ed883bb', "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: '028753aefd5ac6e968b096a9d1d3d3eb85cb1cd4', name: "avatar" }))), h("div", { key: 'b7170a0eb86d97c8842e7517beb85bd63d10fbf9', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '59fb48e7d65ca14ce2a0358e0de5a373d8cbe464', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '68bdad7338df4ae2260b54b9e1a74f38d7d6b3e1', class: "shell-layout__mobile-header" }, h("slot", { key: '39f316265fae0cea0c46200c1ea339f65de3fc7c', name: "mobile-logo" }), h("div", { key: 'be4e55c009fe4ad74dcc9971ee5d73b820f92efb', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'a2b3b3300b76f95ca43d44c726b93859ae2d8321', name: "mobile-header-tools" }), h("button", { key: 'd372d921561ffb92c83639c8bd1fbc580dde6385', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '920d65157946ed376957700e7a615ba013ad2062', size: 20 }), h("swirl-visually-hidden", { key: 'df49f22f169707217f3c0666b9c09c733d903a71' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '258dc764efb7ae515ab6aa39047824850d1ed235', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '86699b1d90257d73e2259a8ad947cb2f184fb138' }, h("span", { key: '8d3057fcfa991db10ad8df9531f4b5a70ffea5a6', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'ffce50dc41695acd6cc0939f48192d22cc5345d7', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '7d54c4a8210a23e7f25780633f94d0c003f2cf9e', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'ad44f6a5444ebcbbbadcf90a5efebb50b1ece537', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '791a45bdde614b28c39faa9b1b5e9f13e0c4bc41', paddingBlockEnd: "16" }, h("swirl-stack", { key: '1766eaf95008a3e36b1080ff010dcc5cee388b71', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '4604dbc341cc064c01f6c7646e0006180e18cd7a', 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: '20bad4f3884d4a68871945ef8ed05eb35d10baf6', 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: '3dbc912fd7f97b95a1957d17277201050dbd7a6b', 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: '10409e9c4a7fec20678c9d04c2a8689e693950d4', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'c90cde785ab6625a35bfcd6f050b5d52fc8e40f4', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'c1508efb5ea1d1972d810a77c437733e1e2d3feb' })), h("aside", { key: 'cbee81aa551e9d5a2a931710338332456d634a8a', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: 'aac7bc6cbf3cffbeb2d13068fc54707ec1a20024', class: "shell-layout__sidebar-body" }, h("div", { key: '7749dcc16de4cd18eaaacb6cf7852f7b4ccc1629', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '7fbd659bf1aaa342d5b0ffdb70d67418665bd2ae', name: "sidebar-app-bar" })), h("div", { key: 'a1d8a21774591f13c19757592fdb6b21b77a884b', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: 'b5ff2e4c9b59038e5c38cc57c70c599a19685e55', 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>"`);
     });
 });