@getflip/swirl-components 0.363.5 → 0.364.0

package/dist/esm/swirl-icon-web-asset.entry.js

@@ -14,7 +14,7 @@ const SwirlIconWebAsset = class {
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (h("svg", { key: '001d68c6e0bbda7a6ee83789b3c572a2d5cd6030', "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: '1b07a843a386b7233c5533f78342eea920bf2a2b' }, h("path", { key: '73d9811158ad6a48ad58d171a1a158008719a025', 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: 'd98ebda02870bb587b1db41222904cca7dbd4d81' }, h("path", { key: '62573b46fedadbb1ba91145dffc864ab95384c56', 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: 'e783de271508003deb560ea24deb2756a106ea9a' }, h("path", { key: '24d783a0e5cb0b3b4e8101d4261cd6d4e26d350b', 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: '41bdd673690b78d431704d20cf9016f444d63aed', "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: 'eb8af783f4a67ab6610b24f44918a8e54a252108' }, h("path", { key: '67cf070d6831544dfaa322a515f063745e8d186e', 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: '97bf84998fdb301e705b8f2174742e7e997039c5' }, h("path", { key: '0f945f0674804a77e1edaa7f338f8038aebb78ec', 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: '5cf7a4f9bb19b1bb5e6518551696b7b38c72483a' }, h("path", { key: 'a5f83132f5426ceebee49471cbcc32e298b4cebe', 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" })))));
     }
 };
 SwirlIconWebAsset.style = swirlIconCss;

package/dist/esm/swirl-icon-work.entry.js

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

package/dist/esm/swirl-lightbox.entry.js

@@ -306,7 +306,7 @@ const SwirlLightbox = class {
             "lightbox--hide-menu": !hasMenuItems,
             "lightbox--hide-toolbar": !hasToolbar,
         });
-        return (h(Host, { key: '44d910830e39a36868fe66d53a63867f5fb3b168' }, h("section", { key: 'a7c5a890139cb8c2c7523916e6cf17620257539c', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: 'd10bfd490e4357b93bea59524e0f19c11c3e7810', class: "lightbox__body", role: "document" }, h("header", { key: '00b3b2e59b4032db3abdb2fcc2808897544149db', class: "lightbox__header" }, h("button", { key: '8b89ec0d67a43e6e8428ac89507ebdc235a95ef7', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: 'd03b3dd02e950027099f5d4536630f5e5aa0bc5d' })), h("div", { key: '8db361ccdb45adfc0fce5a6b128c13d5ed3f2733', class: "lightbox__toolbar" }, h("slot", { key: '8001809cc43fe056bcf86aa4681d7fe373e98f02', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '4168bd11c3667dfe1d582c1bffd2f17a7463c9fa', swirlPopover: this.menu }, h("button", { key: '89f77f50a11f80960b6d7f39e4666e18ae605e6b', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '3595d52f237c6ce012b2700e4d4417a97803e2b2' }))))), h("div", { key: '399160753822f2f0f1711bdd6366ec5522f9447a', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: 'b309112d65e9eed512136b47ae6150a55c4b4416', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '95e4849ed6439dee311ea66d834b6684743aba46', onSlotchange: this.registerSlides }))), h("div", { key: '62406e5da7cc9abba493ea1f9ef910460bbb2458', class: "lightbox__controls" }, h("button", { key: '1a64a164c299eed57192f52dfdcd0883c066b563', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '6242382bcdf891898f3789cb5540f392bf2d19aa' })), h("button", { key: '340d624373858a10bb7ba3d626ea988ad29d84ff', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: '7b3b2600b743b0952ece4341adc051470eba391e' }))), showPagination && (h("span", { key: '45d26dd55e5624692e4260c8b6ae5484c92f79d4', class: "lightbox__pagination" }, h("span", { key: 'fc83836a006e94b83e8cf5f5f741126f884e2975', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '85091a1d4d4fbc32fc74d3af716b95876fad2c50', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'bab174c78042d2643aaa75394d0ee35686930c5a' }, h("div", { key: 'c80b129793536f0375a13d01deabb41505666358', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '58acedc8dfe362f36ee02ea7b905368bed607a7e', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '6d60f865be2f0bdd82814156b377a0431d418aca', alt: "", src: currentThumbnailUrl }))), h("div", { key: '0f066e7a4716e726e7b816ad7a9d6cd7049241d6', class: "lightbox__file-info" }, h("swirl-text", { key: '1a239ec61e2afc202e3114796a47c37bd4a527bd', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: 'c4be1662bf79cfd1690f022bd8315eb584995be4', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '95f9496cd676af17c6b74d1406ec9cf425880699' }), h("swirl-action-list", { key: '9c734b754a5f0147b567c934265bceb643557478' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '623f4abebfe9506f62bfc592dc892fbb298c952c', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '4089046a45dd573437cbf4b095828a7f6ab9a2f2', name: "menu-items" }))))))));
+        return (h(Host, { key: '36005d5ae9435589bcbcacc9ca910f8728bf1837' }, h("section", { key: '954cf1ba4de53ce3e6faf32c7536c9d7042918b3', "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: 'dd84102ba96eac62c20c187fbf251439e30846a1', class: "lightbox__body", role: "document" }, h("header", { key: 'aab524d3394b64ed28fbfd88cca202bf204ec955', class: "lightbox__header" }, h("button", { key: '4b245cb96afc343da8fe09667416987850d2b109', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: 'cc4ad11f67535e2faa6bd34274cfe36b46125d83' })), h("div", { key: '3b04753c7e549996a8a95915e8a42f850d4474bf', class: "lightbox__toolbar" }, h("slot", { key: 'e38a38dad2c34b517c80e95364b3d77eade42fae', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: 'fa2d15227d8181232ddf3585f9ad51020eec05b6', swirlPopover: this.menu }, h("button", { key: '07ee2e0cec3c9e1db0eb80214d51f94dfd5a74c2', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '674be8062aefe53ece4389a90942e72d779b876d' }))))), h("div", { key: '44a6fe2c0d008c019f82834375546b982e2b4107', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: 'd75c790643034c96bc8f31e20fcf47cd019cdeeb', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'f2c43db3cf0012b9e43b5226938291e62e2bf7e4', onSlotchange: this.registerSlides }))), h("div", { key: '14dbd32990e4b1db957474a8a7ecb35d37c2dc90', class: "lightbox__controls" }, h("button", { key: '4ead7d2fcd0ebf80d61f76e2e7219899e408beb1', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: 'dcb4a02ffe9212eb93351924e335873fa98dda27' })), h("button", { key: '908dad9d4d62f372a838678d034164b6f6fd5bb7', "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: 'a6ee1df2fa3802ed968974d18ea4b7eabadc8f17' }))), showPagination && (h("span", { key: '1ac483103151727d34e8ac3caff6ee2eacedd149', class: "lightbox__pagination" }, h("span", { key: 'd55773c5f7a0b5371d5c2c131aff58e110302fdb', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '2b71e2b7f3d1ee25577a814c5e8ae45802c36daf', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '8cbbc3850207411f7ed212438830e7f2e5fb6a02' }, h("div", { key: '364662ca09b02f197bf54a07d15517ad7f932161', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '8671bdcd90a6f51bc10d422a1954c4e89a6855ba', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '8d55a9d22dba3571c032779a0afc97bab9c6aaeb', alt: "", src: currentThumbnailUrl }))), h("div", { key: '789bfbfa03af60c182007a69109580135a04488d', class: "lightbox__file-info" }, h("swirl-text", { key: '43afa1b58fe843b7cce0a01a80a718a59299327d', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '2aab7e3050b206248dd16672fce4d31c71cd5341', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '84fc595744cf660916d36bc9f40cc3b61f3f0d48' }), h("swirl-action-list", { key: '302d95c9e44db73267e898eaebbeab4a4882c3cb' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'a518e559095d892eecaa32375d5d70065799733f', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'f52932791bbee226519164a5ec2ac3c65ea912fd', name: "menu-items" }))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-list.entry.js

@@ -13,7 +13,7 @@ const SwirlList = class {
         }
     }
     render() {
-        return (h(Host, { key: 'edf5629064794e6c062c3717a8f6d5d963caef62' }, h("div", { key: '9f031024b2c3e6f9035c0a5703a6aa9f3a73049b', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: 'd80dcea7f3ed2f0f80120f3eb57b43a9c4ed9f3d' }))));
+        return (h(Host, { key: 'e0aac47a8a10d97fec15676b0556778e8d4d8c74' }, h("div", { key: '62efbe72a94c4421318cfb152e26886a834e2d8c', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: '38a44d535c3130e68831014ea35b333e980f29fa' }))));
     }
 };
 SwirlList.style = swirlListCss;

