npm - @getflip/swirl-components - Versions diffs - 0.285.0 → 0.287.0 - Mend

@getflip/swirl-components 0.285.0 → 0.287.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1838) hide show

package/dist/components/swirl-icon-work.js CHANGED Viewed

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

package/dist/components/swirl-icon2.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SwirlIcon = /*@__PURE__*/ proxyCustomElement(class SwirlIcon extends HTMLE
     }
     render() {
         const Tag = `swirl-icon-${this.glyph}`;
-        return (h(Host, { key: '0fb4aca6ca6dc2bd4a82e87530b2b782d70ee371' }, h(Tag, { key: '4da6475959debe66949de965f9872c064961a143', color: this.color, size: this.size })));
+        return (h(Host, { key: '35c1892c00a51336f7601830f7364d8cc46ed1c7' }, h(Tag, { key: 'cafd8f5a944ed1b1bc78f47c847dd399ce13fa47', color: this.color, size: this.size })));
     }
     static get style() { return SwirlIconStyle0; }
 }, [1, "swirl-icon", {

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

@@ -137,16 +137,16 @@ const SwirlImageGridItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGr
             "image-grid-item--has-error": this.error,
             "image-grid-item--has-overlay": this.overlay,
         });
-        return (h(Host, { key: '25d55918ded8252b0cafd0e29245229189cd72f5', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '940ecc7d168d882352556df39576ba05949657dd', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: 'b1962f4ad8cf634ee84e6335cfcc3bea668a5208', class: "image-grid-item__background", style: {
+        return (h(Host, { key: '6d7a491535c7c0af41b3ef91cb4260840c805f54', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: 'e4e5cfcbd453b59126581950891d206b57f2109f', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '07acf6335469352ea3b1f60c05115c1fa824dbda', 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, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '25f5a42628d940986b45dc5f5dc3013480326360', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: '3954c9d057deff36d1d2273967fed3ed31a5c600', 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: 'dd212229dd965e6d93b4ead145538688a74f939a', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: '4b9c460a02c124e527f50be015e6acdcbf483847', size: 20 })))), this.loaded &&
+            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '790abbbd89388a9838c13e9425c9a937cf33a219', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'd563403f2361779f0923b940f7897a99bbf1baf1', 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: 'dbba4b54899707d5be515626b08b9d726acebe8b', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: '9e760ce7ecfa3a30fdca5639ec0ff96e132876b1', size: 20 })))), this.loaded &&
             !this.error &&
             this.icon &&
