@getflip/swirl-components 0.285.0 → 0.287.0

package/dist/collection/components/swirl-icon/icons/swirl-icon-work.js

@@ -12,7 +12,7 @@ export class SwirlIconWork {
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (h("svg", { key: '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 is() { return "swirl-icon-work"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SwirlIcon {
     }
     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 is() { return "swirl-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class SwirlImageGrid {
     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 }))));
     }
     static get is() { return "swirl-image-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -119,16 +119,16 @@ export class SwirlImageGridItem {
             "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" }))))));
     }
     static get is() { return "swirl-image-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-inline-error/swirl-inline-error.js

@@ -33,7 +33,7 @@ export 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 is() { return "swirl-inline-error"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SwirlInlineNotification {
     }
     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 is() { return "swirl-inline-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class SwirlInlineStatus {
     }
     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 is() { return "swirl-inline-status"; }
     static get encapsulation() { return "shadow"; }

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

@@ -290,7 +290,7 @@ export class SwirlLightbox {
             "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" }))))))));
     }
     static get is() { return "swirl-lightbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class SwirlLink {
     }
     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 is() { return "swirl-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SwirlList {
         }
     }
     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 is() { return "swirl-list"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,4 @@
-import { autoUpdate, computePosition, flip, offset, } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { closestPassShadow, getActiveElement, isMobileViewport, parentsPassShadow, querySelectorAllDeep, } from "../../utils";
@@ -42,10 +42,12 @@ export class SwirlMenu {
             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) => {
@@ -125,6 +127,9 @@ export class SwirlMenu {
         }
         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
@@ -201,6 +206,21 @@ export class SwirlMenu {
     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();
@@ -267,7 +287,7 @@ export class SwirlMenu {
             "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` : "",
@@ -278,7 +298,7 @@ export class SwirlMenu {
                             ? `calc(-100% * ${this.activeLevel})`
                             : "100%",
                     }
-                    : undefined }, h("slot", { key: '894ca7c7b59993da2caecc103e14a166df1c60f2' })))));
+                    : undefined }, h("slot", { key: '9e4b84a77c38b544a1012c7cd28f767b54399b31' })))));
     }
     static get is() { return "swirl-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -637,6 +657,30 @@ export class SwirlMenu {
                             "text": undefined
                         }]
                 }
+            },
+            "updateActiveItem": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLSwirlMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLSwirlMenuItemElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Update the displayed active item.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }
@@ -645,6 +689,9 @@ export class SwirlMenu {
         return [{
                 "propName": "active",
                 "methodName": "watchActive"
+            }, {
+                "propName": "value",
+                "methodName": "watchValue"
             }];
     }
 }

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

