@getflip/swirl-components 0.267.0 → 0.269.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: '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" })))));
+        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: '12fc3eeb0dae54fe250ef0c199513a02e4d831ba' }, h("div", { key: '46a007ac6e0f56ec67d154417c9eec25cec3173c', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: '3d7125391c414838e66087ff857037359912e5af', 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: '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" }))))))));
+        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: '8a4350729b04e736b2247c3a7bb933493023c5e0' }, h("div", { key: 'b5acfb60151a398fb2c868def046d7e0007f096c', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: 'ecc811055484654cfdc716686518125e62d3135e' }))));
+        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: '7d49afad6eb16b6afa0643d728cf3ec10da7d4e3' }, h("div", { key: '25f51ad06e5c7601c9147cca06a54f68975ff91f', 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: 'ec29697fe582b6fa33d848d014b366ce2f5013df', 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: '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' }))));
+        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: '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' })))));
+        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: '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 &&
+        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: '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
+            })), 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: '3ed0a1db275140a94a7e396d0195018d3ad63ea3', 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: '0303dc8aaae885b55f35195e9389c7acdc3d26e6', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'a6aaef51137de89606cfd6f8d089dd771e4d6de4' })));
+        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: 'c1ac65d395d809831408b173eef311f5429a29db', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '809192e3c38d82ee454dd678d7867da2fa37291e', class: "radio-group" }, h("slot", { key: 'f6091ba51e1e9a9485de39a6179527d495690f10' }))));
+        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

