@getflip/swirl-components 0.365.1 → 0.367.0

package/dist/cjs/swirl-app-icon.cjs.entry.js

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

package/dist/cjs/swirl-app-layout_5.cjs.entry.js

@@ -636,7 +636,7 @@ const SwirlResourceList = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'cebcef9bd2b4f9c9bdb07eb60b1455fe961506fe', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '3ec608204ed57e938706be802f55e69a1de4e042', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: '1264ea92a2dc6dad647e917dd90267e52b175345', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, index.h("swirl-stack", { key: 'e1ce6259ade426672a4bbcf873e8072eda93a167', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, index.h("slot", { key: 'd8c26a1e3dbaaa405caaafb74d4de11632a26bbe' })))));
+        return (index.h(index.Host, { key: '37fcb7b7ef6436a7855d00519a31bf007b77da54', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '22f4bf54dbd49932e129c58d5514926d07f825a6', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: '79844e03ac49eb014b31cb6c26169a74bb1d6967', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, index.h("swirl-stack", { key: 'a63f94d6d859d1cc3497f4b9e037e1f3513537b0', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, index.h("slot", { key: '269ac25ec75e7911548b4fd626f1a9031c008a19' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -781,7 +781,7 @@ const SwirlResourceListItem = class {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (index.h(index.Host, { key: '99d705af69a7d7457da693a1c5c67706f6635845', role: hostRole }, index.h("div", { key: 'a59c5927cae5448c3917a2af8387b50dcd2d3ef4', class: className, role: containerRole }, index.h(Tag, { key: 'b3e5fac4c8925d3a06a26b7d0b79aa58e3def37f', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: 'ec4113d40664af96c8c8dbeec32501b1f57c0f21', class: "resource-list-item__media" }, index.h("slot", { key: 'c4d9601f58a3f128cf88254a2d5bde98c36d1628', name: "media" }))), index.h("span", { key: '6ae242f557e807b2ef95c2b6d775151eae4b4d47', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: 'd7489459160e4dfebc38d3f1ab637ff7ec0a2096', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: 'ae91a04a4916ca91e50984da265e4a94d08ef4c3', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: '4188d689a7330f8ab41534becf9059258eb571d9', class: "resource-list-item__meta" }, index.h("span", { key: '5a63a90a5478728f57611efed228919b856e0ecf', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: '04fb7f9e250e2772cbf78567d74a5496fd96897b', class: "resource-list-item__badges" }, index.h("slot", { key: '950c710d8150ba65f67becb2a072aa241fc0109f', name: "badges" }))))), this.selectable && (index.h("span", { key: '1d5e33c7003f06937bd11c3d1e3a2e8b2751b43e', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: '0518fad3b25324d5f4b4b32bcc5ed84bbdef7542', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: '5578df09145bd0c8a66a7a3f97fbdbaf15edee11' }))))), index.h("span", { key: '35605bfc79aa8f8653d9f109af0741247ef7d555', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: 'c3771a13badc88d14e856c3f5391ff904420c2c4', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '351458c498c327220f1b55c8b5a3b27038c5bfeb', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: '8ad88ba909010c7ab1fc300cbd52d533bf8eae19', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { key: 'e26acb5a079ec58706794f89d742e6aad3448203', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { key: '128042b80216937f197dd36ca5f055fcacf23150', size: this.iconSize })))));
+        return (index.h(index.Host, { key: '74c295778be2ba1f1d18172fe93ea8436d0ed609', role: hostRole }, index.h("div", { key: 'b7ac96248b20b6e705f605af9d754911fb53be95', class: className, role: containerRole }, index.h(Tag, { key: 'fe117a7a35e35d3074d5c8df032d58cb018a142b', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: '21210a04c7f96b3dc309a89535318e911afd351c', class: "resource-list-item__media" }, index.h("slot", { key: 'c326fac8899935452789fe8b14271c61175eba7d', name: "media" }))), index.h("span", { key: 'd9fcdfe21c54daeebe56669aadd07d828423272e', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: 'd9ad2ee46f279de7f50a2e86368e8bc3a7cd6428', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: '8b6be5351d9289daf137164aef0806dbd2f6e3d4', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: '7f6790113baac9b15e4aef4e8dfd4098a7a213ac', class: "resource-list-item__meta" }, index.h("span", { key: 'e5e19cd610b66fceb249ff4ca675b3e9c6e61edb', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: '54f0b68d16992adf7f8585a0b2573404be0ecdef', class: "resource-list-item__badges" }, index.h("slot", { key: '759c9abe2507f47d41413868e38c63c8062cc432', name: "badges" }))))), this.selectable && (index.h("span", { key: '5c99be2c49bb6418ab48652e707df48b1b384b69', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: '9d0ad429053251757013feeb56effc4f3cb09991', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: '8ccbc8ac044db30a9001a6059b6eaa9ba5742841' }))))), index.h("span", { key: 'b1c571d422c5b60c4e92d37f8b95ef7c1fd6cc18', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: 'd47ebce7bc4897dd2e6b701f35fc1caa17e72fdd', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: 'c876093478e16507d50c80606194e0f8a3320952', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: '350f845bcdb1103d03b36f8ccfb17287aeb13ef2', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { key: '5df7f8049ceabc364754514ccc48a01dd5e4bc99', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { key: '95833ffeafba02439646e30624d19ae7a2f2b65d', size: this.iconSize })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,11 +3,19 @@
 var index = require('./index-DM-IG6w2.js');
 var index$1 = require('./index-DcAhLZUH.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) {
         index.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();
@@ -22,12 +30,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 = index$1.classnames("avatar-group", {
+        const className = index$1.classnames("avatar-group", `avatar-group--${this.layout}-stack`, {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = index$1.classnames("avatar-group__badge");
-        return (index.h(index.Host, { key: '3d323ce2f50de15cda4630897705da5446856e20' }, index.h("div", { key: '49b71c1a65716a95d9885ae16cb6fb18422cdbfc', class: className, role: "group" }, index.h("slot", { key: 'c5176ddecea970fae882e6eb7b7c5d9c2462561b' }), this.badge && (index.h("span", { key: '6de3511f5027ae3eb6abedfa053bf6504538b808', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (index.h(index.Host, { key: '2edd03b924ba16f132c055efda042ed7b0beb38a' }, index.h("div", { key: '5b5cc714269ec9ea1b603ce1b1991278b6b22eb4', "aria-label": this.label, class: className, role: "group" }, index.h("slot", { key: '6bc20021c1ed36e17fbff8ad7f027c631cc15abe', onSlotchange: this.onSlotChange }), this.badge && (index.h("span", { key: '7980eb5e7a5d7febf1bcb3b6f92582d302237f00', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
 };
 SwirlAvatarGroup.style = swirlAvatarGroupCss;

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

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

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

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

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

@@ -91,7 +91,7 @@ const SwirlBox = class {
             "box--scrolled-to-top": this.scrollState.scrolledToTop,
             "box--scrolled-to-bottom": this.scrollState.scrolledToBottom,
         });
-        return (index.h(index.Host, { key: '9eb887b775004a6c938285b4713f7d42a76d63c4', class: className, onScroll: this.onScroll, style: styles }, index.h("slot", { key: '801d75966176bee2182fa524131d230e2ec273f5' })));
+        return (index.h(index.Host, { key: 'e9eeaa11b7a04b59744d8cf369855874fb8eab02', class: className, onScroll: this.onScroll, style: styles }, index.h("slot", { key: '0d5e86f34e2efb3dd7f9bfaf24a3a18578e6f507' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -16,11 +16,11 @@ const SwirlButtonGroup = class {
         const className = index$1.classnames("button-group", {
             "button-group--segmented": this.segmented,
         });
-        return (index.h(index.Host, { key: '3f4c0ac1ef25dc8663a748c9d5da839ba13715cf' }, index.h("swirl-stack", { key: 'b3128cad0d6eb223551310ef71d45fa31750f8a2', align: this.orientation === "vertical" && this.stretch
+        return (index.h(index.Host, { key: '1c5dcaf521e8ee19f572f03e428f6f6297106ae0' }, index.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 }, index.h("slot", { key: 'e237d1c473fadc6b27b4140c6de0bb1ebdaee8b2' }))));
+                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, index.h("slot", { key: '4936fecbd49610aec18174458b1cd7ef42723eba' }))));
     }
 };
 SwirlButtonGroup.style = swirlButtonGroupCss;

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

@@ -78,9 +78,9 @@ const SwirlButton = class {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (index.h(index.Host, { key: '6337212b126484088e98cc5912189b1ed232bdea', style: { pointerEvents: this.disabled ? "none" : "" } }, index.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 (index.h(index.Host, { key: '49d43aafbfefa72d23f1fb0bec48dcb7333d0610', style: { pointerEvents: this.disabled ? "none" : "" } }, index.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) && (index.h("span", { key: '9911496cd21581532424a9ccaa902b16759f74de', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: '9a9a262855e3f7db4b686386bc7a7b22af2468ad', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: 'c043bcbec31a01fce43a01747f01537e9e5fe88c', name: "icon" }))), !hideLabel && index.h("span", { key: '8ae906d08d3520362f816783ff48f01f08349d7a', class: "button__label" }, this.label), hasTag && (index.h("span", { key: '388cef78ae0744f4dae57f712c8a772fc2e65524', class: "button__tag" }, index.h("slot", { key: 'd03270a8b768de0df1bfa07ba1e2aeb99f4646c0', name: "tag" }))), hasTrailingSlot && (index.h("div", { key: '38f7c4fb73a0b7edc0c2d25d780946fed13a3123', class: "button__trailing-slot" }, index.h("slot", { key: '372c71c84d11ed7eed830701e0d1e620a878b37b', name: "trailing" }))))));
+                : {} }, Boolean(this.icon) && (index.h("span", { key: 'a48af7d78a53bb7efd90df4f8df886a7a8c59dc8', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: 'c3c70eab6feabaa93cf1599e662aa37706f52757', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: '69a451895b40ee9decfd817e9f2d015c4a76dde6', name: "icon" }))), !hideLabel && index.h("span", { key: 'cd1669aeccd8cc518b252a48e95b7e8c978b2548', class: "button__label" }, this.label), hasTag && (index.h("span", { key: '40de97546408ff28cd03b4cfd6e216044ea89088', class: "button__tag" }, index.h("slot", { key: 'e69c28a98e3bdc1d6c8c6d5f6fef04330b9e64f7', name: "tag" }))), hasTrailingSlot && (index.h("div", { key: '6306ba16fbf752aa11c34a3aa3a190c8094d79fc', class: "button__trailing-slot" }, index.h("slot", { key: '4d17a8b0f819b95ae7a0908bff23648280a84dce', name: "trailing" }))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -72,9 +72,9 @@ const SwirlCard = class {
             "card--interactive": this.interactive || this.href,
             "card--is--borderless": this.isBorderless,
         });
-        return (index.h(index.Host, { key: '627c49d41c681c969170cb6acb654e8f703ce9c9', styles: { height: this.height } }, index.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 (index.h(index.Host, { key: '5bfcbd19458056cb51a4c4f3ed715a14a7cd6733', styles: { height: this.height } }, index.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 }, index.h("div", { key: '3f8ab8e7df574ef27ba36b24cecf1dc75b5c1ff8', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, index.h("slot", { key: '5efeec1b6bc81100e1078aaf231408f33c099de7', name: "image" })), index.h("div", { key: 'b8122399fb965b4d4569e4fe8dac21ccdc652e68', class: "card__floating-controls" }, index.h("slot", { key: 'abc47854902b427d759f13b162c937a3c4a3eb5b', name: "floating-controls" })), index.h("div", { key: 'a455be81f568fb3f0a9869a74bcf71b284c85b47', class: "card__body", style: bodyStyles }, index.h("div", { key: 'a079ae3c14eeb38d75981e8a1c6822b6373d305b', class: "card__content" }, index.h("slot", { key: 'b81644a39a20f76b816d566084044f72b2e02afd', name: "content" }))))));
+                : undefined, style: styles, target: this.linkTarget }, index.h("div", { key: 'd904c27cc0be54ca742da0724082f5054f865cfe', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, index.h("slot", { key: 'e961923314ced9e3328fc524c5482711f4d27b74', name: "image" })), index.h("div", { key: '5df1afc2ea9ea939346c8de9c0175767d8f516c8', class: "card__floating-controls" }, index.h("slot", { key: '7edc1118e0bdd548a4f2d7299b70b48574e0b00e', name: "floating-controls" })), index.h("div", { key: 'f11335531fada3ae2b3a5ab215b5a1a825b314cf', class: "card__body", style: bodyStyles }, index.h("div", { key: '17de1d4711bef1fa8f14061e8118f6a0105cbf3d', class: "card__content" }, index.h("slot", { key: '4eb7af808aaaf1f762089ed98f231cea57d10b93', name: "content" }))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -158,7 +158,7 @@ const SwirlCarousel = class {
             "carousel--is-at-start": this.isAtStart,
             "carousel--is-at-end": this.isAtEnd,
         });
-        return (index.h(index.Host, { key: '6f554892238c026db3502297458273b682d68098', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, index.h("div", { key: '362e62f0a21b074001997fd0f277dd1109bfd1ea', class: className }, this.isScrollable && !this.isAtStart && (index.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 && (index.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" })), index.h("div", { key: 'f4d391b47f7ec2406bf26b2699712e86defdd8b1', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: '3747e42e63c10dbd1a2dda5d739700f7b60c8769', onSlotchange: this.onSlotChange })))));
+        return (index.h(index.Host, { key: 'c5903f0c46a1eaa6129e2a1b73abee0db5bcd9ed', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, index.h("div", { key: 'a1dfb1a45c399559d25df72add7723b231b5e6b8', class: className }, this.isScrollable && !this.isAtStart && (index.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 && (index.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" })), index.h("div", { key: 'cb596e62b8517b2d6ff791032b41608c6a5b25be', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: '0fab582bd3650e63d512e934d03183b3ae9b5901', onSlotchange: this.onSlotChange })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -44,7 +44,7 @@ const SwirlCheckbox = class {
             "checkbox--invalid": this.invalid,
             "checkbox--unchecked": unchecked,
         });
-        return (index.h(index.Host, { key: '38efd2f720fa05c50cab83d831dbe89a75bacb66', style: { width: this.variant === "card" ? "100%" : undefined } }, index.h("label", { key: '67043fe316855dea189be6ab881bfdfb723e3ecc', class: className, htmlFor: this.inputId }, index.h("span", { key: '4914260178c7e8b5e3d34194ed78332ffc9b4e88', class: "checkbox__control" }, index.h("swirl-visually-hidden", { key: '0ff1c7d8e8846892051ac64b1f846c73264b8598' }, index.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 })), index.h("span", { key: 'd59a0780fa7d659c7ae08cbc21e3388eaed69e10', "aria-hidden": "true", class: "checkbox__box" }, index.h("span", { key: 'c23383243cfe53a9b85d4100e8b6166c1b42f972', class: "checkbox__icon" }, checked && index.h("swirl-icon-check-strong", { key: '671fe5e2cb55df26dced0c13159819abd15e498c' }), indeterminate && (index.h("span", { key: 'f02555616ef2059a4e9e686460cf193e37f020ff', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (index.h("span", { key: 'ae445d06d03d3f2efd45682d66590aee1c985728', class: "checkbox__label-container" }, this.label && index.h("span", { key: '6a6be7b56266f2218799aebac36e6d6d1b409bfb', class: "checkbox__label" }, this.label), this.description && (index.h("span", { key: 'cb24c5979fde3237609ce63e30edc9426984732b', class: "checkbox__description" }, this.description)))))));
+        return (index.h(index.Host, { key: 'acf777ca7224f41f607bf84f193ecb05881f1fc1', style: { width: this.variant === "card" ? "100%" : undefined } }, index.h("label", { key: 'c3a3abc5f9e87d3665ad7c797d44a2acd34c8ee5', class: className, htmlFor: this.inputId }, index.h("span", { key: '5e49492e10519c0f2f4f6ed187b318bca8316dab', class: "checkbox__control" }, index.h("swirl-visually-hidden", { key: '06217d12dbc1ea25117e421d8e0e1cebd392f599' }, index.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 })), index.h("span", { key: '8b69f9ae79e957c52066cd80cf0da11fe5613ed2', "aria-hidden": "true", class: "checkbox__box" }, index.h("span", { key: 'cca029718dd23f8c2e0637ce4f44c24b4fb0b289', class: "checkbox__icon" }, checked && index.h("swirl-icon-check-strong", { key: 'f3bab31db3d5ab5a6fdc78610abb42763f51154b' }), indeterminate && (index.h("span", { key: '7002b8fffbb15b73d84fae98761196bbe6af3347', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (index.h("span", { key: '082ac434bc4dd0c98d983650aab5208a760063e7', class: "checkbox__label-container" }, this.label && index.h("span", { key: '62737cd8068a70eb10e722c2ff91ae4dc9917f7d', class: "checkbox__label" }, this.label), this.description && (index.h("span", { key: '3e7f891b80511b9a4d811db31b594f2a0429d8b0', class: "checkbox__description" }, this.description)))))));
     }
 };
 SwirlCheckbox.style = swirlCheckboxCss;

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

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

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

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