@@ -77,7 +77,7 @@ describe("swirl-menu", () => {
         </swirl-popover-trigger>
         <swirl-popover id="menu" label="Menu">
           <mock:shadow-root>
-            <div class="popover popover--animation-scale-in-xy popover--inactive popover--placement-undefined">
+            <div class="popover popover--animation-scale-in-xy popover--inactive popover--padded popover--placement-undefined">
               <div aria-hidden="true" aria-label="Menu" class="popover__content" part="popover__content" role="dialog" tabindex="-1">
                 <span class="popover__handle"></span>
                 <div class="popover__scroll-container" part="popover__scroll-container">
@@ -119,7 +119,9 @@ describe("swirl-menu", () => {
             <swirl-menu-item label="Item 1">
               <mock:shadow-root>
                 <div class="menu-item">
-                  <swirl-action-list-item intent="default" label="Item 1"></swirl-action-list-item>
+                  <swirl-action-list-item intent="default" label="Item 1">
+                    <slot name="avatar" slot="avatar"></slot>
+                  </swirl-action-list-item>
                   <slot></slot>
                 </div>
               </mock:shadow-root>
@@ -127,7 +129,9 @@ describe("swirl-menu", () => {
             <swirl-menu-item label="Item 2">
               <mock:shadow-root>
                 <div class="menu-item">
-                  <swirl-action-list-item intent="default" label="Item 2"></swirl-action-list-item>
+                  <swirl-action-list-item intent="default" label="Item 2">
+                    <slot name="avatar" slot="avatar"></slot>
+                  </swirl-action-list-item>
                   <slot></slot>
                 </div>
               </mock:shadow-root>
@@ -164,7 +168,9 @@ describe("swirl-menu", () => {
                 <swirl-menu-item label="Sub item 1" value="1">
                   <mock:shadow-root>
                     <div class="menu-item">
-                      <swirl-option-list-item label="Sub item 1" swirlariarole="menuitemradio" value="1"></swirl-option-list-item>
+                      <swirl-option-list-item label="Sub item 1" swirlariarole="menuitemradio" value="1">
+                        <slot name="avatar" slot="avatar"></slot>
+                      </swirl-option-list-item>
                       <slot></slot>
                     </div>
                   </mock:shadow-root>
@@ -172,7 +178,9 @@ describe("swirl-menu", () => {
                 <swirl-menu-item label="Sub item 2" value="2">
                   <mock:shadow-root>
                     <div class="menu-item">
-                      <swirl-option-list-item label="Sub item 2" swirlariarole="menuitemradio" value="2"></swirl-option-list-item>
+                      <swirl-option-list-item label="Sub item 2" swirlariarole="menuitemradio" value="2">
+                        <slot name="avatar" slot="avatar"></slot>
+                      </swirl-option-list-item>
                       <slot></slot>
                     </div>
                   </mock:shadow-root>
@@ -182,7 +190,9 @@ describe("swirl-menu", () => {
             <swirl-menu-item label="Item 3">
               <mock:shadow-root>
                 <div class="menu-item">
-                  <swirl-action-list-item intent="default" label="Item 3"></swirl-action-list-item>
+                  <swirl-action-list-item intent="default" label="Item 3">
+                    <slot name="avatar" slot="avatar"></slot>
+                  </swirl-action-list-item>
                   <slot></slot>
                 </div>
               </mock:shadow-root>

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

@@ -34,7 +34,7 @@ const Template = (args) => {
         </swirl-menu>
       </swirl-menu-item>
       <swirl-menu-item icon="<swirl-icon-edit></swirl-icon-edit>" label="Colors">
-        <swirl-menu label="Colors menu" selection">
+        <swirl-menu label="Colors menu">
           <swirl-menu-item label="Text color">
             <swirl-menu label="Text color menu" value="blue" variant="selection">
               <swirl-menu-item label="Red" value="red"></swirl-menu-item>
@@ -43,7 +43,7 @@ const Template = (args) => {
             </swirl-menu>
           </swirl-menu-item>
           <swirl-menu-item label="Background color">
-            <swirl-menu label="Background color menu" variant="selection">
+            <swirl-menu label="Background color menu" value="light" variant="selection">
               <swirl-menu-item label="Light" value="light"></swirl-menu-item>
               <swirl-menu-item label="Dark" value="dark"></swirl-menu-item>
             </swirl-menu>

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

@@ -1,6 +1,9 @@
-import { h, Host, } from "@stencil/core";
+import { forceUpdate, h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { closestPassShadow, parentsPassShadow } from "../../utils";
+/**
+ * @slot avatar - Avatar displayed inside the item
+ */
 export class SwirlMenuItem {
     constructor() {
         this.onSlotChange = () => {
@@ -44,6 +47,7 @@ export class SwirlMenuItem {
         this.disabled = undefined;
         this.expanded = undefined;
         this.icon = undefined;
+        this.iconBadge = undefined;
         this.intent = "default";
         this.label = undefined;
         this.suffix = undefined;
@@ -65,6 +69,12 @@ export class SwirlMenuItem {
     async getSubMenu() {
         return this.subMenu;
     }
+    /**
+     * Update the selected value
+     */
+    async updateValue() {
+        forceUpdate(this);
+    }
     /**
      * Get the items parent menu
      */
@@ -87,18 +97,19 @@ export class SwirlMenuItem {
         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 }))));
     }
     static get is() { return "swirl-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -182,6 +193,23 @@ export class SwirlMenuItem {
                 "attribute": "icon",
                 "reflect": false
             },
+            "iconBadge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-badge",
+                "reflect": false
+            },
             "intent": {
                 "type": "string",
                 "mutable": false,
@@ -288,6 +316,23 @@ export class SwirlMenuItem {
                     "tags": []
                 }
             },
+            "updateValue": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Update the selected value",
+                    "tags": []
+                }
+            },
             "getParentMenu": {
                 "complexType": {
                     "signature": "() => Promise<HTMLSwirlMenuElement>",

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

@@ -27,7 +27,9 @@ describe("swirl-menu-item", () => {
       <swirl-menu-item label="Item">
         <mock:shadow-root>
           <div class="menu-item">
-            <swirl-action-list-item intent="default" label="Item"></swirl-action-list-item>
+            <swirl-action-list-item intent="default" label="Item">
+              <slot name="avatar" slot="avatar"></slot>
+            </swirl-action-list-item>
             <slot></slot>
           </div>
         </mock:shadow-root>
@@ -40,7 +42,9 @@ describe("swirl-menu-item", () => {
             html: `
         <swirl-popover label="Menu">
           <swirl-menu label="Menu" variant="selection">
-            <swirl-menu-item label="Item" value="Value"></swirl-menu-item>
+            <swirl-menu-item label="Item" value="Value">
+              <slot name="avatar" slot="avatar"></slot>
+            </swirl-menu-item>
           </swirl-menu>
         </swirl-popover>`,
         });
@@ -48,10 +52,13 @@ describe("swirl-menu-item", () => {
       <swirl-menu-item label="Item" value="Value">
         <mock:shadow-root>
           <div class="menu-item">
-            <swirl-option-list-item label="Item" swirlariarole="menuitemradio" value="Value"></swirl-option-list-item>
+            <swirl-option-list-item label="Item" swirlariarole="menuitemradio" value="Value">
+              <slot name="avatar" slot="avatar"></slot>
+            </swirl-option-list-item>
             <slot></slot>
           </div>
         </mock:shadow-root>
+        <slot name="avatar" slot="avatar"></slot>
       </swirl-menu-item>
     `);
     });

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

@@ -12,6 +12,14 @@ export default {
 };
 const Template = (args) => {
     const element = generateStoryElement("swirl-menu-item", args);
+    element.innerHTML = `
+    <swirl-avatar
+      slot="avatar"
+      label="Jane Doe"
+      size="l"
+      src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a"></swirl-avatar>
+    <swirl-switch checked hide-label label="Test" slot="suffix"></swirl-switch>
+  `;
     return element;
 };
 export const SwirlMenuItem = Template.bind({});

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

@@ -176,21 +176,21 @@ export class SwirlModal {
             "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)
@@ -208,7 +208,7 @@ export class SwirlModal {
                 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" })))))))));
     }
     static get is() { return "swirl-modal"; }
     static get originalStyleUrls() {

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

@@ -326,7 +326,7 @@ export class SwirlOptionList {
     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' }))));
     }
     static get is() { return "swirl-option-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -165,6 +165,7 @@
 
 .option-list-item__icon {
   display: inline-flex;
+  position: relative;
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0;
@@ -179,6 +180,13 @@
 }
   }
 
+.option-list-item__icon-badge {
+  position: absolute;
+  display: grid;
+  bottom: 0;
+  right: 0;
+}
+
 .option-list-item__selection-icon {
   display: inline-flex;
   flex-shrink: 0;