@getflip/swirl-components 0.523.0 → 0.524.0

package/dist/cjs/swirl-visually-hidden.cjs.entry.js

@@ -9,7 +9,7 @@ const SwirlVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'be03c710ed99e7bbce312ee7ec5d4d5d34217d6d' }, index.h("slot", { key: '86243cbc43ef3e9c92347d2c9c77f78ba331fca6' })));
+        return (index.h(index.Host, { key: '1aa0aafdb301c13bc0170570b577345108d5e1eb' }, index.h("slot", { key: '958190a2e3194845c994b58024b25d8b5ed02f1e' })));
     }
 };
 SwirlVisuallyHidden.style = swirlVisuallyHiddenCss();

package/dist/collection/collection-manifest.json

@@ -356,6 +356,7 @@
     "components/swirl-icon/icons/swirl-icon-visibility-off.js",
     "components/swirl-icon/icons/swirl-icon-visibility.js",
     "components/swirl-icon/icons/swirl-icon-voice.js",
+    "components/swirl-icon/icons/swirl-icon-volume-off.js",
     "components/swirl-icon/icons/swirl-icon-volume-up.js",
     "components/swirl-icon/icons/swirl-icon-warning.js",
     "components/swirl-icon/icons/swirl-icon-waving-hand.js",

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