-            !Boolean(this.overlay) && (h("div", { key: 'b6ba0c7c2acb6ed3263f6000799e0df4a04e2211', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: 'f0cfd5469b86f7b608dbd7608d216a7a0b21cef9', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: '5782cb6dbdd706424d1b35b01bf1a53c32221fcd', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: 'bb5241d86afffd13c39f45a4b4e536726d8548e8' }))), this.loaded && this.error && (h("div", { key: 'cef4a030dea24e0194d306ce555ab572b45366b9', class: "image-grid-item__error" }, h("swirl-icon-error", { key: 'f88fd6dcc55b31e08817aa773901cad70d9af408', color: "critical" }))))));
+            !Boolean(this.overlay) && (h("div", { key: 'a53d40629745bebbfe2cd33e7e6c9bb3c32a325e', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '751672a2faa1961f7043383eb8f2b7be70c46b8d', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: 'bc2aca94226b94083ed4380f94ef82a3a71175e0', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '7176d5c2e8cee14edfd6329bf81a00c82f692be9' }))), this.loaded && this.error && (h("div", { key: 'a9364481c81cae5e13d3c7f2968c5e7292cb270a', class: "image-grid-item__error" }, h("swirl-icon-error", { key: 'ea4d4d8455b282acc80f31a0946ccdb387c7fc82', color: "critical" }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-image-grid.js CHANGED Viewed

@@ -42,7 +42,7 @@ const SwirlImageGrid$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGrid e
     render() {
         const className = classNames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
         const aspectRatio = this.caculateAspectRatio();
-        return (h(Host, { key: 'b521308af38fdbacdba8c1f992e048846609d50a' }, h("div", { key: '964edf1a7b758b4779e5b67d7bff4ed91fb7b7de', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: '57075e6e6286ab69d4479b4d1b53417cc7484c62', onSlotchange: this.updateItems }))));
+        return (h(Host, { key: '144e4d1854c853249fcf2f66e8dc0495c88f6bd6' }, h("div", { key: '6c2edaa47cce82a38cde93b76351f27426b7243d', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: 'a4f7375455254daa54140731e2eb2e989db0413d', onSlotchange: this.updateItems }))));
     }
     get el() { return this; }
     static get style() { return SwirlImageGridStyle0; }

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

@@ -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: '39d806296fd3498001b4ab55fb0c49ff1f49f970' }, h("span", { key: 'a60a0251ee7fe020db8a15a2944ba28c304033c6', class: className, part: "inline-error" }, h("span", { key: '2cfec4d72793949e3064399e74f91bcb1b9ef9af', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: 'a6c182150bf6de75b537890f340a6ad264823df8' })), h("span", { key: 'ce540e1fe3e25aa2509196c01fde0de1138600a4', class: "inline-error__message" }, this.message))));
+        return (h(Host, { key: '72e44163a98f567986f7a6616b67576db191d566' }, h("span", { key: '9855ecc87c1d5a210426615004589b6c539e5a89', class: className, part: "inline-error" }, h("span", { key: '4bf4317da78e68630e3371156ed02046269748a1', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: '57626d7a6bd623e01ec909de69ff62eba07c8b37' })), h("span", { key: '2203e6d6fd5cf6db3bbb29f7a42f50052729503b', class: "inline-error__message" }, this.message))));
     }
     static get style() { return SwirlInlineErrorStyle0; }
 }, [1, "swirl-inline-error", {

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

@@ -20,7 +20,7 @@ const SwirlInlineNotification$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIn
     }
     render() {
         const className = classNames("inline-notification", `inline-notification--intent-${this.intent}`);
-        return (h(Host, { key: 'd46e37a215c2373153991797e6b0a42336358109' }, h("div", { key: '4db88116c9ae4e6693f274a28a9a2d861e5aa94b', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("span", { key: 'feaf53259af2044c5ecbb461804a56ed22c6e0d9', "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && (h("swirl-icon-error", { key: 'aa261620830413297d2f63aff904c33d20390cf2', size: 20 })), this.intent === "success" && (h("swirl-icon-check-circle", { key: '79c150f64b7e3a04a7b87cececf20b14f75a3518', size: 20 })), this.intent === "warning" && (h("swirl-icon-warning", { key: '556335c1333e49167d0c2b67cb983e183716624c', size: 20 })), this.intent === "info" && (h("swirl-icon-info", { key: '6e55a282809d8abaea589b5a7ed1977c69f03640', size: 20 }))), h("span", { key: 'bfdcf8c92ce723c0cd9ebc9284f4b8bc8ae79bdd', class: "inline-notification__content", id: "content" }, h("swirl-text", { key: 'a1191ec6b628202f21b649d788430becfa08caba', class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), h("slot", { key: '5bf9952fa7288e97a8d728e06db17b7facb400ab' })))));
+        return (h(Host, { key: 'a1da297ecc55afb8b75f2e0b88d1cbc95516dff1' }, h("div", { key: 'c4f47397145f183054219daffc03d5a298aa07c4', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("span", { key: 'dd8150c459a8aeb47e702313a74875823a5526fc', "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && (h("swirl-icon-error", { key: '5fe389c8972247b9f694d3ae0b06b8377843a100', size: 20 })), this.intent === "success" && (h("swirl-icon-check-circle", { key: '2ddf90d1b3451778c190bff7269f68166f61dbba', size: 20 })), this.intent === "warning" && (h("swirl-icon-warning", { key: '72a7068790a55c9be62101a56f6cc87e8c890433', size: 20 })), this.intent === "info" && (h("swirl-icon-info", { key: '3ef651d127b42706cce8243d2fa35764809e3646', size: 20 }))), h("span", { key: 'a9186c6f914cea277c92800dd05d3255a3e1c677', class: "inline-notification__content", id: "content" }, h("swirl-text", { key: '86627595e6d8dfa49163442a1ef53b7916b732bb', class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), h("slot", { key: 'fb98042e041b7764ae30b9d883fadd19cbfcc9cb' })))));
     }
     static get style() { return SwirlInlineNotificationStyle0; }
 }, [1, "swirl-inline-notification", {

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

@@ -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: '2fc16697efad24365a563411111d6e2d954c8aee' }, h("span", { key: '02d1974c104f1bbc71effbff313b2c3a76104fc1', class: className, part: "inline-status" }, this.icon && (h("span", { key: '6d93d978c0fd59663669aa2e46ed5ffed57e3213', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'b75e6e5dbf94bf3532c9e2ab6bba4786b8a199d1', class: "inline-status__message" }, this.message))));
+        return (h(Host, { key: '856ac6cf78d3d4f72ec8db6c651d849aa770de41' }, h("span", { key: '4654c90f1dd3b2569f848414fc8fd739a7f49555', class: className, part: "inline-status" }, this.icon && (h("span", { key: '3f32569549ea2facd87d267b8836a0dfdc308405', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'd3086330637d3f4999d7cf04716f5de09f4ddd0f', class: "inline-status__message" }, this.message))));
     }
     static get style() { return SwirlInlineStatusStyle0; }
 }, [1, "swirl-inline-status", {

package/dist/components/swirl-lightbox.js CHANGED Viewed

@@ -310,7 +310,7 @@ const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox ext
             "lightbox--hide-menu": !hasMenuItems,
             "lightbox--hide-toolbar": !hasToolbar,
         });
-        return (h(Host, { key: '2a5453d620902876bcbd132ad33ce44c6968107e', onKeydown: this.onKeyDown }, h("section", { key: '7b83b8433a217bd9780e901330cd9b331d00edf1', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '95ca4eb07ff51e097965646dc5d3cf8bf3aa927f', class: "lightbox__body", role: "document" }, h("header", { key: 'bd85c4e4a3055e1d1c9ee166f4456e8003bdc4c3', class: "lightbox__header" }, h("button", { key: '070efd3285d7810f3d031ef35f08c1de8cf43da8', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '68388c53988fc57217988c429a6bed21ae16fc0c' })), h("div", { key: '63a4cef131faf70605cbc67ed6ad02c09bef5c3d', class: "lightbox__toolbar" }, h("slot", { key: '8025cc39ecc00930352801fc27175897322c060f', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '10747002ee19a6accb2bd8cd752b8794e930bdb1', swirlPopover: this.menu }, h("button", { key: 'ee335848b6ad7abf69f300cb9adb0d8b0b4dff21', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: 'b382292d75ec559ae542a98e145b1a12430f8fe4' }))))), h("div", { key: '0d3e2f44c9e40b59d93a89aec8df2d383e3c742c', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: 'dd625b34c88c2c3381cd034cfc7716dce7d01248', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '6d04b0c40d9b46f783ab55363377055c6dcf69b8', onSlotchange: this.registerSlides }))), h("div", { key: 'ed9289fedd42eadf4725075849704c19cd39fd36', class: "lightbox__controls" }, h("button", { key: '2d170a66a66260f3c01e5e5ca7750e1343db4ca1', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '287a5135c9a2d0eecac5078702ac9ba8fac6e922' })), h("button", { key: 'd40a453bc90a99a2d76363d82b5b713c643d83b2', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: 'f3986c948ef6f413e97200cd0a8fc6d808829dc2' }))), showPagination && (h("span", { key: '83c2ec283ed0826f3ba02b9e0b3570a39f4a7355', class: "lightbox__pagination" }, h("span", { key: 'b1f6fec8ebec336ce08aa298e77304b623c0c041', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '383236d86dd9d640696e5f3e8348327328bf43ba', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '65557c3eb245265943014f796d31ff54a3e91a41' }, h("div", { key: '068ed1d56b8182cbf35ec1590fc78fa3837487a4', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '1dc9d8bab3d912ba592ce888af85c468a9519391', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: 'a58b4a7afca1f839f767000d155892088b461923', alt: "", src: currentThumbnailUrl }))), h("div", { key: 'ca589cee18ac4d0b459543f5502d1d39d59d4f69', class: "lightbox__file-info" }, h("swirl-text", { key: '99a0d34f43f5a5b1e1ae482c48c1dafc68b55837', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '092772566ba28884e403146768cb6daa8704ef21', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '8631028db9cae09412589ece93784da10f40f6f1' }), h("swirl-action-list", { key: '9437a83d5958906a020f74cb6c109c0f96c61e9f' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '8cf82b7362f2cd61ae347676008d6c217ca21cd5', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '24742385608222225982eb4bb0156690ea1372b3', name: "menu-items" }))))))));
+        return (h(Host, { key: '5f83023c4e9c5b49cbfc9d992ba78b7fcc0af922', onKeydown: this.onKeyDown }, h("section", { key: '83beaa9afc9f61cfb335d9db541ed666ce2d3f02', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '9da23537c23f1990176ff16e09023850c2db4ae8', class: "lightbox__body", role: "document" }, h("header", { key: '63de374446036fe8d2d2869991e7ffbd4b458b5b', class: "lightbox__header" }, h("button", { key: '543d26e507cd3478b639ad1d87ed7a63129fa8cb', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: 'ecec8c257983f094ec3b336b0d2113d99ecb3ee5' })), h("div", { key: '8ceb3fec02326e2a3a4e35a07d4e1c2a5dd56c59', class: "lightbox__toolbar" }, h("slot", { key: '5d72749e96080ee1447ede1a013d557a03daa680', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '22692b7c64403576ed27ee78753701993869b0f4', swirlPopover: this.menu }, h("button", { key: '2cf90488154012ed8308326821bc0b086cdf7d1e', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '4feb1c6169c337e8f02a6dd53570d78e4a3a3461' }))))), h("div", { key: 'b365266f68fefd033e91b942096bb87ca6541b9d', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: 'b5ba36b62356763fd81c87ef160a1df9596335fd', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '6c2581badf908232cb1642d3eea15a2dd1d4bb27', onSlotchange: this.registerSlides }))), h("div", { key: 'af5442e3bde8d9c18c58ffb87acabe298fc8379c', class: "lightbox__controls" }, h("button", { key: 'a16af74a6dbd6168fb44c0b40ef584824a90612f', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '4160e454cf194bf910c88ff9e91405dca8babfc6' })), h("button", { key: 'ea98e7182ee0cc7a58fa8277332cc39e5c1d48b4', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: '48de4f64580779e17907b5bc70c6b59894bf700b' }))), showPagination && (h("span", { key: '01907c1e3eb44037d0978660b61e177a70e3a51a', class: "lightbox__pagination" }, h("span", { key: 'bb8d34954bdd5b6bf463fc97d4989fe9ea07aa94', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '4b04077d2100254834912bf76b905defa588a554', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'a98f21b521ae63b02436c402bb250b71ea80ec42' }, h("div", { key: 'caad1888856f677f28136b2eb9e7ad77dc9e4e03', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '06527190cd5914dbbec266a298819355f51ad3bd', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '7b85a2908765bb662520fd026182a7e5f4ae6bae', alt: "", src: currentThumbnailUrl }))), h("div", { key: '5c2d2fbc79d1c6d96fd5689d5618c9245c8245fc', class: "lightbox__file-info" }, h("swirl-text", { key: 'b71e439fd73142424563a493e68023bec26151be', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '8265bb14022bf27e53ce13754dc8e1ac2ff21196', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '6a5ea757cf7658aaf7f1e33132275e7317d6f2e3' }), h("swirl-action-list", { key: '59b1bb67911d2bb6e92f15976fbd86cedea48580' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'a8aa5dc3f5ba078248b4f7fb5d86182f11cceca2', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '35acefefe19ae17f00ee700aa21db2248ab87eea', name: "menu-items" }))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-link.js CHANGED Viewed

@@ -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: 'dd7fa6f72657545249f2f473fba736ae8b658e78' }, h("a", { key: '237411a3ddf6fe64d9a98e300d01f4af805a6877', class: className, href: this.href, part: "link", target: this.target }, this.label)));
+        return (h(Host, { key: 'e7e0c66fbd3ea0c860e059f0d1e62186efd6d294' }, h("a", { key: '9e1deec9cde153cf663bfa415caa38293962a2c4', class: className, href: this.href, part: "link", target: this.target }, this.label)));
     }
     static get style() { return SwirlLinkStyle0; }
 }, [1, "swirl-link", {

package/dist/components/swirl-list.js CHANGED Viewed

@@ -15,7 +15,7 @@ const SwirlList$1 = /*@__PURE__*/ proxyCustomElement(class SwirlList extends HTM
         }
     }
     render() {
-        return (h(Host, { key: '16573be560707316d191314a9139db4a461bd13d' }, h("div", { key: '040abef7bf722f778c5b02024da346b1992be0a7', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: '04e5e724cea7f526242606d799b611dedee23d3f' }))));
+        return (h(Host, { key: '46fec8693acaa0189029acb53ad67d4271be59a2' }, h("div", { key: '159207883e56500b265f14bda7bafe0af066ee8e', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: 'c6d81201fcce3f5bdaf44ae0e197aeb67fbd4bce' }))));
     }
     static get style() { return SwirlListStyle0; }
 }, [4, "swirl-list"]);