package/dist/esm/swirl-menu-item.entry.js

@@ -107,9 +107,9 @@ const SwirlMenuItem = class {
         const className = classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '0e948327860ed6638e0f45d6ba03a964c2576630' }, h("div", { key: 'b910b71a65c2d1965abe6eed1e978ab16f453039', class: className }, this.parentMenu?.variant === "selection"
+        return (h(Host, { key: 'ce5fd0c1951a8607da47a504d5c91b6f949ae68f' }, h("div", { key: '11a030eb9f50379bb11b7badc5e941c78059bf6b', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: 'd136df4bfc82b1ea7c763a3a95b0875b41e28ee4', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: 'f2b7b6450294d85c491587d844cfc15f8299a579', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-option-list-section.entry.js

@@ -10,7 +10,7 @@ const SwirlOptionListSection = class {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '771df22b14cee7228fea2b337a2e1657caef0d88' }, this.hasSeparator && (h("swirl-separator", { key: '0ab3cc55ba61d078606604f1ca5db5b259aa43ec', spacing: this.separatorSpacing })), h("div", { key: '1ff69e05686a92e1a599bbfe49da333be178dc64', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'e0158975efa4255429b1616825ee55d0a23ce732', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: '7c53b0b484e8c22add4c065c47da24b606f8902c', spacing: this.spacing, align: "stretch" }, h("slot", { key: '68f19ef6a86bb8bc1e6782f080cb7596ddd51a0e' })))));
+        return (h(Host, { key: 'defa59842ad48e096d9e75ff2dd68789c2bef3bc' }, this.hasSeparator && (h("swirl-separator", { key: '777e774e586230537e2692ebc3dfd1be764089c7', spacing: this.separatorSpacing })), h("div", { key: '4a1a0c4265889c27bf6a34f299d290bf43f8bf4b', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '1e06bae9cd71111cf7b109e5a0f285452596f4cf', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("swirl-stack", { key: 'a989c1c039543ca9369e5704fee5e57164757ad7', spacing: this.spacing, align: "stretch" }, h("slot", { key: '5f081f5b5c1a13252ededbe26ed196a09ef45970' })))));
     }
 };
 SwirlOptionListSection.style = swirlOptionListSectionCss;

package/dist/esm/swirl-option-list_2.entry.js

@@ -0,0 +1,510 @@
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-CWOhMVtL.js';
+import { S as Sortable } from './sortable.esm-CMrz6687.js';
+import { l as closestPassShadow, q as querySelectorAllDeep } from './utils-D_MUFqkF.js';
+import { v as v4 } from './v4-DD3477fe.js';
+import { c as classnames } from './index-orsBiyT_.js';
+import { D as DesktopMediaQuery } from './media-query.service-Cx_VEA2f.js';
+
+const swirlOptionListCss = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";
+
+const SwirlOptionList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemDrop = createEvent(this, "itemDrop", 7);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.allowDeselect = true;
+        this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
+        this.assistiveTextItemMoving = "Current position:";
+        this.assistiveTextItemMoved = "Item moved. New position:";
+        this.selectAllLabel = "Select all";
+        this.value = [];
+        this.selectAllState = false;
+        this.selectAllValue = v4();
+        this.onClick = (event) => {
+            event.preventDefault();
+            const target = event.target;
+            const item = target?.closest("swirl-option-list-item");
+            const composedTarget = event.composedPath()[0];
+            const clickedOption = Boolean(closestPassShadow(composedTarget, '[role="option"]'));
+            if (!Boolean(item) || !clickedOption) {
+                event.preventDefault();
+                return;
+            }
+            if (item.value === this.selectAllValue) {
+                this.selectAllChanged();
+            }
+            else {
+                this.selectItem(this.items.findIndex((i) => i.value === item.value));
+            }
+        };
+        this.onKeyDown = (event) => {
+            if (event.code === "ArrowDown") {
+                event.preventDefault();
+                if (!Boolean(this.dragging)) {
+                    this.focusNextItem();
+                }
+                else {
+                    this.moveDraggedItemDown();
+                }
+            }
+            else if (event.code === "ArrowUp") {
+                event.preventDefault();
+                if (!Boolean(this.dragging)) {
+                    this.focusPreviousItem();
+                }
+                else {
+                    this.moveDraggedItemUp();
+                }
+            }
+            else if (event.code === "Space" || event.code === "Enter") {
+                const startingDrag = event.target.classList.contains("option-list-item__drag-handle");
+                if (!startingDrag && Boolean(this.dragging)) {
+                    event.preventDefault();
+                    this.stopDrag(this.dragging);
+                    return;
+                }
+                const target = event.composedPath()[0];
+                const optionFocused = Boolean(closestPassShadow(target, '[role="option"]'));
+                const selectAllFocused = target?.closest("swirl-option-list-item")?.value ===
+                    this.selectAllValue;
+                if (!optionFocused && !selectAllFocused) {
+                    return;
+                }
+                event.preventDefault();
+                if (Boolean(this.dragging)) {
+                    this.stopDrag(this.dragging);
+                }
+                else if (selectAllFocused) {
+                    this.selectAllChanged();
+                }
+                else {
+                    this.selectFocusedItem();
+                }
+            }
+            else if (event.code === "Home") {
+                event.preventDefault();
+                if (this.showSelectAll) {
+                    this.focusSelectAll();
+                }
+                else {
+                    this.focusItem(0);
+                }
+            }
+            else if (event.code === "End") {
+                event.preventDefault();
+                this.focusItem(this.items.length - 1);
+            }
+            else if (event.code === "KeyA" &&
+                (event.metaKey || event.ctrlKey) &&
+                this.multiSelect) {
+                event.preventDefault();
+                this.selectAllItems();
+            }
+            else if (event.code === "Tab") {
+                if (Boolean(this.dragging)) {
+                    event.preventDefault();
+                }
+            }
+        };
+        this.resetTabIndex = () => {
+            this.removeItemsTabIndex();
+            this.focusedItem = undefined;
+            const item = this.items[0]?.querySelector('[role="option"]');
+            const selectAllItem = this.selectAllEl?.querySelector('[role="option"]');
+            (selectAllItem || item)?.setAttribute("tabIndex", "0");
+        };
+        this.selectAllChanged = () => {
+            if (this.disabled) {
+                return;
+            }
+            const total = this.items?.length || 0;
+            const selectedCount = this.value?.length || 0;
+            if (selectedCount === total) {
+                this.updateValue([]);
+            }
+            else {
+                this.updateValue(this.items.map((item) => item.value));
+            }
+        };
+        this.toggleDrag = (event) => {
+            const item = event.detail;
+            if (Boolean(this.dragging)) {
+                this.stopDrag(item);
+            }
+            else {
+                this.startDrag(item);
+            }
+        };
+        this.startDrag = (item) => {
+            this.dragging = item;
+            this.draggingStartIndex = this.getItemIndex(this.dragging);
+            item.setAttribute("dragging", "true");
+            const index = this.getItemIndex(this.dragging);
+            this.focusItem(index);
+            this.assistiveText = this.assistiveTextItemGrabbed;
+        };
+        this.stopDrag = (item) => {
+            this.dragging = undefined;
+            item.removeAttribute("dragging");
+            const newIndex = this.getActiveItemIndex();
+            this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
+            this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
+            this.draggingStartIndex = undefined;
+            this.focusItem(newIndex);
+        };
+    }
+    componentDidLoad() {
+        this.updateItems();
+        this.observeSlotChanges();
+        this.setItemAllowDragState();
+        this.setItemDisabledState();
+        this.setItemContext();
+        this.syncItemsWithValue();
+        this.setupDragDrop();
+        this.setSectionSeparator();
+        this.setSelectAllState();
+        this.subscribeToSwirlPopover();
+    }
+    componentDidRender() {
+        this.setupDragDrop();
+    }
+    disconnectedCallback() {
+        this.unsubscribeFromSwirlPopover();
+        this.observer?.disconnect();
+        this.sortable?.destroy();
+    }
+    watchAllowDrag() {
+        this.setItemAllowDragState();
+        this.setupDragDrop();
+    }
+    watchDisabled() {
+        this.setItemDisabledState();
+    }
+    watchMultiSelect() {
+        this.setItemContext();
+    }
+    watchValue() {
+        this.syncItemsWithValue();
+        this.setSelectAllState();
+    }
+    observeSlotChanges() {
+        this.observer = new MutationObserver(() => {
+            this.updateItems();
+            this.setItemAllowDragState();
+            this.setItemDisabledState();
+            this.setItemContext();
+            this.syncItemsWithValue();
+            this.setSelectAllState();
+        });
+        this.observer.observe(this.listboxEl, { childList: true, subtree: true });
+    }
+    setSelectAllState() {
+        const total = this.items?.length || 0;
+        const selectedCount = this.value?.length || 0;
+        this.selectAllState =
+            total === 0 || selectedCount === 0
+                ? false
+                : selectedCount === total
+                    ? true
+                    : "indeterminate";
+    }
+    updateItems() {
+        this.items = querySelectorAllDeep(this.el, "swirl-option-list-item").filter((item) => item.value !== this.selectAllValue);
+        const hasTabIndexElement = this.selectAllEl?.querySelector('[tabindex="0"]') ||
+            this.items.some((item) => item.querySelector('[tabindex="0"]'));
+        if (hasTabIndexElement) {
+            return;
+        }
+        this.resetTabIndex();
+    }
+    removeItemsTabIndex() {
+        this.selectAllEl
+            ?.querySelector('[role="option"]')
+            ?.removeAttribute("tabIndex");
+        this.items.forEach((item) => item.querySelector('[role="option"]')?.removeAttribute("tabIndex"));
+    }
+    setItemDisabledState() {
+        if (this.disabled) {
+            this.items.forEach((item) => (item.disabled = true));
+        }
+    }
+    setItemContext() {
+        if (this.multiSelect) {
+            this.items.forEach((item) => (item.context = "multi-select"));
+        }
+        else {
+            this.items.forEach((item) => (item.context = "single-select"));
+            if (this.value.length > 1) {
+                this.updateValue([this.value[0]]);
+            }
+        }
+    }
+    setupDragDrop() {
+        if (Boolean(this.sortable)) {
+            this.sortable.destroy();
+        }
+        if (!this.allowDrag) {
+            return;
+        }
+        this.sortable = Sortable.create(this.listboxEl, {
+            animation: 150,
+            draggable: 'swirl-option-list-item[allow-drag="true"]',
+            handle: ".option-list-item__drag-handle",
+            onEnd: (event) => {
+                this.itemDrop.emit({
+                    item: event.item,
+                    oldIndex: event.oldIndex,
+                    newIndex: event.newIndex,
+                });
+            },
+        });
+    }
+    setItemAllowDragState() {
+        if (this.allowDrag && !this.multiSelect) {
+            console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");
+            return;
+        }
+        const sections = querySelectorAllDeep(this.el, "swirl-option-list-section");
+        if (this.allowDrag && sections.length > 0) {
+            console.error("[SwirlOptionList] Drag can only be allowed for lists without sections.");
+            return;
+        }
+        if (this.allowDrag) {
+            this.items.forEach((item) => {
+                item.setAttribute("allow-drag", "true");
+                item.addEventListener("toggleDrag", this.toggleDrag);
+            });
+        }
+        else {
+            this.items.forEach((item) => {
+                item.removeAttribute("allow-drag");
+                item.removeEventListener("toggleDrag", this.toggleDrag);
+            });
+        }
+    }
+    selectItem(index) {
+        if (this.disabled) {
+            return;
+        }
+        const item = this.items[index];
+        if (item.disabled) {
+            return;
+        }
+        const itemIsAlreadySelected = this.value.includes(item.value);
+        if (itemIsAlreadySelected && !this.allowDeselect) {
+            return;
+        }
+        if (!this.multiSelect) {
+            this.value = [];
+        }
+        if (!itemIsAlreadySelected) {
+            this.updateValue([...this.value, item.value]);
+        }
+        else {
+            this.updateValue(this.value.filter((v) => v !== item.value));
+        }
+        this.focusItem(index);
+    }
+    updateValue(value) {
+        this.value = value;
+        this.valueChange.emit(this.value);
+    }
+    selectFocusedItem() {
+        if (this.disabled || this.getActiveItemIndex() === -1) {
+            return;
+        }
+        this.selectItem(this.getActiveItemIndex());
+    }
+    selectAllItems() {
+        if (this.disabled) {
+            return;
+        }
+        const alreadySelected = this.items.every((item) => this.value.includes(item.value));
+        if (alreadySelected) {
+            this.updateValue([]);
+        }
+        else {
+            this.updateValue(this.items.map((item) => item.value));
+        }
+    }
+    syncItemsWithValue() {
+        this.items?.forEach((item) => (item.selected = this.value.includes(item.value)));
+    }
+    focusItem(index) {
+        if (this.disabled) {
+            return;
+        }
+        this.removeItemsTabIndex();
+        const item = this.items[index]?.querySelector('[role="option"]');
+        if (!Boolean(item)) {
+            return;
+        }
+        item.setAttribute("tabIndex", "0");
+        item.focus();
+        this.focusedItem = item;
+    }
+    focusNextItem() {
+        if (this.disabled) {
+            return;
+        }
+        const activeItemIndex = this.getActiveItemIndex();
+        const newIndex = Math.min(activeItemIndex + 1, this.items.length - 1);
+        this.focusItem(newIndex);
+    }
+    focusPreviousItem() {
+        const activeItemIndex = this.getActiveItemIndex();
+        if (activeItemIndex <= 0 && this.showSelectAll) {
+            this.focusSelectAll();
+        }
+        else {
+            const newIndex = Math.max(activeItemIndex - 1, 0);
+            this.focusItem(newIndex);
+        }
+    }
+    focusSelectAll() {
+        const selectAllItem = this.selectAllEl?.querySelector('[role="option"]');
+        if (!selectAllItem) {
+            return;
+        }
+        this.removeItemsTabIndex();
+        selectAllItem.setAttribute("tabIndex", "0");
+        selectAllItem.focus();
+        this.focusedItem = undefined;
+    }
+    getActiveItemIndex() {
+        return Boolean(this.focusedItem)
+            ? this.items
+                .map((item) => item.querySelector('[role="option"]'))
+                .findIndex((item) => item === this.focusedItem)
+            : Boolean(this.selectAllEl)
+                ? -1
+                : 0;
+    }
+    getItemIndex(item) {
+        return this.items.map((i) => i).findIndex((i) => i === item);
+    }
+    moveDraggedItemDown() {
+        const nextSibling = this.dragging.nextElementSibling;
+        if (!Boolean(nextSibling)) {
+            return;
+        }
+        nextSibling.after(this.dragging);
+        this.updateItems();
+        this.listboxEl.focus();
+        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getActiveItemIndex() + 1}`;
+    }
+    moveDraggedItemUp() {
+        const prevSibling = this.dragging.previousElementSibling;
+        if (!Boolean(prevSibling) || prevSibling === this.selectAllEl) {
+            return;
+        }
+        prevSibling.before(this.dragging);
+        this.updateItems();
+        this.listboxEl.focus();
+        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+    }
+    setSectionSeparator() {
+        if (!this.el) {
+            return;
+        }
+        const sections = Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((el) => el.isConnected);
+        sections.forEach((section, index) => {
+            // First section should not have a separator if there are no items above
+            if (index === 0 &&
+                section.previousElementSibling?.tagName !== "SWIRL-OPTION-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+        });
+    }
+    subscribeToSwirlPopover() {
+        this.swirlPopover = closestPassShadow(this.el, "swirl-popover");
+        this.swirlPopover?.addEventListener("popoverClose", this.resetTabIndex);
+    }
+    unsubscribeFromSwirlPopover() {
+        this.swirlPopover?.removeEventListener("popoverClose", this.resetTabIndex);
+    }
+    render() {
+        const ariaMultiselectable = this.multiSelect ? "true" : undefined;
+        const tabIndex = Boolean(this.dragging) ? 0 : undefined;
+        const showSelectAll = this.multiSelect && this.showSelectAll;
+        return (h(Host, { key: '81e4328b85a61fa6287fae5229dcc9b03aa22384' }, h("swirl-visually-hidden", { key: '46443bbe440e32294fa0695cb21e11636d1bb585', role: "alert" }, this.assistiveText), h("div", { key: '49e218580d2c7d3ffbe28ef4841a525e658eea2a', "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 }, showSelectAll && (h("swirl-option-list-item", { key: '8ec07cb33514dcb997ed90e7e8e611ed3cf37eee', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), h("slot", { key: '14d73c971056601a5e20c2a461cbc1d7f3611da3', onSlotchange: this.setSectionSeparator }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "allowDrag": ["watchAllowDrag"],
+        "disabled": ["watchDisabled"],
+        "multiSelect": ["watchMultiSelect"],
+        "value": ["watchValue"]
+    }; }
+};
+SwirlOptionList.style = swirlOptionListCss;
+
+const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
+
+const SwirlOptionListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggleDrag = createEvent(this, "toggleDrag", 7);
+        this.context = "single-select";
+        this.dragHandleDescription = "Press spacebar to toggle grab";
+        this.dragHandleLabel = "Move option";
+        this.selected = false;
+        this.indeterminate = false;
+        this.swirlAriaRole = "option";
+        this.iconSize = 24;
+        this.elementId = v4();
+        this.mediaQueryUnsubscribe = () => { };
+        this.onDragHandleKeyDown = (event) => {
+            if (event.code === "Space" || event.code === "Enter") {
+                event.preventDefault();
+                this.toggleDrag.emit(this.el);
+            }
+        };
+        this.onBlur = () => {
+            this.focused = false;
+        };
+        this.onFocus = () => {
+            this.focused = true;
+        };
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+            this.updateIconSize(isDesktop);
+        });
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    forceIconProps(smallIcon) {
+        const icon = this.iconEl?.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    updateIconSize(smallIcon) {
+        this.iconSize = smallIcon ? 20 : 24;
+    }
+    render() {
+        const ariaDisabled = this.disabled ? "true" : undefined;
+        const ariaSelected = this.indeterminate ? undefined : String(this.selected);
+        const showCheckbox = this.context === "multi-select";
+        const showIcon = Boolean(this.icon) && this.context === "single-select";
+        const showIconBadge = Boolean(this.iconBadge);
+        const showAvatar = this.el.querySelector('[slot="avatar"]');
+        const showSelectionIcon = this.selected && this.context === "single-select";
+        const className = classnames("option-list-item", `option-list-item--context-${this.context}`, {
+            "option-list-item--disabled": this.disabled,
+            "option-list-item--draggable": this.allowDrag,
+            "option-list-item--dragging": this.dragging,
+            "option-list-item--selected": this.selected,
+            "option-list-item--indeterminate": this.indeterminate && !this.selected,
+            "option-list-item--show-avatar": showAvatar,
+        });
+        return (h(Host, { key: '7c8908b57d34b0b2b3f653c95e0d2e0f51718e5d' }, h("div", { key: '43d37288ae18d491525a11bcca3e290a2cfe8032', "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: '30033c6dc6a039513bd2af36d906d2b525a95342', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '895240689aae388704b648d07e58084a5f8b519a', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '55be7b715077761e58a5858983567114b5792f3c', class: "option-list-item__checkbox" }, h("span", { key: 'def941684a7c545f67ee1ae7bbf28ab68a1d7eda', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '09b98b73dee9c9d56ef8d485099e008366db185c', class: "option-list-item__checkbox-icon", size: 16 })), !this.selected && this.indeterminate && (h("span", { key: '27fc967fc1444071f0f2a836fc3a2279d2d29336', class: "option-list-item__checkbox-indeterminate-icon" }))))), h("span", { key: '2af33cf8bfecfdb469fc34e9d5cd7e6b50dbf934', class: "option-list-item__avatar" }, h("slot", { key: '20b173de4a6859f68d0fa5461b2834c56adab911', name: "avatar" })), h("span", { key: '422666ffc17ba76eb144bb051e4a556b415681b8', class: "option-list-item__label-container" }, h("span", { key: '6eccae90d8ac2b0bbf4352afa09505d41155ddb9', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'b3145c6e0b24b60ae80917fdbd74b6f776dcc0f4', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '6e9f153d01c83bdf5ed2ff6ec6263b2aa790b9c8', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'f087458bf5ff0a5bfed119d72819f2c36bfdac1c', size: this.iconSize })))), this.allowDrag && (h("button", { key: '82c37e9d5a8bb8cf2406800e1fa31684234e2793', "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: '8b61a793b26fd7573521e2064a9bd9fa8b8aa31d', size: this.iconSize })))));
+    }
+    get el() { return getElement(this); }
+};
+SwirlOptionListItem.style = swirlOptionListItemCss;
+
+export { SwirlOptionList as swirl_option_list, SwirlOptionListItem as swirl_option_list_item };