@getflip/swirl-components 0.365.1 → 0.366.0

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

@@ -71,7 +71,7 @@ const SwirlToolbar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'fbde85af69d0cf6b5dea3d77c4c5cb4d9d0ed5b1' }, index.h("swirl-stack", { key: '4ae07de10482f6905a6297d12ae31e9ecd7534be', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, index.h("slot", { key: '66feafffa0b2efad298d47ad337fce89c478852c' }))));
+        return (index.h(index.Host, { key: 'b4d26b328470b945d344895908b1c5c50c833d17' }, index.h("swirl-stack", { key: '2d47b3300ea9398264e18fc197e1f15d759a05a3', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, index.h("slot", { key: '922353e031756d3d4b2c89f2107c4048437fe89a' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -113,7 +113,7 @@ const SwirlTooltip = class {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (index.h(index.Host, { key: 'dd367105cdd87c0316a8faf392b2d8558ec98670', onKeydown: this.onKeydown }, index.h("span", { key: '814b10559726e683991d5d7280e1166f01683cbb', class: className }, index.h("span", { key: '6c9589734c395c5623edff08e2e745e8e33e5f3c', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", { key: 'b217bbe84fa8530de7642984ccd222ae316eac6f' })), index.h("span", { key: '4bb993c557a2bd43dd1a836e0d3aa5d07915edcb', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (index.h(index.Host, { key: '1ab6f241602a99b2de2cb8028b5dd8a05d37ed3f', onKeydown: this.onKeydown }, index.h("span", { key: '9529d1fca5ce68aa7d9981f1c003d4e9654c90c7', class: className }, index.h("span", { key: '07606dd0778d20d989f695356de71ab4c94550ce', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", { key: 'd8145e425e2ec5630accb88ee7e660a2e63269cc' })), index.h("span", { key: 'aa10860e427cba38873101a7222173e4e323d7e0', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -121,7 +121,7 @@ const SwirlTooltip = class {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (index.h("span", { key: '97ef53308c9789bb6e1ada60a342626dddc28548', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '84ce422203d26199cf5bbc7f9bb5ffced4237421', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '05610d84e74762227a52075945b2461fb9de6b7e', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (index.h("span", { key: '79b2d4e54133935e433f28f6c00848ea36206179', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '53c0eb8a14932a811900e58534824f231209e672', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '7391938a87a02650214bafa226892261ddf4e1e0', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

package/dist/cjs/swirl-tree-view-item.cjs.entry.js

@@ -337,17 +337,17 @@ const SwirlTreeViewItem = class {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (index.h(index.Host, { key: 'd085c2b88c107c203ce428a67712da04323f8e24', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: 'b0ad24c16fcf8e64fac7f76720ad474f34a25aab', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: '1df2bdeb1171dd86c2439d0e475ccd5f9b3d8ca5', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (index.h(index.Host, { key: 'f571e0aa5fab77a62b4b6a63e1226011b61202ce', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: 'a13caedc50c5df33f7674c93696a141c019a0be4', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: 'e9a32fadc3d8d07e757d42f54f8e9e44976e2b4a', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (index.h("span", { key: 'c1a7d0fd676447956630dcc37569fb0830c2099a', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '44d0850b2d47787d97d405a554f518a1428290fd', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: '0f52b403d04a371971c985900e18c7bd6f5f1f5e', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: 'ed7c79bbedfddcd631404f6b910b7a3b0320a829' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: '95353c0276d3629919a19952490b50c4f79674bf' }, index.h("span", { key: '4c73f3ecef5022087a72874912003a2abad5d221', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '061dc160720af1c7e22339a10297e42c7c241007', class: "tree-view-item__label" }, this.label), index.h("span", { key: '4bacb2b0968245f5c4a9e84a010653bf6513efdf', class: "tree-view-item__tags" }, index.h("slot", { key: 'f3cc5dda408a78092033ecc1bf305e8a55241870', name: "tags" }))), index.h("ul", { key: 'c845651262d91941a9748d2b0412104c75485874', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (index.h("span", { key: '943ebb467ca02496363deccd1757eaa4878680ab', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '00c15f06df99116176b9759abb86794a5306aa1d', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: 'dbdd4b084c23f48caee3245a3a2f414cba1fcce1', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: '48b76c4675d392b25ad97d9e73f0911f43fc6918' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: 'd98c931c4f9db219e70fd31365304808c53808da' }, index.h("span", { key: 'c041476e9a1940dcc3c2c4edccde824e0d6f9c81', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '92c600e90332b236742f47ca8ba190e2be704a00', class: "tree-view-item__label" }, this.label), index.h("span", { key: '143e4df9520c3be93508e1e63c5cdad62f26dc90', class: "tree-view-item__tags" }, index.h("slot", { key: 'e8a16506b1c9fa9bdc2a0dab23c042efee9373dc', name: "tags" }))), index.h("ul", { key: '95d6d7047fa12c5a0fc51848457db871f5ec7abe', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
                 display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, index.h("slot", { key: 'dfffc7c21716f9c00da9c2e6224daced78ba3ad2' })))));
+            } }, index.h("slot", { key: '556e0b1487930406f6179a0d50d2ef0c832e2e45' })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-tree-view.cjs.entry.js

@@ -332,7 +332,7 @@ const SwirlTreeView = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c0fe9f1ed516bc620251650866717f4862086017' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: 'ec46dbbae6c40b9ab939f3c8867d0cb2523819ff' }, index.h("span", { key: '9177e7bb9d2a77a8472b6560300a6bae6536228b', "aria-live": "assertive" }, this.liveRegionText))), index.h("ul", { key: 'd93817ba54356a565d6f5d652505b7a302d16533', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, index.h("slot", { key: '0801cd554dabc43b4796cb74c21f8426c1388cae', onSlotchange: this.onSlotChange }))));
+        return (index.h(index.Host, { key: '7b4136fd912ca7990b5e55f1575421ec3672dc8f' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: '2196f8f992789a4fda56d48e236d602db85035f7' }, index.h("span", { key: 'd49c50de8d0c0db64ee5a97c1ccdcd67f8d9ad84', "aria-live": "assertive" }, this.liveRegionText))), index.h("ul", { key: '8835b6dccdf5550788c877c9f8795c440420e540', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, index.h("slot", { key: 'ac46b0399f32189de2372e3fd7c6c108b28a46b1', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/collection-manifest.json

@@ -9,6 +9,7 @@
     "components/swirl-text-input/swirl-text-input.js",
     "components/swirl-autocomplete/swirl-autocomplete.js",
     "components/swirl-avatar/swirl-avatar.js",
+    "components/swirl-avatar-group/swirl-avatar-group.js",
     "components/swirl-badge/swirl-badge.js",
     "components/swirl-banner/swirl-banner.js",
     "components/swirl-box/swirl-box.js",
@@ -66,7 +67,6 @@
     "components/swirl-action-list/swirl-action-list.js",
     "components/swirl-action-list-section/swirl-action-list-section.js",
     "components/swirl-app-icon/swirl-app-icon.js",
-    "components/swirl-avatar-group/swirl-avatar-group.js",
     "components/swirl-carousel-slide/swirl-carousel-slide.js",
     "components/swirl-color-input/swirl-color-input.js",
     "components/swirl-console-layout/swirl-console-layout.js",

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

@@ -36,7 +36,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: '7889025b9ea75254eaabfcf488ec883378c01e5c' }, h("slot", { key: '3cd0eb5227421066116b06fac1d2e6ed488d03d5' })));
+        return (h(Host, { key: '7f8aac6430364eac4124b89ac4fecdc73e82c8a3' }, h("slot", { key: '374b1d722218716869143060496ace17fd84b46d' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: 'bf24d1cae76ed824c925b80adb2ac6b5be606023' }, h("div", { key: '9f3dc67e8a670f451cba083d416461aa4ac16749', class: className }, h(HeadingTag, { key: '170838a1750fb89568500f70a93f91de36f41d5b', class: "accordion-item__heading" }, h("button", { key: 'c18a4cbe335f688a94c61ed1802f7a0978d74771', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: 'da8e2e070591c3ff0de1face3c62a91c5ff19731', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '0bcfac9c58151f160b2bece95475d104d3dbfb05', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '701edfe1826e393845316e3815454de002b9ad94', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '3b76c29e09f641025af072622ef05f8acc37f9e3', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '952a2755bb44491e2b9155fd22d1817feed7ecf4', glyph: "expand-more", size: 20 }))))), h("div", { key: '6332cee85a9630c0280e72518ace7ad41cbbb368', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'b506d4b57c138cc18722b34320155599b472e70b' })))));
+        return (h(Host, { key: 'abba07ec2f943c86ff88aed65ea1c10d170e3a55' }, h("div", { key: '4cd9a307c2d01266220cbd3df1b27afa401fdefa', class: className }, h(HeadingTag, { key: '2271f5ee54750532baecbbc34da135fa278461d8', class: "accordion-item__heading" }, h("button", { key: 'ab13edffd0c9bb073473d16a0e3838ee04678a15', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '3fa93043d6b8c929b37ced1d779957ec40ff3e02', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '1470c3ce33a835bb53fd8759b82c26608d018281', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: 'a292fa27389bf972b2b9b7d5d4f6e1d9962f4919', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: 'e9903a0728bcd15896d9586a107ea88f1197f1df', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '8cb634c1bcf0c65daaabad79394183ac040237aa', glyph: "expand-more", size: 20 }))))), h("div", { key: 'b0693a31cf7d608b542ca10a13cf6a6b36a6774b', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '95c3a5da8e122291bf06f2fa691b38a1dd53bfb6' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -89,7 +89,7 @@ export class SwirlActionList {
         });
     }
     render() {
-        return (h(Host, { key: '0dd1f57febfea783b0e1dee429104b12d4819a10' }, h("div", { key: '85865f3e4611208d541134b51fbd8725a0dabc5b', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: 'e39aefd6e63c0f0bf43d75a50314773ea1996312', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '162314574b7f7192fcef7636bea795bcba95ae82' }, h("div", { key: '67b71217628367b29b108d8c67d3ce7186849fed', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '9731e7c3223b90e34c83dc6b31b95ef342b51961', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class SwirlActionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '511a8b83e8c4f68e029406b60669253570bcc48d' }, this.hasSeparator && (h("swirl-separator", { key: '42b740aaa40bc5dbe03da925c702f4bbe613817b', spacing: this.separatorSpacing })), h("div", { key: '66e3818e57a2b506174a39ba81f52d2228da8e6b', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'a1bdb4cdf8bb9849ccab3656f9eb8b88ffe4b132', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'c964cd1d0d54201e7c977e16a4dbb84cc0d5d359', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'b3d173498c5b9c8f16b9d95e60230bdb8bce3110' })))));
+        return (h(Host, { key: '6e93266c1a1debf29380963f64c6f853d1e528d4' }, this.hasSeparator && (h("swirl-separator", { key: 'f264ee771b77f2c363bf2fc64c0dcda922c36649', spacing: this.separatorSpacing })), h("div", { key: '702424f77b73f0fce4510715b5a8fe70b2219926', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '2928fcfc41ae7e9795b757090eeaec491b7ac63c', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'c637246f7ae9e3588d990685baccc4253ea7d15e', spacing: this.spacing, align: "stretch" }, h("slot", { key: '988b050cdb85bf8d41cca165b94f51018ceb6dc4' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: '0678d24af53e36995ce49232513940672f1623fe' }, h("span", { key: 'a2e2fef78199d7d91d25c55591ad7dfd7136d036', class: className }, showImage && (h("img", { key: '7005b6b43b9215c96a4a04944d2ac25d2536f9b3', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '0d1539585d6e4d278b9f24c4db68728d9e3f89d9', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: 'ebf22de161e63b6a95a668c83683f1ed4ed9fb3d' }, h("span", { key: '7998c7b113f48ad715fe897f3e547790de5b8e51', class: className }, showImage && (h("img", { key: '685f743ace846d014058b6c40a8b3852f7108367', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '2583c7ac995dd3b239258dbc21eb4e229ff9edf0', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css

@@ -8,23 +8,26 @@
 
 .avatar-group {
   position: relative;
+}
+
+.avatar-group--diagonal-stack {
   display: inline-grid;
   grid-template-rows: repeat(9, 1fr);
   grid-template-columns: repeat(9, 1fr);
 }
 
-.avatar-group ::slotted(*:first-of-type) {
+.avatar-group--diagonal-stack ::slotted(*:first-of-type) {
     z-index: 1;
     display: inline-flex;
-    box-shadow: 0 0 0 0.25rem var(--swirl-avatar-group-border-color);
     border-radius: 50%;
+    box-shadow: 0 0 0 0.25rem var(--swirl-avatar-group-border-color);
     grid-column-start: 1;
     grid-column-end: 7;
     grid-row-start: 4;
     grid-row-end: 10;
   }
 
-.avatar-group ::slotted(*:nth-of-type(2)) {
+.avatar-group--diagonal-stack ::slotted(*:nth-of-type(2)) {
     z-index: 0;
     display: inline-flex;
     border-radius: 50%;
@@ -34,11 +37,37 @@
     grid-row-end: 7;
   }
 
+.avatar-group--diagonal-stack ::slotted(*:nth-of-type(n + 3)) {
+    display: none;
+  }
+
+.avatar-group--diagonal-stack .avatar-group__badge {
+    position: absolute;
+    right: calc(-1 * var(--s-space-4));
+    bottom: calc(-1 * var(--s-space-4));
+  }
+
+.avatar-group--horizontal-stack {
+  display: inline-flex;
+}
+
+.avatar-group--horizontal-stack .avatar-group__badge {
+    display: none;
+  }
+
+.avatar-group--horizontal-stack ::slotted(*) {
+    z-index: 1;
+    display: inline-flex;
+    border-radius: 50%;
+    box-shadow: 0 0 0 0.125rem var(--swirl-avatar-group-border-color);
+  }
+
+.avatar-group--horizontal-stack ::slotted(*:not(:first-of-type)) {
+    margin-left: calc(-1 * var(--s-space-4));
+  }
+
 .avatar-group__badge {
-  position: absolute;
-  z-index: 2;
-  right: calc(-1 * var(--s-space-4));
-  bottom: calc(-1 * var(--s-space-4));
+  z-index: 3;
   display: inline-flex;
   width: 1.5rem;
   height: 1.5rem;

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js

@@ -4,6 +4,16 @@ import classnames from "classnames";
  * @slot slot - Your avatar components
  */
 export class SwirlAvatarGroup {
+    constructor() {
+        this.layout = "diagonal";
+        this.avatars = [];
+        this.onSlotChange = (event) => {
+            this.avatars = event.target
+                .assignedElements()
+                .filter((el) => el.tagName.toLowerCase() === "swirl-avatar");
+            this.layOutAvatars();
+        };
+    }
     componentDidLoad() {
         this.forceBadgeProps();
     }
@@ -17,12 +27,24 @@ export class SwirlAvatarGroup {
             badge?.setAttribute("size", "s");
         }
     }
+    layOutAvatars() {
+        if (this.avatars.length <= 2) {
+            this.avatars.forEach((avatar) => {
+                avatar.style.zIndex = "";
+            });
+        }
+        else {
+            this.avatars.forEach((avatar, index) => {
+                avatar.style.zIndex = String(this.avatars.length - index);
+            });
+        }
+    }
     render() {
-        const className = classnames("avatar-group", {
+        const className = classnames("avatar-group", `avatar-group--${this.layout}-stack`, {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: '3d323ce2f50de15cda4630897705da5446856e20' }, h("div", { key: '49b71c1a65716a95d9885ae16cb6fb18422cdbfc', class: className, role: "group" }, h("slot", { key: 'c5176ddecea970fae882e6eb7b7c5d9c2462561b' }), this.badge && (h("span", { key: '6de3511f5027ae3eb6abedfa053bf6504538b808', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: '7997c0302195981387db42c03d7b980e03c49ffe' }, h("div", { key: 'ca9db2d551abbe86231b346e170e0938b106805f', class: className, role: "group" }, h("slot", { key: '63d584d88c3367de3c2cbbdcd718bb4577eb7dca', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '190a05fb70a2b0d85b1cc3382755a25255f50386', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get is() { return "swirl-avatar-group"; }
     static get encapsulation() { return "shadow"; }
@@ -56,7 +78,38 @@ export class SwirlAvatarGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "layout": {
+                "type": "string",
+                "attribute": "layout",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlAvatarGroupLayout",
+                    "resolved": "\"diagonal\" | \"horizontal\"",
+                    "references": {
+                        "SwirlAvatarGroupLayout": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-avatar-group/swirl-avatar-group.tsx",
+                            "id": "src/components/swirl-avatar-group/swirl-avatar-group.tsx::SwirlAvatarGroupLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"diagonal\""
             }
         };
     }
+    static get states() {
+        return {
+            "avatars": {}
+        };
+    }
 }

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js

@@ -32,3 +32,16 @@ export const SwirlAvatarGroup = Template.bind({});
 SwirlAvatarGroup.args = {
     badge: `<swirl-badge aria-label="3 new messages" label="3"></swirl-badge>`,
 };
+const TemplateWithHorizontalLayout = (args) => {
+    const element = generateStoryElement("swirl-avatar-group", args);
+    element.innerHTML = `
+    <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="3xs"></swirl-avatar>
+    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="3xs"></swirl-avatar>
+    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=c" size="3xs"></swirl-avatar>
+  `;
+    return element;
+};
+export const WithHorizontalLayout = TemplateWithHorizontalLayout.bind({});
+WithHorizontalLayout.args = {
+    layout: "horizontal",
+};

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

@@ -10,7 +10,7 @@ export class SwirlBadge {
         const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
             "badge--has-icon": this.icon,
         });
-        return (h(Host, { key: 'fa7e0b1d32f0bd9ce63f557053114cabf14b7a7e', role: "status" }, h("span", { key: '1a71edd54fcb08942fc13e31ca44ea8394958f52', class: className, part: "badge" }, this.icon && h("span", { key: '46a782fc1b13c959fbcbb3dc5f5cd4b40ea4def7', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
+        return (h(Host, { key: '6b83b0188fafee31f864047bc0b16f78a8b8c4f0', role: "status" }, h("span", { key: '663d7ffd7c164512488d6eef9ca198cf1309efba', class: className, part: "badge" }, this.icon && h("span", { key: 'f57ad0add763c7e402df4a071e1c33979605750c', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
     }
     static get is() { return "swirl-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class SwirlBanner {
         const className = classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
-        return (h(Host, { key: '52901533a924083e7080527d05c024dfeca4cfd8' }, h("div", { key: '3f9b2e12dae3fd6ac3320f1f207c3f80163b4895', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '210dfff43e7867341485e8a08ca9f646d8f788f6', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '4f52c17e778ad0a097b15df1bb957c00108f5f40', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '388cac66f35b9d5230e83edfa6b4ee1f83343c95', class: "banner__text" }, this.content)), showControls && (h("div", { key: 'dd2c85861e304e20b7413d8543b7d44b2403e2ce', class: "banner__controls" }, this.actionLabel && (h("button", { key: '60020c45f5b232742c5dfae378fac62bb1b552a0', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '0fd55fb8949212dcb7e21a3c47806acdfa00fa6b', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: 'a1f408e4beaef07ff7379ea7625f590dd943a87f' }))))))));
+        return (h(Host, { key: '11ecf5b273bb2636d5d3e779fc91df1f7b10a8e0' }, h("div", { key: 'bc5e53f04ad5e80defe407340d191d1951a10123', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '86b3950336dca8b1d28994d1fb18113a4b4c421a', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '5716e25d171cc28861459258e257c8a821ebc56d', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'a5a5019667573c14dde87041e475481a7edf6d5e', class: "banner__text" }, this.content)), showControls && (h("div", { key: 'cf8632f83dc502caba7f10710a353d1a34f30493', class: "banner__controls" }, this.actionLabel && (h("button", { key: '166c562828b381640c29783ac8b275f49b088cad', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: 'b1247a38ea5f7592d7c12f0919360041ea9061b8', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: '12524ce0998e451f9260924e2a5226ddee4ade43' }))))))));
     }
     static get is() { return "swirl-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,7 +87,7 @@ export class SwirlBox {
             "box--scrolled-to-top": this.scrollState.scrolledToTop,
             "box--scrolled-to-bottom": this.scrollState.scrolledToBottom,
         });
-        return (h(Host, { key: '9eb887b775004a6c938285b4713f7d42a76d63c4', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '801d75966176bee2182fa524131d230e2ec273f5' })));
+        return (h(Host, { key: 'e9eeaa11b7a04b59744d8cf369855874fb8eab02', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '0d5e86f34e2efb3dd7f9bfaf24a3a18578e6f507' })));
     }
     static get is() { return "swirl-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,9 +76,9 @@ export class SwirlButton {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '6337212b126484088e98cc5912189b1ed232bdea', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'eb12293e543db44de0dde0913f31561384adb984', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: this.inheritFontSize
+        return (h(Host, { key: '49d43aafbfefa72d23f1fb0bec48dcb7333d0610', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'a7cf0739cf899b6736693ec45604bf06960f42be', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: this.inheritFontSize
                 ? { fontSize: "inherit", lineHeight: "inherit" }
-                : {} }, Boolean(this.icon) && (h("span", { key: '9911496cd21581532424a9ccaa902b16759f74de', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '9a9a262855e3f7db4b686386bc7a7b22af2468ad', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'c043bcbec31a01fce43a01747f01537e9e5fe88c', name: "icon" }))), !hideLabel && h("span", { key: '8ae906d08d3520362f816783ff48f01f08349d7a', class: "button__label" }, this.label), hasTag && (h("span", { key: '388cef78ae0744f4dae57f712c8a772fc2e65524', class: "button__tag" }, h("slot", { key: 'd03270a8b768de0df1bfa07ba1e2aeb99f4646c0', name: "tag" }))), hasTrailingSlot && (h("div", { key: '38f7c4fb73a0b7edc0c2d25d780946fed13a3123', class: "button__trailing-slot" }, h("slot", { key: '372c71c84d11ed7eed830701e0d1e620a878b37b', name: "trailing" }))))));
+                : {} }, Boolean(this.icon) && (h("span", { key: 'a48af7d78a53bb7efd90df4f8df886a7a8c59dc8', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'c3c70eab6feabaa93cf1599e662aa37706f52757', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '69a451895b40ee9decfd817e9f2d015c4a76dde6', name: "icon" }))), !hideLabel && h("span", { key: 'cd1669aeccd8cc518b252a48e95b7e8c978b2548', class: "button__label" }, this.label), hasTag && (h("span", { key: '40de97546408ff28cd03b4cfd6e216044ea89088', class: "button__tag" }, h("slot", { key: 'e69c28a98e3bdc1d6c8c6d5f6fef04330b9e64f7', name: "tag" }))), hasTrailingSlot && (h("div", { key: '6306ba16fbf752aa11c34a3aa3a190c8094d79fc', class: "button__trailing-slot" }, h("slot", { key: '4d17a8b0f819b95ae7a0908bff23648280a84dce', name: "trailing" }))))));
     }
     static get is() { return "swirl-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-button-group/swirl-button-group.js

@@ -10,11 +10,11 @@ export class SwirlButtonGroup {
         const className = classnames("button-group", {
             "button-group--segmented": this.segmented,
         });
-        return (h(Host, { key: '3f4c0ac1ef25dc8663a748c9d5da839ba13715cf' }, h("swirl-stack", { key: 'b3128cad0d6eb223551310ef71d45fa31750f8a2', align: this.orientation === "vertical" && this.stretch
+        return (h(Host, { key: '1c5dcaf521e8ee19f572f03e428f6f6297106ae0' }, h("swirl-stack", { key: '78073a9c28c55e16c68c9f32f4573e18f08d8822', align: this.orientation === "vertical" && this.stretch
                 ? "stretch"
                 : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
                 ? "stretch"
-                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: 'e237d1c473fadc6b27b4140c6de0bb1ebdaee8b2' }))));
+                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: '4936fecbd49610aec18174458b1cd7ef42723eba' }))));
     }
     static get is() { return "swirl-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,9 +70,9 @@ export class SwirlCard {
             "card--interactive": this.interactive || this.href,
             "card--is--borderless": this.isBorderless,
         });
-        return (h(Host, { key: '627c49d41c681c969170cb6acb654e8f703ce9c9', styles: { height: this.height } }, h(Tag, { key: '97120ac1aceeb6bfb2dddc0f1dab2b152f332176', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
+        return (h(Host, { key: '5bfcbd19458056cb51a4c4f3ed715a14a7cd6733', styles: { height: this.height } }, h(Tag, { key: 'efb06d77947f2318c2e74d32b7e47c7d7b3110a4', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
                 ? "noreferrer"
-                : undefined, style: styles, target: this.linkTarget }, h("div", { key: '3f8ab8e7df574ef27ba36b24cecf1dc75b5c1ff8', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '5efeec1b6bc81100e1078aaf231408f33c099de7', name: "image" })), h("div", { key: 'b8122399fb965b4d4569e4fe8dac21ccdc652e68', class: "card__floating-controls" }, h("slot", { key: 'abc47854902b427d759f13b162c937a3c4a3eb5b', name: "floating-controls" })), h("div", { key: 'a455be81f568fb3f0a9869a74bcf71b284c85b47', class: "card__body", style: bodyStyles }, h("div", { key: 'a079ae3c14eeb38d75981e8a1c6822b6373d305b', class: "card__content" }, h("slot", { key: 'b81644a39a20f76b816d566084044f72b2e02afd', name: "content" }))))));
+                : undefined, style: styles, target: this.linkTarget }, h("div", { key: 'd904c27cc0be54ca742da0724082f5054f865cfe', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: 'e961923314ced9e3328fc524c5482711f4d27b74', name: "image" })), h("div", { key: '5df1afc2ea9ea939346c8de9c0175767d8f516c8', class: "card__floating-controls" }, h("slot", { key: '7edc1118e0bdd548a4f2d7299b70b48574e0b00e', name: "floating-controls" })), h("div", { key: 'f11335531fada3ae2b3a5ab215b5a1a825b314cf', class: "card__body", style: bodyStyles }, h("div", { key: '17de1d4711bef1fa8f14061e8118f6a0105cbf3d', class: "card__content" }, h("slot", { key: '4eb7af808aaaf1f762089ed98f231cea57d10b93', name: "content" }))))));
     }
     static get is() { return "swirl-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -154,7 +154,7 @@ export class SwirlCarousel {
             "carousel--is-at-start": this.isAtStart,
             "carousel--is-at-end": this.isAtEnd,
         });
-        return (h(Host, { key: '6f554892238c026db3502297458273b682d68098', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '362e62f0a21b074001997fd0f277dd1109bfd1ea', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '2b65c6bfb0509564c01d90245f98b5d34e88fa3b', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: 'c76723f69f1c1d4ca6f8e59b834f94f7b7618ee4', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: 'f4d391b47f7ec2406bf26b2699712e86defdd8b1', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '3747e42e63c10dbd1a2dda5d739700f7b60c8769', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: 'c5903f0c46a1eaa6129e2a1b73abee0db5bcd9ed', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: 'a1dfb1a45c399559d25df72add7723b231b5e6b8', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: 'f9e9dd3bb8162550accfcd6b653a3737355f93d4', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: 'bc30a83c74273b4b5832338422a95d91e3e67321', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: 'cb596e62b8517b2d6ff791032b41608c6a5b25be', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '0fab582bd3650e63d512e934d03183b3ae9b5901', onSlotchange: this.onSlotChange })))));
     }
     static get is() { return "swirl-carousel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class SwirlCheckbox {
             "checkbox--invalid": this.invalid,
             "checkbox--unchecked": unchecked,
         });
-        return (h(Host, { key: '38efd2f720fa05c50cab83d831dbe89a75bacb66', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '67043fe316855dea189be6ab881bfdfb723e3ecc', class: className, htmlFor: this.inputId }, h("span", { key: '4914260178c7e8b5e3d34194ed78332ffc9b4e88', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '0ff1c7d8e8846892051ac64b1f846c73264b8598' }, h("input", { key: 'f1418be880c823472810b09784d7971418a0d023', "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { key: 'd59a0780fa7d659c7ae08cbc21e3388eaed69e10', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: 'c23383243cfe53a9b85d4100e8b6166c1b42f972', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: '671fe5e2cb55df26dced0c13159819abd15e498c' }), indeterminate && (h("span", { key: 'f02555616ef2059a4e9e686460cf193e37f020ff', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: 'ae445d06d03d3f2efd45682d66590aee1c985728', class: "checkbox__label-container" }, this.label && h("span", { key: '6a6be7b56266f2218799aebac36e6d6d1b409bfb', class: "checkbox__label" }, this.label), this.description && (h("span", { key: 'cb24c5979fde3237609ce63e30edc9426984732b', class: "checkbox__description" }, this.description)))))));
+        return (h(Host, { key: 'acf777ca7224f41f607bf84f193ecb05881f1fc1', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: 'c3a3abc5f9e87d3665ad7c797d44a2acd34c8ee5', class: className, htmlFor: this.inputId }, h("span", { key: '5e49492e10519c0f2f4f6ed187b318bca8316dab', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '06217d12dbc1ea25117e421d8e0e1cebd392f599' }, h("input", { key: '455840493b5e9b60aace6f4a0e2de7e5cece2e78', "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { key: '8b69f9ae79e957c52066cd80cf0da11fe5613ed2', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: 'cca029718dd23f8c2e0637ce4f44c24b4fb0b289', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: 'f3bab31db3d5ab5a6fdc78610abb42763f51154b' }), indeterminate && (h("span", { key: '7002b8fffbb15b73d84fae98761196bbe6af3347', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '082ac434bc4dd0c98d983650aab5208a760063e7', class: "checkbox__label-container" }, this.label && h("span", { key: '62737cd8068a70eb10e722c2ff91ae4dc9917f7d', class: "checkbox__label" }, this.label), this.description && (h("span", { key: '3e7f891b80511b9a4d811db31b594f2a0429d8b0', class: "checkbox__description" }, this.description)))))));
     }
     static get is() { return "swirl-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -42,7 +42,7 @@ export class SwirlChip {
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: '6cf98a76051269d475167f5b1ef8c4e6e5ba0985' }, h(Tag, { key: 'd804e9b1af2e1c08ff84dc956faca04827144b1c', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '10bdce13f683d1934b79562a73449c9711d412d0', class: "chip__inner" }, showAvatar && (h("span", { key: '3f713423a9b96b29c1b0e73c04f2dbb3b4f0d527', class: "chip__avatar" }, h("slot", { key: '79b6d3fd10cc692ba4854702e0b1013074396765', name: "avatar" }))), showIcon && (h("span", { key: '3b959fc1fba827e6b3c535f18aaaed66292c23bc', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '7219ec62e76d302d4a6db70635818f49c8e70270', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: 'cfc6a8d791f2ea8de71294c8a14e1695e38faf6f', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'a81bda66ec0bb9803c97dd89824150b36624cc55', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '785be4546e07cb5a8610b6d1ca590c9250eb8fa5', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'd31998d3b4d24dc24d359e98e0a3a6fe14a07256', size: 20 })))));
+        return (h(Host, { key: 'b0e65c521dcde5335f3bcd7daaf7359ba5bbe3ec' }, h(Tag, { key: 'a5198b26f19750bd4c8372acdc21e26f3ed8cfe1', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '2ed93ce33faf8a1bdc4b07e4f866a10650ae8395', class: "chip__inner" }, showAvatar && (h("span", { key: 'ec44e6a99988aa14dcf330098de8593a1deeaed8', class: "chip__avatar" }, h("slot", { key: '880a8c96422c0f31cbf603676ffecef66c6bff21', name: "avatar" }))), showIcon && (h("span", { key: 'b5ba3f75080b5452fce8886c513eaa6abcd58009', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '808fe136faee7570c2329a300fafba4e0efcbed8', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '50b4eb47a59290e9c21570e0b2d91a8aa7a97723', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'e0d54da0d2c6a325f6068740bba0c72b0837fb87', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'ec75adbbf28bf1df36d7532d832137f795973dab', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: '85c241bc56caaf410421b102607f902f1c4b33ef', size: 20 })))));
     }
     static get is() { return "swirl-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,10 +4,10 @@ export class SwirlColumns {
         this.columns = "repeat(3, minmax(0, 1fr))";
     }
     render() {
-        return (h(Host, { key: '6b6957a8a4e48add8aaf0fdc9cc401cc6e31ad6b' }, h("div", { key: '488afed4210c50d59235d5bd432505f0fe085a78', class: "columns", style: {
+        return (h(Host, { key: '779371e7d28640a71aaad2d2de8d91b5b8d63e88' }, h("div", { key: 'de846647d2b436277cd2765f9814796320af071d', class: "columns", style: {
                 gridTemplateColumns: this.columns,
                 gap: `var(--s-space-${this.spacing})`,
-            } }, h("slot", { key: '9c341f311aee888a54ce68cb58282c5a832fd182' }))));
+            } }, h("slot", { key: 'ca510de4dae9c7055d2db6e02020cdfca95e58c6' }))));
     }
     static get is() { return "swirl-columns"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class SwirlDialog {
     render() {
         const className = classnames("dialog", { "dialog--closing": this.closing });
         const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
-        return (h(Host, { key: 'f6ba27679357f368b55d07989244ea2b98108e38' }, h("div", { key: '43948b58187646e33c9a48296f403bfa8414d712', "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { key: 'abc0a9b0647efa2de484035ea8c9b5e4bcb402b6', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: '4a472ecd8ffdaf0a07baee3e6fb3dfc24b7c3c32', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'a6b9c1f20f22962bd1d0762f6a363a7235eb42ab', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '3a9d2577196b34ddf807bbf5a1af048ead5334f5', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '49e5f843911a07dd5d9710e74cd1e2987d43458c' })), h("div", { key: '239c933bca14d64f903d9825611db352ea013b79', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, hasLeftControls && (h("div", { key: '99ac2337d8290d519db0db15c1550f72862f7127', class: "dialog__left_controls" }, h("slot", { key: 'b560909069d980a907facf8f0e27fba7d077d773', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: 'd88e72bf896fc77840ad8d97cf082b323de0d1c5', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '5f8c21a53c12d7d95efd8b54989c6d4575ef9846', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        return (h(Host, { key: '61ba06cee740b1bf21b246aeba14996b002a5aab' }, h("div", { key: 'e195a08fdac8f9ad6f76d412cd50eef88905128f', "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { key: 'a1dbf13fe86dec8256c06393c4abd6c6c59382c1', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f0b9dd2f2d722bf050081b2bc7fed3552c8a457c', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '18eceaee59d9184ace51898fe73c603af383387d', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '612edee73bee789b7ec2f8fd2e16cd3c3a9370aa', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '9d482392bce3c82df30c166fc99577c036da49a8' })), h("div", { key: '3306d185ed549fc6470a2fbbaf649cdc33b98189', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, hasLeftControls && (h("div", { key: '0a7eb43c0f7f3e016767a8364334bd5f9d3cdf86', class: "dialog__left_controls" }, h("slot", { key: 'eb39f26ed1ff0a7931a899c8b9f70b3f22bba2d5', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: '70cc4de12878fdb5f123a23a42d9c6cba67ddee7', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'f02577b4cad57daea316f66b61ee3eec6844666a', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     static get is() { return "swirl-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js

@@ -325,7 +325,7 @@ export class SwirlFileViewerPdf {
         const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
         const showSpinner = this.loading;
         const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
-        return (h(Host, { key: '6c993c31fb7c5a14a1f1962c2d04ec180b72a94f', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '2e19f6c7baa969be681c5ccb9d011e01f0c9c02f', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '925b5eee96fce4de3d632355029366e36d625ccd', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
+        return (h(Host, { key: '17dae0b8e5bf16769a356414071943dc7f8ebec1', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '472e62e48d63545fef3bddaefe8cc307139b382b', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: 'ae504112d088bd4990b419e787e48c5737f6d552', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
             const viewport = page.getViewport({
                 scale: this.getScale(page),
             });
@@ -339,7 +339,7 @@ export class SwirlFileViewerPdf {
                     width: `${width}px`,
                     height: `${height}px`,
                 }, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" })));
-        })), showPagination && (h("span", { key: '01fb8d36ed635e6d1162dda924f30f8eba52f6e6', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '2f259c6a82912b536d49d5f70f3c99e75461b4ec', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: '56e8e4a3a6cff4d21af48feaf7b2837c23a08be2', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: '74bc78b27a8d712df1aa3b140c7263e2946f16c9' })))));
+        })), showPagination && (h("span", { key: '0986d71eab6496cd1b588afa28c8ba5cf2a02967', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: 'b0bd18dd65703cb4d240ab66883e23b03d282265', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'cb4c58f7641b05e55132ca315e83b7254d2a1d66', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: '3a0dc7d43eebc9169928e07959239471d3c8b5ba' })))));
     }
     static get is() { return "swirl-file-viewer-pdf"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -164,7 +164,7 @@ export class SwirlFormControl {
             "form-control--is-select": isSelect,
         });
         const LabelTag = hasContenteditableControl ? "div" : "label";
-        return (h(Host, { key: '52fe1800376b50b0ba51d6d7e77e7b7acdb74fba', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'e7fb3cbfde803c1e19fe254a8beedfeb99bebd03', class: className, role: "group" }, h("span", { key: '87102e73dba02beee06637cca40bf37f2b02fc3f', class: "form-control__controls" }, h("span", { key: '1d4914e53862d023508149cbf234d1dc9350a571', class: "form-control__prefix" }, h("slot", { key: 'aaef4038fed8d914ee17705aeaa718b43f82eebb', name: "prefix" })), h(LabelTag, { key: '60e192ac260047614676fcfc78230fbd1f78e0de', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: '570e1f15672152c405332c47e6e38bef858bf245', class: "form-control__icon" }, h("swirl-icon", { key: 'a24a3d2eb4077530e36578347ccbae23a2198abe', glyph: this.icon, size: 20 }))), h("span", { key: '92d3b2a327f5e83865459cd73cafa6e67dee2aa6', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '80c816c0797761d48e927b3cb26cdff676aa0fbb', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: '89c3a73550c113fae0b4c2f384c0d9844897da82', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '8523312cbad32091e2290fa0966ead80c11acebd', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: '8967ffda8dbb4af0a55c733fac5c457471bbc88f', size: 16, tabindex: "0" }))))), h("span", { key: 'd338e4b75ec38d9357d1fa9b626701c724c361da', class: "form-control__input" }, h("slot", { key: '38192e98919b25f1f049761b010790dfec19e805' })))), showDescription && (h("span", { key: '5b85cd8335ede10f02858040772a52252a6bf767', class: "form-control__description", id: this.descriptionId }, this.description)), h("span", { key: '95f44e9b1dd26eaba6e82b85c478faf6368f1645', "aria-live": "polite" }, showErrorMessage && (h("span", { key: '80b7229f0a83905a2708020b40eaf74ce8154689', class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '50ea19db5f1efb26697c35f5a79f38d2847c7a97', message: this.errorMessage, size: "s" })))))));
+        return (h(Host, { key: '13d2a3e34d0519deb13fc0c48bdcd50e5c998afa', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'fa2959507fcbb63ff9b46e3a5250b24a5b8e3020', class: className, role: "group" }, h("span", { key: '5da5d74a5a29102e15bf5075b696f0cc53712830', class: "form-control__controls" }, h("span", { key: '7dd1a58fdac4a4b4ef6932d8c92068a5a77b58bb', class: "form-control__prefix" }, h("slot", { key: '78928c653468ce923e22d73f7f3db1f048a5d066', name: "prefix" })), h(LabelTag, { key: '5b632cf43b54e83db9e908d76120119696b351b8', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: '9f3dd8179cd5a9ab2f373f360676002c3f375b30', class: "form-control__icon" }, h("swirl-icon", { key: '84f763010a68c9782cde47af8028ecba5ee21c0a', glyph: this.icon, size: 20 }))), h("span", { key: '8525bb87b93fd1fcec6bf9299f77b66055f664d3', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: 'fd4ceb7d0951b4b5f6c8c1f9ccf1339789cc9d55', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: '045855d7e63c2f3c63fa716f485c0248e8a08567', class: "form-control__tooltip" }, h("swirl-tooltip", { key: 'e9ff35f3bff49113de0535f62e9d80f7003fb962', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: '61d4d4df9d518d9294a510530003df16c0215dd5', size: 16, tabindex: "0" }))))), h("span", { key: '748d81f068640f3cbff2ab1b31a87046442c6521', class: "form-control__input" }, h("slot", { key: 'c395ac72ad7d609f88e91fa38cddab6b871e66ec' })))), showDescription && (h("span", { key: '632118d7120ae262a52ca6eb3f8449c77a7288c9', class: "form-control__description", id: this.descriptionId }, this.description)), h("span", { key: 'd9dc941f07cb0df699afbba834de82546f06b361', "aria-live": "polite" }, showErrorMessage && (h("span", { key: 'c3f41f71bb570cbe08348205cbccf0170d4757e7', class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '3b579f6ff3941f7cafedf0991022026b6ac9e5fd', message: this.errorMessage, size: "s" })))))));
     }
     static get is() { return "swirl-form-control"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-form-group/swirl-form-group.js

@@ -6,7 +6,7 @@ export class SwirlFormGroup {
     }
     render() {
         const className = classnames("form-group", `form-group--orientation-${this.orientation}`);
-        return (h(Host, { key: 'c77edf68821e2be59d0e257f24e0cc434c16b831' }, h("div", { key: 'cfb45daec2da59258ec62bbcdce4f97556d03ae0', class: className }, h("slot", { key: '018945ab9dfde031502168b8258274c5ad0180ec' }))));
+        return (h(Host, { key: '5b14e0132c0975013caced41c3d42765900b0301' }, h("div", { key: '5a3f2d09416ebaeac67e310c658445d56dfea2c8', class: className }, h("slot", { key: '56a1bda07c9042e0e81696c64b0789a54154915b' }))));
     }
     static get is() { return "swirl-form-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,7 +5,7 @@ export class SwirlIcon {
     }
     render() {
         const Tag = `swirl-icon-${this.glyph}`;
-        return (h(Host, { key: 'd80fa710397f1e78cbbef310aa3dfb1d42a402e8' }, h(Tag, { key: 'e10324a45a14805608743bc6e5ccb37f0df405a0', color: this.color, size: this.size })));
+        return (h(Host, { key: 'abb8a9d727983cca95e5c9600a13f0f77d26223d' }, h(Tag, { key: 'd86673ee0436541dbf40f73d9361b3d1c5f4c414', 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

@@ -50,7 +50,7 @@ export class SwirlImageGrid {
                 ? `var(--s-border-radius-${this.borderRadius})`
                 : this.borderRadius,
         };
-        return (h(Host, { key: '7d4fdf93cbd99bf38f2e5390b4b3eb6bb4f912fe' }, h("div", { key: 'b2e0670c4fbf879bec3365a2741717d3aef5755d', "aria-label": this.label, class: className, role: "list", style: styles }, h("slot", { key: '3d24538c879cf9ab7f13572b6c24ad9b4dcbca68', onSlotchange: this.updateItems }))));
+        return (h(Host, { key: '90bb7f66862a60ec727b5ebf4e7a28395e12de99' }, h("div", { key: '855f747b8ba3c678c6d4bf5c2a8dda87e51477d6', "aria-label": this.label, class: className, role: "list", style: styles }, h("slot", { key: '56a605da09875d68e2850ff528b7ddae2a121c96', onSlotchange: this.updateItems }))));
     }
     static get is() { return "swirl-image-grid"; }
     static get encapsulation() { return "shadow"; }