@getflip/swirl-components 0.314.0 → 0.315.0

package/dist/collection/components/swirl-icon/icons/swirl-icon-web-asset.js

@@ -12,7 +12,7 @@ export class SwirlIconWebAsset {
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (h("svg", { key: 'e349c0da65411003c5f7069c2d6b18c843b209a9', "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: 'f95338d8c79663f076df5248cb34c3ea3298e0eb' }, h("path", { key: 'e733431239f71fc9dc95d400bf94f309f89c60c1', d: "M2.66665 13.3332C2.29998 13.3332 1.98609 13.2026 1.72498 12.9415C1.46387 12.6804 1.33331 12.3665 1.33331 11.9998V3.99984C1.33331 3.63317 1.46387 3.31928 1.72498 3.05817C1.98609 2.79706 2.29998 2.6665 2.66665 2.6665H13.3333C13.7 2.6665 14.0139 2.79706 14.275 3.05817C14.5361 3.31928 14.6666 3.63317 14.6666 3.99984V11.9998C14.6666 12.3665 14.5361 12.6804 14.275 12.9415C14.0139 13.2026 13.7 13.3332 13.3333 13.3332H2.66665ZM2.66665 11.9998H13.3333V5.33317H2.66665V11.9998Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'ef0e443a05d839705c71017bff7045b895edec3e' }, h("path", { key: 'b23bac10310286ae9f4ab2781e7c38e9ea531a1f', d: "M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'b9dff01ef9a306a17c652df034bcae44d96a352a' }, h("path", { key: 'dc68d33f6a0489109d115a3b55da8bc976e7ea46', d: "M4.66665 23.3332C4.02498 23.3332 3.47567 23.1047 3.01873 22.6478C2.56179 22.1908 2.33331 21.6415 2.33331 20.9998V6.99984C2.33331 6.35817 2.56179 5.80886 3.01873 5.35192C3.47567 4.89498 4.02498 4.6665 4.66665 4.6665H23.3333C23.975 4.6665 24.5243 4.89498 24.9812 5.35192C25.4382 5.80886 25.6666 6.35817 25.6666 6.99984V20.9998C25.6666 21.6415 25.4382 22.1908 24.9812 22.6478C24.5243 23.1047 23.975 23.3332 23.3333 23.3332H4.66665ZM4.66665 20.9998H23.3333V9.33317H4.66665V20.9998Z", fill: "currentColor" })))));
+        return (h("svg", { key: '14ae37c52f776ff771785cfa4b12fd0bc524816e', "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: 'b6598566fca264dabee243896c9cee5fee42ee91' }, h("path", { key: '5d94d5ea00fa6dfffe2367902f8e97e7e6a0e47d', d: "M2.66665 13.3332C2.29998 13.3332 1.98609 13.2026 1.72498 12.9415C1.46387 12.6804 1.33331 12.3665 1.33331 11.9998V3.99984C1.33331 3.63317 1.46387 3.31928 1.72498 3.05817C1.98609 2.79706 2.29998 2.6665 2.66665 2.6665H13.3333C13.7 2.6665 14.0139 2.79706 14.275 3.05817C14.5361 3.31928 14.6666 3.63317 14.6666 3.99984V11.9998C14.6666 12.3665 14.5361 12.6804 14.275 12.9415C14.0139 13.2026 13.7 13.3332 13.3333 13.3332H2.66665ZM2.66665 11.9998H13.3333V5.33317H2.66665V11.9998Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'cb09aa3c9fc4e85426581b5edc019b57613ebf6f' }, h("path", { key: '2352b96fc302a1c355d5bf3bed3a71fe314857f5', d: "M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'f393a92381c8f7f073946ad825976f959fa62ecc' }, h("path", { key: '143bcf3e3cb91fb062ade22800ca7171d493bcb0', d: "M4.66665 23.3332C4.02498 23.3332 3.47567 23.1047 3.01873 22.6478C2.56179 22.1908 2.33331 21.6415 2.33331 20.9998V6.99984C2.33331 6.35817 2.56179 5.80886 3.01873 5.35192C3.47567 4.89498 4.02498 4.6665 4.66665 4.6665H23.3333C23.975 4.6665 24.5243 4.89498 24.9812 5.35192C25.4382 5.80886 25.6666 6.35817 25.6666 6.99984V20.9998C25.6666 21.6415 25.4382 22.1908 24.9812 22.6478C24.5243 23.1047 23.975 23.3332 23.3333 23.3332H4.66665ZM4.66665 20.9998H23.3333V9.33317H4.66665V20.9998Z", fill: "currentColor" })))));
     }
     static get is() { return "swirl-icon-web-asset"; }
     static get encapsulation() { return "shadow"; }

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: 'ada95606ccd97522ffdc375b758f9c93dc1eb37f', "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: '5c76fd2df2124e01312db845d7305ffc99a007ae' }, h("path", { key: 'b2a91b6d3df79c0e02769eba04ef0d268ee6cbf2', 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: 'f739fe8f42a964bfc01cca371af9fc622d34854c' }, h("path", { key: 'ed8755a5cd33c4239118b5ad8290435b61e7f61a', 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: 'dc13cee3faec9e23faef7303607c765164f6794e' }, h("path", { key: 'f5c0389bf0881c62074160792b64afc07f2bda4c', 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: 'a433118665b5045c18990b2e611d3093f251aa90', "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: '936ff303643030c1c321963c61a10d84e9ef8f8a' }, h("path", { key: '04111b5122c8a5fdd1f53de8a6d9a7cf3c0a64d2', 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: '8be3b032b149784c8626da6d7557bc8947e08f12' }, h("path", { key: '1c514064fd5df430d3f95dbcf1b5df54ecc9690e', 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: '328c7db9fee7a8c6c787af7f30eaa42f0a80f615' }, h("path", { key: 'c22aa1b9dfdac10807cc388ccac51897ff682d38', d: "M4.66668 24.5002C4.02501 24.5002 3.4757 24.2717 3.01876 23.8147C2.56182 23.3578 2.33334 22.8085 2.33334 22.1668V9.3335C2.33334 8.69183 2.56182 8.14252 3.01876 7.68558C3.4757 7.22863 4.02501 7.00016 4.66668 7.00016H9.33334V4.66683C9.33334 4.02516 9.56182 3.47586 10.0188 3.01891C10.4757 2.56197 11.025 2.3335 11.6667 2.3335H16.3333C16.975 2.3335 17.5243 2.56197 17.9813 3.01891C18.4382 3.47586 18.6667 4.02516 18.6667 4.66683V7.00016H23.3333C23.975 7.00016 24.5243 7.22863 24.9813 7.68558C25.4382 8.14252 25.6667 8.69183 25.6667 9.3335V22.1668C25.6667 22.8085 25.4382 23.3578 24.9813 23.8147C24.5243 24.2717 23.975 24.5002 23.3333 24.5002H4.66668ZM4.66668 22.1668H23.3333V9.3335H4.66668V22.1668ZM11.6667 7.00016H16.3333V4.66683H11.6667V7.00016Z", fill: "currentColor" })))));
     }
     static get is() { return "swirl-icon-work"; }
     static get encapsulation() { return "shadow"; }

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

@@ -305,7 +305,7 @@ export class SwirlLightbox {
             "lightbox--hide-menu": !hasMenuItems,
             "lightbox--hide-toolbar": !hasToolbar,
         });
-        return (h(Host, { key: 'cf2fbe4f59c7e9a685c485d5f0b1bb2d554329a5', onKeydown: this.onKeyDown }, h("section", { key: '29a4dcb185a7f04da268193467b665ec889197d2', "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: '43a5fbf2af752934fc5aa871a579d41a42c8ae2c', class: "lightbox__body", role: "document" }, h("header", { key: '8d8e5194547d343b16d8e486bebb88c4e8ca46f2', class: "lightbox__header" }, h("button", { key: '424809b69c0032ee888342fc11e74b85149d33c6', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '6750c4aa72a39f53420c1eec185cf76e50eec074' })), h("div", { key: '43d748c5dddeee2592c3dde1edda6f3415db201a', class: "lightbox__toolbar" }, h("slot", { key: 'eacc078889fad7403b201d35da423aa73d030c8e', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '99879746786eb12f105e64e1b169b3a9aa054740', swirlPopover: this.menu }, h("button", { key: '8dac3a06ee4f67258cc5998bda81f1ede2cb9f02', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: 'bfcfc62bc363cc9cf0eeaf9b9dde2fbeeb4588f6' }))))), h("div", { key: '1279d38c9407e96e2700c61632c89d9dfb6b02ca', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '66ef3f89a4bd27ade28835d55c35d23f26ba596c', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '4abcfd05238c472c459da59501c15db2fe7eca95', onSlotchange: this.registerSlides }))), h("div", { key: '5024a1a6697e9ecf1278b63659677d421f7bafb1', class: "lightbox__controls" }, h("button", { key: '98219d502487681745f6e0c5742dbbb48b7be8a9', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: 'b98f490af1bbb16c789c439d611cdbb2eef3b0b2' })), h("button", { key: 'db42945ad6e84d82e026082148377de742ba6fd6', "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: '8426f41054bb51c0a33ce6ad4387c5c813ce184b' }))), showPagination && (h("span", { key: '4a8655a7f0391e29f81e07e7724718e6926fd9a5', class: "lightbox__pagination" }, h("span", { key: '31e4142c9baef013f7ed28813050fb26fc5b2c8c', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: 'b3b9fdf9f97b4e280fdfcacfb0ab5ae7a4bc5d59', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'd96f86ec28cebe7e88d72daafce562db1dd2e918' }, h("div", { key: '96c7b79ce6c7b9590180c0958f67b34d648dab94', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '75b23cb87b3018916fd18674283f4b3a7b4d47f5', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '6ee61742000fb8b60e7060c8aafe5c21e35d8145', alt: "", src: currentThumbnailUrl }))), h("div", { key: '514181f1680accc9a2693a33e60138f7237ad2e3', class: "lightbox__file-info" }, h("swirl-text", { key: '550a58e4f11c763978bb2c4401a5da0679fdeb2e', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '3bfa2491d30526be3801f9fce28be7fd0e928859', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: 'da43316f60fb71e9be4a4459e4c0748d24941989' }), h("swirl-action-list", { key: 'ef656845fa8620d997a492762c494a1a7c8a6528' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'edea6696c2a43aef6a26c0c651a707679095ccca', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'b0956719aa25b681790ba5559f730992050464df', name: "menu-items" }))))))));
+        return (h(Host, { key: 'e2a133946d61c9a6f1b7be2bb8d04e2d448c9761', onKeydown: this.onKeyDown }, h("section", { key: 'e092562ecd6acb36512021a2c09310e7c51c7a22', "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: 'eb9b0c42024bb89c1772330c5e59b90123f5cc77', class: "lightbox__body", role: "document" }, h("header", { key: 'cbffaf49acefe86b3fcbce0093843dd9b704220b', class: "lightbox__header" }, h("button", { key: 'cca4191c6f5c5b177e3f372b9622cb530d7aad4f', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '4b8a2d5f0a537457c6b61e9ee6478cbab26b2923' })), h("div", { key: '873f34e74102f26b9fa966b785d1c0f12856aa50', class: "lightbox__toolbar" }, h("slot", { key: '79beaa1e248ea0595ea319282fa04e2d2af21d9d', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '336059749cd33f7f901f21c2439e2ced74156d65', swirlPopover: this.menu }, h("button", { key: '2a62e561e0732190a4cc475446b89098011f52f8', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '262a108249592740b6ed862dd11dbed8630d1c97' }))))), h("div", { key: 'ec66e027e40630def7cabdd761c9e8642cefebe9', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '655d2b04b6d33aa9a5ea7061abb45d93fbe5dfc9', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '1816142b89480eff02cad404e4cef885e1b74622', onSlotchange: this.registerSlides }))), h("div", { key: 'ca84ebf1b893bbbd37b8ac475a6e3224d63b1fce', class: "lightbox__controls" }, h("button", { key: '1774b72c0939ed51a25593ae87ca4d830bc3159e', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: 'a0f26f632993264c66f7869118cd5097974258ad' })), h("button", { key: '105cb63732229543dc6126c34b1f461ead380ba7', "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: '14a2d1e2f041d2b86dd60c1aaec6b1f414f6ca51' }))), showPagination && (h("span", { key: '932ba99435b128a9779add3e676f8b53495660b8', class: "lightbox__pagination" }, h("span", { key: 'b5650f06d68eb8140b4414df0b5934557d620e1b', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: 'e81b65c1a263f92a0af660da1ea0f99522ef66c3', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'f5c5b974025b8cebdce51f0962056c4f035c6e50' }, h("div", { key: '6b755253aa21e5fb23d2118e43cb25816de4d2e6', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '2bb18f0b23b2661b8e58ee8b7c6c4b9ee72bc13f', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '7c90554cfb88505443059637ef654554dd56e6e5', alt: "", src: currentThumbnailUrl }))), h("div", { key: 'e50c897b14cd6474fcdddd71c4e4ea9aa733f326', class: "lightbox__file-info" }, h("swirl-text", { key: '76685b5933aad770eabba6c5320888613b1fc7d0', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '8b42173edeff6c8c43f973c7dbd06d5d3fae2c3f', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '10f0ae0738d87b105a5b81dd0ee30672272abcd5' }), h("swirl-action-list", { key: '78fdf014f7c12731898c9a7c87dd37d0dba87e25' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '8da51aeed46de3b1d608345851c878e3fad3ff1b', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '19e172f19ace91b7a311817d1f2a066b004575fc', name: "menu-items" }))))))));
     }
     static get is() { return "swirl-lightbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,6 +25,7 @@ export default {
 };
 const Template = (args) => {
     const container = document.createElement("div");
+    container.setAttribute("style", "min-height: 250px;");
     const trigger = document.createElement("swirl-button");
     const element = generateStoryElement("swirl-lightbox", args);
     trigger.label = "Open lightbox";
@@ -35,6 +36,7 @@ const Template = (args) => {
     <swirl-file-viewer description="Black puppy." file="/sample-3.jpg" thumbnail-url="/sample-3.jpg" type="image/jpeg"></swirl-file-viewer>
     <swirl-file-viewer file="/sample.mp4" type="video/mp4"></swirl-file-viewer>
     <swirl-file-viewer file="/sample-with-audio.mp4" type="video/mp4"></swirl-file-viewer>
+    <swirl-file-viewer file="/sample.csv" type="application/csv"></swirl-file-viewer>
 
     <swirl-action-list-item
       icon="<swirl-icon-attachment></swirl-icon-attachment>"

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

@@ -7,7 +7,7 @@ export class SwirlList {
         }
     }
     render() {
-        return (h(Host, { key: '1dc07ea9f85c889444451b616f6938f57d9f9f10' }, h("div", { key: '487740ce7e78ee5f0308cf97871259fc9a4d8593', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: '764fbe0d346994afbb6eca605a389733b088baeb' }))));
+        return (h(Host, { key: '3edcb0d2f9e40d196df4afb275905601fccb815d' }, h("div", { key: '78a8d50c80dde6c7e77f5b36208a567a1c08adf7', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: '35e90698df5af2ebd0c0d6c07b6d91e456bd987c' }))));
     }
     static get is() { return "swirl-list"; }
     static get originalStyleUrls() {

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

@@ -116,9 +116,9 @@ export class SwirlMenuItem {
         const className = classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (h(Host, { key: 'e4abbe7ca5fac5e40bda94650b107d1386959786' }, h("div", { key: 'e617900d9f5e4726b9f5bd34717837d0aebb3c69', class: className }, this.parentMenu?.variant === "selection"
+        return (h(Host, { key: '8b0d0ea3d265419f77586127628d22df72d03d56' }, h("div", { key: '181620d99aa412fa39cf90f8e4309fb061428b13', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: '61d911eef5d77a276334f5f09a982787716a9dc0', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: '1b1f3c384e3b9d7f3a6371c3990ec84f862fac17', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,11 @@
   --swirl-modal-height: auto;
   --swirl-modal-max-height: 90vh;
   --swirl-modal-view-height: 100vh;
+  --swirl-modal-header-height: 3.75rem;
+
   --swirl-modal-max-width: 40rem;
+  --swirl-modal-sidebar-width: 25rem;
+  --swirl-modal-max-secondary-content-width: 24rem;
   --swirl-modal-footer-padding-small: var(--s-space-12) var(--s-space-16)
     var(--s-space-12) var(--s-space-16);
   --swirl-modal-footer-padding-large: var(--s-space-16) var(--s-space-24)
@@ -214,7 +218,10 @@
   }
 
 .modal--has-secondary-content .modal__body {
-    max-width: 64rem;
+    max-width: calc(
+      var(--swirl-modal-max-width) +
+        var(--swirl-modal-max-secondary-content-width)
+    );
   }
 
 .modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders)
@@ -252,9 +259,9 @@
 @media (min-width: 992px) {
 
 .modal--has-secondary-content .modal__primary-content {
-      max-width: calc(100% - 24rem);
+      max-width: calc(100% - var(--swirl-modal-max-secondary-content-width));
       max-height: none;
-      flex-basis: calc(100% - 24rem)
+      flex-basis: calc(100% - var(--swirl-modal-max-secondary-content-width))
   }
     }
 
@@ -262,6 +269,63 @@
     display: block;
   }
 
+.modal__main-content {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.modal__sidebar {
+  display: none;
+}
+
+.modal--has-sidebar-content .modal__body {
+    max-width: calc(
+      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)
+    );
+  }
+
+@media (min-width: 768px) {
+    .modal--has-sidebar-content .modal__sidebar {
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      flex-shrink: 0;
+      width: var(--swirl-modal-sidebar-width);
+      border-right: var(--s-border-width-default) solid var(--s-border-default);
+    }
+
+      .modal--has-sidebar-content .modal__sidebar .modal__sidebar-header {
+        border-bottom: var(--s-border-width-default) solid transparent;
+      }
+
+        .modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading {
+          display: flex;
+          align-items: center;
+          height: var(--swirl-modal-header-height);
+          padding-top: var(--s-space-12);
+          padding-right: var(--s-space-24);
+          padding-bottom: var(--s-space-12);
+          padding-left: var(--s-space-24);
+        }
+
+      .modal--has-sidebar-content .modal__sidebar .modal__sidebar-content {
+        display: block;
+        padding-left: var(--s-space-24);
+        padding-right: var(--s-space-24);
+        padding-bottom: var(--s-space-16);
+        padding-top: var(--s-space-16);
+        flex-grow: 1;
+        overflow-y: auto;
+      }
+  }
+
+@media (min-width: 992px) {
+    .modal--has-sidebar-content .modal__primary-content {
+      flex-basis: calc(100% - 20rem);
+    }
+  }
+
 @media (min-width: 768px) {
     .modal--scrolled:not(.modal--has-header-tools) .modal__header {
       border-bottom-color: var(--s-border-default);
@@ -276,6 +340,12 @@
     }
   }
 
+@media (min-width: 768px) {
+    .modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header {
+      border-bottom-color: var(--s-border-default);
+    }
+  }
+
 .modal__backdrop {
   position: fixed;
   background-color: rgba(0, 0, 0, 0.2);
@@ -294,11 +364,11 @@
   position: relative;
   z-index: var(--s-z-40);
   display: flex;
+  flex-direction: row;
   overflow: hidden;
   width: 100vw;
   height: var(--swirl-modal-view-height);
   background-color: var(--s-surface-overlay-default);
-  flex-direction: column;
 }
 
 @media (min-width: 768px) {
@@ -345,7 +415,7 @@
 @media (min-width: 768px) {
 
 .modal__header-bar {
-    height: 3.75rem;
+    height: var(--swirl-modal-header-height);
     padding-top: var(--s-space-12);
     padding-right: var(--s-space-24);
     padding-bottom: var(--s-space-12);
@@ -412,6 +482,8 @@
 .modal__primary-content {
   display: flex;
   overflow: hidden;
+  overflow-y: auto;
+  flex-grow: 1;
   flex-basis: 100%;
   flex-direction: column;
 }
@@ -449,12 +521,13 @@
 .modal__secondary-content {
     overflow-x: hidden;
     overflow-y: auto;
-    max-width: 24rem;
+    max-width: var(--swirl-modal-max-secondary-content-width);
     max-height: none;
     padding-right: var(--s-space-24);
     padding-bottom: var(--s-space-16);
     padding-left: 0;
-    flex-basis: 50%
+    flex-basis: 50%;
+    flex-grow: 1
 }
   }
 
@@ -476,6 +549,13 @@
 }
   }
 
+.modal--has-secondary-content.modal--has-sidebar-content .modal__body {
+    max-width: calc(
+      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +
+        var(--swirl-modal-max-secondary-content-width)
+    );
+  }
+
 @keyframes modal-scale-in {
   from {
     transform: scale(0);

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

@@ -8,6 +8,7 @@ import * as focusTrap from "focus-trap";
  * @slot header-tools - Used to display elements inside the sticky header, below the label
  * @slot custom-header - Optional custom header; should be used hidden label
  * @slot custom-footer - Optional custom footer; replaces the default footer with primary and secondary actions
+ * @slot sidebar-content - Sidebar content
  */
 export class SwirlModal {
     constructor() {
@@ -30,6 +31,10 @@ export class SwirlModal {
             this.secondaryAction.emit(event);
         };
         this.determineScrollStatus = () => {
+            this.determineMainScrollStatus();
+            this.determineSidebarScrollStatus();
+        };
+        this.determineMainScrollStatus = () => {
             const scrolled = this.scrollContainer?.scrollTop > 0;
             const scrolledDown = Math.ceil(this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight) >= this.scrollContainer?.scrollHeight;
             const scrollable = this.scrollContainer?.scrollHeight > this.scrollContainer?.offsetHeight;
@@ -43,6 +48,12 @@ export class SwirlModal {
                 this.scrollable = scrollable;
             }
         };
+        this.determineSidebarScrollStatus = () => {
+            const scrolled = this.sidebarScrollContainer?.scrollTop > 0;
+            if (scrolled !== this.sidebarScrolled) {
+                this.sidebarScrolled = scrolled;
+            }
+        };
         this.closable = true;
         this.closeButtonLabel = "Close modal";
         this.height = undefined;
@@ -68,6 +79,8 @@ export class SwirlModal {
         this.secondaryContentPaddingBlockStart = undefined;
         this.secondaryContentPaddingInlineEnd = undefined;
         this.secondaryContentPaddingInlineStart = undefined;
+        this.sidebarLabel = undefined;
+        this.hideSidebarContent = undefined;
         this.isOpen = false;
         this.closing = false;
         this.hasCustomHeader = undefined;
@@ -76,7 +89,9 @@ export class SwirlModal {
         this.hasSecondaryContent = undefined;
         this.scrollable = false;
         this.scrolled = false;
+        this.sidebarScrolled = false;
         this.scrolledDown = false;
+        this.hasSidebarContent = undefined;
     }
     componentDidLoad() {
         this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
@@ -93,6 +108,7 @@ export class SwirlModal {
             this.updateCustomHeaderStatus();
             this.updateHeaderToolsStatus();
             this.updateSecondaryContentStatus();
+            this.updateSidebarContentStatus();
         });
     }
     componentDidRender() {
@@ -152,14 +168,19 @@ export class SwirlModal {
     updateSecondaryContentStatus() {
         this.hasSecondaryContent = Boolean(this.el.querySelector('[slot="secondary-content"]'));
     }
+    updateSidebarContentStatus() {
+        this.hasSidebarContent = Boolean(this.el.querySelector('[slot="sidebar-content"]'));
+    }
     handleAutoFocus() {
         this.modalEl.querySelector("input[autofocus]")?.focus();
     }
     lockBodyScroll() {
         disableBodyScroll(this.scrollContainer);
+        disableBodyScroll(this.sidebarScrollContainer);
     }
     unlockBodyScroll() {
         enableBodyScroll(this.scrollContainer);
+        enableBodyScroll(this.sidebarScrollContainer);
     }
     render() {
         const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
@@ -173,24 +194,26 @@ export class SwirlModal {
             "modal--padded": this.padded,
             "modal--scrollable": this.scrollable,
             "modal--scrolled": this.scrolled,
+            "modal--sidebar-scrolled": this.sidebarScrolled,
             "modal--scrolled-down": this.scrolledDown,
             "modal--hide-secondary-content-borders": this.hideSecondaryContentBorders,
+            "modal--has-sidebar-content": this.hasSidebarContent && !this.hideSidebarContent,
         });
-        return (h(Host, { key: '489e6f51113342c2bd3df6952f6cb624f96a5752' }, h("section", { key: '052d8e44f60607b98a0c44a8cf5b2b5d0769ed4e', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '412f3ba042f44340e27d29635df3c0bb7b546ab3', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'd50c04d55d1776c3abc92754508264c75e4153bf', class: "modal__body", style: {
+        return (h(Host, { key: 'd83eb2f5ad1e55b55fd2aeb3b6b56017f25645ae' }, h("section", { key: '689da28246f94089cc15c9192e9429f334ab381f', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '700ee93e5698164a29e5abb396f8e2d1ee03a83b', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'e083a0ead29396bb923c68e4e1ea529c95a1cf7b', class: "modal__body", style: {
                 "--swirl-modal-max-height": this.maxHeight,
                 "--swirl-modal-height": this.height,
                 minHeight: this.minHeight,
                 maxWidth: this.maxWidth,
-            } }, h("header", { key: 'e4565be23a59443f9c96d4059f4da68e0eeae8a7', class: "modal__custom-header" }, h("slot", { key: 'd6eec7880f41b72574eefe0fcee99147e2b7c02f', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '93dbd08e5069064270c5765b7d8832a534a63685', class: "modal__header" }, h("div", { key: '18a11e0d9078daafc08d06e9ebce86781442dc84', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '85e45fac1cda1bceeeb37c6c18834ebc84fbf854', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            } }, h("aside", { key: 'bab821dd0f6b8e3e2c06674419e9874009a3eee6', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '5d02aae278ab7e091b5229df0ca1bd01e9502bda', class: "modal__sidebar-header" }, h("swirl-heading", { key: '44e72e3172ccc96f30add2c05952cd7e68be928b', as: "h3", class: "modal__sidebar-heading", level: 3, text: this.sidebarLabel }))), h("div", { key: '1aec35149fafa056058987cfe7b9cb5b5927e4cf', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '8fc6849c14ac4b3ea635f1a3bdee930efdf7ddf3', name: "sidebar-content" }))), h("div", { key: 'e49e79ff4253efcabbb99c87fad194b6bf683048', class: "modal__main-content" }, h("header", { key: 'b389bf0b5d173fb891d6d96d82eedc2f0755aa7a', class: "modal__custom-header" }, h("slot", { key: '56c797b445060a2590528b3b983fa8dafa9666a5', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '0d1941638cb33f74463eb1700ea4798e368053c6', class: "modal__header" }, h("div", { key: '6c7bbcd733ad94cf7e5558800a894db2e8471a44', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'c436082ee6c3e8888e6dad3853d97859b96ec807', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '73304efa624ecdf6536fd084d8cfe7445a88d04b', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '896b4e3a5ceec854b264d6f780b7d1e592a72a29', class: "modal__content-container", style: {
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '06cfbd6edcfe13861a0a3332f3a3f95227b32fe8', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'e9cbd554d92018f6718db0643a80283bbf68a7fa', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: '7ecfec7fa0b1c8fedd5d4dc3aa74f4e6413aa6c4', class: "modal__primary-content", style: {
+            } }, h("div", { key: '1e351e7e27216524eba51e0f33c09fad9d371636', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: '2807d370099a4311012e4d7a4ab6047aa1d4ad84', class: "modal__header-tools" }, h("slot", { key: '67e63aa64416e028fce9457b8d94f756b8550727', name: "header-tools" })), h("div", { key: '8e0b2301c72bf8f9404800187c2076904a405253', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '125a1753f5191201728b40ef846e29d4ed53631b' }))), h("div", { key: '8a0d01f693d63dcac146f30ac3c6690fb35aad44', class: "modal__secondary-content", style: {
+            } }, h("div", { key: 'ebccae92208659f4cece6ee1146992e9a10cdbac', class: "modal__header-tools" }, h("slot", { key: '980fdf7637abe2e7dbc473ad23d34bf4819ace54', name: "header-tools" })), h("div", { key: '68fe74b27c08e278368b5eb49f0f4b7a047148a5', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '2cff014d7b3526f4b66cf695f7afeeb5523dfb17' }))), h("div", { key: '89da507b1a17b64297acf9c5d40687e310adeccb', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -208,7 +231,7 @@ export class SwirlModal {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: 'eb019f455144b468f9d6c409a297981bd4823d50', name: "secondary-content" }))), h("div", { key: '5d9ee4d9c20182b4f7f327ca6526632ea7c93382', class: "modal__custom-footer" }, h("slot", { key: 'b586fad0746334c818784b5a6e37bdd70838b12c', name: "custom-footer" })), showControls && (h("footer", { key: '2c11ab500412841d0356e952de246c12163e3c04', class: "modal__controls" }, h("swirl-button-group", { key: 'e813aadf4314368b8e6153a346e8a0934101245e', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '9a31c1969a6a276809f0e3eb907761def71f8464', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '3f5883b9d453cb2d8b47bbf34797aaef72e0bff8', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+            } }, h("slot", { key: 'd88250edad6df3c101975ae3e53809f483973915', name: "secondary-content" }))), h("div", { key: '76633379ef651d1e297b5b2a6b82d2db5c9115a7', class: "modal__custom-footer" }, h("slot", { key: 'bd9734502bf0bc566e24584cbd130defecdba0de', name: "custom-footer" })), showControls && (h("footer", { key: '66eded5e059d22c8c45cf252fdbd22bf9cd70c1e', class: "modal__controls" }, h("swirl-button-group", { key: '2557df6c4f02368d7b073d8dd6d2e5cbb13debe7', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'dd1e2d6fcd31b8313feaa305596fbef1b26aec23', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'd3826c07f9f7fb39c8ceaab74246c895c7177b85', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     static get is() { return "swirl-modal"; }
     static get originalStyleUrls() {
@@ -693,6 +716,40 @@ export class SwirlModal {
                 },
                 "attribute": "secondary-content-padding-inline-start",
                 "reflect": false
+            },
+            "sidebarLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sidebar-label",
+                "reflect": false
+            },
+            "hideSidebarContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-sidebar-content",
+                "reflect": false
             }
         };
     }
@@ -706,7 +763,9 @@ export class SwirlModal {
             "hasSecondaryContent": {},
             "scrollable": {},
             "scrolled": {},
-            "scrolledDown": {}
+            "sidebarScrolled": {},
+            "scrolledDown": {},
+            "hasSidebarContent": {}
         };
     }
     static get events() {

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

@@ -7,30 +7,49 @@ describe("swirl-modal", () => {
             html: `<swirl-modal label="Dialog">Content</swirl-modal>`,
         });
         expect(page.root).toEqualHtml(`
-      <swirl-modal label="Dialog">
-        <section aria-hidden="true" aria-label="Dialog" aria-modal="true" class="modal modal--padded modal--variant-default" role="dialog">
-          <div class="modal__backdrop"></div>
-          <div class="modal__body">
-            <header class="modal__custom-header"></header>
-            <header class="modal__header">
-              <div class="modal__header-bar">
-                <swirl-button class="modal__close-button" hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close modal"></swirl-button>
-                <swirl-heading as="h2" class="modal__heading" level="3" text="Dialog"></swirl-heading>
-              </div>
-            </header>
-            <div class="modal__content-container">
-              <div class="modal__primary-content">
-                <div class="modal__header-tools"></div>
-                <div class="modal__content">
-                  Content
-                </div>
-              </div>
-              <div class="modal__secondary-content"></div>
-            </div>
-            <div class="modal__custom-footer"></div>
+     <swirl-modal label="Dialog">
+  <section
+    aria-hidden="true"
+    aria-label="Dialog"
+    aria-modal="true"
+    class="modal modal--padded modal--variant-default"
+    role="dialog"
+  >
+    <div class="modal__backdrop"></div>
+    <div class="modal__body">
+      <aside class="modal__sidebar">
+        <div class="modal__sidebar-content"></div>
+      </aside>
+      <div class="modal__main-content">
+        <header class="modal__custom-header"></header>
+        <header class="modal__header">
+          <div class="modal__header-bar">
+            <swirl-button
+              class="modal__close-button"
+              hidelabel=""
+              icon="<swirl-icon-close></swirl-icon-close>"
+              label="Close modal"
+            ></swirl-button>
+            <swirl-heading
+              as="h2"
+              class="modal__heading"
+              level="3"
+              text="Dialog"
+            ></swirl-heading>
           </div>
-        </section>
-      </swirl-modal>
+        </header>
+        <div class="modal__content-container">
+          <div class="modal__primary-content">
+            <div class="modal__header-tools"></div>
+            <div class="modal__content">Content</div>
+          </div>
+          <div class="modal__secondary-content"></div>
+        </div>
+        <div class="modal__custom-footer"></div>
+      </div>
+    </div>
+  </section>
+</swirl-modal>
     `);
     });
     it("renders controls and fires events", async () => {

package/dist/collection/components/swirl-modal/swirl-modal.stories.js

@@ -7,7 +7,7 @@ export default {
         docs: {
             page: Docs,
             source: {
-                code: `<swirl-modal id="modal" label="Dialog" primary-action-label="Primary" secondary-action-label="Cancel">
+                code: `<swirl-modal id="modal" label="Dialog" primary-action-label="Primary" secondary-action-label="Cancel" sidebar-label="Sidebar" >
   <swirl-text>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
     eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -58,9 +58,24 @@ const Template = (args) => {
     </swirl-text>
   </swirl-card>
 </swirl-box>
+<swirl-box  slot="sidebar-content">
+  <swirl-text >
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt.
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+    sit amet.
+  </swirl-text>
+</swirl-box>
 <swirl-box padding-block-start="4" padding-block-end="16" slot="header-tools">
   <swirl-search auto-focus label="Search"></swirl-search>
-</div>
+</swirl-box>
   `;
     container.append(trigger, element);
     return container;
@@ -70,4 +85,5 @@ SwirlModal.args = {
     label: "Label",
     primaryActionLabel: "Primary",
     secondaryActionLabel: "Secondary",
+    sidebarLabel: "Sidebar",
 };

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

@@ -340,7 +340,7 @@ export class SwirlOptionList {
     render() {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
-        return (h(Host, { key: '43f5710aeb2b65898268fcd927fdeb874a824b6a' }, h("swirl-visually-hidden", { key: '10926f4878a5d2f6af9ff263295dea78da3e4490', role: "alert" }, this.assistiveText), h("div", { key: 'c4de01c87a4656fec4a36f39f750b37b63e13a03', "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: '28995610d59ef6639a1f84d4efdfce1d72895687', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '4eab0b0c423b8828eba51a502a4151deedc92314' }, h("swirl-visually-hidden", { key: '065551ffde4b331cf8841918ac460de1405ae338', role: "alert" }, this.assistiveText), h("div", { key: 'f64d9a5c330cf280aa33899df5756037ba5ad884', "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: '26c9fc517ecd7a54bf30e1d48ce881493c64ec5f', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-option-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -71,9 +71,9 @@ export class SwirlOptionListItem {
             "option-list-item--selected": this.selected,
             "option-list-item--show-avatar": showAvatar,
         });
-        return (h(Host, { key: 'b2492b2d478e6435a97f7fa4c2657ebb852e8c0d' }, h("div", { key: '6a091e0500dd92613309bdb88d3bff6f07cfdc68', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        return (h(Host, { key: 'f1b6b512f2372ae3cb60d36983abe03a6b6bb9fc' }, h("div", { key: 'e86bcb9748b59b56f490b62554cc54ab85443b69', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
                 ? `option-list-item-${this.elementId}-description`
-                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '09c09dc002f9bfc69697d51f8f4dd639d497353d', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '27f2b44a6df768bc9907663f38072325f0aa52ce', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '513a2da62cbce54fff1cee3710a3bf7a48ce9dfd', class: "option-list-item__checkbox" }, h("span", { key: 'e0a3e8e765ed079bedbfb321ab61bfb50932f459', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '684b13d9ddf7ffca4fc12b24b30d2383ab0ac52f', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'eef7f6947815c12298a5b19fd8a2a4678de9de7b', class: "option-list-item__avatar" }, h("slot", { key: '225f3a61eb4ddae350eaf9bdfbd53b736da17c53', name: "avatar" })), h("span", { key: '15b825ca1114482a9211d2b2bbb02141349d0b1d', class: "option-list-item__label-container" }, h("span", { key: 'e7d3bfbe8def7ec92ebeda6b390ae813618fe0a1', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '1076b9cefb756094aea85f5197478db2b5d73d2e', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '8056616d581324485dc7fff9a705909420fe22a2', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'e5391c164fef2078b03cd1ace8943ea0c3205277', size: this.iconSize })))), this.allowDrag && (h("button", { key: '780f66258f6dda72f5cb429d654d7f7119e3c9ad', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: 'f39ccecbc05e90b18d8385c6f6a019d054ce313e', size: this.iconSize })))));
+                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '179a9507fb40f6278eac9acfcf77a86ccd9efa7b', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'da0ffafdd3ec011ed86daaaca4e086e24d7ec300', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '8bed40c7d7eec1863d53b06857a877145b7fcb08', class: "option-list-item__checkbox" }, h("span", { key: '64b4b8b73040af5d858711968d3882e5dc96ef33', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '1b849f3d62245c98f9dcebc0ca4272ed2ce9e7c5', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: '99cac6c037931133269d9d8e8cf50fc546f52f83', class: "option-list-item__avatar" }, h("slot", { key: '0458052c4864c367cae1869b446da4f1013d3079', name: "avatar" })), h("span", { key: '5e582a00f832a1d6bc9948459eaa24d1adea28cb', class: "option-list-item__label-container" }, h("span", { key: 'e86dd76f9d65ff06f87538bd83c18fe093cea9c6', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'a497c2a9673827573af1d502810bc66934392fe6', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '484d043d967ebee0cb42141a084a7f7820c5cdda', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'e2fe3ba67f836ec3a6b0b2af3ec51b61d037fa9c', size: this.iconSize })))), this.allowDrag && (h("button", { key: '12f85e5050baee5bbda1be1c4f5722292b22b880', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: 'bd74ec69747e7fc6ae4798ffb8841251dcee7ca8', size: this.iconSize })))));
     }
     static get is() { return "swirl-option-list-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,7 +10,7 @@ export class SwirlOptionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '4bbe29eed063cd4492d784554b3bf7d0bad8e033' }, this.hasSeparator && (h("swirl-separator", { key: '492c34faebffe59b4d6861d5e5b6f860a8b0de9c', spacing: this.separatorSpacing })), h("div", { key: '7647b82e5219048c7245a1d08a88e7e5207ad535', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'ce0f368d84916358da4528efc4356e8e3cfd210d', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: '0423559633818a2d10c9d1338fbadaa6dad585d1', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'b9bb99263df785c9e647b39fda0520c601f005f8' })))));
+        return (h(Host, { key: '9242a258bef0b3abc2ad3123987e90671cab2d65' }, this.hasSeparator && (h("swirl-separator", { key: '234d8ac7c1136905df7821c0015b371777847ccf', spacing: this.separatorSpacing })), h("div", { key: '1b5f4e348be9afa01f006afe6fc369291bc5f234', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'f60b9e0d209d215bdffd7aec9aba9a1c1129ae8d', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: 'fa6f86dede5f1dce1e345f78d4b8bdcb5989e821', spacing: this.spacing, align: "stretch" }, h("slot", { key: '9e055ce5c423e8678f2dac9900f2a1a12361b108' })))));
     }
     static get is() { return "swirl-option-list-section"; }
     static get encapsulation() { return "shadow"; }