@getflip/swirl-components 0.278.0 → 0.280.0

package/dist/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "components/swirl-stack/swirl-stack.js",
     "components/swirl-button-group/swirl-button-group.js",
     "components/swirl-card/swirl-card.js",
+    "components/swirl-carousel/swirl-carousel.js",
     "components/swirl-checkbox/swirl-checkbox.js",
     "components/swirl-chip/swirl-chip.js",
     "components/swirl-columns/swirl-columns.js",
@@ -59,7 +60,6 @@
     "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/swirl-carousel.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",
@@ -89,6 +89,7 @@
     "components/swirl-icon/icons/swirl-icon-add-reaction.js",
     "components/swirl-icon/icons/swirl-icon-add.js",
     "components/swirl-icon/icons/swirl-icon-admin-panel-settings.js",
+    "components/swirl-icon/icons/swirl-icon-ai-filled.js",
     "components/swirl-icon/icons/swirl-icon-ai.js",
     "components/swirl-icon/icons/swirl-icon-apps.js",
     "components/swirl-icon/icons/swirl-icon-arrow-back.js",

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

@@ -36,7 +36,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'd55429aad4516126e668b224362c1b1a8fe14840' }, h("slot", { key: '830e7a692144588d97b3b19d1dc7981d9528f05b' })));
+        return (h(Host, { key: '0da292c39800abd564844ef83efd150ae18f9bce' }, h("slot", { key: '5267813019864387c8853836bcb5e7609b8498f7' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '9d7de27fab1b6fa257f2378ffd3541da37236353' }, h("div", { key: 'c6cfdfe8ef238a3ddf1eff29cf5333b736796781', class: className }, h(HeadingTag, { key: 'a8bcdf75fdb679e80fb3b7b8d2fb82c8df2b2325', class: "accordion-item__heading" }, h("button", { key: '00e70a63be57e80639df7e87187fb46966036719', "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: '0537ec5f84d24ba6091aa007347647379ef6622c', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '3c187e3058940e8b3a66e5968f2b940db6987214', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '1e8efd3e1a46fa459bc374f24e75877ffdd76777', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '771d3173c02d1801399039b391f3f8dc378721a5', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '4cec14ec7f46af6d828b4b2ddb59f336c2f443a2', glyph: "expand-more", size: 20 }))))), h("div", { key: 'b66c80b51ddd18dec1b31089b9db5adb728587d2', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '4cf00b1ae3887621f7b1d6269c4bf38b9cb452c5' })))));
+        return (h(Host, { key: '29710e3b90bc91e4290687f120dda4dc8172bf1a' }, h("div", { key: '68680d0041529a5cf74ca84139c505d38987eb71', class: className }, h(HeadingTag, { key: '0148138907529f3c1eab7cb95d35e8c05d56fc6a', class: "accordion-item__heading" }, h("button", { key: 'f72a42c42a7ee1bf35646b44fa7e289f572e23c8', "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: 'fc9f06dbd96372ededa39d68334aaf33b53a94e2', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'd4df097cc2b96c6216e9dfc94486e08f571e3954', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '3606ddc91d2e808421137cd781ef682938b02f78', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '501fe59ef0b0e4692c65f8cdfd24ca1ac9335001', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'e389b4dfdc9306f07043ff902be7e538ee89c92f', glyph: "expand-more", size: 20 }))))), h("div", { key: '0b796af4c2c698547e9c54aa435443892d2047d4', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '4cfa18cc7900a67b0d24ce55e5b5da1edf2b8a7a' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class SwirlActionList {
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
     render() {
-        return (h(Host, { key: 'df9e8d994a640babeec12638708d986a90e15ccb' }, h("div", { key: '75d900e53d5cab787775d484b744e2f61a6fa0df', "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: '33ee2e5013f8d4c95b4ba52581296940230a9574' }))));
+        return (h(Host, { key: 'a9c578bd188dd7099dc6e730a9e7e0712b141376' }, h("div", { key: 'a59a86d89fac7df60915f24dda0a311d1315178f', "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: '59950a3821a5dfe5813605c14f5527e3cf257c96' }))));
     }
     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

@@ -7,7 +7,7 @@ export class SwirlActionListSection {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: 'b26e44c7aeb2812906e4024f30fc6a0037b2d345' }, h("div", { key: '43c282ba01329b008ec12bd1f4ce75c0d94dc181', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '77ec2da92deb17a84dcbaecdb5c75849a4b7f665', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: 'acd0d5cdf0c68d0c243ef4cb137873535f9c4adb', class: "action-list-section__items" }, h("slot", { key: '05b7dd200c520546602c658ba09d9ea314b837cb' })))));
+        return (h(Host, { key: '40bda032cab1a7b0f79a2b5881d9326b062156ea' }, h("div", { key: '0c82c51957b3707724636f33193023c7344b8104', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '58f78c65728f336de01b7cb903566aa8becbaaeb', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: 'ba803eaa5eb3b24d0c7cbb4c71f014bd708a36ce', class: "action-list-section__items" }, h("slot", { key: '456bbed6e34639d50f1b00efa172c4e7ea50461c' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: 'edcf8cc69d16fa12285b1cb2e2b58dde368e72c2' }, h("span", { key: '764c775416d56e7b07b68b7d7fdb89404fea3362', class: className }, showImage && (h("img", { key: '15cd23766dc7e81621017fa6a33eab01eb7bf88f', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: 'b7c9a9c803411570a0015e1a2febbef6f03fcaa8', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: 'fcfbd3332b8ffdc129b4a5b336054a2f4b7c0cf2' }, h("span", { key: '1d085a88743d7341f83709283300a7e4fecb76b2', class: className }, showImage && (h("img", { key: 'bc9cac7895c5f9e0b58348a01dc6a4d14834b3a0', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: '74fef35e39cc3b2f19c11e1846659d369218bda9', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-app-layout/swirl-app-layout.css

@@ -371,7 +371,8 @@
     grid-template-rows: auto 1fr;
     grid-template-areas:
       "banner"
-      "content";
+      "content"
+      "bottom-bar";
   }
 
 .app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar {

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

@@ -25,7 +25,7 @@ export class SwirlAvatarGroup {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: '6c81860c9a182698fb09f5e0fc0074c53bc4bd6c' }, h("div", { key: 'cd5f70dcab98ba8e3b75383fe82f53bec8ba5942', class: className, role: "group" }, h("slot", { key: 'edb2796a9c1e07482d08792c5ee93cda49e94cc5' }), this.badge && (h("span", { key: '957ac8bd7d1cbc9f959a050159e8ae5643a332ff', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: '5b386bdc0c753d8ef01cbb733643a60e96ab89fe' }, h("div", { key: 'd3e47d6670ac21c8d202b76dbde2861f6bcaf57a', class: className, role: "group" }, h("slot", { key: 'a81602480b721dcd9b90b8c36c5f795d7a5d6463' }), this.badge && (h("span", { key: '224ac43404406dbcd768b812fc6940514b9ea36f', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get is() { return "swirl-avatar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@
       color: var(--s-icon-disabled);
     }
 
-.button:focus:not(:focus-visible) {
+.button:focus:where(:not(:focus-visible)) {
     outline: none;
   }
 
@@ -81,27 +81,27 @@
   justify-content: flex-end;
 }
 
-.button--variant-ghost.button--intent-strong:not(:disabled):not(.button--disabled) {
+.button--variant-ghost.button--intent-strong:where(:not(:disabled):not(.button--disabled)) {
     color: var(--s-text-default);
   }
 
-.button--variant-ghost.button--intent-strong:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-ghost.button--intent-strong:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--s-icon-strong);
     }
 
-.button--variant-ghost.button--intent-primary:not(:disabled):not(.button--disabled) {
+.button--variant-ghost.button--intent-primary:where(:not(:disabled):not(.button--disabled)) {
     color: var(--s-text-highlight);
   }
 
-.button--variant-ghost.button--intent-primary:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-ghost.button--intent-primary:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--s-icon-highlight);
     }
 
-.button--variant-ghost.button--intent-critical:not(:disabled):not(.button--disabled) {
+.button--variant-ghost.button--intent-critical:where(:not(:disabled):not(.button--disabled)) {
     color: var(--s-text-critical);
   }
 
-.button--variant-ghost.button--intent-critical:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-ghost.button--intent-critical:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--s-icon-critical);
     }
 
@@ -140,37 +140,37 @@
     background-color: var(--swirl-flat-button-background-disabled);
   }
 
-.button--variant-flat.button--intent-primary:not(:disabled):not(.button--disabled) {
+.button--variant-flat.button--intent-primary:where(:not(:disabled):not(.button--disabled)) {
     color: var(--s-text-on-action-primary);
     background-color: var(--s-action-primary-default);
   }
 
-.button--variant-flat.button--intent-primary:not(:disabled):not(.button--disabled):hover {
+.button--variant-flat.button--intent-primary:where(:not(:disabled):not(.button--disabled)):hover {
       background-color: var(--s-action-primary-hovered);
     }
 
-.button--variant-flat.button--intent-primary:not(:disabled):not(.button--disabled):active {
+.button--variant-flat.button--intent-primary:where(:not(:disabled):not(.button--disabled)):active {
       background-color: var(--s-action-primary-pressed);
     }
 
-.button--variant-flat.button--intent-primary:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-flat.button--intent-primary:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--s-icon-on-action-primary);
     }
 
-.button--variant-flat.button--intent-critical:not(:disabled):not(.button--disabled) {
+.button--variant-flat.button--intent-critical:where(:not(:disabled):not(.button--disabled)) {
     color: var(--s-text-on-status);
     background-color: var(--s-action-critical-default);
   }
 
-.button--variant-flat.button--intent-critical:not(:disabled):not(.button--disabled):hover {
+.button--variant-flat.button--intent-critical:where(:not(:disabled):not(.button--disabled)):hover {
       background-color: var(--s-action-critical-hovered);
     }
 
-.button--variant-flat.button--intent-critical:not(:disabled):not(.button--disabled):active {
+.button--variant-flat.button--intent-critical:where(:not(:disabled):not(.button--disabled)):active {
       background-color: var(--s-action-critical-pressed);
     }
 
-.button--variant-flat.button--intent-critical:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-flat.button--intent-critical:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--s-icon-on-status);
     }
 
@@ -197,23 +197,24 @@
       var(--s-border-default);
   }
 
-.button--variant-outline.button--intent-critical:not(:disabled):not(.button--disabled) {
+.button--variant-outline.button--intent-critical:where(:not(:disabled):not(.button--disabled)) {
     color: var(--s-text-critical);
     box-shadow: inset 0 0 0 var(--s-border-width-default)
       var(--s-border-critical);
   }
 
-.button--variant-outline.button--intent-critical:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-outline.button--intent-critical:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--s-icon-critical);
     }
 
-.button--variant-outline.button--pressed {
+.button--variant-outline.button--intent-primary:where(:not(:disabled):not(.button--disabled)),
+  .button--variant-outline.button--pressed {
     color: var(--s-text-highlight);
     box-shadow: inset 0 0 0 var(--s-border-width-default)
       var(--s-border-highlight);
   }
 
-.button--variant-outline.button--pressed .button__icon {
+.button--variant-outline.button--intent-primary:where(:not(:disabled):not(.button--disabled)) .button__icon, .button--variant-outline.button--pressed .button__icon {
       color: var(--s-icon-highlight);
     }
 
@@ -236,23 +237,23 @@
   background-color: transparent;
 }
 
-.button--variant-plain:hover:not(:disabled):not(.button--disabled) {
+.button--variant-plain:hover:where(:not(:disabled):not(.button--disabled)) {
     color: var(--swirl-plain-button-text-color-hovered);
     background-color: transparent;
     text-decoration: underline;
     text-underline-offset: var(--s-space-4);
   }
 
-.button--variant-plain:hover:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-plain:hover:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--swirl-plain-button-text-color-hovered);
     }
 
-.button--variant-plain:active:not(:disabled):not(.button--disabled) {
+.button--variant-plain:active:where(:not(:disabled):not(.button--disabled)) {
     color: var(--swirl-plain-button-text-color-pressed);
     background-color: transparent;
   }
 
-.button--variant-plain:active:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-plain:active:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--swirl-plain-button-text-color-pressed);
     }
 
@@ -270,11 +271,11 @@
     padding: 0;
   }
 
-.button--variant-plain.button--intent-strong:not(:disabled):not(.button--disabled) {
+.button--variant-plain.button--intent-strong:where(:not(:disabled):not(.button--disabled)) {
     color: var(--s-text-default);
   }
 
-.button--variant-plain.button--intent-strong:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-plain.button--intent-strong:where(:not(:disabled):not(.button--disabled)) .button__icon {
       color: var(--s-icon-strong);
     }
 
@@ -282,19 +283,19 @@
     color: var(--s-interactive-primary-default);
   }
 
-.button--variant-plain.button--intent-primary:hover:not(:disabled):not(.button--disabled) {
+.button--variant-plain.button--intent-primary:hover:where(:not(:disabled):not(.button--disabled)) {
       color: var(--s-interactive-primary-hovered);
     }
 
-.button--variant-plain.button--intent-primary:hover:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-plain.button--intent-primary:hover:where(:not(:disabled):not(.button--disabled)) .button__icon {
         color: var(--s-interactive-primary-hovered);
       }
 
-.button--variant-plain.button--intent-primary:active:not(:disabled):not(.button--disabled) {
+.button--variant-plain.button--intent-primary:active:where(:not(:disabled):not(.button--disabled)) {
       color: var(--s-interactive-primary-pressed);
     }
 
-.button--variant-plain.button--intent-primary:active:not(:disabled):not(.button--disabled) .button__icon {
+.button--variant-plain.button--intent-primary:active:where(:not(:disabled):not(.button--disabled)) .button__icon {
         color: var(--s-interactive-primary-pressed);
       }
 
@@ -386,12 +387,12 @@
     background-color: var(--s-action-primary-default);
   }
 
-.button--variant-floating.button--intent-primary:hover:not(:disabled):not(.button--disabled) {
+.button--variant-floating.button--intent-primary:hover:where(:not(:disabled):not(.button--disabled)) {
       color: var(--s-text-on-action-primary);
       background-color: var(--s-action-primary-hovered);
     }
 
-.button--variant-floating.button--intent-primary:active:not(:disabled):not(.button--disabled) {
+.button--variant-floating.button--intent-primary:active:where(:not(:disabled):not(.button--disabled)) {
       color: var(--s-text-on-action-primary);
       background-color: var(--s-action-primary-pressed);
     }

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

@@ -1,4 +1,6 @@
 :host {
+  --swirl-carousel-spacing: var(--s-space-16);
+
   position: relative;
   display: block;
   overflow: hidden;
@@ -33,8 +35,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
-  padding: var(--s-space-24) var(--s-space-16) var(--s-space-24)
-    var(--s-space-16);
+  padding: var(--s-space-24) var(--s-space-16);
   scroll-padding: var(--s-space-16);
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
@@ -46,28 +47,12 @@
   }
 
 .carousel__slides ::slotted(*) {
-    margin-left: var(--s-space-16);
+    margin-left: var(--swirl-carousel-spacing);
     flex-grow: 0;
     flex-shrink: 0;
     scroll-snap-align: start;
   }
 
-@media (min-width: 768px) {
-
-.carousel__slides ::slotted(*) {
-      margin-left: var(--s-space-24)
-  }
-    }
-
-@media (min-width: 768px) {
-
-.carousel__slides {
-    padding-right: var(--s-space-24);
-    padding-left: var(--s-space-24);
-    scroll-padding: var(--s-space-24)
-}
-  }
-
 .carousel__previous-slide-button {
   position: absolute;
   z-index: 1;

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

@@ -32,6 +32,9 @@ export class SwirlCarousel {
         this.nextSlideButtonLabel = "Next slide";
         this.previousSlideButtonLabel = "Previous slide";
         this.loopAround = false;
+        this.paddingInlineEnd = undefined;
+        this.paddingInlineStart = undefined;
+        this.spacing = "16";
         this.isAtEnd = undefined;
         this.isAtStart = undefined;
         this.isScrollable = undefined;
@@ -104,7 +107,19 @@ export class SwirlCarousel {
         return inInView;
     }
     render() {
-        return (h(Host, { key: 'cd2ca352a6426f2e12386599088a7de9e3f93df0', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: 'ae511fa076d36e63dd1b7b2706703e2d09cbd6dd', class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '5d69a44a13f7bba287776b68a811d1c828fb14c4', 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: '879a532bdfff58a202adc8abc9c6ada593f80f8c', 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: '9af15bc83352d2c282df0fb70a0d151b139a8947', "aria-live": "polite", class: "carousel__slides", onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '843034f11070d3177bebb74355fb77585fd8cb95', onSlotchange: this.onSlotChange })))));
+        this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
+        const slidesStyles = {
+            paddingInlineEnd: Boolean(this.paddingInlineEnd)
+                ? `var(--s-space-${this.paddingInlineEnd})`
+                : undefined,
+            paddingInlineStart: Boolean(this.paddingInlineStart)
+                ? `var(--s-space-${this.paddingInlineStart})`
+                : undefined,
+            scrollPadding: Boolean(this.paddingInlineStart)
+                ? `var(--s-space-${this.paddingInlineStart})`
+                : undefined,
+        };
+        return (h(Host, { key: '1f70b252a4c321684630b607da270c25cef8f7e4', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: 'f67505a962e5082d54e4613d2e77e62736efd120', class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: 'bccf78229f6bbd84ba714e287eb31395757108f8', 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: 'ca72af5423c9c6bca90760770bb9208e2e359784', 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: '2cfa69c7419ce24281267b09ba996779ee3d7920', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'e52277424d566780b364b171d84d8fa83007b6a2', onSlotchange: this.onSlotChange })))));
     }
     static get is() { return "swirl-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -190,6 +205,76 @@ export class SwirlCarousel {
                 "attribute": "loop-around",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "paddingInlineEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlCarouselPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
+                    "references": {
+                        "SwirlCarouselPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
+                            "id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-inline-end",
+                "reflect": false
+            },
+            "paddingInlineStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlCarouselPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
+                    "references": {
+                        "SwirlCarouselPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
+                            "id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-inline-start",
+                "reflect": false
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlCarouselSpacing",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
+                    "references": {
+                        "SwirlCarouselSpacing": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
+                            "id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselSpacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "spacing",
+                "reflect": false,
+                "defaultValue": "\"16\""
             }
         };
     }

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

@@ -7,7 +7,7 @@ describe("swirl-carousel", () => {
             html: `<swirl-carousel>Content</swirl-carousel>`,
         });
         expect(page.root).toEqualHtml(`
-      <swirl-carousel aria-roledescription="carousel" role="group">
+      <swirl-carousel aria-roledescription="carousel" role="group" style="--swirl-carousel-spacing: 16px;">
         <mock:shadow-root>
           <div class="carousel">
             <div aria-live="polite" class="carousel__slides">

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

@@ -45,7 +45,7 @@ export class SwirlCheckbox {
             "checkbox--invalid": this.invalid,
             "checkbox--unchecked": unchecked,
         });
-        return (h(Host, { key: 'bbc24f3e3cb34a0b25cf7a1e46272fc6044ffb5a', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: 'a3ffcaef4e52604ae57dd26b97291506b1aea38f', class: className, htmlFor: this.inputId }, h("span", { key: '4ffd11cfdc97d42b79db1ed1d27befbae0a93f8b', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '609774c239efc03caeb57772d05647fc89246592' }, h("input", { key: '1fb5ef7acc8a582d200634c722821d3a3ba92125', "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: '29d9697422a16f5e0a6c6e71a3f2b62966fca9e7', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: 'e6511ef127391d85a6b309dfd80c6839be213504', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: 'd3ffe82c06e560a28acb496fc2229260ed9af242' }), indeterminate && (h("span", { key: '2bd6d87e9aa7916fd0b66241fc8422d27e6b52f5', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: 'a697eb7d6ab5e11617ddb962d30992388b438ef2', class: "checkbox__label-container" }, this.label && h("span", { key: '0cfab93f48f153f48a93609952b03df28a62ac9a', class: "checkbox__label" }, this.label), this.description && (h("span", { key: 'ca60f0efa10e52076d20c6f9a6c6e075e854eae0', class: "checkbox__description" }, this.description)))))));
+        return (h(Host, { key: '3f791853cc40f9cea14b696c97a7e0ffcbe83b2f', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '5343b2eb0c188c8bba2ac717d62de26711b29aa3', class: className, htmlFor: this.inputId }, h("span", { key: '0e3c767e4cf73aa2daddfb574f48a24f8753bc32', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '518d7373a43419fb06b5f4a5cee587bfe469ff89' }, h("input", { key: '389abda596f18256d386f233e6472bd3e091f63a', "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: 'c3ea514dbc59eb64e8e9f58f8d66c9460e09fc12', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: '03f2234bf274c734f1ddcd30e3e7fcb03f7c0e9e', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: '3676909668e487ad3eced64ca05aef2617e6c99a' }), indeterminate && (h("span", { key: '8b114f66464a5c125888ad3571993b71a4c51a6b', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '5d28ddb318680a3373d4ca771c972ff223d38b25', class: "checkbox__label-container" }, this.label && h("span", { key: '4baefd6cb705a6b9181c4e3c5653016f2713d653', class: "checkbox__label" }, this.label), this.description && (h("span", { key: '4beba68c4124354bcb15251332bf25c666787b9d', 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

@@ -49,7 +49,7 @@ export class SwirlChip {
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: 'b4d76c88062465e2646fa7ca7d0c7db04bb0f9f1' }, h(Tag, { key: 'c9c9ed830168769e54d0a774486da011bdaec7b9', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '6f5d010858eaebc7012477c6de01f5c5bde71c8c', class: "chip__inner" }, showAvatar && (h("span", { key: 'b6c60ccb92aaa1fe0694f4d1e183c605fb8dd8da', class: "chip__avatar" }, h("slot", { key: '0af6eed958712310f19d7f70c1310a55ab89d9e3', name: "avatar" }))), showIcon && (h("span", { key: '5c91e5a998a108a086b7b100f74f649bdec07cc6', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '3a08fcd1a50156ec578994a000f17bd36593a7b5', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: 'b3cd34ce776fd6ffb4e29f118bc5c841df2324b9', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'e844e5ece17f9b41b3361381fbd17baf44f79e55', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '81e67bc9a0fc5a9327b5d1d766101ea0dd5eb53b', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, h("swirl-icon-close", { key: '6ad0709ea5e5166a96ca2cd005913cf88c2e598b', size: 20 })))));
+        return (h(Host, { key: 'be1a929a9efe4fe6a6fee27f08218063ac03a8ba' }, h(Tag, { key: '2c816c3c7ba603c3c403947d9e2f043ea00c4061', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: 'e570bc840be98fd23d6ff46517115e1ea6e1a111', class: "chip__inner" }, showAvatar && (h("span", { key: '18e721ec9c55170f398e2b9d2df0be97a54626a4', class: "chip__avatar" }, h("slot", { key: '952ae3c808156b4a3f9d53e45d00af33d8f1d070', name: "avatar" }))), showIcon && (h("span", { key: '179d91ff81b35f53469f8f5816b73b7fe324f744', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'fa57586bd59ebd9c9722f3bbf64c5c37ab1ab5e6', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '4f15b8329caa1ff0de30812340c1ef6efead3797', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '5e349c092244b2aae8b33e485aa8794e22745a2a', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '94d8906bbef7392a08326f0e6ab6c63c98b6979d', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, h("swirl-icon-close", { key: 'd2ebf4e2cb3ad637ccd42fdefc4ce1d2e4b27950', size: 20 })))));
     }
     static get is() { return "swirl-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,10 +5,10 @@ export class SwirlColumns {
         this.spacing = undefined;
     }
     render() {
-        return (h(Host, { key: '108d13a0f199ee797ddc7cbaa4e74d78a0314603' }, h("div", { key: '443741ebc1a3b6ab177933f82eafe7607c9d074e', class: "columns", style: {
+        return (h(Host, { key: '513552bd948ca6af6ce0514800f01150fa81aaea' }, h("div", { key: 'fd74ac26cfe66fc07aaa27ba5d54ffab58e1631a', class: "columns", style: {
                 gridTemplateColumns: this.columns,
                 gap: `var(--s-space-${this.spacing})`,
-            } }, h("slot", { key: '089c7cbacedbf46f3f68a2bb43344bf0931b9038' }))));
+            } }, h("slot", { key: '72c0008f8f6c08239659b779794455864f7f7b08' }))));
     }
     static get is() { return "swirl-columns"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ export class SwirlDialog {
     }
     render() {
         const className = classnames("dialog", { "dialog--closing": this.closing });
-        return (h(Host, { key: 'ae72af1bff06bfed4158ca4755728820e3ee846f' }, h("div", { key: 'e8fcfa1c95d0962d6df3935c2a85938d522e215e', "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: '6306a14d12ceefc84c4b1494acad0f2d35bb1a6b', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'e82741767a5f8b7ed5fd94495ea9539a955cfd31', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'ba0dc64c9aff68ec24dc7ff7efa2f3a7a5a48b96', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '7d44bbcad4beb51f81c3da8979b9309163abd5c0', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: 'fe80434e4e387bb57fd250b4c895a90357cbae10' })), h("div", { key: 'a7b89757fd155fd3d895e68c9678f7aaf1e3b114', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { key: '10ffdfb436bbf8b29485ed854aaf4d29b77b4fae', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '039c2cfbcc5fdc05ffaeab8757dbaa7b7b00b9fb', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        return (h(Host, { key: 'd4b6fd8393234d9e81359ca1b6018585ff0924e4' }, h("div", { key: 'e8e42a65753555fe86ef8267fa4c9a19ca60ef34', "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: '6e5002de6f9ec2dccfd53c45881f6dabbebb0919', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'ba3b3fb85e8745aa5861c1bb2cfe0f9cc2f279c3', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '203db977e1987d1ab86ee318e51115b858e6722e', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '0f88d2d9f324db85ec4cc5072e51eb9551e01fad', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '7dbb67e12049d84eb5ef04f622c92aa5025b19b4' })), h("div", { key: 'a986dd1db86ac0da42292d829ce1440794acacfd', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { key: '7eaa02fb24f64f86830ab9b0a948d63572029d30', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'b72a4893ecce6e598a6f0eee99da9c1c7dcc0d8f', 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

@@ -323,7 +323,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: 'ecfba2730ba928377d8d6b19261d116b25c4ab86', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: 'afecd0b52c304342393b2aab50c86399c9fb3daf', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '8adabf6930abecb3019e5ee62f886c1cb7ff2e2d', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
+        return (h(Host, { key: '12e13b8aa9fd2bb8df57222db776a84e3f299f0b', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '5f395f5801573fbafd612766c6835c86923ff726', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '4fc9c8938008355ea2c2d597fa44721eade06ca5', "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),
             });
@@ -337,7 +337,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: 'c14f2232f488e008260ac9207900a954f949b625', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: 'ff52b34f3195b6041ee491976291430abf435125', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'a9de3902eda65566f460bddeeee9087dce01d4eb', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'a5471d7f9f7b6394f1aad06786d6beb030a7ec0a' })))));
+        })), showPagination && (h("span", { key: 'a3dcb21e9cbf4a43182aad22e7ba880c60c033d4', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '216ec79c0621551c2d080205c9f3b2962f4ac473', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'e9e356417f3bf5d1bea5b40d93a476930250be86', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'a809decc344dc056444459310b9f0adfa5f3eb37' })))));
     }
     static get is() { return "swirl-file-viewer-pdf"; }
     static get encapsulation() { return "shadow"; }

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

@@ -160,7 +160,7 @@ export class SwirlFormControl {
             "form-control--is-select": isSelect,
         });
         const LabelTag = hasContenteditableControl ? "div" : "label";
-        return (h(Host, { key: 'ef59c6e22adfb532a339206a25561f5233b76518', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: '9310f5d56622e59c80e9df07e5da261854fe719d', class: className, role: "group" }, h("span", { key: 'ac03704ab17d60ec205e2642605585fd8c9087c1', class: "form-control__controls" }, h("span", { key: '14c9286022acebda7f10c736599bedb3890cfe3b', class: "form-control__prefix" }, h("slot", { key: 'a814ea6d9f2cf62b205393a145088682da17673a', name: "prefix" })), h(LabelTag, { key: '6fdde887a681fe00d75dc5f07c02149177c7803d', class: "form-control__label", onClick: this.onLabelClick }, h("span", { key: 'f179124b8e2223d5bea5a372c30739ab1f40b979', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: 'fec424e277cfedead22fcb93a43eeba719442bad', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && this.labelPosition === "outside" && (h("span", { key: '7d23ccce622cbc5e5cfa2100d3700e93d99bb724', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '11c1f7f8100eac44cc7065e69f48ab612fd843f9', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: '22859a1ac3ea26ff1129294f305de0614b93679a', size: 16, tabindex: "0" }))))), h("span", { key: 'f4e9316f9a4ccac1a30acf3c1e95b7992a268583', class: "form-control__input" }, h("slot", { key: '9603fcc756df503e7f105fec72a5b386561e6743' })))), showDescription && (h("span", { key: '2b77faa11de752c7c2e26c39b3e78e503fae4edf', class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { key: '38c121776f4a3e0e6228ecbb5aefbb267dac613a', "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '71764a03df564655771bdddba1371a6b66688f59', message: this.errorMessage, size: "s" }))))));
+        return (h(Host, { key: 'e19ca276e2ed9d864ae76cc3f2326c2358ab66c5', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: '42c690ce4921dd02f8b902a6962c66f215555cf6', class: className, role: "group" }, h("span", { key: 'fce8c4e0ef42e29f9ad98be8e4384385e57ccec0', class: "form-control__controls" }, h("span", { key: 'ad2d865b9341010914bfb0c2afaa02148beb9676', class: "form-control__prefix" }, h("slot", { key: '0dd85572eefa70dbd53f44ffc676c995f27f7265', name: "prefix" })), h(LabelTag, { key: '3fc4113f928bbf297aa9aef52ba47cdd8df5e764', class: "form-control__label", onClick: this.onLabelClick }, h("span", { key: 'fcb0def34be8f7cfaaf77e9af5468ec57dd6a05c', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: 'c8be49a00216c4e40b9462e3016809e3135ff384', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && this.labelPosition === "outside" && (h("span", { key: '5d8d752e4ff76230a6cbaf819813221dc6dca89c', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '77d29d174424b975629475aa0a31721eaf551030', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: '629bd48240fd4f51ec5664a75f5edd487553e473', size: 16, tabindex: "0" }))))), h("span", { key: 'ba147a2b9c5c9a05261046d0e71bd6cb5cac0541', class: "form-control__input" }, h("slot", { key: '2425c96dfcfe816cf2ad01ce7e2313bc041b6041' })))), showDescription && (h("span", { key: 'aec05151d554d13fdfd2a3e20efbacc7c015a6f2', class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { key: '4325e10ccb7198687de3ffd8219728354e21046d', "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: 'beb7be3ea5f818840ec341efde058cea76da85be', 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: 'bf9bc1766cfcb629fd6e96a2d1bfeb4a4cdd4cff' }, h("div", { key: 'd1af1f913cdb45bd8fa61191bc5cb7117f8b3ec6', class: className }, h("slot", { key: 'ce4b8339a97fcc6745e1c8583e4710f8b13fa9f1' }))));
+        return (h(Host, { key: 'fca78cf29bd4f4211be6847db9aaac8bbf80da67' }, h("div", { key: '596c975429a119ef762fcab78c669b1f2ff1aecf', class: className }, h("slot", { key: '6d19db0fb8056ee485cc7136ef3785049e368115' }))));
     }
     static get is() { return "swirl-form-group"; }
     static get encapsulation() { return "scoped"; }