@@ -56,7 +56,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'd440556c2534042f582b172e58c89a71866d8429' }, h("slot", { key: '51efb93e43377f66792de872d872e90ad0107b57' })));
+        return (h(Host, { key: 'c8cd14f92cef7d34f59f1883d0c95724171b8425' }, h("slot", { key: '27729fdcf545689f6a6e4b05c62df2cacfc24e15' })));
     }
     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: '09d6ea76cc0669170e8bb8aad12324d8f5bdef14' }, h("div", { key: '7fcdaa8fa8ba66ed56f7720d505c92fd7dd946d1', class: className }, h(HeadingTag, { key: '05f86d8068da1a5e0a21ce51cb56ae0547645486', class: "accordion-item__heading" }, h("button", { key: 'a45136cd1e4521bddcafaa16ead3aa3183f3f51d', "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("slot", { key: '532e6f1d485bc917d1429a9e43fc033daa94a3d6', name: "media" }), h("span", { key: '61c7b77fdb3299924097e3baa36d6541a850d266', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '31560ab938c5f8247b977a2ded65c39259d0f0ad', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: '129a959c7277016701c55682e76e3d0a1b4459a1', name: "trailing" }), h("span", { key: '9f9f52016c0082662c8e25dc0ce03bf0a80c27ab', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '29191f5278d53ea1825c56d5107bb6a8a8f0870a', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '1fda6ac131b0a815fa5d8010439de46cc4285f56', glyph: "expand-more", size: 20 }))))), h("div", { key: '233cd7448f3c552ad7b574c63cf2442ad1feccd4', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '072c04c0b7e15bc8eb65146d42179a9bba0c9623' })))));
+        return (h(Host, { key: 'b297a697fbbe8121acd9f966f074c271e76972ed' }, h("div", { key: '6656e55c34dfa06504e11e36d70eb357a1a46b63', class: className }, h(HeadingTag, { key: 'c8251970ff06e54143d299bbeeaefc6d5b5d2244', class: "accordion-item__heading" }, h("button", { key: '5ce40ba197c4240ff3a773a5f6bb76bd294c6c76', "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("slot", { key: '2858c801a6f82512e6cbd8167c800d8377e7c35a', name: "media" }), h("span", { key: '2bdb695a299037fee4888f302443973616fad4da', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '7c11ea5d728793547c1a0f1dab90aaa5aa4c59da', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: '5af2efe8d4465b25bf12fedf37b238284e7a25be', name: "trailing" }), h("span", { key: '4a6dd7c3c8cf8f0963b7c3a42773d98dcbf0e539', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '829fd01d3b23ee30533e6f98ece26d5e0c2d05d8', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '379315557a2beeba3859c2881db12da3f1926840', glyph: "expand-more", size: 20 }))))), h("div", { key: '94859d42d121cbbe5efc57ba0e63a22d589ac1a9', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '166871ec6623b8a4b06d1807d61cb93819b95d0a' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class SwirlActionList {
         });
     }
     render() {
-        return (h(Host, { key: '73a668b1fd3531635442ba496c900030f11d24b1' }, h("div", { key: 'bb77cca10848e2096ff694bd58e29654163ed7db', "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: 'b16547c53c72f8dc5f0c6d9e33fa75bcfbe91979', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '5442b552f660a65607f637d1e658ce03cc0102df' }, h("div", { key: '163eb820320b9013cfcdc8853c147aacdbd77e50', "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: '0056a5e3b7f6d6e9723fee4e5fb00d8bb9ed10e5', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class SwirlActionListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: 'f32a9b84b313c6cdd6f4d5c8da62dedd3621c2b8' }, this.hasSeparator && (h("swirl-separator", { key: 'd4f6d8e304c74b7b04c51286998871503e628715', spacing: this.separatorSpacing })), h("div", { key: 'c5248441fc8aa6bdbbc44343f4b8aad5a9d73b94', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '8da06dc7e9d9828ea9680d0df19a332d7d2aa71f', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'a88437d2b7f3875f00f03d886de2688b36fcf543', spacing: this.spacing, align: "stretch" }, h("slot", { key: '52329df1d56058f1837914f8547ea98cb64e14de' })))));
+        return (h(Host, { key: 'c353e574f05fe969e8da34d168d49b303393e63c' }, this.hasSeparator && (h("swirl-separator", { key: 'a2ee97295f8008855b8b49df50a16c81ab846a4a', spacing: this.separatorSpacing })), h("div", { key: '7acec8b0a4b14d44c993d27e9972ce424cded911', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'b44a649448a5317d7047098ece65d455d7da34de', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '259331672891860273deeaa0b21e633dd3ad18aa', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'd08ae1429c8f4ed5079ebba44216952e0e5fec52' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: '32d65dc28415f6a9cddf111f62d4106ed90b2c1d' }, h("span", { key: '4491d2d2a924ded411ac6e40b5195563d2bb79b5', class: className }, showImage && (h("img", { key: '89d8be5b1cb0f6dfc0d6a86636cd89e51094dd1b', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: 'b6c68e36d4bd4deed51000d27133ec7d0a86851f', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: 'ab8397613faf92e7bd56601e2ad84eedb742dc7a' }, h("span", { key: '518c69f11b7206663037775198573e97a17086ea', class: className }, showImage && (h("img", { key: '08de1d2e7ff432842bbc4fa35fd7758a41e71b24', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '76b4a209381c29ed208ae9a56b16080ff4a0ffb2', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,12 +4,41 @@
   align-items: center;
   flex-direction: column;
   --swirl-avatar-radius: 50%;
+  --swirl-avatar-size: 2.5rem;
 }
 
   :host * {
     box-sizing: border-box;
   }
 
+:host([size="3xs"]) {
+  --swirl-avatar-size: 1.25rem;
+}
+
+:host([size="2xs"]) {
+  --swirl-avatar-size: 1.5rem;
+}
+
+:host([size="xs"]) {
+  --swirl-avatar-size: 1.75rem;
+}
+
+:host([size="s"]) {
+  --swirl-avatar-size: 2rem;
+}
+
+:host([size="l"]) {
+  --swirl-avatar-size: 3rem;
+}
+
+:host([size="xl"]) {
+  --swirl-avatar-size: 4rem;
+}
+
+:host([size="2xl"]) {
+  --swirl-avatar-size: 9rem;
+}
+
 :host([variant="square"][size="3xs"]),
 :host([variant="square"][size="2xs"]) {
   --swirl-avatar-radius: 0.25rem;
@@ -39,6 +68,8 @@
 .avatar {
   position: relative;
   display: inline-flex;
+  width: var(--swirl-avatar-size);
+  height: var(--swirl-avatar-size);
   justify-content: center;
   align-items: center;
   border-radius: var(--swirl-avatar-radius);
@@ -69,11 +100,6 @@
     outline-color: var(--s-focus-default);
   }
 
-.avatar--size-3xs {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .avatar--size-3xs .avatar__initials {
     font-size: 0.625rem;
   }
@@ -83,11 +109,6 @@
     padding-left: 0.125rem;
   }
 
-.avatar--size-2xs {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
 .avatar--size-2xs .avatar__initials {
     font-size: 0.625rem;
   }
@@ -97,11 +118,6 @@
     padding-left: 0.125rem;
   }
 
-.avatar--size-xs {
-  width: 1.75rem;
-  height: 1.75rem;
-}
-
 .avatar--size-xs .avatar__initials {
     font-size: 0.75rem;
   }
@@ -111,11 +127,6 @@
     padding-left: 0.4375rem;
   }
 
-.avatar--size-s {
-  width: 2rem;
-  height: 2rem;
-}
-
 .avatar--size-s .avatar__initials {
     font-size: 0.75rem;
   }
@@ -125,11 +136,6 @@
     padding-left: var(--s-space-8);
   }
 
-.avatar--size-m {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
 .avatar--size-m .avatar__initials {
     font-size: var(--s-font-size-base);
   }
@@ -139,11 +145,6 @@
     padding-left: 0.625rem;
   }
 
-.avatar--size-l {
-  width: 3rem;
-  height: 3rem;
-}
-
 .avatar--size-l .avatar__initials {
     font-size: var(--s-font-size-lg);
   }
@@ -153,11 +154,6 @@
     padding-left: var(--s-space-12);
   }
 
-.avatar--size-xl {
-  width: 4rem;
-  height: 4rem;
-}
-
 .avatar--size-xl .avatar__initials {
     font-size: var(--s-font-size-xl);
   }
@@ -167,11 +163,6 @@
     padding-left: var(--s-space-16);
   }
 
-.avatar--size-2xl {
-  width: 9rem;
-  height: 9rem;
-}
-
 .avatar--size-2xl .avatar__initials {
     font-size: 3.375rem;
   }

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

@@ -68,6 +68,127 @@
     margin-left: calc(-1 * var(--s-space-4));
   }
 
+.avatar-group--centered-stack {
+  display: inline-flex;
+  align-items: center;
+}
+
+.avatar-group--centered-stack .avatar-group__badge {
+    display: none;
+  }
+
+.avatar-group--centered-stack ::slotted(*) {
+    display: inline-flex;
+    border-radius: var(--swirl-avatar-radius);
+    box-shadow: var(--s-shadow-level-1);
+  }
+
+.avatar-group--centered-1 ::slotted(:nth-child(1)) {
+    box-shadow: var(--s-shadow-level-2);
+  }
+
+.avatar-group--centered-1 ::slotted(:nth-child(n + 2)) {
+    display: none;
+  }
+
+.avatar-group--centered-2 ::slotted(:nth-child(1)) {
+    z-index: 2;
+    box-shadow: var(--s-shadow-level-2);
+  }
+
+.avatar-group--centered-2 ::slotted(:nth-child(2)) {
+    z-index: 1;
+    transform: scale(0.833333);
+    margin-right: calc(var(--swirl-avatar-size) * -0.083333);
+    margin-left: calc(var(--swirl-avatar-size) * -0.333333);
+  }
+
+.avatar-group--centered-2 ::slotted(:nth-child(n + 3)) {
+    display: none;
+  }
+
+/* centre */
+
+.avatar-group--centered-3 ::slotted(:nth-child(1)) {
+    z-index: 2;
+    order: 2;
+    margin-left: calc(var(--swirl-avatar-size) * -0.333333);
+    box-shadow: var(--s-shadow-level-2);
+  }
+
+/* right */
+
+.avatar-group--centered-3 ::slotted(:nth-child(2)) {
+    z-index: 1;
+    order: 3;
+    transform: scale(0.833333);
+    margin-right: calc(var(--swirl-avatar-size) * -0.083333);
+    margin-left: calc(var(--swirl-avatar-size) * -0.333333);
+  }
+
+/* left */
+
+.avatar-group--centered-3 ::slotted(:nth-child(3)) {
+    z-index: 1;
+    order: 1;
+    transform: scale(0.833333);
+    margin-left: calc(var(--swirl-avatar-size) * -0.083333);
+  }
+
+.avatar-group--centered-3 ::slotted(:nth-child(n + 4)) {
+    display: none;
+  }
+
+/* centre */
+
+.avatar-group--centered-5 ::slotted(:nth-child(1)) {
+    z-index: 3;
+    order: 3;
+    margin-left: calc(var(--swirl-avatar-size) * -0.333333);
+    box-shadow: var(--s-shadow-level-2);
+  }
+
+/* inner right */
+
+.avatar-group--centered-5 ::slotted(:nth-child(2)) {
+    z-index: 2;
+    order: 4;
+    transform: scale(0.833333);
+    margin-left: calc(var(--swirl-avatar-size) * -0.333333);
+  }
+
+/* inner left */
+
+.avatar-group--centered-5 ::slotted(:nth-child(3)) {
+    z-index: 2;
+    order: 2;
+    transform: scale(0.833333);
+    margin-left: calc(var(--swirl-avatar-size) * -0.5);
+  }
+
+/* outer right */
+
+.avatar-group--centered-5 ::slotted(:nth-child(4)) {
+    z-index: 1;
+    order: 5;
+    transform: scale(0.666667);
+    margin-right: calc(var(--swirl-avatar-size) * -0.166667);
+    margin-left: calc(var(--swirl-avatar-size) * -0.5);
+  }
+
+/* outer left */
+
+.avatar-group--centered-5 ::slotted(:nth-child(5)) {
+    z-index: 1;
+    order: 1;
+    transform: scale(0.666667);
+    margin-left: calc(var(--swirl-avatar-size) * -0.166667);
+  }
+
+.avatar-group--centered-5 ::slotted(:nth-child(n + 6)) {
+    display: none;
+  }
+
 .avatar-group__badge {
   z-index: 3;
   display: inline-flex;

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
+const centeredLayoutArrangements = [1, 2, 3, 5];
 /**
  * @slot slot - Your avatar components
  */
@@ -27,25 +28,32 @@ export class SwirlAvatarGroup {
         }
     }
     layOutAvatars() {
-        if (this.layout === "diagonal") {
-            this.avatars.forEach((avatar) => {
-                avatar.style.position = "";
-                avatar.style.zIndex = "";
-            });
-        }
-        else {
+        if (this.layout === "horizontal") {
             this.avatars.forEach((avatar, index) => {
                 avatar.style.position = "relative";
                 avatar.style.zIndex = String(this.avatars.length - index);
             });
         }
+        else {
+            this.avatars.forEach((avatar) => {
+                avatar.style.position = "";
+                avatar.style.zIndex = "";
+            });
+        }
+    }
+    getCenteredArrangement() {
+        const fittingArrangements = centeredLayoutArrangements.filter((arrangement) => arrangement <= this.avatars.length);
+        return fittingArrangements.length > 0
+            ? fittingArrangements[fittingArrangements.length - 1]
+            : centeredLayoutArrangements[0];
     }
     render() {
         const className = classnames("avatar-group", `avatar-group--${this.layout}-stack`, {
             "avatar-group--has-badge": Boolean(this.badge),
+            [`avatar-group--centered-${this.getCenteredArrangement()}`]: this.layout === "centered",
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: 'db0fba81fc616434e7efa68534fdb940cedad7d6' }, h("div", { key: 'd8c744147498c6d6980980abfef224480037010e', "aria-label": this.label, class: className, role: this.semantics }, h("slot", { key: '44c853fedcf3db8d6869b9dd5ba0a8cc06fcbce5', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '4c47557ac791b9d62312fac213a053263a56ae40', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: 'd380083e116cf7e25e1fc258bd9618d85f82468a' }, h("div", { key: 'f0e4360cf381bb5b8fe34f1856b48216aba95ae1', "aria-label": this.label, class: className, role: this.semantics }, h("slot", { key: 'ca53eed3ef6fd319c453633042137591779070f5', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '142d895678c99d05ee9ad90e041d5d30a4d33a1c', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get is() { return "swirl-avatar-group"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +112,7 @@ export class SwirlAvatarGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlAvatarGroupLayout",
-                    "resolved": "\"diagonal\" | \"horizontal\"",
+                    "resolved": "\"centered\" | \"diagonal\" | \"horizontal\"",
                     "references": {
                         "SwirlAvatarGroupLayout": {
                             "location": "local",

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

@@ -60,3 +60,18 @@ export const WithSquareAvatars = TemplateWithSquareAvatars.bind({});
 WithSquareAvatars.args = {
     layout: "horizontal",
 };
+const TemplateWithCenteredLayout = (args) => {
+    const element = generateStoryElement("swirl-avatar-group", args);
+    element.innerHTML = `
+    <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="l" variant="square"></swirl-avatar>
+    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="l" variant="square"></swirl-avatar>
+    <swirl-avatar label="Jane Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=c" size="l" variant="square"></swirl-avatar>
+    <swirl-avatar label="John Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=d" size="l" variant="square"></swirl-avatar>
+    <swirl-avatar label="Jane Smith" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=e" size="l" variant="square"></swirl-avatar>
+  `;
+    return element;
+};
+export const WithCenteredLayout = TemplateWithCenteredLayout.bind({});
+WithCenteredLayout.args = {
+    layout: "centered",
+};

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

@@ -11,11 +11,11 @@ export class SwirlCarouselSlide {
         const className = classnames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: '95b07c3e3faa5b8bd28eedb5a9884d11bb564e63', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (h(Host, { key: 'e43be5975a5399ef11cf176d19cd3f8b5af326a3', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
                 aspectRatio: this.aspectRatio,
                 flexBasis: this.width,
                 minHeight: this.minHeight,
-            }, tabIndex: 0 }, h("slot", { key: 'dd7c65765f02d5eee33d628a918dbe9278e246aa' })));
+            }, tabIndex: 0 }, h("slot", { key: 'd6183581ebae542cc66340041e7c1617a4b5587d' })));
     }
     static get is() { return "swirl-carousel-slide"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-color-input/swirl-color-input.js

@@ -54,11 +54,11 @@ export class SwirlColorInput {
         const className = classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: '595707c26e5710eea9d19c88cc1409793945fcf7' }, h("div", { key: '1254d609784eb6b39ae19439175e15d3cebe76ee', class: className }, h("input", { key: 'e889a0f7bcf8de3d5383c2646e7b28b507d632ce', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: 'fd4bb137d06fe36f887b632376cddcdb2c2a1c92', swirlPopover: this.pickerId }, h("button", { key: '29844127550e5ae92aa4ee8f81aa787783e73ac1', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: 'eaebb304551ee3505a7f74460c9bd5e3a6ed9e7a' }, h("div", { key: '6cadb205b2706440c7e8f7c8305cf2c6fbb18fce', class: className }, h("input", { key: 'f2de040b5debb7b0bdd07ad596973d0236e1ac9f', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: 'f3e6cf803d871526a9b1460a1c0d39119a8c66c2', swirlPopover: this.pickerId }, h("button", { key: '9407e1137bb3ed0087102557962fef7bdfe18a7e', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
                 backgroundColor: this.disabled
                     ? "var(--s-border-subdued)"
                     : this.value,
-            }, type: "button" })), h("swirl-popover", { key: 'bd9d3a732ecf6602f877c735ae9a96f988880e14', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '158a6c266b56387b3f2ac65cf2f872f5cab0e07f', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'd807907c6fc6fa743457bb086c796fe9f5351dc3', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: '3b13428dbd94c203b9786324830adf77c6b59b17', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '6b05ec734a0bee7b8a51706f40c4d4a36034294a', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'df0cf8f535354a57376419903f6739427ce59d8f', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get is() { return "swirl-color-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-console-layout/swirl-console-layout.js

@@ -158,11 +158,11 @@ export class SwirlConsoleLayout {
             "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
             "console-layout--hide-content-header": this.hideContentHeader,
         });
-        return (h(Host, { key: '5d09a8c63d410fa62308cda784202952c7ae8c13' }, h("div", { key: '2a4f2d497c61546bacce29bf9fef4d91168c909d', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: 'fc85c4aa6003c983daa352afaf37759d9b7ed12c', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'a5acaf8a5027a691f488ef8f6c85ec1cdd38ea2f', class: "console-layout__header" }, h("div", { key: '0b173a4668e0885fa2eae85d8642ad9603a8f3c3', class: "console-layout__logo" }, h("svg", { key: '35019948c32be3eea97e499b3ba830716f358854', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9e999a1d54e068d2c2e9c6a62133144bf66c636c', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), h("swirl-text", { key: '9867ab49457fbb979fac29eb07d9cfdcd90b8616', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '9bcad767766a47f47757fdd9afcfeab6860d3232', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '7f07a5dbd86126548375913abcc3552184f1d778', name: "navigation" })), h("div", { key: '797ea642b8aac5314a7c4f4271064468f9ac2a99', class: "console-layout__user" }, h("slot", { key: 'c411a0c3a5bd5907b34dd52365b3b25c55d9383b', name: "user" }))), h("main", { key: '0c71deabe7137081a284f277f0d5320fe561a48b', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'cada32f38a0a7f09dbc1980271430347a8c7064a', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '2e934dfd45e82516d290763ce481a314d2e168ea', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: 'e16c33016d4d274e30283db2da03a4482f0d66dc', class: "console-layout__app-bar" }, h("span", { key: 'd816c0f56caad845fad084a0baa9a3de8e7ddf3e', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'd45285afa211eec8076c66887fba0feb9b7c54fc', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: '15d2f52c18697e566c4dd1d3bdb9db576ad0dcec' }, h("div", { key: 'c054039010eae676edb7f10aad03fc7fa9a9a8c4', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '6c9a4c509e903b0e44ac05bacd9430681a64920a', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'af1b7fefeac8af4efef4958c7eb730e424752932', class: "console-layout__header" }, h("div", { key: 'f5db1d27aefdf046f49dfcef3a1e9a9555ec916b', class: "console-layout__logo" }, h("svg", { key: '08f2f49df60a0587d260a3fc2304b7cee5ee3617', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4d6748b153c86e5620c4e4c59ff1dc25b7c11c8e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), h("swirl-text", { key: '970514ed57833a9529f311a5c43467c4daa672c6', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '9fb6ab4b03fb2ac61117592059cb32c103024deb', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '01a623e3e09bc87b0c602dcd2fa7da423fb07308', name: "navigation" })), h("div", { key: '976030dfa1856cc1dea4a5c5ff64fd1ea97d3089', class: "console-layout__user" }, h("slot", { key: '3283d6b75520d4abf292c9a5d07e2578e9cb381b', name: "user" }))), h("main", { key: 'e12320ffd46285bc10daaa7b782d776697e9ce9d', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '901d795e7ff7c56da51bd3a7dd2a0407cfa2aa82', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '78d1b2f14e1dd09d5cc2b5783dff3f7e994a73aa', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: 'ff530c79297f657e646af25aa83578bcaae2fbb8', class: "console-layout__app-bar" }, h("span", { key: '65f29c7006a92a8fe924a8e455fa32ad0f28c4db', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '7218846d10839b1994da82ccfbc291b415077de4', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
                 ? this.hideNavigationButtonLabel
-                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '07504a35afcbc6e9e4210422ebaf6c07438d423d', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'b77b11b9ae84b744df31b71df7209c127f46e114', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'd12872a31d256eb38af549b990c36674b2f9251a', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'd22e35a265257382c81113f04e5844c4d90d591d', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '3a0d7cc797cfdb90796f695a7a48d5c84fbf5641', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: '504ad20a00c7287b53e011381110725764affea7', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '9f508cd05667433ab5f3f6058386c0447a077e76', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: '3e0d05f38fcfc7b1e6a4a1e6bd8adb213d33a83a', class: "console-layout__heading-container" }, h("swirl-heading", { key: 'c99e0af968e10942714e78049707780bedb5f473', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: 'c91b6ff09387f989add0966e76305b2f169a2522', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '5f9bd046fb38987374ef70310a8d7fe10584070f', class: "console-layout__heading-container" }, h("slot", { key: '952dadcfb09b0409906f1571bee0991704a1c0c4', name: "heading" }))), h("div", { key: 'b29870e34d1acc32917e0f1c3f0e7b1c85e94ee7', class: "console-layout__content-header-tools" }, h("slot", { key: '23a42d65e4641a59b11205b68bbbf8f0d3d4089e', name: "content-header-tools" })))), h("div", { key: 'e4faed336c026e9104850664235a49da0d0089a3', class: "console-layout__integration", style: contentStyles }, h("slot", { key: 'eabe7e379db5c8a3574f332553bb93f733e1c3a0', name: "content" })))), h("footer", { key: 'a4dbf7ec10a443607970fd5cf4f61d645b5c71ec', class: "console-layout__footer" }, h("slot", { key: '4958d2838da54be6626563695685d29dc4854654', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: 'e1eb0783268ff8afde5feb6936a0d4ba105f6908', class: "console-layout__overlays" }, h("slot", { key: '9e085357507c590cc4a4e19c93493885abce6adc', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'fbf0b8ded8f0fa74baa5b2c9acfdcdf9bcf57183', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'd982f91e9d5beb99082187e40105785c136ee38b', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '1d63dc04cb72ba2db7ab055b3d748c59abdc379f', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'ef836c5b943a749cdcee7db1a87d5bc16f5e9a27', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '36ea5994c2837090daac583ea08623b4c3c0570a', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: '7dfaddb3e368d213faa55567736979710d534742', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: 'adc51b4211fa79b094e80604f7d2dab126659019', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: '05bbbb590b2c1fc0d495fa61c9de4bbaaf89014d', class: "console-layout__heading-container" }, h("swirl-heading", { key: '31dc5f25083685e038d1d126cb594695ec20361e', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: 'e27d210f844ec818be9507e5f492528f575a9969', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'dde72801d7baade4b3537cb295fd427b7de8924f', class: "console-layout__heading-container" }, h("slot", { key: '444c84c0e8ab0c2794b22e3fbb854ae56c7866eb', name: "heading" }))), h("div", { key: 'b13f0da62021e6ae9279b392b8b3c1469f30b771', class: "console-layout__content-header-tools" }, h("slot", { key: 'e4020c482ae5c060f62d7a5b3535d43ff8e43955', name: "content-header-tools" })))), h("div", { key: '3bef306687d7786801db4a51cc3bc42c3da7040d', class: "console-layout__integration", style: contentStyles }, h("slot", { key: 'bb96d82dfceb770864dae5db21d8d4c3ab560089', name: "content" })))), h("footer", { key: '50cfb94c33f2eae3823b79a2aba1961287d5129b', class: "console-layout__footer" }, h("slot", { key: 'ef963b0a2354e05cb1a7ccbae2db12fe9bfe102e', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: 'b4f047c7670949069ad5f2e4b63618d267b66a80', class: "console-layout__overlays" }, h("slot", { key: 'd45aacca9d750da73294745eb8a6910e372673dd', name: "overlays" }))))));
     }
     static get is() { return "swirl-console-layout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-data-cell-stack/swirl-data-cell-stack.js

@@ -27,7 +27,7 @@ export class SwirlDataCellStack {
         const descriptionId = this.description
             ? `${this.headerId}-description`
             : undefined;
-        return (h(Host, { key: 'a63550af72a804da74a92ff3d19ac1f1f50bd182' }, h("div", { key: '9572b46766eafbee9c9fb2a89eb51034472a269a', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '40c470271dad53fb0832ceab2fe00ebdc11a0142', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: 'befe50fa7b268347646e19d09fe613bd67acbc6f', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '36ccea005fbbe06b420da190605d9840335fb96a', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: 'c23bd91b5c01601dac978df88271e0ad99712802', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '95166c249ac09364f6f1b653bd684d34d510bd01', class: "data-cell-stack__cta" }, h("slot", { key: '5dc62a632890360302961907796bd68566311f7a', name: "cta" }))))), h("div", { key: 'e560cdef5e3576c32e39fcaebf675122796f2e8f', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: '3a09feb0f59097e4770318c751fa7095ff5dc9f7', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: '14d6213f21bb5e162342389d3e89501d529e490b' }, h("div", { key: '515c84a9eda22a77b9f9b5985412d56dfb6a8e07', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '3da984d135c10750099a3d11e79563033da059b9', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: 'db3b9a71276d0340dd1d1c58755b1d38cef35ab4', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '30da89e037e37a7fa17b66b1e435651de49a0690', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: '11fb9329d4a82dbb03e145d7ac8c476eec72dfba', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '6279ad312fea30a67c6b4994ca6e1affba407216', class: "data-cell-stack__cta" }, h("slot", { key: 'e438aa0e938642b99510734ff7aa3a5186fab10c', name: "cta" }))))), h("div", { key: '5cc83894daa410486ad4b3a9b264dfb8d5599829', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: '782785d26eeb69614af9d2c9af8a7dbd896361b7', onSlotchange: this.onSlotChange })))));
     }
     static get is() { return "swirl-data-cell-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-date-input/swirl-date-input.js

@@ -218,7 +218,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '9268c3541330cab8173bddb4682b5b60a7737aa0' }, h("div", { key: 'c39cb00aa7d28353cdfd394aa3da5462b89318ef', class: className }, h("input", { key: 'a560447922c7f0b0e1fa9a700765d59bc5f20f6a', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: 'ffad693a85647b0e843c56ef392c25203f5a5180', swirlPopover: `popover-${this.id}` }, h("button", { key: '6773dbc41845564906d8e55aa3b0349f0ecd0bcf', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'd08c1d0836688314cb710fc95621ad4860838326', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: 'fb4ea5d008b3179da9fe07351ca7b3f6b76ab544', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '7c7d87288342a8a6a55589644f333fbe34e2f464', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: 'b98f4ce502fa59e2ec04c5ed7056b150270e9f37' }, h("div", { key: '74351898abc21ab9de0ff9d8fc5e6a48d2e0e5c3', class: className }, h("input", { key: 'f065fac3e979f0073ff6749179d8ccb55defd5f2', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: '750c24d6f3ae3b13725e12b67679261d0104364e', swirlPopover: `popover-${this.id}` }, h("button", { key: '076d164200a3284e17dca26df53b3b2acd4b2cb1', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'a72bdb92c6e765c3ed8e667ffec31fde4032883b', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '47a15f43d41278c108fd71fe84054f58efed7a88', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'b7d73a9fc73c17e8ccdd56afe75633881d590380', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     static get is() { return "swirl-date-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-date-picker/swirl-date-picker.js

@@ -39,7 +39,7 @@ export class SwirlDatePicker {
             "date-picker--fixed-max-width": this.fixedMaxWidth,
             "date-picker--fixed-aspect-ratio": this.fixedAspectRatio,
         });
-        return (h(Host, { key: '0675273330fed8ab424a7ed75606231435faa554', onClick: this.onClick }, h("wc-datepicker", { key: 'e35b36ddc410d005a5a45f3c38a5417c25439776', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
+        return (h(Host, { key: '9110b47b52b8b09309df55d6ca01cce8bcd17ee3', onClick: this.onClick }, h("wc-datepicker", { key: '00457e3ed4f00be2e9c95ee13d85ee7c9be33d46', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
     }
     static get is() { return "swirl-date-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlDescriptionList {
     render() {
-        return (h(Host, { key: '869980c3e724bcb6171c83d5b1779feb210f48bc' }, h("div", { key: '3e055083bd26561f6946d893ff5caa36af4158cc', class: "description-list", role: "list" }, h("slot", { key: '9e39c3b9d0268fe1ff90772c6dc098e95bccf400' }))));
+        return (h(Host, { key: 'f343afcbac75a18e8649bdc56cace594bb32fad6' }, h("div", { key: 'd088799675f0ab6c422831fe2baa47fbdeb81d37', class: "description-list", role: "list" }, h("slot", { key: '640d7da6662aec8f6a98b03af6b68b608c09374b' }))));
     }
     static get is() { return "swirl-description-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class SwirlDescriptionListItem {
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,
         });
-        return (h(Host, { key: 'be5bcbb5d859630b58dfd1d2c4eaadda879c3ab3', role: "listitem" }, h("div", { key: 'ac3c62e303afe2646b08092a1f4b12350ac87598', class: className, part: "description-list-item", role: "group" }, h("div", { key: '1fab3bd58b970874afe5b874172b4de67a543488', class: "description-list-item__inner" }, h("div", { key: 'c7913d4d76891e19d48149877f736930caef9e41', class: "description-list-item__text-container" }, h("div", { key: '6cb05bb0927295ea082357365db6e89a84bae403', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'c24a409ddb6f9cf10e36a7d79051e4e64f320436', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '4962bf094d9f5f3a93616da46091b4d22374f3fe', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '10baaa739bf625d5c91e362f86233e41ca209341', size: 16, tabIndex: 0 }))))), h("div", { key: 'b73e4053d05ddf6666114a286dd6e8f1bc9558cb', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: 'a11d3e71b26d34cd25fd19fe9e55c61526ea0d17' }))), h("div", { key: '6944341d4241176c7e32b705d3a92124aabe457e', class: "description-list-item__tools" }, h("slot", { key: 'c6390087ab7a44a2bb6b30bf5873f036cf764564', name: "tools" }))), h("div", { key: 'feff56b0f35f85a194285f366d5da7791aa2e921', class: "description-list-item__additional-content" }, h("slot", { key: 'b6564d43acfc4782879c18fa95605dfdc48f5a13', name: "additional-content" })))));
+        return (h(Host, { key: '7320af95feb4393029f216132e6928ae9f82a581', role: "listitem" }, h("div", { key: 'ca9294165c821d87cd5dd3ed397856bb753d1dee', class: className, part: "description-list-item", role: "group" }, h("div", { key: '5b1dcfc4655cc911d8a39134b1d8e7ea3cd5f9ff', class: "description-list-item__inner" }, h("div", { key: 'f4ef2483f13fef96ee004644b70fac0269c7dcca', class: "description-list-item__text-container" }, h("div", { key: '541fca3f3f4ac3c6550bc5eabbd921e57e874142', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '7c9b08aa6c245e45ca4f2f568f30b772967df424', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: '46a7f9afe0b7a4ade744ae32a4ccead5bacb3003', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '3d69a75ce4cf351cd8030dc8fa25c9d403ca6f78', size: 16, tabIndex: 0 }))))), h("div", { key: 'a2542ab30113ae4706031503fd86cbcebd96593d', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '8b243805edfbefbfa6f1d06d89c9cc9adfbc75b9' }))), h("div", { key: 'fda5cfb8009b85386286a1e60e8fffa58ca7f894', class: "description-list-item__tools" }, h("slot", { key: '6d2a8ae00abe6ab13bfcdc97a732fd1e54d235a8', name: "tools" }))), h("div", { key: 'aabb2eabf0f71e8049b3fdde48a6a4b7bcf8e219', class: "description-list-item__additional-content" }, h("slot", { key: '4d4dcc24ea3988eb619b349381f93194e42a37df', name: "additional-content" })))));
     }
     static get is() { return "swirl-description-list-item"; }
     static get encapsulation() { return "shadow"; }