@getflip/swirl-components 0.14.1 → 0.16.0

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

@@ -6,10 +6,10 @@ const index = require('./index-83363034.js');
 const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
 const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
 const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const swirlLightboxCss = ":host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden=\"true\"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.6)}}.lightbox:not(.lightbox--closing) .lightbox__body{-webkit-animation:0.15s lightbox-fade-in;animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{-webkit-animation:none;animation:none}}.lightbox--closing{-webkit-animation:0.15s lightbox-fade-out;animation:0.15s lightbox-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{-webkit-animation:none;animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@-webkit-keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}";
+const swirlLightboxCss = ":host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden=\"true\"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.6)}}.lightbox:not(.lightbox--closing) .lightbox__body{-webkit-animation:0.15s lightbox-fade-in;animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{-webkit-animation:none;animation:none}}.lightbox--closing{-webkit-animation:0.15s lightbox-fade-out;animation:0.15s lightbox-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{-webkit-animation:none;animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__menu-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__menu-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}.lightbox__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.lightbox__meta{max-width:18rem}}.lightbox__thumbnail{display:inline-flex;flex-shrink:0}.lightbox__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@-webkit-keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}";
 
 const SwirlLightbox = class {
   constructor(hostRef) {
@@ -22,6 +22,7 @@ const SwirlLightbox = class {
     this.onDownloadButtonClick = () => {
       var _a;
       (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.download();
+      this.menu.close();
     };
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
@@ -41,7 +42,7 @@ const SwirlLightbox = class {
       this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
     };
     this.registerSlides = () => {
-      this.slides = Array.from(this.el.children);
+      this.slides = Array.from(this.el.children).filter((el) => el.tagName === "SWIRL-FILE-VIEWER");
       this.setSlideAttributes();
       this.updateMediaPlayers();
     };
@@ -97,8 +98,10 @@ const SwirlLightbox = class {
       }
     };
     this.closeButtonLabel = "Close modal";
-    this.downloadButtonLabel = "Download active slide content";
+    this.downloadButtonLabel = "Download";
     this.label = undefined;
+    this.menuLabel = "Slide options";
+    this.menuTriggerLabel = "Open slide menu";
     this.nextSlideButtonLabel = "Next slide";
     this.previousSlideButtonLabel = "Previous slide";
     this.activeSlideIndex = 0;
@@ -144,6 +147,8 @@ const SwirlLightbox = class {
    * @param newActiveSlideIndex
    */
   async activateSlide(newActiveSlideIndex) {
+    var _a, _b;
+    (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
     this.dragging = false;
     this.activeSlideIndex = newActiveSlideIndex;
     this.slides.forEach((slide, index) => {
@@ -188,6 +193,18 @@ const SwirlLightbox = class {
       slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
     });
   }
+  getCurrentFileName() {
+    var _a, _b;
+    return (_b = (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.file) === null || _b === void 0 ? void 0 : _b.split("/").pop();
+  }
+  getCurrentFileType() {
+    var _a;
+    return (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.type;
+  }
+  getCurrentThumbnailUrl() {
+    var _a;
+    return (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.thumbnailUrl;
+  }
   lockBodyScroll() {
     bodyScrollLock_esm.disableBodyScroll(this.el);
   }
@@ -212,10 +229,13 @@ const SwirlLightbox = class {
   }
   render() {
     const showPagination = this.slides.length > 1;
+    const currentFileName = this.getCurrentFileName();
+    const currentFileType = this.getCurrentFileType();
+    const currentThumbnailUrl = this.getCurrentThumbnailUrl();
     const className = index$1.classnames("lightbox", {
       "lightbox--closing": this.closing,
     });
-    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "lightbox__body", role: "document" }, index.h("header", { class: "lightbox__header" }, index.h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", null)), index.h("button", { "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick }, index.h("swirl-icon-download", null))), index.h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, index.h("slot", { onSlotchange: this.registerSlides }))), index.h("div", { class: "lightbox__controls" }, index.h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", null)), index.h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, index.h("swirl-icon-arrow-right", null))), showPagination && (index.h("span", { class: "lightbox__pagination" }, index.h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))))));
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "lightbox__body", role: "document" }, index.h("header", { class: "lightbox__header" }, index.h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", null)), index.h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button", id: "slide-menu-trigger" }, index.h("swirl-icon-more-vertikal", null))), index.h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, index.h("slot", { onSlotchange: this.registerSlides }))), index.h("div", { class: "lightbox__controls" }, index.h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", null)), index.h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, index.h("swirl-icon-arrow-right", null))), showPagination && (index.h("span", { class: "lightbox__pagination" }, index.h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), index.h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, label: this.menuLabel, placement: "bottom-end", popoverId: "slide-menu", ref: (el) => (this.menu = el), trigger: "slide-menu-trigger" }, index.h("swirl-stack", null, index.h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), index.h("div", { class: "lightbox__file-info" }, index.h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), index.h("swirl-separator", null), index.h("swirl-action-list", null, index.h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), index.h("slot", { name: "menu-items" })))))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-pdf-reader.cjs.entry.js

@@ -6,10 +6,10 @@ const index = require('./index-83363034.js');
 const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
 const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
 const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const swirlPdfReaderCss = ":host{display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-raised-default);inset:0;touch-action:pan-x pan-y}.pdf-reader[aria-hidden=\"true\"]{display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:0.15s pdf-reader-fade-in;animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:none;animation:none}}.pdf-reader--closing{-webkit-animation:0.15s pdf-reader-fade-out;animation:0.15s pdf-reader-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{-webkit-animation:none;animation:none}}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:\"\";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus:not(:focus-visible){outline:none}.pdf-reader__zoom-select:focus-visible{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{width:100%;height:calc(100% - 4rem)}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}@-webkit-keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}";
+const swirlPdfReaderCss = ":host{display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-raised-default);inset:0;touch-action:pan-x pan-y}.pdf-reader[aria-hidden=\"true\"]{display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:0.15s pdf-reader-fade-in;animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:none;animation:none}}.pdf-reader--closing{-webkit-animation:0.15s pdf-reader-fade-out;animation:0.15s pdf-reader-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{-webkit-animation:none;animation:none}}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:\"\";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus:not(:focus-visible){outline:none}.pdf-reader__zoom-select:focus-visible{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{width:100%;height:calc(100% - 4rem)}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}.pdf-reader__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-8);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__meta{max-width:18rem}}.pdf-reader__thumbnail{display:inline-flex;flex-shrink:0;padding-left:var(--s-space-4)}.pdf-reader__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@-webkit-keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}";
 
 const SwirlPdfReader = class {
   constructor(hostRef) {
@@ -30,11 +30,13 @@ const SwirlPdfReader = class {
     };
     this.onPrintButtonClick = () => {
       this.pdfViewer.print();
+      this.menu.close();
     };
     this.onDownloadButtonClick = async () => {
       this.downloading = true;
       await this.viewer.download();
       this.downloading = false;
+      this.menu.close();
     };
     this.onZoomInButtonClick = () => {
       const currentZoomStepIndex = this.zoomSteps.indexOf(+this.zoom);
@@ -61,7 +63,10 @@ const SwirlPdfReader = class {
     this.closeButtonLabel = "Close PDF viewer";
     this.downloadButtonLabel = "Download PDF";
     this.file = undefined;
+    this.fileTypeLabel = "PDF Document";
     this.label = undefined;
+    this.menuLabel = "File menu";
+    this.menuTriggerLabel = "Open file menu";
     this.printButtonLabel = "Print PDF";
     this.zoomInButtonLabel = "Zoom in";
     this.zoomOutButtonLabel = "Zoom out";
@@ -134,9 +139,9 @@ const SwirlPdfReader = class {
     const className = index$1.classnames("pdf-reader", {
       "pdf-reader--closing": this.closing,
     });
-    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "pdf-reader__body", role: "document" }, index.h("header", { class: "pdf-reader__header" }, index.h("span", { class: "pdf-reader__header-left" }, index.h("swirl-button", { class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { class: "pdf-reader__label" }, this.label)), index.h("span", { class: "pdf-reader__header-center" }, index.h("span", { class: "pdf-reader__zoom-button-container" }, index.h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), index.h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), index.h("span", { class: "pdf-reader__zoom-select-container" }, index.h("select", { "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("swirl-icon-expand-more", { class: "pdf-reader__zoom-select-icon" }))), index.h("span", { class: "pdf-reader__header-right" }, index.h("swirl-button", { class: "pdf-reader__print-button", hideLabel: true, icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick }), index.h("swirl-button", { class: "pdf-reader__download-button", disabled: this.downloading, hideLabel: true, icon: !this.downloading
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "pdf-reader__body", role: "document" }, index.h("header", { class: "pdf-reader__header" }, index.h("span", { class: "pdf-reader__header-left" }, index.h("swirl-button", { class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { class: "pdf-reader__label" }, this.label)), index.h("span", { class: "pdf-reader__header-center" }, index.h("span", { class: "pdf-reader__zoom-button-container" }, index.h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), index.h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), index.h("span", { class: "pdf-reader__zoom-select-container" }, index.h("select", { "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("swirl-icon-expand-more", { class: "pdf-reader__zoom-select-icon" }))), index.h("span", { class: "pdf-reader__header-right" }, index.h("swirl-button", { class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", id: "menu-trigger", label: this.menuTriggerLabel }))), index.h("div", { class: "pdf-reader__content" }, index.h("swirl-file-viewer", { active: this.active, file: this.file, onActivate: this.onActivate, ref: (el) => (this.viewer = el), type: "application/pdf", zoom: this.zoom }), index.h("div", { class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("swirl-icon-fullscreen-exit", null)) : (index.h("swirl-icon-fullscreen", null))), index.h("button", { "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, index.h("swirl-icon-add", null)), index.h("button", { "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("swirl-icon-remove", null))))), index.h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, label: this.menuLabel, placement: "bottom-end", popoverId: "menu", ref: (el) => (this.menu = el), trigger: "menu-trigger" }, index.h("swirl-stack", null, index.h("div", { class: "pdf-reader__meta" }, index.h("div", { class: "pdf-reader__thumbnail" }, index.h("svg", { fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, index.h("path", { d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), index.h("path", { d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), index.h("path", { d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), index.h("path", { d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), index.h("path", { d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), index.h("path", { d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), index.h("path", { d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), index.h("path", { d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), index.h("div", { class: "pdf-reader__file-info" }, index.h("swirl-text", { truncate: true, weight: "semibold" }, this.label), index.h("swirl-text", { color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), index.h("swirl-separator", null), index.h("swirl-action-list", null, index.h("swirl-action-list-item", { class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick }), index.h("swirl-action-list-item", { class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
         ? "<swirl-icon-download></swirl-icon-download>"
-        : '<swirl-spinner size="s"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }))), index.h("div", { class: "pdf-reader__content" }, index.h("swirl-file-viewer", { active: this.active, file: this.file, onActivate: this.onActivate, ref: (el) => (this.viewer = el), type: "application/pdf", zoom: this.zoom }), index.h("div", { class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("swirl-icon-fullscreen-exit", null)) : (index.h("swirl-icon-fullscreen", null))), index.h("button", { "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, index.h("swirl-icon-add", null)), index.h("button", { "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("swirl-icon-remove", null))))))));
+        : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), index.h("slot", { name: "menu-items" })))))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-popover.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-83363034.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-35943202.js');
 const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
 const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 require('./_commonjsHelpers-a5111d61.js');
 
 const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in-xy;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-fade-scale-in-y;animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-sm);-webkit-animation:none;animation:none;box-shadow:var(--s-shadow-level-1)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@-webkit-keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
@@ -56,6 +56,7 @@ const SwirlPopover = class {
       this.close();
     };
     this.animation = "scale-in-xy";
+    this.disableScrollLock = undefined;
     this.enableFlip = true;
     this.label = undefined;
     this.offset = 8;
@@ -73,14 +74,15 @@ const SwirlPopover = class {
     this.updateTriggerAttributes();
   }
   disconnectedCallback() {
-    bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
+    this.unlockBodyScroll();
   }
   onWindowFocusIn(event) {
     if (!this.active) {
       return;
     }
     const target = event.target;
-    const popoverLostFocus = !this.el.contains(target);
+    const activeElement = utils.getActiveElement();
+    const popoverLostFocus = !this.el.contains(target) && !this.el.contains(activeElement);
     if (popoverLostFocus) {
       this.close();
     }
@@ -205,12 +207,16 @@ const SwirlPopover = class {
   }
   lockBodyScroll() {
     const mobile = utils.isMobileViewport();
-    if (!mobile) {
+    if (!mobile || this.disableScrollLock) {
       return;
     }
     bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
   }
   unlockBodyScroll() {
+    const mobile = utils.isMobileViewport();
+    if (!mobile || this.disableScrollLock) {
+      return;
+    }
     bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
   }
   render() {

package/dist/cjs/swirl-resource-list-file-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83363034.js');
 const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 require('./_commonjsHelpers-a5111d61.js');
 
 const swirlResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{outline:none}.resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";

package/dist/cjs/swirl-search.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83363034.js');
 const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 require('./_commonjsHelpers-a5111d61.js');
 
 const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8))}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";

package/dist/cjs/swirl-select.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83363034.js');
 const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 require('./_commonjsHelpers-a5111d61.js');
 
 const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select--disabled.sc-swirl-select .select__label.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{top:0}.select__label.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__label.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__indicator.sc-swirl-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}";

package/dist/cjs/swirl-shell-layout.cjs.entry.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-83363034.js');
+const index$1 = require('./index-e038b0f7.js');
+const utils = require('./utils-f1b4e064.js');
+require('./_commonjsHelpers-a5111d61.js');
+
+const swirlShellLayoutCss = ":host{--extended-sidebar-width:17.5rem;--collapsed-sidebar-width:4rem;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.shell-layout{display:flex;width:100%;min-height:100%;background-color:var(--s-border-default);gap:var(--s-border-width-default)}@media (min-width: 992px){.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper.shell-layout__sidebar-wrapper--hovered .shell-layout__sidebar,.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper:focus-within .shell-layout__sidebar{width:var(--extended-sidebar-width);box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n              0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{min-height:100%;transform:translate3d(-100%, 0, 0)}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper .shell-layout__sidebar{width:100%;box-shadow:none}@media (min-width: 992px){.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{max-width:var(--collapsed-sidebar-width);flex-basis:var(--collapsed-sidebar-width);transform:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__sidebar{box-shadow:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__collapsed-logo{display:block}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__expanded-logo{display:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__toggle{display:none}}.shell-layout__sidebar-wrapper{position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;max-width:var(--extended-sidebar-width);flex-basis:var(--extended-sidebar-width);flex-shrink:0;transition:max-width 0.2s, transform 0.2s}@media (min-width: 992px){.shell-layout__sidebar-wrapper{position:relative;inset:auto}}.shell-layout__sidebar{display:flex;width:var(--extended-sidebar-width);height:100%;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-border-default);flex-direction:column;transition:box-shadow 0.2s, width 0.2s;box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08);gap:var(--s-border-width-default)}@media (min-width: 992px){.shell-layout__sidebar{border-right:none;box-shadow:none}}.shell-layout__header{padding:var(--s-space-8);flex-shrink:0;background-color:var(--s-background-default)}.shell-layout__logo-bar{display:flex;overflow:hidden;align-items:center}.shell-layout__expanded-logo{padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + var(--s-space-2));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + var(--s-space-2));flex-grow:1}.shell-layout__collapsed-logo{display:none;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + var(--s-space-2));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + var(--s-space-2));flex-grow:1}.shell-layout__toggle{padding-right:var(--s-space-8);padding-left:var(--s-space-12);flex-grow:0;flex-shrink:0}.shell-layout__mobile-toggle{position:absolute;z-index:2;top:var(--s-space-12);left:calc(100% + var(--s-space-16))}@media (min-width: 992px){.shell-layout__mobile-toggle{display:none}}.shell-layout__tools{margin-top:var(--s-space-4);flex-basis:100%;flex-shrink:0}.shell-layout__main-navigation{overflow:auto;padding:var(--s-space-8);flex-grow:1;background-color:var(--s-background-default)}.shell-layout__main{flex-grow:1;background-color:var(--s-background-default)}.shell-layout__main>*,.shell-layout__main ::slotted(*){height:100%}.shell-layout__backdrop{position:fixed;z-index:1;background-color:rgba(0, 0, 0, 0.4);-webkit-animation:shell-layout-backdrop-fade-in 0.1s;animation:shell-layout-backdrop-fade-in 0.1s;inset:0}@media (min-width: 992px){.shell-layout__backdrop{display:none}}.shell-layout__backdrop--fading{-webkit-animation:shell-layout-backdrop-fade-out 0.2s;animation:shell-layout-backdrop-fade-out 0.2s}@-webkit-keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}@keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}";
+
+const SwirlShellLayout = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.desktopMediaQuery = utils.getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      if (event.matches) {
+        this.showSidebar();
+      }
+      else {
+        this.hideSidebar();
+      }
+    };
+    this.hideSidebar = () => {
+      this.collapsedSidebar = true;
+      this.collapsing = true;
+      setTimeout(() => {
+        this.collapsing = false;
+        // Some browsers don't update the hovered state of an element correctly,
+        // if the element was moved and is no longer underneath the cursor.
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=276329
+        this.sidebarHovered = false;
+      }, 200);
+    };
+    this.showSidebar = () => {
+      this.collapsedSidebar = false;
+    };
+    this.toggleSidebar = () => {
+      if (this.collapsedSidebar) {
+        this.showSidebar();
+      }
+      else {
+        this.hideSidebar();
+      }
+    };
+    this.onBackdropClick = () => {
+      if (!this.collapsedSidebar) {
+        this.hideSidebar();
+      }
+    };
+    this.onSidebarClick = () => {
+      var _a;
+      if (this.collapsedSidebar) {
+        (_a = utils.getActiveElement()) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    };
+    this.onSidebarMouseEnter = () => {
+      this.sidebarHovered = true;
+    };
+    this.onSidebarMouseLeave = () => {
+      this.sidebarHovered = false;
+    };
+    this.mainNavigationLabel = "Main";
+    this.sidebarToggleLabel = "Toggle sidebar";
+    this.collapsedSidebar = undefined;
+    this.collapsing = undefined;
+    this.sidebarHovered = undefined;
+  }
+  componentWillLoad() {
+    var _a, _b;
+    if (!this.desktopMediaQuery.matches) {
+      this.hideSidebar();
+    }
+    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  /**
+   * Collapse the left sidebar.
+   */
+  async collapseSidebar() {
+    this.hideSidebar();
+  }
+  /**
+   * Extend the left sidebar.
+   */
+  async extendSidebar() {
+    this.showSidebar();
+  }
+  render() {
+    const className = index$1.classnames("shell-layout", {
+      "shell-layout--collapsed-sidebar": this.collapsedSidebar,
+      "shell-layout--collapsing": this.collapsing,
+    });
+    const sidebarWrapperClassName = index$1.classnames("shell-layout__sidebar-wrapper", {
+      "shell-layout__sidebar-wrapper--hovered": this.sidebarHovered,
+    });
+    const backdropClassName = index$1.classnames("shell-layout__backdrop", {
+      "shell-layout__backdrop--fading": this.collapsing,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("div", { class: sidebarWrapperClassName, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, index.h("div", { class: "shell-layout__sidebar" }, index.h("header", { class: "shell-layout__header" }, index.h("div", { class: "shell-layout__logo-bar" }, index.h("div", { class: "shell-layout__expanded-logo" }, index.h("slot", { name: "logo-expanded" })), index.h("div", { class: "shell-layout__collapsed-logo" }, index.h("slot", { name: "logo-collapsed" })), index.h("div", { class: "shell-layout__toggle" }, index.h("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: true, icon: this.collapsedSidebar
+        ? "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>"
+        : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), index.h("div", { class: "shell-layout__tools" }, index.h("slot", { name: "tools" }))), index.h("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, index.h("slot", { name: "main-navigation" })), this.collapsedSidebar && !this.collapsing && (index.h("div", { class: "shell-layout__mobile-toggle" }, index.h("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: true, icon: "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarToggleLabel, onClick: this.showSidebar }))))), index.h("main", { class: "shell-layout__main" }, index.h("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && (index.h("div", { class: backdropClassName, onClick: this.onBackdropClick })))));
+  }
+};
+SwirlShellLayout.style = swirlShellLayoutCss;
+
+exports.swirl_shell_layout = SwirlShellLayout;

package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-83363034.js');
+const index$1 = require('./index-e038b0f7.js');
+require('./_commonjsHelpers-a5111d61.js');
+
+const swirlShellNavigationItemCss = ":host{display:inline-flex;width:100%;height:3rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + var(--s-space-2));flex-shrink:0;justify-content:flex-start;align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);cursor:pointer;gap:var(--s-space-12)}:host(:hover){background-color:var(--s-surface-hovered)}:host(:active){background-color:var(--s-surface-pressed)}:host(:focus){outline:none}:host(:focus-visible) .shell-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}:host(.shell-navigation-item--active){color:var(--s-text-highlight);background-color:var(--s-surface-raised-default)}:host(.shell-navigation-item--active) ::part(icon){color:var(--s-icon-highlight)}:host(.shell-navigation-item--active:hover){background-color:var(--s-surface-raised-hovered)}:host(.shell-navigation-item--active:active){background-color:var(--s-surface-raised-pressed)}:host *{box-sizing:border-box}.shell-navigation-item__icon{display:inline-flex}.shell-navigation-item__icon ::part(icon){color:var(--s-icon-default)}.shell-navigation-item__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis}";
+
+const SwirlShellNavigationItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onKeyDown = (event) => {
+      if (event.code === "Enter") {
+        event.preventDefault();
+        this.el.click();
+      }
+    };
+    this.active = undefined;
+    this.icon = undefined;
+    this.label = undefined;
+  }
+  componentDidLoad() {
+    this.forceIconProps();
+  }
+  forceIconProps() {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "20");
+  }
+  render() {
+    const className = index$1.classnames("shell-navigation-item", {
+      "shell-navigation-item--active": this.active,
+      "shell-navigation-item--has-icon": Boolean(this.icon),
+    });
+    return (index.h(index.Host, { class: className, onKeyDown: this.onKeyDown, role: "link", tabIndex: 0 }, index.h("span", { class: "shell-navigation-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), index.h("span", { class: "shell-navigation-item__label" }, this.label)));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlShellNavigationItem.style = swirlShellNavigationItemCss;
+
+exports.swirl_shell_navigation_item = SwirlShellNavigationItem;

package/dist/cjs/swirl-table.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83363034.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 
 /* global setTimeout, clearTimeout */
 

package/dist/cjs/swirl-text-input.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83363034.js');
 const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 require('./_commonjsHelpers-a5111d61.js');
 
 const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{display:none}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:0}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";

package/dist/cjs/swirl-toast.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83363034.js');
 const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-a07ee0db.js');
+const utils = require('./utils-f1b4e064.js');
 require('./_commonjsHelpers-a5111d61.js');
 
 const swirlToastCss = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{margin-top:0}}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}";

package/dist/cjs/{utils-a07ee0db.js → utils-f1b4e064.js}

@@ -17,6 +17,18 @@ function closestPassShadow(node, selector) {
   }
   return closestPassShadow(node.parentNode, selector);
 }
+function getActiveElement(root = document) {
+  const activeEl = root.activeElement;
+  if (!Boolean(activeEl)) {
+    return undefined;
+  }
+  if (Boolean(activeEl.shadowRoot)) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  else {
+    return activeEl;
+  }
+}
 const getDesktopMediaQuery = () => document.documentElement.classList.contains("disable-desktop-style-tweaks")
   ? window.matchMedia(null)
   : window.matchMedia("(min-width: 992px) and (max-width: 1439px) and (hover: hover), (min-width: 1440px)");
@@ -86,6 +98,7 @@ function querySelectorAllDeep(root, selector) {
 
 exports.closestPassShadow = closestPassShadow;
 exports.debounce = debounce;
+exports.getActiveElement = getActiveElement;
 exports.getDesktopMediaQuery = getDesktopMediaQuery;
 exports.getVisibleHeight = getVisibleHeight;
 exports.isMobileViewport = isMobileViewport;

package/dist/collection/collection-manifest.json

@@ -66,6 +66,7 @@
     "./components/swirl-icon/icons/swirl-icon-arrow-upward.js",
     "./components/swirl-icon/icons/swirl-icon-attachment.js",
     "./components/swirl-icon/icons/swirl-icon-block.js",
+    "./components/swirl-icon/icons/swirl-icon-bookmark.js",
     "./components/swirl-icon/icons/swirl-icon-cancel.js",
     "./components/swirl-icon/icons/swirl-icon-chat-bubble.js",
     "./components/swirl-icon/icons/swirl-icon-chats-filled.js",
@@ -85,6 +86,8 @@
     "./components/swirl-icon/icons/swirl-icon-date-range.js",
     "./components/swirl-icon/icons/swirl-icon-delete.js",
     "./components/swirl-icon/icons/swirl-icon-description.js",
+    "./components/swirl-icon/icons/swirl-icon-double-arrow-left.js",
+    "./components/swirl-icon/icons/swirl-icon-double-arrow-right.js",
     "./components/swirl-icon/icons/swirl-icon-download.js",
     "./components/swirl-icon/icons/swirl-icon-drag-handle.js",
     "./components/swirl-icon/icons/swirl-icon-edit.js",
@@ -96,6 +99,7 @@
     "./components/swirl-icon/icons/swirl-icon-file.js",
     "./components/swirl-icon/icons/swirl-icon-filter.js",
     "./components/swirl-icon/icons/swirl-icon-folder-shared.js",
+    "./components/swirl-icon/icons/swirl-icon-folder.js",
     "./components/swirl-icon/icons/swirl-icon-fullscreen-exit.js",
     "./components/swirl-icon/icons/swirl-icon-fullscreen.js",
     "./components/swirl-icon/icons/swirl-icon-group-assign.js",
@@ -162,6 +166,8 @@
     "./components/swirl-search/swirl-search.js",
     "./components/swirl-select/swirl-select.js",
     "./components/swirl-separator/swirl-separator.js",
+    "./components/swirl-shell-layout/swirl-shell-layout.js",
+    "./components/swirl-shell-navigation-item/swirl-shell-navigation-item.js",
     "./components/swirl-tab/swirl-tab.js",
     "./components/swirl-table/swirl-table.js",
     "./components/swirl-table-cell/swirl-table-cell.js",

package/dist/collection/components/swirl-action-list/swirl-action-list.css

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  width: 100%;
 }
 
   :host * {

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { querySelectorAllDeep } from "../../utils";
+import { getActiveElement, querySelectorAllDeep } from "../../utils";
 /**
  * @slot slot - The action list items and sections
  */
@@ -17,6 +17,20 @@ export class SwirlActionList {
     };
   }
   componentDidLoad() {
+    this.updateItems();
+    this.observeSlotChanges();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateItems();
+    });
+    this.observer.observe(this.el, { childList: true });
+  }
+  updateItems() {
     this.items = querySelectorAllDeep(this.el, '[role="menuitem"]');
   }
   focusNextItem() {
@@ -25,17 +39,15 @@ export class SwirlActionList {
     this.items[newIndex].focus();
   }
   focusPreviousItem() {
+    var _a;
     const activeItemIndex = this.getActiveItemIndex();
     const newIndex = activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;
-    this.items[newIndex].focus();
+    (_a = this.items[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
   }
   getActiveItemIndex() {
-    return this.items.findIndex((item) => {
-      var _a, _b;
-      return item === document.activeElement ||
-        item ===
-          ((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="menuitem"]'));
-    });
+    const activeElement = getActiveElement();
+    return this.items.findIndex((item) => item === activeElement ||
+      item === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.querySelector('[role="menuitem"]')));
   }
   render() {
     return (h(Host, null, h("div", { "aria-orientation": "vertical", class: "action-list", onKeyDown: this.onKeyDown, role: "menu" }, h("slot", null))));