@getflip/swirl-components 0.321.0 → 0.323.0

package/dist/components/swirl-image-grid-item.js

@@ -5,11 +5,11 @@ import { d as defineCustomElement$8 } from './swirl-icon-error2.js';
 import { d as defineCustomElement$7 } from './swirl-icon-gif2.js';
 import { d as defineCustomElement$6 } from './swirl-icon-pause2.js';
 import { d as defineCustomElement$5 } from './swirl-icon-play-arrow2.js';
-import { d as defineCustomElement$4 } from './swirl-spinner2.js';
+import { d as defineCustomElement$4 } from './swirl-skeleton-box2.js';
 import { d as defineCustomElement$3 } from './swirl-stack2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
-const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:\"\";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:\"\";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-controls{position:absolute;z-index:1;bottom:var(--s-space-8);left:var(--s-space-8)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon{display:flex;padding:var(--s-space-2);justify-content:center;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-icon-on-image);background-color:var(--s-surface-on-image-default)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--button{border:none;cursor:pointer}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--label{padding-left:var(--s-space-8);padding-right:var(--s-space-8)}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__spinner{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.4);inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}";
+const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:\"\";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:\"\";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px);opacity:0;transition:opacity 0.3s ease-in}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;opacity:0;transition:opacity 0.3s ease-in}.image-grid-item--loaded .image-grid-item__image,.image-grid-item--loaded .image-grid-item__background{opacity:1}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-controls{position:absolute;z-index:1;bottom:var(--s-space-8);left:var(--s-space-8)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon{display:flex;padding:var(--s-space-2);justify-content:center;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-icon-on-image);background-color:var(--s-surface-on-image-default)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--button{border:none;cursor:pointer}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--label{padding-left:var(--s-space-8);padding-right:var(--s-space-8)}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__skeleton{position:absolute;z-index:3;inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}";
 const SwirlImageGridItemStyle0 = swirlImageGridItemCss;
 
 const SwirlImageGridItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGridItem extends HTMLElement {
@@ -24,6 +24,9 @@ const SwirlImageGridItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGr
         this.handleIntersectionEntries = debounce((entries) => {
             const sorted = [...entries].sort((a, b) => a.time - b.time);
             this.inViewport = sorted.at(-1).isIntersecting;
+            if (!this.inViewport) {
+                this.loaded = false;
+            }
         }, 250);
         this.onLoad = () => {
             this.error = false;
@@ -147,17 +150,18 @@ const SwirlImageGridItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGr
         const className = classNames("image-grid-item", {
             "image-grid-item--has-error": this.error,
             "image-grid-item--has-overlay": this.overlay,
+            "image-grid-item--loaded": this.loaded,
         });
-        return (h(Host, { key: '9dda033e363c33b4f81fbb0865607e813bb74c0b', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '586768ce751eb0236255f9be5415a39d258cb623', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '7cb8e154e19039ed9b43cc6ad348f0a12041d6ea', class: "image-grid-item__background", style: {
+        return (h(Host, { key: '636bea0ce8bdd41df1960bb7dd7ed3e10c70f8bf', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: 'f55f2b0119f3647c0c48c5e5c474c66fb6186f52', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: 'be568fd8b1e74571f87f71b3373ccc8f681c0e6b', class: "image-grid-item__background", style: {
                 backgroundImage: showBlurredBackground
                     ? `url(${this.computedSrc})`
                     : undefined,
             } }), this.loading !== "intersecting" ||
             this.inViewport ||
-            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" }, h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (h("swirl-stack", { key: 'c010bdc6f6d06e5155f6837c40cfb14cb5708e50', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: '2801f1473005196b97726a7b740c34ebee8abf8c', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '1f2f511aadcef5d3b83382162cc6852d5ae52ead', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: 'd4dbdc85a32ea4298a7657977d8886e61430b099', size: 20 })))), this.loaded &&
+            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" }, h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (h("swirl-stack", { key: '1aa14acb6522412912ad2571a5c6bdfb65801c6e', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'bd6c57dd19ac3645920b3d467eb62f0c7122846f', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: 'af94bbd4415cfd7d5858fc27e911d9cf30f5fde5', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: '4df6b731e559993bab600f279404341596b59440', size: 20 })))), this.loaded &&
             !this.error &&
             this.icon &&
-            !Boolean(this.overlay) && (h("div", { key: 'dc47e6db0b6fb2d2eaafea3d7cfd5a0ad4c46c19', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: 'f512a5e8a4133ddcf85c9f359d2987d3f28e50a9', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: '1367b81fdca73d590be614098b3ee28b621d313b', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: 'ef81c100ae07a1562b7737de079add47491fb5f8' }))), this.loaded && this.error && (h("div", { key: '83f7615dff17e75e9d376e9f516c56795cbf26a1', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '0ca73373cbe736b6a8b64aa393dd8de180b7c8c5', color: "critical" }))))));
+            !Boolean(this.overlay) && (h("div", { key: '7386340b21143c662c1594f81115ff042abaae47', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '11d5bdd00d1f9fa6a3d11819ef88688e201342de', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("swirl-skeleton-box", { key: '6a9dbd1db125d9ee6b9e58fc61c1c3a61c5839c5', class: "image-grid-item__skeleton", height: "100%", width: "100%", borderRadius: "none" })), this.loaded && this.error && (h("div", { key: '75e3dba401f537b492aab11b891a0d3108f0b157', class: "image-grid-item__error" }, h("swirl-icon-error", { key: 'aa6b4c5f5111235a4be76a3760578185e1aef4a2', color: "critical" }))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -188,7 +192,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["swirl-image-grid-item", "swirl-icon-error", "swirl-icon-gif", "swirl-icon-pause", "swirl-icon-play-arrow", "swirl-spinner", "swirl-stack", "swirl-visually-hidden"];
+    const components = ["swirl-image-grid-item", "swirl-icon-error", "swirl-icon-gif", "swirl-icon-pause", "swirl-icon-play-arrow", "swirl-skeleton-box", "swirl-stack", "swirl-visually-hidden"];
     components.forEach(tagName => { switch (tagName) {
         case "swirl-image-grid-item":
             if (!customElements.get(tagName)) {
@@ -215,7 +219,7 @@ function defineCustomElement$1() {
                 defineCustomElement$5();
             }
             break;
-        case "swirl-spinner":
+        case "swirl-skeleton-box":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/swirl-inline-error2.js

@@ -41,7 +41,7 @@ const SwirlInlineError = /*@__PURE__*/ proxyCustomElement(class SwirlInlineError
     }
     render() {
         const className = classNames("inline-error", `inline-error--size-${this.size}`);
-        return (h(Host, { key: '6303d15a3f9688dfb4cba1f2abeef8ebe84b8fc0' }, h("span", { key: '4c86820f5b1089c302197c7de6ccd0eb74d24dc5', class: className, part: "inline-error" }, h("span", { key: '8efe0709d23bff115d86a0e0f8adf8dbfe9ffe2f', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: 'c4d463892cdaafaefe9b295404366b0291d753aa' })), h("span", { key: '590848cd8c87f995501e87f2147b0e746151b445', class: "inline-error__message" }, this.message))));
+        return (h(Host, { key: 'ec803bfd6e1bd8ebeb91f63f8c48d9067b62fe48' }, h("span", { key: '4cd727555a355c9026483b517a86bcb1df4c4619', class: className, part: "inline-error" }, h("span", { key: 'debf408186f9f961063a88f036471712965f562f', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: '6e58bc79afe21f095b462835fdf65342c35c4fef' })), h("span", { key: '76a3a1e6704427c982a5875ca8da757dc4b7f446', class: "inline-error__message" }, this.message))));
     }
     static get style() { return SwirlInlineErrorStyle0; }
 }, [1, "swirl-inline-error", {

package/dist/components/swirl-inline-notification.js

@@ -22,7 +22,7 @@ const SwirlInlineNotification$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIn
     }
     render() {
         const className = classNames("inline-notification", `inline-notification--intent-${this.intent}`);
-        return (h(Host, { key: '0e372d14fcefa989979e0f07c968ff1d20fcf62d' }, h("div", { key: '4cae444d2f0ed191d6cfb57cb6f4467c2fc3ca3c', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("span", { key: '4f68709d3ff703cdb76ec57164552670ee50cd9d', "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && (h("swirl-icon-error", { key: '13d2dc51453d4d01c6b80e21d44b960537f51226', size: 20 })), this.intent === "success" && (h("swirl-icon-check-circle", { key: 'd99463365cc16460ee6b028a80acc6fb9129e6cb', size: 20 })), this.intent === "warning" && (h("swirl-icon-warning", { key: '667598591dc75b0d2bdfe03e7470983ca1723685', size: 20 })), this.intent === "info" && (h("swirl-icon-info", { key: '110bcecb08f4e97816825da457582ecf8964285e', size: 20 }))), h("span", { key: '5dfb85f68f9fff70eae936c13cf32d2af1677fc2', class: "inline-notification__content", id: "content" }, (this.hideHeading && (h("swirl-visually-hidden", { key: 'c275e254e93acabf27e28cef7f517b4e19d436f8' }, this.heading))) || (h("swirl-text", { key: '00c323cbd64e75f7713bc89b492786b3ea201122', class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading)), h("slot", { key: '09370d2ba66c58de2035b0382f9f18193839db24' })))));
+        return (h(Host, { key: '2704b6606718fe98e5e45b7230c106486ff10e6e' }, h("div", { key: '3ff317459e156b735bcf961309f5cd6cfd5cbda7', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("span", { key: 'bdfb3aece99624fbd2bd58c52e233f7954732120', "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && (h("swirl-icon-error", { key: 'e041ffd255a2e05be01039819960be4b9d01440c', size: 20 })), this.intent === "success" && (h("swirl-icon-check-circle", { key: '4ce74f39c248d7637d6c75313a990a935c3d2827', size: 20 })), this.intent === "warning" && (h("swirl-icon-warning", { key: '03e0c0a4775f113fb9576890bbcfc5c8967f7582', size: 20 })), this.intent === "info" && (h("swirl-icon-info", { key: '1322f63efe89095a56efae21146362e4c5d13e48', size: 20 }))), h("span", { key: 'a240db569a7131f75fd4333bac507272fc574cc0', class: "inline-notification__content", id: "content" }, (this.hideHeading && (h("swirl-visually-hidden", { key: '54fa5301920929e6701cca4b1d1ab7a8cb9357be' }, this.heading))) || (h("swirl-text", { key: '919a85dc42906043b17a99f851cc64ab42f39535', class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading)), h("slot", { key: '800f65515d9a6c232077f39856389874deea20d1' })))));
     }
     static get style() { return SwirlInlineNotificationStyle0; }
 }, [1, "swirl-inline-notification", {

package/dist/components/swirl-inline-status.js

@@ -46,7 +46,7 @@ const SwirlInlineStatus$1 = /*@__PURE__*/ proxyCustomElement(class SwirlInlineSt
     }
     render() {
         const className = classNames("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
-        return (h(Host, { key: '2399be5d627741cba2a289842457b41fc838c28a' }, h("span", { key: '3f6ad8e7b1fd303874334fccab02b942deb31ed3', class: className, part: "inline-status" }, this.icon && (h("span", { key: '9d296ed8a4c1c232f91b7f96a2e9330bbad4d5ce', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '4a027e288e1b152c732e9881ac2eb781631f7674', class: "inline-status__message" }, this.message))));
+        return (h(Host, { key: 'b9d5463db671f5f3a00ed80e196548ef2f4e7605' }, h("span", { key: '7be237a30e43b5da9b49784abd08385cbf222d16', class: className, part: "inline-status" }, this.icon && (h("span", { key: '12e119dbb608847c6183554bc20bfcb97e5138c9', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'f29af231a6f3859571aebfbbc13dc1f99509e31b', class: "inline-status__message" }, this.message))));
     }
     static get style() { return SwirlInlineStatusStyle0; }
 }, [1, "swirl-inline-status", {

package/dist/components/swirl-link.js

@@ -16,7 +16,7 @@ const SwirlLink$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLink extends HTM
     }
     render() {
         const className = classNames("link", `link--color-${this.color}`);
-        return (h(Host, { key: '8b276b12968034b35d2b39a6b8544535d78e06ed' }, h("a", { key: '48d365eab74bc1f83da3ccbffcf2fbb566933b05', class: className, href: this.href, part: "link", target: this.target }, this.label)));
+        return (h(Host, { key: 'b165545f055fe0070fc5e8937598bf724a971319' }, h("a", { key: 'b6d6ce7dc458fb869441dcba66a22267b731fbb3', class: className, href: this.href, part: "link", target: this.target }, this.label)));
     }
     static get style() { return SwirlLinkStyle0; }
 }, [1, "swirl-link", {

package/dist/components/swirl-menu.js

@@ -298,7 +298,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
             "menu--mobile": this.mobile,
             "menu--root": isTopLevelMenu,
         });
-        return (h(Host, { key: 'a9a6d23b817d8fe68e747400a69275fbbef0b2a5' }, h("div", { key: '8af753ae3070407da08e969c3f0590f714bdc47f', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: 'ff1caaedf503275b1b5894c6997c82e012fdddb0', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '37c2ec4f45d11b466802f72e75ec8dc23ee07e72', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '06ff137930e5b6f4778d232696a1ea5bb9c97fac', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '2ef593767ea127710f8c9adc33bebe6d1cdf6bb2', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: 'a1d79bda33c6fcaf39eceb12dcf16e4dfed76fea', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: 'ba4285cc640cc0d222f7eb7b3431c6957d259c1e', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: 'fecee80722bc7f06c832cda0911c43d6e18ad765', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
+        return (h(Host, { key: '831b3d822a398064233db7e5f4b46510fb795db4' }, h("div", { key: 'd363801fb325c5b2b9044ed87a238daaa214683c', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: 'ce1a041af80292f0184977b59557b13893be8038', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '1d9568ee29b50100a881cafaaad93bc746b1e5c3', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: 'befca2d12a1c7142af373c100a0b748c4dae34a6', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '773677ad1dd6f866dcd519fd5b44c03c7689f3b5', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: 'bfd0505553e0eb8fb2f319bad6ffa0bd32f84420', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: '4d8aa6fd222bb28b5295ab851934a90cb9050f67', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '44ff66f1a23428e259222f1451c6104eb693f7d8', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
                 ? {
                     top: Boolean(this.position) ? `${this.position?.y}px` : "",
                     left: Boolean(this.position) ? `${this.position?.x}px` : "",
@@ -309,7 +309,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
                             ? `calc(-100% * ${this.activeLevel})`
                             : "100%",
                     }
-                    : undefined }, h("slot", { key: 'd2b2e67fc903edcbdb62fada84d1be2ea2917f4d' })))));
+                    : undefined }, h("slot", { key: '76cb1ed8ca42a937c323c9acbe301168e4134f51' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-modal.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './swirl-button-group2.js';
 import { d as defineCustomElement$3 } from './swirl-heading2.js';
 import { d as defineCustomElement$2 } from './swirl-stack2.js';
 
-const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n    var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n    var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) +\n        var(--swirl-modal-max-secondary-content-width)\n    )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal--has-sidebar-content .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)\n    )}@media (min-width: 768px){.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse;gap:var(--s-space-16)}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +\n        var(--swirl-modal-max-secondary-content-width)\n    )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
+const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n    var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n    var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) +\n        var(--swirl-modal-max-secondary-content-width)\n    )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal--has-sidebar-content .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)\n    )}@media (min-width: 768px){.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse;gap:var(--s-space-16)}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +\n        var(--swirl-modal-max-secondary-content-width)\n    )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
 const SwirlModalStyle0 = swirlModalCss;
 
 const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends HTMLElement {
@@ -19,6 +19,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
         this.primaryAction = createEvent(this, "primaryAction", 7);
         this.requestModalClose = createEvent(this, "requestModalClose", 7);
         this.secondaryAction = createEvent(this, "secondaryAction", 7);
+        this.sidebarClose = createEvent(this, "sidebarClose", 7);
         this.onKeyDown = (event) => {
             if (event.code === "Escape") {
                 event.stopImmediatePropagation();
@@ -31,6 +32,10 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
         this.onCloseButtonClick = () => {
             this.close();
         };
+        this.onSidebarCloseButtonClick = () => {
+            this.hideSidebarContent = true;
+            this.sidebarClose.emit();
+        };
         this.onPrimaryAction = (event) => {
             this.primaryAction.emit(event);
         };
@@ -100,6 +105,8 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
         this.sidebarPadded = true;
         this.sidebarFooterPadded = true;
         this.hideSidebarContent = undefined;
+        this.hasSidebarCloseButton = undefined;
+        this.sidebarCloseButtonLabel = "Close sidebar";
         this.isOpen = false;
         this.closing = false;
         this.hasCustomHeader = undefined;
@@ -239,21 +246,23 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
             "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
             "modal--sidebar-scrollable": this.sidebarScrollable,
         });
-        return (h(Host, { key: 'd162022c8b9967bb9eded76db12570bbadacaa7d' }, h("section", { key: '16daee0db84ad02cca21fbfb889862c595b790b7', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '9580dc9753a27e9619ca5c8a46de177e41ad0401', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '91fd94a7b8e5546f09d3abaf30b452ff36b53ed8', class: "modal__body", style: {
+        return (h(Host, { key: '0543217e230003b07b330c75318de876bfd5f8c1' }, h("section", { key: 'eb32ccf5ae5052679772f80ca65c92c16e7a0907', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: 'aebfe6f08258d72d80b953d9a341168413c6fcc5', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'b669d9c07414b8631c0337801a47b0b96c806c95', class: "modal__body", style: {
                 "--swirl-modal-max-height": this.maxHeight,
                 "--swirl-modal-height": this.height,
                 minHeight: this.minHeight,
                 maxWidth: this.maxWidth,
-            } }, h("aside", { key: '79480adbc827a85032debda4dc0d20307c4c3d72', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'a6a3bd6cad2bef769cedaa030e4ce6a461a92c76', class: "modal__sidebar-header" }, h("swirl-heading", { key: 'ff5451d4f51467e5e60013dcc276f408a1c35bcc', as: "h3", class: "modal__sidebar-heading", level: 3, text: this.sidebarLabel }))), h("div", { key: 'e42c3111f5a095846bad8346885532eb2c7fbe96', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '6a18599749a2ea252c90f0cf46ba13b6f70875a4', name: "sidebar-content" })), h("div", { key: '51afea19e6db35787dad89949f90cf7135bf3a2a', class: "modal__sidebar-footer" }, h("slot", { key: '5e27d543bf74ad187c4d413c92f1a0dad37ade6b', name: "sidebar-footer" }))), h("div", { key: 'bfa4d069ad12b4377bbd7e00dffc47be4c6be742', class: "modal__main-content" }, h("header", { key: '23d5b07a941a7a504a05d0af0116119aa6547029', class: "modal__custom-header" }, h("slot", { key: '6a10aed5e3989f04dce9aadb8c10b23c04265c24', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '7cfa274ee7624dae949313d7e178ad7a091ec18f', class: "modal__header" }, h("div", { key: '591192e57b8630bb25d123ef8a8987202a7b90a6', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '9ed3c60edd6464f3c56fdb080cb202d4847adb90', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            } }, h("aside", { key: 'c223a5c5fdc6c3468b4367afadb59b0830a00e6c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '81c3b4af4ea04c45c43583e805ec232e25baf6b8', class: classNames("modal__sidebar-header", {
+                "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
+            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '62f85cd8defba57c3a00eb095948713f70ff9f69', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '1c584271b7e7851af094537cf613c836066959e2', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'cf1f01116aa4e219ec6be585465c0227b37cd0e2', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '955e56368db6bda842d43a7b7a1986c978a20141', name: "sidebar-content" })), h("div", { key: '3383a87f2a354434175a8dbe566cb78e53731def', class: "modal__sidebar-footer" }, h("slot", { key: 'c66e49cc46f00786a04e4daf19f04b87fd34557e', name: "sidebar-footer" }))), h("div", { key: 'e21171544393bd45e9308f933dc7fc00a2b6c42c', class: "modal__main-content" }, h("header", { key: '48fbcab52704f2894b77df9c1ea5bcc4575b1c8c', class: "modal__custom-header" }, h("slot", { key: '1c3f60b542da972c9a50608587ffbd19f584ffa7', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '9b18c0763a681adac889c657ac297b750b0fa140', class: "modal__header" }, h("div", { key: '8cfac19c30d7f60a35b97aa565ea35bfe9e95005', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'e2911ca94e8c1ee1804b6eaaa089002f22c0c578', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'f3d11935d48cb6a83141df054b82afc254792c2d', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '6f0b289d11691dfd16a0716f2fa25f23f6f432e6', class: "modal__content-container", style: {
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'ea14fbd1265cc1e43a2981f7b696638a456c1f1e', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '60c91d254f9e414ca4b87143ed6d5cef30ad1a38', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: '35d1da48878a59394e80fb417b8a79f87956a7c9', class: "modal__primary-content", style: {
+            } }, h("div", { key: 'c11917be49baf1f43675a73a7a7046c7a887cb40', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: '61110bfffefd307ef8689c8011d22ee04a191c7d', class: "modal__header-tools" }, h("slot", { key: '88132e16cf38cbdfea4af31b0e47b5f085296799', name: "header-tools" })), h("div", { key: '9af2183748d315be64eee21e828bb0594f1d4756', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'bd270446b3c8e3b1591e7b0d3fbe8ccff0c82d47' }))), h("div", { key: '5f9a362288a72d1217d8793de47e6483ba26c41d', class: "modal__secondary-content", style: {
+            } }, h("div", { key: 'b33a69c6a9a3dcb81a3abd284f8bb6fd1dabcdb1', class: "modal__header-tools" }, h("slot", { key: 'bacea7d3b542676a302da9e5623da9285d5ae3bc', name: "header-tools" })), h("div", { key: 'd658729178719798986177acd3f7d466dcd5fadb', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '95e3968d17d227ad7a7519b5485176c3d9b95cd1' }))), h("div", { key: '11bb7dbccbe133dad531786a5b0774b23f8c1b9f', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -271,7 +280,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: '91c1ac6a98a4f4bc34ad0c7bb933d39630e42cba', name: "secondary-content" }))), h("div", { key: 'dc07e671d85ec799067c91d08515df4b6dc5f8a3', class: "modal__custom-footer" }, h("slot", { key: '76064566c0e4cdcb636202b2a396c1f471547c8b', name: "custom-footer" })), showControls && (h("footer", { key: '5da26f5013227d82fdcbf4cc26a035bacfbbc56a', class: "modal__controls" }, h("swirl-button-group", { key: 'd52363233ed5e6cd395137adbd730181f10832a8', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '19056321ef209dc0161bb368e705cdaf75adf895', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'fd0641ba559b5bc16215595aef5d4688fde76b4b', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, h("slot", { key: 'e2fcfac9a89a5a7df9e2c2af51c36991320342b1', name: "secondary-content" }))), h("div", { key: 'd313f8e9c45a3eb64a28aaf711b3db1c8b3b18cd', class: "modal__custom-footer" }, h("slot", { key: '602ef11530a8fa084ddeff550fb3354fbd5d26dd', name: "custom-footer" })), showControls && (h("footer", { key: '2624f756d8ca90556c1d7965db02c94582a53c71', class: "modal__controls" }, h("swirl-button-group", { key: 'ed07892f918d99a6938d8b9ba692475533679fe2', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'f7b795aaad285376106551dd8bf870d3dc5d125c', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '581e017486218fd5857262b55abfef6207bc70de', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     get el() { return this; }
     static get style() { return SwirlModalStyle0; }
@@ -305,6 +314,8 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
         "sidebarPadded": [4, "sidebar-padded"],
         "sidebarFooterPadded": [4, "sidebar-footer-padded"],
         "hideSidebarContent": [4, "hide-sidebar-content"],
+        "hasSidebarCloseButton": [4, "has-sidebar-close-button"],
+        "sidebarCloseButtonLabel": [1, "sidebar-close-button-label"],
         "isOpen": [32],
         "closing": [32],
         "hasCustomHeader": [32],

package/dist/components/swirl-skeleton-box.js

@@ -1,56 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
-const SwirlSkeletonBoxStyle0 = swirlSkeletonBoxCss;
-
-const SwirlSkeletonBox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSkeletonBox extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.animated = true;
-        this.aspectRatio = undefined;
-        this.borderRadius = "base";
-        this.height = undefined;
-        this.width = undefined;
-    }
-    render() {
-        const className = classNames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
-        return (h(Host, { key: '1014b96b7170ab87eb995503cd3c4b6caf2d3e08', style: {
-                width: !Boolean(this.width) && !Boolean(this.aspectRatio)
-                    ? "100%"
-                    : undefined,
-            } }, h("div", { key: '24c0224e8b3f4de6886cd51f6f591d47c0eadbfd', class: className, style: {
-                aspectRatio: this.aspectRatio,
-                borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
-                    ? `var(--s-border-radius-${this.borderRadius})`
-                    : undefined,
-                height: this.height,
-                width: this.width,
-            } })));
-    }
-    static get style() { return SwirlSkeletonBoxStyle0; }
-}, [1, "swirl-skeleton-box", {
-        "animated": [4],
-        "aspectRatio": [1, "aspect-ratio"],
-        "borderRadius": [1, "border-radius"],
-        "height": [1],
-        "width": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-skeleton-box"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-skeleton-box":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlSkeletonBox$1);
-            }
-            break;
-    } });
-}
+import { S as SwirlSkeletonBox$1, d as defineCustomElement$1 } from './swirl-skeleton-box2.js';
 
 const SwirlSkeletonBox = SwirlSkeletonBox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/swirl-skeleton-box.entry.js → components/swirl-skeleton-box2.js}

@@ -1,12 +1,14 @@
-import { r as registerInstance, h, a as Host } from './index-6124252f.js';
-import { c as classnames } from './index-267776a4.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
 
 const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
 const SwirlSkeletonBoxStyle0 = swirlSkeletonBoxCss;
 
-const SwirlSkeletonBox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const SwirlSkeletonBox = /*@__PURE__*/ proxyCustomElement(class SwirlSkeletonBox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.animated = true;
         this.aspectRatio = undefined;
         this.borderRadius = "base";
@@ -14,7 +16,7 @@ const SwirlSkeletonBox = class {
         this.width = undefined;
     }
     render() {
-        const className = classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
+        const className = classNames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
         return (h(Host, { key: '1014b96b7170ab87eb995503cd3c4b6caf2d3e08', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
@@ -28,7 +30,26 @@ const SwirlSkeletonBox = class {
                 width: this.width,
             } })));
     }
-};
-SwirlSkeletonBox.style = SwirlSkeletonBoxStyle0;
+    static get style() { return SwirlSkeletonBoxStyle0; }
+}, [1, "swirl-skeleton-box", {
+        "animated": [4],
+        "aspectRatio": [1, "aspect-ratio"],
+        "borderRadius": [1, "border-radius"],
+        "height": [1],
+        "width": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-skeleton-box"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-skeleton-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlSkeletonBox);
+            }
+            break;
+    } });
+}
 
-export { SwirlSkeletonBox as swirl_skeleton_box };
+export { SwirlSkeletonBox as S, defineCustomElement as d };

package/dist/esm/index-6124252f.js

@@ -2690,10 +2690,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './swirl-shell-navigation-item.entry.js').then(processMod, consoleError);
-                case 'swirl-skeleton-box':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './swirl-skeleton-box.entry.js').then(processMod, consoleError);
                 case 'swirl-skeleton-text':
                     return import(
                       /* webpackMode: "lazy" */
@@ -3050,10 +3046,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './swirl-icon-cloud-upload.entry.js').then(processMod, consoleError);
-                case 'swirl-icon-gif_3':
+                case 'swirl-icon-gif_4':
                     return import(
                       /* webpackMode: "lazy" */
-                      './swirl-icon-gif_3.entry.js').then(processMod, consoleError);
+                      './swirl-icon-gif_4.entry.js').then(processMod, consoleError);
                 case 'swirl-icon-open-in-new':
                     return import(
                       /* webpackMode: "lazy" */