package/dist/components/swirl-menu-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
 import { c as closestPassShadow, p as parentsPassShadow } from './utils.js';
 import { d as defineCustomElement$6 } from './swirl-action-list-item2.js';
@@ -56,6 +56,7 @@ const SwirlMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenuItem ext
         this.disabled = undefined;
         this.expanded = undefined;
         this.icon = undefined;
+        this.iconBadge = undefined;
         this.intent = "default";
         this.label = undefined;
         this.suffix = undefined;
@@ -77,6 +78,12 @@ const SwirlMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenuItem ext
     async getSubMenu() {
         return this.subMenu;
     }
+    /**
+     * Update the selected value
+     */
+    async updateValue() {
+        forceUpdate(this);
+    }
     /**
      * Get the items parent menu
      */
@@ -99,18 +106,19 @@ const SwirlMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenuItem ext
         const badge = Boolean(this.subMenu?.value)
             ? Array.from(this.subMenu?.querySelectorAll("swirl-menu-item") || []).find((item) => item.value === this.subMenu?.value)?.label
             : undefined;
-        return (h("swirl-action-list-item", { badge: badge, description: this.description, disabled: this.disabled, icon: this.icon, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (el) => (this.actionListItem = el), suffix: this.suffix }));
+        return (h("swirl-action-list-item", { badge: badge, description: this.description, disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (el) => (this.actionListItem = el), suffix: this.suffix }, h("slot", { slot: "avatar", name: "avatar" })));
     }
     renderOptionListItem() {
-        return (h("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (el) => (this.optionListItem = el), selected: this.parentMenu?.value === this.value, swirlAriaRole: "menuitemradio", value: this.value }));
+        const selected = this.parentMenu?.value === this.value;
+        return (h("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (el) => (this.optionListItem = el), selected: selected, swirlAriaRole: "menuitemradio", value: this.value }, h("slot", { slot: "avatar", name: "avatar" })));
     }
     render() {
         const className = classNames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '60935d6905d5131e17c11745287d6b8a92dcc678' }, h("div", { key: 'dae9950c41d49199ad06d12b4cae1a5bd02df989', class: className }, this.parentMenu?.variant === "selection"
+        return (h(Host, { key: 'c3aee9e9e8c3eeec2287796fcbc2bc403e717d83' }, h("div", { key: '9624ee9775abc19991e6c2f61d35c09233d176dc', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: '927c8ca18d653dfa37e614691b4a955144b327b8', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: 'd1e331b8f5556280305ae6512daeaf7130efb752', onSlotchange: this.onSlotChange }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -122,6 +130,7 @@ const SwirlMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenuItem ext
         "disabled": [4],
         "expanded": [4],
         "icon": [1],
+        "iconBadge": [1, "icon-badge"],
         "intent": [1],
         "label": [1],
         "suffix": [1],
@@ -129,6 +138,7 @@ const SwirlMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenuItem ext
         "parentMenu": [32],
         "subMenu": [32],
         "getSubMenu": [64],
+        "updateValue": [64],
         "getParentMenu": [64]
     }, undefined, {
         "expanded": ["watchExpanded"]

package/dist/components/swirl-menu.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as computePosition, o as offset, f as flip, a as autoUpdate } from './floating-ui.dom.esm.js';
+import { c as computePosition, o as offset, s as shift, f as flip, a as autoUpdate } from './floating-ui.dom.esm.js';
 import { c as classNames } from './index2.js';
 import { q as querySelectorAllDeep, c as closestPassShadow, p as parentsPassShadow, i as isMobileViewport, b as getActiveElement } from './utils.js';
 import { d as defineCustomElement$3 } from './swirl-button2.js';
@@ -53,10 +53,12 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
             if (!Boolean(trigger) || !Boolean(this.menuContainer)) {
                 return;
             }
-            this.position = await computePosition(trigger, this.menuContainer, {
-                placement: "right-start",
-                strategy: "fixed",
-                middleware: [offset({ mainAxis: -10, crossAxis: 0 }), flip()],
+            requestAnimationFrame(async () => {
+                this.position = await computePosition(trigger, this.menuContainer, {
+                    placement: "right-start",
+                    strategy: "fixed",
+                    middleware: [offset({ mainAxis: -10, crossAxis: 0 }), shift(), flip()],
+                });
             });
         };
         this.onKeyDown = (event) => {
@@ -136,6 +138,9 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
         }
         this.disableAutoUpdate = autoUpdate(this.el.parentElement, this.menuContainer, this.reposition);
     }
+    watchValue() {
+        this.updateActiveItem();
+    }
     /**
      * Activate a menu item with a sub menu. Only callable on a root menu.
      * @returns
@@ -212,6 +217,21 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
     async updateSelection(item) {
         this.valueChange.emit(item.value);
     }
+    /**
+     * Update the displayed active item.
+     * @returns
+     */
+    async updateActiveItem() {
+        const menuItems = querySelectorAllDeep(this.el, "swirl-menu-item").filter((item) => {
+            return closestPassShadow(item, "swirl-menu") === this.el;
+        });
+        menuItems.forEach((item) => {
+            item.updateValue();
+        });
+        if (this.parentMenu && this.parentMenu.variant === "action") {
+            this.parentMenu.updateActiveItem();
+        }
+    }
     observeSlotChanges() {
         this.observer = new MutationObserver(() => {
             this.updateItems();
@@ -278,7 +298,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
             "menu--mobile": this.mobile,
             "menu--root": isTopLevelMenu,
         });
-        return (h(Host, { key: '871e162e3b3f261be6a9c8a0426d65f7abe50f25' }, h("div", { key: '01d3b2e0ffa7a55cda07a477f95fe4014685ff7e', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: '8927be3673d2db5cba405199f833cd7aabbb8610', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '4d4ee3f8485470270ae59c9635b96ebddb2d44ee', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: 'f4c63de9a83fe17567371528cff256228a12dd25', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: 'c241e0b1573f5c96f570017ed2b9ac4a3361e89c', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: '78f3377166d291981bf076ae448278877a6288ba', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: 'dddf25259fa3495d9c16f9e2155fb1b69ecebb80', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '04b4e0e348861cee0a34727850e69439a5c6b402', "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: '139ace0948e7fe3f2ccd87a4f497f5d6c9e889d0' }, h("div", { key: '4c036f7cc11ad4baaa694370f58200b95e9d8bd5', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: 'efc5872b0eab8e30656ff08be0f22369b5dea335', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '011aae50518fcc6acf2df643d1b8baeb02ee258c', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '3290279dae6aa2f24db3e6255663a74d9ebfb245', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '74ec9876905b64c1d1564b4673da0afa6df8be88', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: 'd11cb7e73bf2ae10e4877adea3a1fc76ef8709bd', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: '18763d9d7b8235d36d15962d9f0fa186f06cbf06', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: 'd13e7e02bebdc0b2672f9c99ad16b140245f0309', "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` : "",
@@ -289,11 +309,12 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
                             ? `calc(-100% * ${this.activeLevel})`
                             : "100%",
                     }
-                    : undefined }, h("slot", { key: '894ca7c7b59993da2caecc103e14a166df1c60f2' })))));
+                    : undefined }, h("slot", { key: '9e4b84a77c38b544a1012c7cd28f767b54399b31' })))));
     }
     get el() { return this; }
     static get watchers() { return {
-        "active": ["watchActive"]
+        "active": ["watchActive"],
+        "value": ["watchValue"]
     }; }
     static get style() { return SwirlMenuStyle0; }
 }, [1, "swirl-menu", {
@@ -313,9 +334,11 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
         "goBack": [64],
         "focusFirstItem": [64],
         "focusItemAtIndex": [64],
-        "updateSelection": [64]
+        "updateSelection": [64],
+        "updateActiveItem": [64]
     }, undefined, {
-        "active": ["watchActive"]
+        "active": ["watchActive"],
+        "value": ["watchValue"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/swirl-modal.js CHANGED Viewed

@@ -184,21 +184,21 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
             "modal--scrolled-down": this.scrolledDown,
             "modal--hide-secondary-content-borders": this.hideSecondaryContentBorders,
         });
-        return (h(Host, { key: '59bb0f17c4f2e60c77575cf02823626e631c9e6b' }, h("section", { key: '0c31064fe837a46bdfc50f744770039fc878359a', "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: 'f45ad45df2a06d53c1c5cba852b652e31760ef03', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '9a3485ea35b08428ab58fef765f4497b75bef734', class: "modal__body", style: {
+        return (h(Host, { key: '3bbd1990a38876aa5fa6022a7e75100bbf7b581c' }, h("section", { key: 'bce314e825048303343607cbf919d2bc0d3705b2', "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: '9f2fdee44602aafa9192bf74491e6ef8ea54b916', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '6683da7a0d57dab9436e7de71ac3936b25d7a4e0', class: "modal__body", style: {
                 "--swirl-modal-max-height": this.maxHeight,
                 "--swirl-modal-height": this.height,
                 minHeight: this.minHeight,
                 maxWidth: this.maxWidth,
-            } }, h("header", { key: 'abc085e2e7b8964e7400d67dac99fe5c81470d00', class: "modal__custom-header" }, h("slot", { key: '211d44847186a221263a6930a12f72b3fb92ff45', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '3d8c94ddbd3e4b15c41c67a15559948b3f207ac8', class: "modal__header" }, h("div", { key: '42f998e77ea2f2bffde4be10b184bc2b7fd4f275', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'ff3a001411f87b58a7757e049c15802b8f6001a4', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            } }, h("header", { key: 'd40897c1767ea0a339159f34bfbe876c5acd6e17', class: "modal__custom-header" }, h("slot", { key: '60ae424e9814a0b51bfa1c23e8d6fa5e5b7ae84d', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '8eaa631b2764ced7b932cfe8c99d1c8c0e01e0a7', class: "modal__header" }, h("div", { key: '1df6bfb57f56f274646d28b18ce7f6d9b3bb52fe', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'a1dcfcdd6d47091805c1423520cec1418c20cc60', 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: '0bb0418d9f1524921a556d5888f6795be95a9942', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '735da7ca7911404a453362feaf169a3c15023f54', 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: '9ab5c9fbc09068883a45a624de7b8979af08c309', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '9bec8811feb9e321f192161dbd31ce8713d2cf2e', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: 'cda8107e32fe2f331d65906510b294ae66dc7abe', class: "modal__primary-content", style: {
+            } }, h("div", { key: '2979e5f0d391f891f547b45c2f632a11a95b6429', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: '5a597a80b7de25a74e4d215c26444abe6efbcb02', class: "modal__header-tools" }, h("slot", { key: 'ae5385cbb22afa2048b91d0697733b404a487d8e', name: "header-tools" })), h("div", { key: '82ffe6da927ed8fc5167f8aa738dc6058d76e4f7', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'f6cac69b194055b59cff5f556d043763c2d7c5cd' }))), h("div", { key: '0b4791c0bf3b31c34e8808f75938be5c2a0a01ad', class: "modal__secondary-content", style: {
+            } }, h("div", { key: '9a6fdf26e5cc8cfc975a13af5ad2e7a16a83c821', class: "modal__header-tools" }, h("slot", { key: '461ed54444ab5dc497f299a7d4c1319847d58f1b', name: "header-tools" })), h("div", { key: 'f9086457f301927401c089e78f2c1c650c729952', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'a28dda1fb3a3dd4e7bbe34cb1276320062e2d78b' }))), h("div", { key: '1c49dcec32e002149de659191999d7b0a9093596', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -216,7 +216,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: '1424f37190233bd4657b815e364c09242f8a5a5b', name: "secondary-content" }))), h("div", { key: 'f5affa411b74d5a00cc57c016f396c8bfd82ccea', class: "modal__custom-footer" }, h("slot", { key: 'e8818cd0a955b68595d48e9426a8188d662d79c0', name: "custom-footer" })), showControls && (h("footer", { key: '4d6f7769b3b05b56ab754be3c09e6fa0a10aebec', class: "modal__controls" }, h("swirl-button-group", { key: '3a3c37269c30c68736b7cbe166b4050150e987ec', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '5efc5c3383d6333e00a45e912428c0623c2e4925', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '178f724035753ad35592a19ef3ceeea7f43c28dd', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+            } }, h("slot", { key: '28a894c1566166272c55a5d539bd4168a17947c1', name: "secondary-content" }))), h("div", { key: '5af192de2cfbdc6adbaa97d333e2acde0902d478', class: "modal__custom-footer" }, h("slot", { key: '60933eef98ebb97a50fdb29952a61318d96d2d2a', name: "custom-footer" })), showControls && (h("footer", { key: 'be3fd73f74e76731b5d3a8a4400586cd42b5bdaa', class: "modal__controls" }, h("swirl-button-group", { key: 'c544bf607faa67ad57292234f70f4a2713b47976', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'f47e2ff0439c95f480c931d598981c5fbdf55b62', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6e21d66f1f8583d13f48c105eff3d22ec9269759', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
     }
     get el() { return this; }
     static get style() { return SwirlModalStyle0; }

package/dist/components/swirl-option-list-item2.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$2 } from './swirl-icon-check-strong2.js';
 import { d as defineCustomElement$1 } from './swirl-icon-drag-handle2.js';
 import { v as v4 } from './v4.js';
-const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;width:2.5rem;height:2.5rem;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
+const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;width:2.5rem;height:2.5rem;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
 const SwirlOptionListItemStyle0 = swirlOptionListItemCss;
 const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionListItem extends HTMLElement {
@@ -40,6 +40,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
         this.dragHandleDescription = "Press spacebar to toggle grab";
         this.dragHandleLabel = "Move option";
         this.icon = undefined;
+        this.iconBadge = undefined;
         this.label = undefined;
         this.selected = false;
         this.swirlAriaRole = "option";
@@ -67,6 +68,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
         const ariaSelected = String(this.selected);
         const showCheckbox = this.context === "multi-select";
         const showIcon = Boolean(this.icon) && this.context === "single-select";
+        const showIconBadge = Boolean(this.iconBadge);
         const showAvatar = this.el.querySelector('[slot="avatar"]') &&
             this.context === "single-select";
         const showSelectionIcon = this.selected && this.context === "single-select";
@@ -77,9 +79,9 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
             "option-list-item--selected": this.selected,
             "option-list-item--show-avatar": showAvatar,
         });
-        return (h(Host, { key: 'd9c7f868a5095b92f8cf0f4d9b46e540ba59cb94' }, h("div", { key: '66ccb7bcb85e9de0c815e358121fae8b7937e5af', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        return (h(Host, { key: '571967136a03f1cf4a3f0a14b4db18ffea6cee70' }, h("div", { key: 'edee17217bbe6135429b62c39ea430a49e66b39d', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
                 ? `option-list-item-${this.elementId}-description`
-                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '1d4f748ba162b10b90ba36772bbc5ce2cfcbf688', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '85bb99e98f1a4eb6e88f3c8f0025934f54e5f549', class: "option-list-item__avatar" }, h("slot", { key: '94ee311dc31470fc16ad053456393178c0ca1955', name: "avatar" })), showCheckbox && (h("span", { key: 'c64037453972f6dd2c36324f5e321ebdda0eba83', class: "option-list-item__checkbox" }, h("span", { key: 'ba30e1247bd9355e8fc89b2f6be52ad3ba58cd92', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: 'b364efbf3c1167a3bab08a6c53d0f82c4e2bf770', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'e8f98dddc19fe9c5c9cc0e2663504bd4ba10b96a', class: "option-list-item__label-container" }, h("span", { key: '6af24ab9900c92cf8ae3156838733ea70fd3e85a', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'f9a2bb319a510968994f0a01d5cd62221322401a', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '8346d30734b95770e30b4f7f9083e7c255ba7ed8', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'f0a31fe5087b91f36ff731f893827010f9664cb9', size: this.iconSize })))), this.allowDrag && (h("button", { key: 'e127b3a0535f0a7a726d55e9e97e9619c79b6d9f', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: 'c507f84cd536ce945d8b7e98902e6c9f4703d63f', size: this.iconSize })))));
+                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '55191d396106978ae8d444fb05f7fce76ac2e574', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'be4ca95a4c7d8f7b4110db7993edb0f3ce3972e8', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), h("span", { key: '7dbb9384750e7c2ccac2c7ab3109f13b951f3061', class: "option-list-item__avatar" }, h("slot", { key: '2ad759cf4624a24d9f1fe94c456a36243857ebf4', name: "avatar" })), showCheckbox && (h("span", { key: '02f71ffe6bb74c85617157b7b9cb7adec010cce3', class: "option-list-item__checkbox" }, h("span", { key: '64edbd1f5c23878297ebf29087d1ff188db01856', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: 'b793ba564a4fdd251f2f70cf68720d240b6b39d1', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'b35ad7c3bd7f2b22c30729b3012bd5b4db320c85', class: "option-list-item__label-container" }, h("span", { key: '1a4d118965706046092e70c320593c04f06b19a2', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '374aeefa73f78c2926ed0fd81dd254c3afcd7663', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '0df5b07795109dbd28195b6e14ef10b7fd587e77', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'accd8448bdf36a253e8f79be9c989a4d791361c3', size: this.iconSize })))), this.allowDrag && (h("button", { key: 'a1b622a719ca5fadff72a06be63d353a8c29d571', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: '6a5c73788d36010e27e443aeea2977ad441742bd', size: this.iconSize })))));
     }
     get el() { return this; }
     static get style() { return SwirlOptionListItemStyle0; }
@@ -92,6 +94,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
         "dragHandleDescription": [1, "drag-handle-description"],
         "dragHandleLabel": [1, "drag-handle-label"],
         "icon": [1],
+        "iconBadge": [1, "icon-badge"],
         "label": [1],
         "selected": [1028],
         "swirlAriaRole": [1, "swirl-aria-role"],

package/dist/components/swirl-option-list-section.js CHANGED Viewed

@@ -11,7 +11,7 @@ const SwirlOptionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlOpt
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '886f128f4adac71c66e18cd48928b4aaa8fb1740' }, h("div", { key: '2618e2099bc6167ffc57fdc52ff4e38e8866261b', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'b67845388db7da756a5b8a235fc5f940ddbb30e3', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("div", { key: 'c4ed155d194346006167d468a3b118960605cd5e', class: "option-list-section__items" }, h("slot", { key: 'c43201c5bced887b1c843aa889cdeaf873e0cfba' })))));
+        return (h(Host, { key: 'e2401f37b99516ccd62cbed3fdb4637bd5a8b68a' }, h("div", { key: '31bf726f13e37ea9d3ad74a74ac6078228bc1118', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '8551ef2c99a481cb66dda9ed22958432075b37a3', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("div", { key: 'ba28fd3e52e4542ab60745e01106a9df92faed69', class: "option-list-section__items" }, h("slot", { key: '402e4c95d254d4477223dece4d0696d3226bf305' })))));
     }
     static get style() { return SwirlOptionListSectionStyle0; }
 }, [1, "swirl-option-list-section", {

package/dist/components/swirl-option-list2.js CHANGED Viewed

@@ -335,7 +335,7 @@ const SwirlOptionList = /*@__PURE__*/ proxyCustomElement(class SwirlOptionList e
     render() {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
-        return (h(Host, { key: 'c09257a978e5824fff31f2ebbf4035e75084b383' }, h("swirl-visually-hidden", { key: 'd7b2951497207e3327f191ae04ae8c878424ccbd', role: "alert" }, this.assistiveText), h("div", { key: 'bdb7ba8848454c49eec7b5341cc05177a4fd692c', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", { key: '0ff323330f231e906194b840d785e03518acb996' }))));
+        return (h(Host, { key: '24f83ba63aced28e609882a62c32376954884920' }, h("swirl-visually-hidden", { key: 'ee9e29f8f6096b513b81353635ec420a84dd3708', role: "alert" }, this.assistiveText), h("div", { key: 'd3477fc14b737db3e9f532681b4db036c48c0029', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", { key: '912b183b44588e9eaccf7a80ef8a7446efd394d9' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-pagination.js CHANGED Viewed

@@ -95,7 +95,7 @@ const SwirlPagination$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPagination
         const showDropDown = this.variant === "advanced";
         const ariaPageLabel = `${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`;
         const className = classNames("pagination", `pagination--variant-${this.variant}`);
-        return (h(Host, { key: '73ae765ec8dbf588bfc32a4bbd6852291604214e' }, h("nav", { key: '4eda9560a9a019e82f821e187a6e83443979697e', "aria-label": this.label, class: className }, h("ul", { key: 'cc5367e85ca4e251e4f7d033bfa850968889caa6', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: '38f5fb33b9c24315271764e2784f1ebfe1d8723e', class: "pagination__list-item" }, h("label", { key: '9dbfeb8a3e464d50379746ec85c865cafd52ac51', class: "pagination__page-size-selection" }, h("swirl-text", { key: '748fe2c2ec1fbf50d4c4e4347e23571553f30c36', whiteSpace: "inherit" }, this.pageSizeSelectLabel), h("swirl-stack", { key: 'e9982f4cc6830489314d2bd13aa927201e51d415', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: '48a9950fa6a353d49883c69ec7918c38a26a2619', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), h("swirl-icon-expand-more", { key: '60d4677d0c8d24adf39cfc90f31b27660526233a', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: '7829d37667bdf4f643669d5aa7394b8c67300295', class: "pagination__list-item" }, h("swirl-button", { key: '774e9ba9e1bb90800b6e35b0ee531c1c4c88d405', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), h("li", { key: '582aecb2808382dc58032e872cfb97d29d772c83', class: "pagination__list-item" }, h("swirl-button", { key: '01395eb8e5bf7b0b06c55926213b5023b22a5fcc', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { key: '6848c16b69f7e9b67f7924eeb7c4d10bdf7ede4c', class: "pagination__list-item" }, h("swirl-button", { key: '566365451279b0578be3ba9378204c144791db8d', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), h("li", { key: 'fec0371d798351e16ea95a2b3b886ff310a71bd5', class: "pagination__list-item" }, h("swirl-button", { key: 'b1d0b4b994695ab9d46eaeb10835a8cf23cb7ed8', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
+        return (h(Host, { key: 'fba8207382cf0734db42a2dea298004f8943c17f' }, h("nav", { key: 'e166fe66e852e224c321627921c57605628d0ac4', "aria-label": this.label, class: className }, h("ul", { key: '3a4affd8175c790ef5d25f5e80523daf9b94fa01', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: 'cf8dd212fdecbcc44f3e8462a45e99ea7ac2ddc0', class: "pagination__list-item" }, h("label", { key: '9f6e04dc201cd60da406324be6c4ad9363c450b9', class: "pagination__page-size-selection" }, h("swirl-text", { key: 'c2c85487931e6912edf0821eaa201e67e64bdc65', whiteSpace: "inherit" }, this.pageSizeSelectLabel), h("swirl-stack", { key: 'c7e46aae5f41adef62625b81e4335466f3ae51e8', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: '354fef3715e457285692f4fb4cfcaf9ef6d47b1c', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), h("swirl-icon-expand-more", { key: 'f6ef8a317e72eb0239aaa6acad36bc148c873a29', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: 'bf02a4f8f0413dee0791c39f26c6cbd46207474e', class: "pagination__list-item" }, h("swirl-button", { key: 'e6aba96a8c7156e573ad7ff33d1b36be8f248158', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), h("li", { key: '47dccc4d81e2c94c8025f5b4905f9a2dcedbffa1', class: "pagination__list-item" }, h("swirl-button", { key: 'ad00543f21637b669f341ffa7ff7dc9c985f7b11', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { key: 'f33a629ea11be2c8c1b1c07906b71f49b05afa35', class: "pagination__list-item" }, h("swirl-button", { key: 'ae4becccba62f16b92e4056ce44d49ba800bacec', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), h("li", { key: 'da1add506c324ae199592b1ef100737149a28ccf', class: "pagination__list-item" }, h("swirl-button", { key: 'be7e1d28fe3af44062e3eda3c3889ed32f413499', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
     }
     static get style() { return SwirlPaginationStyle0; }
 }, [1, "swirl-pagination", {