@getflip/swirl-components 0.365.1 → 0.366.0

package/dist/esm/swirl-avatar-group.entry.js

@@ -1,11 +1,19 @@
 import { r as registerInstance, h, H as Host } from './index-CWOhMVtL.js';
 import { c as classnames } from './index-orsBiyT_.js';
 
-const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group ::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%;grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4));display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";
+const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.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--diagonal-stack ::slotted(*:first-of-type){z-index:1;display:inline-flex;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--diagonal-stack ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;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{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";
 
 const SwirlAvatarGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        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();
@@ -20,12 +28,24 @@ const SwirlAvatarGroup = class {
             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) })))));
     }
 };
 SwirlAvatarGroup.style = swirlAvatarGroupCss;

package/dist/esm/swirl-badge.entry.js

@@ -14,7 +14,7 @@ const SwirlBadge = class {
         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))))));
     }
 };
 SwirlBadge.style = swirlBadgeCss;

package/dist/esm/swirl-banner.entry.js

@@ -55,7 +55,7 @@ const SwirlBanner = class {
         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' }))))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/swirl-box.entry.js

@@ -89,7 +89,7 @@ const SwirlBox = class {
             "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' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-button-group.entry.js

@@ -14,11 +14,11 @@ const SwirlButtonGroup = class {
         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' }))));
     }
 };
 SwirlButtonGroup.style = swirlButtonGroupCss;

package/dist/esm/swirl-button.entry.js

@@ -76,9 +76,9 @@ const SwirlButton = class {
             "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" }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-card.entry.js

@@ -70,9 +70,9 @@ const SwirlCard = class {
             "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" }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-carousel.entry.js

@@ -156,7 +156,7 @@ const SwirlCarousel = class {
             "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 })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-checkbox.entry.js

@@ -42,7 +42,7 @@ const SwirlCheckbox = class {
             "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)))))));
     }
 };
 SwirlCheckbox.style = swirlCheckboxCss;

package/dist/esm/swirl-chip.entry.js

@@ -46,7 +46,7 @@ const SwirlChip = class {
             "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 })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-columns.entry.js

@@ -8,10 +8,10 @@ const SwirlColumns = class {
         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' }))));
     }
 };
 SwirlColumns.style = swirlColumnsCss;