@@ -93,6 +93,7 @@ export class SwirlResourceList {
         this.setupControllingElement();
         this.setItemAllowDragState();
         this.setupDragDrop();
+        this.setSectionSpacingAndSeparator();
     }
     componentDidRender() {
         this.setupDragDrop();
@@ -106,6 +107,7 @@ export class SwirlResourceList {
         this.observer = new MutationObserver(() => {
             this.collectItems();
             this.setItemAllowDragState();
+            this.setSectionSpacingAndSeparator();
         });
         this.observer.observe(this.el, {
             childList: true,
@@ -119,6 +121,7 @@ export class SwirlResourceList {
     }
     collectItems() {
         this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((el) => el.isConnected);
+        this.sections = Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((el) => el.isConnected);
         this.removeItemsFromTabOrder();
         this.enableItemFocus(this.items[this.focusedIndex]);
         if (Boolean(this.controllingElement)) {
@@ -150,7 +153,10 @@ export class SwirlResourceList {
     }
     setItemAllowDragState() {
         if (this.allowDrag) {
-            this.items.forEach((item) => {
+            // Dragging items inside a `swirl-resource-list-section` is not currently allowed
+            this.items
+                .filter((item) => this.sections.every((section) => !section.contains(item)))
+                .forEach((item) => {
                 item.setAttribute("allow-drag", "true");
                 item.addEventListener("toggleDrag", this.toggleDrag);
             });
@@ -232,8 +238,21 @@ export class SwirlResourceList {
         this.focusItemAtIndex(this.getItemIndex(this.dragging));
         this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
     }
+    setSectionSpacingAndSeparator() {
+        this.sections.forEach((section, index) => {
+            // First section should not have a separator if there are no items above
+            if (index === 0 &&
+                section.previousElementSibling?.tagName !== "SWIRL-RESOURCE-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+            else {
+                section.hasSeparator = true;
+            }
+            section.spacing = this.spacing;
+        });
+    }
     render() {
-        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' })))));
+        return (h(Host, { key: '0b2ba088213a73f5c307efe65f77deb1037db011', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '29ca9a049d51a898f797b0d6bf9f062fd6c94720', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'eaab17591bc72e2d4db6b08143e0b81d71d66d1f', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: '295cac1d0df5b5b5219ddeff1b81650f947be27c', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: 'dd8d3b58b4812edaf46e1c1f841a9894a217e51b' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -17,21 +17,35 @@ const Template = (args) => {
       description="With a description"
       label="This is a resource item 1"
     >
-      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
+      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1025/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
     <swirl-resource-list-item
-      description="With a <strong>description</strong>"
-      label="This is a <strong>resource item 2</strong>"
-      meta="Yesterday"
+      description="With a description"
+      label="This is a resource item 2"
     >
-      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1028/144/144" slot="media"></swirl-avatar>
+      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1026/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
     <swirl-resource-list-item
       description="With a description"
       label="This is a resource item 3"
     >
-      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1029/144/144" slot="media"></swirl-avatar>
+      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
+    <swirl-resource-list-section label="Item section">
+      <swirl-resource-list-item
+        description="With a <strong>description</strong>"
+        label="This is a <strong>resource item 4</strong>"
+        meta="Yesterday"
+      >
+        <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1028/144/144" slot="media"></swirl-avatar>
+      </swirl-resource-list-item>
+      <swirl-resource-list-item
+        description="With a description"
+        label="This is a resource item 5"
+      >
+        <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1029/144/144" slot="media"></swirl-avatar>
+      </swirl-resource-list-item>
+    </swirl-resource-list-section>
   `;
     return element;
 };

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: '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 }))))));
+        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-resource-list-section/swirl-resource-list-section.css

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.resource-list-section-label {
+  display: flex;
+  padding: var(--s-space-8);
+  color: var(--s-text-subdued);
+  font-weight: var(--s-font-weight-medium);
+  font-size: var(--s-font-size-base);
+  line-height: var(--s-line-height-lg);
+}
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.resource-list-section-label {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
+}
+  }

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

@@ -0,0 +1,89 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot slot - The resource list item components
+ */
+export class SwirlResourceListSection {
+    constructor() {
+        this.label = undefined;
+        this.spacing = "0";
+        this.hasSeparator = false;
+    }
+    render() {
+        return (h(Host, { key: '7d99780d1a0b26753e3fc0d18e36c1d50f945b7b' }, this.hasSeparator && h("swirl-separator", { key: '40a6026501401ee8dcf52ed5839e63c94c6a3872', spacing: "4" }), h("div", { key: 'fd9330892b89cc80e650b769744b20b3f9562435', "aria-labelledby": "label", role: "rowgroup" }, h("span", { key: 'ca6182b92630079b88443dc0eb7ed1038c814d6f', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: '20fdee6bba4ee99a3ebac1e86184160ee8841935', spacing: this.spacing }, h("slot", { key: '389a4c1c327ba3009050be3dcc5bf5b01ee785fa' })))));
+    }
+    static get is() { return "swirl-resource-list-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swirl-resource-list-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swirl-resource-list-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlStackSpacing",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
+                    "references": {
+                        "SwirlStackSpacing": {
+                            "location": "import",
+                            "path": "../swirl-stack/swirl-stack",
+                            "id": "src/components/swirl-stack/swirl-stack.tsx::SwirlStackSpacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "spacing",
+                "reflect": false,
+                "defaultValue": "\"0\""
+            },
+            "hasSeparator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-separator",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,31 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlResourceListSection } from "./swirl-resource-list-section";
+describe("swirl-resource-list-section", () => {
+    it("renders its label and items", async () => {
+        const page = await newSpecPage({
+            components: [SwirlResourceListSection],
+            html: `
+        <swirl-resource-list-section label="Resource section!">
+          <swirl-resource-list-item label="Item #1"></swirl-resource-list-item>
+          <swirl-resource-list-item label="Item #2"></swirl-resource-list-item>
+        </swirl-resource-list-section>
+      `,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-resource-list-section label="Resource section!">
+        <mock:shadow-root>
+          <div aria-labelledby="label" role="rowgroup">
+            <span id="label" class="resource-list-section-label" part="resource-list-section-label">
+              Resource section!
+            </span>
+            <swirl-stack spacing="0">
+              <slot></slot>
+            </swirl-stack>
+          </div>
+        </mock:shadow-root>
+        <swirl-resource-list-item label="Item #1"></swirl-resource-list-item>
+        <swirl-resource-list-item label="Item #2"></swirl-resource-list-item>
+      </swirl-resource-list-section>
+    `);
+    });
+});

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

@@ -0,0 +1,28 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-resource-list-section.mdx";
+export default {
+    component: "swirl-resource-list-section",
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            page: Docs,
+        },
+    },
+    title: "Components/SwirlResourceListSection",
+};
+const Template = (args) => {
+    const container = document.createElement("div");
+    container.setAttribute("role", "menu");
+    const element = generateStoryElement("swirl-resource-list-section", args);
+    element.innerHTML = `
+    <swirl-resource-list-item label="Resource list item"></swirl-resource-list-item>
+    <swirl-resource-list-item label="Resource list item"></swirl-resource-list-item>
+    <swirl-resource-list-item label="Resource list item"></swirl-resource-list-item>
+  `;
+    container.append("\n  ", element, "\n");
+    return container;
+};
+export const SwirlResourceListSection = Template.bind({});
+SwirlResourceListSection.args = {
+    label: "Section label",
+};

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: '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
+        return (h(Host, { key: '768254ab8b19c32ccf5c2fb4ef4b70b6a5fece76', onKeyDown: this.onKeyDown }, h("div", { key: '6b40cdb6643134344de44eeb92661be98c5b384c', class: className }, h("swirl-popover-trigger", { key: '0a1973a87e1fbc338c42ceb5368d74ef75b5c4b6', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '1ba471f1fa24020e3479bb08512fad545945881e', class: "select__value-container" }, this.standalone && (h("span", { key: '5d5186a8d117a82cd5973ba127565dea0b1fa81d', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '3ea666688794c23f20caa4e3ac1c9b32451fc2a1', "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: '6f473e13ec7a1e6d3cdc6c061a81125b615a4c71', 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: '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 }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: 'db4c45a9e175f25076bdeb00095b37c3ca0cb4ce', 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: '25f9fcb7e48d923e5e1fab8d83b61a1ad67c2bc0', 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: '644080bb6720cbc5cceefecde21cb5e20190ac8b', class: "select__search" }, h("swirl-icon-search", { key: '3a6343134ad3fa0bf92e1f7f38e46fec7a53ec8c', class: "select__search-icon", size: 20 }), h("input", { key: 'd2c55ec20c598aa7c14c3bbdaf3029b590c32a96', "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: 'e5f0acc6e79fe9f867499b208b01348c9db9b51f', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'a2c9d1dd9a40fbf852245f6f943c29ed7720df5b', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '4b68e666b73bb019fca8ed0bd94153807808b092', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: 'd23daf302edb7875eebeee31b9622316fc4f04d4', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '8928aa8085a8f724e3b7cba6e6f605b8dbe29518', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }