@getflip/swirl-components 0.363.6 → 0.365.0

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

@@ -337,17 +337,17 @@ const SwirlTreeViewItem = class {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (index.h(index.Host, { key: 'c68c5a13aca8fa7fa733629279f11c1dc0528870', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: '40b756080539d584fa99f671ebdaf078ef729010', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: 'f9db5e722e20bfa566d79c28995e2c99be21c466', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (index.h(index.Host, { key: 'd085c2b88c107c203ce428a67712da04323f8e24', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: 'b0ad24c16fcf8e64fac7f76720ad474f34a25aab', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: '1df2bdeb1171dd86c2439d0e475ccd5f9b3d8ca5', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (index.h("span", { key: '432dfb7398abb9a954bb8d612bb4f4212a2b7642', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '01bc68f0c459247e21154d4bf37b90d98cf0dbc7', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: '54de776c869a0705e629f923ce2919b855ea49bc', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: 'd19607cd33b1caa4ef1bfcaf928ae0529a5d9672' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: 'c3b1ad10734ba61328ccbc04b20b69509c5cba17' }, index.h("span", { key: 'e1b60f39411b78b7531bb4d47d84ce7fefc86500', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '8989e21fc167a67a1c3c6eb95105027ad98f7279', class: "tree-view-item__label" }, this.label), index.h("span", { key: '5f2721c78ba4899371b08b70eafdd8b612e0e6c4', class: "tree-view-item__tags" }, index.h("slot", { key: '55e723f67fac9332287529df25a401c151d82ad2', name: "tags" }))), index.h("ul", { key: 'e7031518fd8c07ee49fd43e6bd75d528b911b9a2', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (index.h("span", { key: 'c1a7d0fd676447956630dcc37569fb0830c2099a', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '44d0850b2d47787d97d405a554f518a1428290fd', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: '0f52b403d04a371971c985900e18c7bd6f5f1f5e', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: 'ed7c79bbedfddcd631404f6b910b7a3b0320a829' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: '95353c0276d3629919a19952490b50c4f79674bf' }, index.h("span", { key: '4c73f3ecef5022087a72874912003a2abad5d221', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '061dc160720af1c7e22339a10297e42c7c241007', class: "tree-view-item__label" }, this.label), index.h("span", { key: '4bacb2b0968245f5c4a9e84a010653bf6513efdf', class: "tree-view-item__tags" }, index.h("slot", { key: 'f3cc5dda408a78092033ecc1bf305e8a55241870', name: "tags" }))), index.h("ul", { key: 'c845651262d91941a9748d2b0412104c75485874', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
                 display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, index.h("slot", { key: '99d4fed4a0c7eddb1fd05823bc99e27f5e1d46e1' })))));
+            } }, index.h("slot", { key: 'dfffc7c21716f9c00da9c2e6224daced78ba3ad2' })))));
     }
     get el() { return index.getElement(this); }
 };

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

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

package/dist/cjs/swirl-video-thumbnail.cjs.entry.js

@@ -10,7 +10,7 @@ const SwirlVideoThumbnail = class {
         this.durationLabel = "Duration";
     }
     render() {
-        return (index.h(index.Host, { key: '12a8ce5c44fcc01076e0270143998be607ec3873' }, index.h("button", { key: '09f84d385b3085985f17f3f9eb6fc931203b7dcf', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '01f586628b93bd67f4f7a52ccf068d6a9f258ba7', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '1451304285e2924880753f426994371094f5577a', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'b63df651db1aa38995f907ebc69bde184ad734f1' }, this.durationLabel), this.duration)), index.h("svg", { key: 'f00136c309825b3f36976e27af6ef5261cf2307e', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '9fc79b09dd39d8f4ef91db5cd855747814ba4999', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (index.h(index.Host, { key: '885b5026b5ce2119760c6b6ca144be001b16b991' }, index.h("button", { key: 'c3e08d6910079201c125750d126dca751873f378', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '48dd71f050a4e9be31c91a6cdee8b656a812e9c1', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: 'be560b7007ab8687ae11950fe1446adc5a048edf', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '97b59d520740e6288bc3522da2408ac39d5412a5' }, this.durationLabel), this.duration)), index.h("svg", { key: '6e367099743e2b8cd03ec28a4065be848014fb1e', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '9cbbbdd73f4555f8bccd4418b9750af6224ed00d', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
 };
 SwirlVideoThumbnail.style = swirlVideoThumbnailCss;

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: 'd0253868fa1a5a2665bb8bea4674895820715708' }, index.h("slot", { key: 'c44b9990392736181953def9a00a520c0f9d94c4' })));
+        return (index.h(index.Host, { key: '2629887aba4136ddd1d58b8eef851f87cb916281' }, index.h("slot", { key: 'e294868680464e61f643daaff98b7f07cbb2b405' })));
     }
 };
 SwirlVisuallyHidden.style = swirlVisuallyHiddenCss;

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

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

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

@@ -54,7 +54,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '140186d77dedf25334b975668382e442664ecc61' }, h("div", { key: 'fcfeb3e6bbe1bd5cf26ff17ed2c00c290f9c1f25', class: className }, h(HeadingTag, { key: '70de4f5a2e68fb4b3df574ce749ac469c4a89b92', class: "accordion-item__heading" }, h("button", { key: '598bf04f92bc1fb94253aba1122c731bb98a3670', "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: '9a2199333edf327c8aa86a5e22207b661e33d5c3', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '5e57bcf299f4a784cd17e29c9ebaa78111b2c280', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '4cb086eda6d58addda26c47b54d42cce5989fe77', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: 'd2ed36ed6bf5e819e19bfb0c679868dc6cc4d923', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '0bcc167c67f0e3d7dc9e94b0cb4f30267badb86c', glyph: "expand-more", size: 20 }))))), h("div", { key: 'f8f14164ed9f64cbf60bdcda85cc5f0feefb0ad4', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '30c54870dda4bf4682f48373426c336cc7b0b862' })))));
+        return (h(Host, { key: 'bf24d1cae76ed824c925b80adb2ac6b5be606023' }, h("div", { key: '9f3dc67e8a670f451cba083d416461aa4ac16749', class: className }, h(HeadingTag, { key: '170838a1750fb89568500f70a93f91de36f41d5b', class: "accordion-item__heading" }, h("button", { key: 'c18a4cbe335f688a94c61ed1802f7a0978d74771', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: 'da8e2e070591c3ff0de1face3c62a91c5ff19731', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '0bcfac9c58151f160b2bece95475d104d3dbfb05', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '701edfe1826e393845316e3815454de002b9ad94', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '3b76c29e09f641025af072622ef05f8acc37f9e3', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '952a2755bb44491e2b9155fd22d1817feed7ecf4', glyph: "expand-more", size: 20 }))))), h("div", { key: '6332cee85a9630c0280e72518ace7ad41cbbb368', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'b506d4b57c138cc18722b34320155599b472e70b' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -89,7 +89,7 @@ export class SwirlActionList {
         });
     }
     render() {
-        return (h(Host, { key: 'fc7ebb5df8998a9192107106120ad70711590d03' }, h("div", { key: 'be2231e59e4d062ac79780ddc250e6337a74f39d', "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: '98324ce031be7c0666e1c0f425718f9ebc86d7e6', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '0dd1f57febfea783b0e1dee429104b12d4819a10' }, h("div", { key: '85865f3e4611208d541134b51fbd8725a0dabc5b', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: 'e39aefd6e63c0f0bf43d75a50314773ea1996312', onSlotchange: this.setSectionSeparator }))));
     }
     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: '7bfa42bf3f2b323e10062a5f936b67cb72cce922' }, this.hasSeparator && (h("swirl-separator", { key: 'cfc8583b332a13653d5956a45461d362af20baa8', spacing: this.separatorSpacing })), h("div", { key: 'b35da16e174668393122c764d9d9036729267a7e', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '6b8774ffb9c32c9804d73f6dbbc69874bebb1b82', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'e18cc67c6c8e18af98ca93e82eeb8fc542e988d8', spacing: this.spacing, align: "stretch" }, h("slot", { key: '64ef602444e47871b115792f4128cd8ecf050390' })))));
+        return (h(Host, { key: '511a8b83e8c4f68e029406b60669253570bcc48d' }, this.hasSeparator && (h("swirl-separator", { key: '42b740aaa40bc5dbe03da925c702f4bbe613817b', spacing: this.separatorSpacing })), h("div", { key: '66e3818e57a2b506174a39ba81f52d2228da8e6b', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'a1bdb4cdf8bb9849ccab3656f9eb8b88ffe4b132', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'c964cd1d0d54201e7c977e16a4dbb84cc0d5d359', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'b3d173498c5b9c8f16b9d95e60230bdb8bce3110' })))));
     }
     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: 'f70423e5cbaf2d6ebf7e051a18ebb9ea3d9c3218' }, h("span", { key: '6a7332c2bcdfef2d4c80c1703f6c8e6d21b0e0d5', class: className }, showImage && (h("img", { key: '58720fe3b1feb0575f8a0d6b872b45d4eec57806', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '1cededc1291b27d73c25d01163736e17cf296243', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: '0678d24af53e36995ce49232513940672f1623fe' }, h("span", { key: 'a2e2fef78199d7d91d25c55591ad7dfd7136d036', class: className }, showImage && (h("img", { key: '7005b6b43b9215c96a4a04944d2ac25d2536f9b3', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '0d1539585d6e4d278b9f24c4db68728d9e3f89d9', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ export class SwirlAvatarGroup {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: 'f17874f56ac78e25750d455dc5adeb08141e13f9' }, h("div", { key: '01325fd700a357838683f7dabc9b6269e6ad000b', class: className, role: "group" }, h("slot", { key: '9cb31e7eb07d87e8333273134021cd1a82665512' }), this.badge && (h("span", { key: '549f3533b3aa413fde00af14ff68e99698145af3', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: '3d323ce2f50de15cda4630897705da5446856e20' }, h("div", { key: '49b71c1a65716a95d9885ae16cb6fb18422cdbfc', class: className, role: "group" }, h("slot", { key: 'c5176ddecea970fae882e6eb7b7c5d9c2462561b' }), this.badge && (h("span", { key: '6de3511f5027ae3eb6abedfa053bf6504538b808', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get is() { return "swirl-avatar-group"; }
     static get encapsulation() { return "shadow"; }

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: 'a13a0d3f14e4da4520497ec73c3f5376f304d9da', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (h(Host, { key: '6b0a900b2a8c73fd92c45f79b13ee8090455581f', "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: '3957b6fe93fd41b426c10f76fd74d7c77716da0e' })));
+            }, tabIndex: 0 }, h("slot", { key: '5ff3a989f4eb4a17b08024b08e4eeaa5d809f336' })));
     }
     static get is() { return "swirl-carousel-slide"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,6 +10,7 @@
   display: inline-flex;
   line-height: var(--s-line-height-base);
   cursor: pointer;
+  flex-grow: 1;
 }
 
 .checkbox:focus-within .checkbox__box {
@@ -163,11 +164,17 @@
 .checkbox__label-container {
   display: inline-flex;
   margin-left: var(--s-space-8);
-  padding-top: var(--s-space-2);
   align-items: flex-start;
   flex-direction: column;
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.checkbox__label-container {
+    padding-top: var(--s-space-2)
+}
+  }
+
 .checkbox__label {
   font-weight: var(--s-font-weight-medium);
 }

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

@@ -55,11 +55,11 @@ export class SwirlColorInput {
         const className = classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: '838e1a09ef9ad9d82601c0ee9ad8038bd56a4612' }, h("div", { key: 'f4d945f1fe8a59e88eddd8a138704800799a7bde', class: className }, h("input", { key: '19e865d95352f64718c8760421c48517e269e2df', "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 }), h("swirl-popover-trigger", { key: '8f93a120b41c7fdf6e07041583e8f316997b56eb', swirlPopover: this.pickerId }, h("button", { key: '86479c97ecdfa8e5aa513aeaecfca10481b8071a', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: '06442d64beb2fbd63d6b57dd06385739f62c678c' }, h("div", { key: '04156a847fe4dd071d58f5f1203ed63ad13dd3aa', class: className }, h("input", { key: 'fbc8643bc5aec60c89ff4c0ba0dea3ecc60ca635', "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 }), h("swirl-popover-trigger", { key: '77c784240913faa8092c4de8456d0e69527acd84', swirlPopover: this.pickerId }, h("button", { key: 'e30a2c1979f56861788ceece1e0fe1141f496873', "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: 'ac56511df4157711ea089b5e71b9e8b621b582f8', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '7acc5cc2bf262debb52e20a4d6707346eb3f7e83', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '9752896cb0cb4cdc54fc5bb4c1ea50569959aad2', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: 'f13ae51925a2667f7f64a97fe39b13de6f9ce7e7', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '2fd33ab39b57e21dcb8fec555e31e32400b85d76', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '2c4ca5d20a15345f61a008ec81ef6864a21869f3', 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.css

@@ -2,6 +2,7 @@
   display: block;
   width: 100%;
   height: 100vh;
+  --console-footer-height: 4.25rem;
 }
 
   :host * {
@@ -47,6 +48,17 @@
   }
     }
 
+@media (min-width: 768px) {
+
+.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main {
+      grid-template-areas:
+        "content"
+        "footer";
+      grid-template-rows: 1fr -webkit-min-content;
+      grid-template-rows: 1fr min-content
+  }
+    }
+
 .console-layout__sidebar {
   position: fixed;
   z-index: var(--s-z-30);
@@ -61,7 +73,8 @@
   border-right: var(--s-border-width-default) solid var(--s-border-default);
   transition: transform 0.15s, box-shadow 0.15s;
   transform: translate3d(-100%, 0, 0);
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr -webkit-min-content;
+  grid-template-rows: auto 1fr min-content;
   grid-template-areas:
     "header"
     "navigation"
@@ -108,11 +121,12 @@
 
 .console-layout__user {
   overflow: hidden;
-  margin-top: var(--s-border-width-default);
-  padding: var(--s-space-16) var(--s-space-24) var(--s-space-24);
+  padding: var(--s-space-16) var(--s-space-24);
   border-top: var(--s-border-width-default) solid var(--s-border-default);
   background-color: var(--s-background-default);
   grid-area: user;
+  min-height: var(--console-footer-height);
+  box-sizing: border-box;
 }
 
 .console-layout__main {
@@ -129,6 +143,15 @@
     "content";
 }
 
+.console-layout--has-footer .console-layout__main {
+  grid-template-rows: 4rem 1fr -webkit-min-content;
+  grid-template-rows: 4rem 1fr min-content;
+  grid-template-areas:
+    "app-bar"
+    "content"
+    "footer";
+}
+
 .console-layout__app-bar {
   position: sticky;
   z-index: var(--s-z-30);
@@ -241,3 +264,48 @@
   display: flex;
   flex-shrink: 0;
 }
+
+.console-layout__footer {
+  position: sticky;
+  bottom: 0;
+  z-index: var(--s-z-20);
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
+  border-top: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  grid-area: footer;
+  width: 100%;
+  min-height: var(--console-footer-height);
+  box-sizing: border-box;
+}
+
+.console-layout__app-bar--custom {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  padding: 0;
+  border-bottom: var(--s-border-width-default) solid transparent;
+  background-color: var(--s-background-default);
+}
+
+.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top)
+  .console-layout__app-bar--custom {
+  border-bottom-color: var(--s-border-default);
+}
+
+/* Hide empty slot containers */
+.console-layout:not(.console-layout--has-custom-app-bar)
+  .console-layout__app-bar--custom {
+  display: none;
+}
+
+.console-layout:not(.console-layout--has-footer) .console-layout__footer {
+  display: none;
+}
+
+/* Hide default app bar when custom app bar has content */
+.console-layout--has-custom-app-bar
+  .console-layout__app-bar:not(.console-layout__app-bar--custom) {
+  display: none;
+}

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

@@ -1,9 +1,11 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { isMobileViewport } from "../../utils";
+import { debounce, isMobileViewport } from "../../utils";
 /**
+ * @slot app-bar - Custom app bar content (replaces the default app bar when provided)
  * @slot content - The main content
  * @slot content-header-tools - Button positioned next to the heading
+ * @slot footer - Footer content positioned at the bottom of the layout
  * @slot heading - The main content's heading (only rendered if "heading" prop is not set).
  * @slot navigation - The main navigation
  * @slot overlays - Overlays like dialogs, modals and toasts
@@ -17,6 +19,14 @@ export class SwirlConsoleLayout {
         this.logoText = "Admin";
         this.navigationLabel = "Main";
         this.showNavigationButtonLabel = "Show main navigation";
+        this.mainScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+            scrolledToBottom: false,
+        };
+        this.onMainScroll = debounce(() => {
+            this.updateMainScrollState();
+        }, 16);
         this.onBackButtonClick = (event) => {
             this.backButtonClick.emit(event);
         };
@@ -52,8 +62,21 @@ export class SwirlConsoleLayout {
             else {
                 this.deactivateSidebar();
             }
+            // Update initial scroll state
+            this.updateMainScrollState();
         });
     }
+    updateMainScrollState() {
+        const newMainScrollState = {
+            scrollable: this.mainEl.scrollHeight > this.mainEl.clientHeight,
+            scrolledToTop: this.mainEl.scrollTop === 0,
+            scrolledToBottom: Math.round(this.mainEl.scrollTop + this.mainEl.clientHeight) >=
+                this.mainEl.scrollHeight,
+        };
+        if (Object.keys(newMainScrollState).some((key) => newMainScrollState[key] !== this.mainScrollState[key])) {
+            this.mainScrollState = newMainScrollState;
+        }
+    }
     onWindowResize() {
         const mobileViewport = isMobileViewport();
         if (!mobileViewport && !this.sidebarActive) {
@@ -111,15 +134,22 @@ export class SwirlConsoleLayout {
                 width: "100%",
             }
             : undefined;
+        const hasAppBarSlot = Boolean(this.el.querySelector('[slot="app-bar"]'));
+        const hasFooterSlot = Boolean(this.el.querySelector('[slot="footer"]'));
         const className = classnames("console-layout", {
             "console-layout--sidebar-active": this.sidebarActive,
-            "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
+            "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton && !hasAppBarSlot,
+            "console-layout--has-footer": hasFooterSlot,
+            "console-layout--has-custom-app-bar": hasAppBarSlot,
+            "console-layout--main-scrollable": this.mainScrollState.scrollable,
+            "console-layout--main-scrolled-to-top": this.mainScrollState.scrolledToTop,
+            "console-layout--main-scrolled-to-bottom": this.mainScrollState.scrolledToBottom,
         });
-        return (h(Host, { key: '0eaea20bfd3144b9d237237ceacab45e23af06c1' }, h("div", { key: '4a67d6d91d1f6a737723df984c2dc987f39c7dbd', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '3c63a30e2925a1a0f698ad82639c4356e7aec867', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '91dcb536d2dffa26d44d14ad3dbc4ec635025ecc', class: "console-layout__header" }, h("div", { key: 'be8bf1fd07ac1ffa851aeffa46dbb31becf9e713', class: "console-layout__logo" }, h("svg", { key: 'b7d3f93e7554163c31eddb963dea090b2ab7ca0e', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0498173d081447a31b54ef5c290ad784fb5f8f82', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: '8cf4a7aa4406c8e48f896394147e9afff5958726', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '97b68a10b9efdce8dd7b062c90b13c9b99a282c5', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: '25de6371a1c6d90fe6b96c86d7d830e40bac38f9', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '215ec10e6248677824b5fa4239c15f53f9dbc1ae', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: 'f7bd543d20e93aad003348d790690da8769a83cd', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '6c426019c6d51f296a4e5b3bbb2654f34ec00b1a', name: "navigation" })), h("div", { key: '2fbe3cc0d207b17e87d9b1a899ccf4eab7ad01f4', class: "console-layout__user" }, h("slot", { key: '4e458a582a528623bf2e881a937b294115745a08', name: "user" }))), h("main", { key: 'a7f9d099c002c83390beed9c1db9031720b98ac7', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'fdc1d6e6856b2d2b1debda04f8ec9b6453e71a21', class: "console-layout__app-bar" }, h("span", { key: '0faab32a7984201b1cbd323bf35f5c41b0fa48fa', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '639ec7a6581260098964a9d8c694126de2f831c4', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: '3feb32d17adb2d5f27562b156411ca717af61539' }, h("div", { key: 'debde7c8624afd25b5ba3b013453fd1eded0a9bc', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '7c086cbbb1e00633b7d4d139a4a42ae7c9ad32c3', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '6333336a1f36f81ae515d64c65b515838aa39bd1', class: "console-layout__header" }, h("div", { key: 'd45bd2e5fa9cd7cb74f392edb55cd45d529cc563', class: "console-layout__logo" }, h("svg", { key: 'edd3b2a3fa780c60a9fe0f2617ebde5f6641d165', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3ec18d926c48849543cc3264448e800f4df7f7ee', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: 'a90df7c07342da08f5d8f8978573835bdf94ca15', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '1f947332f46afd5dd95dc1dcab71444d51f26aa0', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: '16a4b874fe910f26c49cb5fc0596cfef1e3e32bd', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: 'b34cbb2d31fe67145094ec85118056a0dc3ae1e6', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '724e9c39273782aaf5985dd536e84bf16285d322', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '0c201029b9da6fbb5a747841820ed79da8cb64b4', name: "navigation" })), h("div", { key: '7e635d9af6c2ab9e9842b51cb5e01b44e86b2e4b', class: "console-layout__user" }, h("slot", { key: '2de457e96bdea470c0168c98435101c010566541', name: "user" }))), h("main", { key: '49c7b227d03342c6c4f907a359a00423d898dab0', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main", onScroll: this.onMainScroll, ref: (el) => (this.mainEl = el) }, h("header", { key: '02c2c9c3e267d881c3755d8f2002bc6d5ac5d55b', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '0ddba57b6b9fcedaec295c624e492f84c54e2f73', name: "app-bar" })), h("header", { key: 'd7cb50894279282f378b9be8e0e24466e3a42901', class: "console-layout__app-bar" }, h("span", { key: 'da05899a81f1f9ec3878ee5506f2a342b168ee05', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'cf7eee0ae6930fdb839c14a79da80b9d61ca3e8a', 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: '0c2c6de05bef524da707e350b4096ea15ca34914', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '450527b200578aa1d91e54b2b0ba01683a9a831d', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'eb42c73ea6a05f62cece19134c9501e73415836a', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '0f0591c57e64ca606a2780ce9055943af432c7d6', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'd0e945cb8dabd4ef231b72a97712f8c629569df9', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '30cb7fd42d480f7bbcecdd5215e589f2c4cda2b1', 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: '7e35e8ee35d3345d079a90540d57a9cd9c580044', class: "console-layout__heading-container" }, h("swirl-heading", { key: '39dad1864b78f9e69d5a1d9b8d5e620a1d147e06', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '1ca38eff79d03204671312529af0a707b60f2619', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '4e8e686e766a3e62f26faa32fd1fb794c69a6ed3', class: "console-layout__heading-container" }, h("slot", { key: 'f3f72a3b56af01427d7cad65fe913dea748f7fc2', name: "heading" }))), h("div", { key: 'b97c09b14d6560987363aa72f5ffbed887bd7fef', class: "console-layout__content-header-tools" }, h("slot", { key: '76a8a36c284f0efcebf26fcd51edada332689872', name: "content-header-tools" }))), h("div", { key: 'c6410dee92f664923ca41c410301aa7eaf036e19', class: "console-layout__integration" }, h("slot", { key: 'e5bf0e529e7e88143b331c3c02b17299a3c1c044', name: "content" }))), h("div", { key: '569a839957d11e56dd6dcd00e3c8b3665c7d318b', class: "console-layout__overlays" }, h("slot", { key: 'f668f28cd68319fb852c0fd8a2efe69c08bf2f44', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '90e4ed5433da7b5b3841460981bc8752cd1a938a', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'd5d010584a38d9cb9c902cad722baa39cd6b8a66', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'b53f1cf4d62c53c8334c452ae6e20e9e2f55ba1e', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'd132b87056e56cf7ae18dd24ea4d362b6d11e023', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: '3d4a1a14ef53484570bdefa9e2e4f0bd4414a23b', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: 'e4cb1d5f1e4e556410be3b4e43fc2b29defcc5b8', 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: 'aefa8a72c3dacd70abd8ef9b96a287ceec5b79b7', class: "console-layout__heading-container" }, h("swirl-heading", { key: '9a3735f7ebb76b275482a89ec09dd6253de93342', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: 'f44f0998d2f684ccf6837a3c136a3fb02368a164', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '5fc66526fd17d6f034d8db8019ffe2e83c8ce5b8', class: "console-layout__heading-container" }, h("slot", { key: 'f17e8b7cfca98b17fb35b241eae2c198ff3382bb', name: "heading" }))), h("div", { key: '79a98fe15564c4159550f1d9a8b2d2b475efd23f', class: "console-layout__content-header-tools" }, h("slot", { key: 'ea8c7f7dabfc875c305a1fae2b9de2ab2322777a', name: "content-header-tools" }))), h("div", { key: '74c46236e9cad2f43b8ab387c6696bfdec191b49', class: "console-layout__integration" }, h("slot", { key: 'be4fa01a3e1b1f8f9efad167b0643044ae09d07e', name: "content" }))), h("footer", { key: '1299cbb5a96d8f4315047128d764dba31aee2023', class: "console-layout__footer" }, h("slot", { key: 'bb3685ba02498d7e8c489124ef82911e42476b63', name: "footer" })), h("div", { key: '1a3325aaff5ef4d22bcdf0bc2400265ae826b69d', class: "console-layout__overlays" }, h("slot", { key: '3e4dbb1a22b521083d74406b3a94f8d789ac5ddf', name: "overlays" }))))));
     }
     static get is() { return "swirl-console-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -373,7 +403,8 @@ export class SwirlConsoleLayout {
     }
     static get states() {
         return {
-            "sidebarActive": {}
+            "sidebarActive": {},
+            "mainScrollState": {}
         };
     }
     static get events() {

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

@@ -29,3 +29,87 @@ SwirlConsoleLayout.args = {
     showHelpButton: true,
     subheading: "Subheading",
 };
+const TemplateWithBothSlots = (args) => {
+    const element = generateStoryElement("swirl-console-layout", args);
+    element.innerHTML = `
+    <swirl-app-bar slot="app-bar">
+      <swirl-button
+        slot="heading"
+        icon="<swirl-icon-arrow-back></swirl-icon-arrow-back>"
+        label="Back"
+        variant="ghost"
+      ></swirl-button>
+      <swirl-stack justify="center" orientation="horizontal" spacing="8" slot="center-controls">
+        <swirl-button label="All posts" variant="flat"></swirl-button>
+        <swirl-button label="Groups"></swirl-button>
+        <swirl-button label="Saved"></swirl-button>
+        <swirl-button label="Scheduled"></swirl-button>
+      </swirl-stack>
+      <div slot="right-controls">
+        <swirl-button hide-label="true" icon="<swirl-icon-more-vertikal></swirl-icon-more-vertikal>" label="Search"></swirl-button>
+      </div>
+    </swirl-app-bar>
+    <swirl-box padding="24" slot="navigation">
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <a href="#">Dashboard</a>
+        <a href="#">Users</a>
+        <a href="#">Settings</a>
+      </div>
+    </swirl-box>
+    <div slot="user">
+      <swirl-box padding-inline-end="16" height="100%">
+        <swirl-stack justify="center" align="center" height="100%">
+          <swirl-stack align="center" orientation="horizontal" spacing="8">
+            <swirl-avatar label="John Doe" size="s"></swirl-avatar>
+            <swirl-text>John Doe</swirl-text>
+          </swirl-stack>
+        </swirl-stack>
+    </swirl-box>
+    </div>
+    <div slot="content">
+      <div style="padding: 20px;">
+        <swirl-heading level="2" text="Complete Layout - Scroll Test"></swirl-heading>
+        <p>This tests both custom app-bar and footer with extensive scrollable content. Both header and footer should maintain their positions.</p>
+
+        <div style="margin: 20px 0; padding: 20px; background: #f0f8ff; border-radius: 8px;">
+          <swirl-heading level="3" text="Dashboard Overview"></swirl-heading>
+          <p>Welcome to your dashboard. This content area will scroll while the custom app-bar stays fixed at top and footer at bottom.</p>
+        </div>
+
+        ${Array.from({ length: 10 }, (_, i) => `
+          <div style="margin: 16px 0; padding: 16px; border-left: 4px solid #007acc; background: #fafafa;">
+            <swirl-heading level="4" text="Dashboard Item ${i + 1}"></swirl-heading>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            <div style="margin-top: 12px; display: flex; gap: 8px;">
+              <swirl-button label="View" variant="flat" size="sm"></swirl-button>
+              <swirl-button label="Edit" variant="flat" size="sm"></swirl-button>
+              <swirl-button label="Delete" intent="critical" variant="flat" size="sm"></swirl-button>
+            </div>
+          </div>
+        `).join("")}
+
+        <div style="margin: 30px 0; padding: 20px; background: #e8f5e8; border-radius: 8px;">
+          <swirl-text weight="medium">Scroll Test Complete</swirl-text>
+          <p>You've scrolled through all the content. The footer should be visible below!</p>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" style="width: 100%;">
+    <swirl-box padding-inline-end="16" height="100%" >
+    <swirl-stack justify="center" align="center" height="100%">
+      <swirl-stack align="center"justify="end" orientation="horizontal" spacing="8" width="100%" >
+        <swirl-button label="Cancel" variant="flat"></swirl-button>
+        <swirl-button label="Save" intent="primary" variant="flat"></swirl-button>
+      </swirl-stack>
+      </swirl-stack>
+      </swirl-box>
+    </div>
+  `;
+    return element;
+};
+export const WithCustomAppBarAndFooter = TemplateWithBothSlots.bind({});
+WithCustomAppBarAndFooter.args = {
+    heading: "Dashboard Content",
+    subheading: "Complete custom layout example",
+    maxContentWidth: "600px",
+};

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

@@ -193,7 +193,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '4a0f0ce222b59a7eed91542990157785bb5ab28f' }, h("div", { key: '7acae58f53c03140cb798920127234f8548a4a72', class: className }, h("input", { key: 'a122c7ab0c4240cf93e63ed7b0cba33fc66a7718', "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.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" }), h("swirl-popover-trigger", { key: '76a86326f97fda3498eb9bc22fed5b36f7b3c7be', swirlPopover: `popover-${this.id}` }, h("button", { key: '1914a98f6cd52d653ec62ee6b0a811fe5ba7bb4a', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '24a17616c0c38ccbf56cb5236d43e8929c7832c3', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'a58eb1ae1abd78be0ed4a1c5c8bdb45d2f099a26', 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: '4c3e4afdaced9ad02c98b5bd6f3786cb6e630a02', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: 'dfdcee29c1198a91f487f95303a25a351af9360f' }, h("div", { key: '421758bdfb0227068bebfeffbbcec9e633af01aa', class: className }, h("input", { key: 'd952d450aaa1e8c7fcda535b8574c985cf924a0a', "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.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" }), h("swirl-popover-trigger", { key: '9b8a3918fffd902a55f6e05d80dd074050ae8aa7', swirlPopover: `popover-${this.id}` }, h("button", { key: 'f2c0b68ff346b189ec1c87cfa512da7f60705258', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '22036bb077e80763db35526f9b5a2e5ba7749959', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'c3d73d88335c7b1736249bb816df3c98a2c96f00', 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: 'be4b56f558745d0ab85387cc41db391a86e8828b', 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

@@ -32,7 +32,7 @@ export class SwirlDatePicker {
         const startDate = this.startDate instanceof Date
             ? getISODateString(this.startDate)
             : undefined;
-        return (h(Host, { key: 'b0e42e25cc8171377773508c9bc30acda9e3959a', onClick: this.onClick }, h("wc-datepicker", { key: '2ffe6b0d35b1ddea14cae13685ea7347e8694d00', 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: 'b65ecce22e01a0457adf4a34769c1913f3aeffa4', onClick: this.onClick }, h("wc-datepicker", { key: 'e47c178eeb45168c4578a659101c10dfceac1e9f', 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: '5b57f521124bb0dd1b9eb21bed725c68db25eda4' }, h("div", { key: '2ba7667773803fefabb809770123a86c39dae111', class: "description-list", role: "list" }, h("slot", { key: '0d13cd211424666cb6707a770363864c674374e7' }))));
+        return (h(Host, { key: 'e694dac352c50a28b0f35dda8d4e067c9399eb17' }, h("div", { key: '9d64ffc820e098f492297af7745c9b36af5da0dd', class: "description-list", role: "list" }, h("slot", { key: 'd5573abce8e07e5240bf060c1058fed54059e5ff' }))));
     }
     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: 'f245666ed7da628287055771a2eb1279d83b8ff4', role: "listitem" }, h("div", { key: '400adcceaaefb4a0699d0bbed1d1e81644c4e95e', class: className, part: "description-list-item", role: "group" }, h("div", { key: 'ce78b41ef7af0ee6763025db0732c97eb132d0fa', class: "description-list-item__inner" }, h("div", { key: '7b58a3f487ed5c8d86e4f7fbac08f9a75a9d563f', class: "description-list-item__text-container" }, h("div", { key: 'e275d08ec89caa01f99a2fdee0f739cf7b605107', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: 'fe81a7f996438d87ffe0c78d7615795ccaba51ad', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'c9acfcefeba6ac0145d1dc292d5e51485eb765df', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '5902d21cddddc686da8e7897b2d30198e51f0052', size: 16, tabIndex: 0 }))))), h("div", { key: 'fee79015ea172d5bf1b65aead95b5e99a9465673', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: 'c0766600916a078fc55f67bed7964f002eef03fb' }))), h("div", { key: '5f517c9108e5fe1f28fbe3e1b80eaf3fc5b383ce', class: "description-list-item__tools" }, h("slot", { key: 'f13f2914e140c04b6144503952cfa75d481c4d11', name: "tools" }))), h("div", { key: '37e1757e3f22d6e89121965f8dc843517b24361b', class: "description-list-item__additional-content" }, h("slot", { key: 'd1ce6fe905f324661f2ddcd27b62fa274a6a336a', name: "additional-content" })))));
+        return (h(Host, { key: '8014ee8d849b95bab7ae1cc682a3d0bbe3e074e0', role: "listitem" }, h("div", { key: '6b202c77e7012ec0aca3a9b980e75480c1109065', class: className, part: "description-list-item", role: "group" }, h("div", { key: '242cfe61b946a5322b4c1ab23beb02d6dd5c3bad', class: "description-list-item__inner" }, h("div", { key: '9b76595e162cdb97f3308490af5ab0644078fd1c', class: "description-list-item__text-container" }, h("div", { key: '02db73c687ef62d819842254e2dbe8bbf8fdd69b', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '0b4837ec0bf37b8fe75cbe3242ed3a83fd8ff1bd', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'f1e6c484c32f3df6d8e6dfab19ab4ad313273ff1', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '2f3cbe85180a75972dbab80daec81c708425fd7d', size: 16, tabIndex: 0 }))))), h("div", { key: 'bdcb6c648ff3370248c4b345e8939182c8b2f6e4', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '656381c9109ae0436572945c1c48d80c483c1ea9' }))), h("div", { key: '7100d26dc8930335b1c425fc7591dcfd4ead42d4', class: "description-list-item__tools" }, h("slot", { key: '24b18f9b9543677fd051f58c8a755ec914d30495', name: "tools" }))), h("div", { key: '36ee7c5b466de605604c17ee189797f67c12451f', class: "description-list-item__additional-content" }, h("slot", { key: 'aa50290a8b8e1870308df632c88003b32d144f89', name: "additional-content" })))));
     }
     static get is() { return "swirl-description-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-clap.js

@@ -8,7 +8,7 @@ export class SwirlEmojiClap {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'cbc2c8dd347b0decd3cadc72f0a951b82322d76b' }, this.size === 16 && (h("img", { key: '31211ce025a0450a6cc1be706ff2081620087bb3', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '6268337046342913a201c9664cf070ac9f5ec8f3', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: 'e58d48707e83d6c641c03ab59a991296fdd43fe9', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '4e29639ea08cce0f09fad719ecb9345438fb81a9', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: 'd8145152a1d500d30ec0a1061f34b05f233285d2' }, this.size === 16 && (h("img", { key: 'ce9fe6be764d0edb7e99b774f9c988509b90a6db', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '3a95758faa7eb55ce62516d4b948d6394812a746', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '2c9b32c6b109b244b27845dc79c15af55df9c3a0', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '2c47f977da2466747c1115761f8931c747fa3e95', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-clap"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-happy.js

@@ -8,7 +8,7 @@ export class SwirlEmojiHappy {
     }
     render() {
         const className = classnames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '352089060615d86b5b8ab669fdf7f5bda0e1881e' }, this.size === 16 && (h("img", { key: '6b1b9ce5a793c6502717dd8e2eb3056b479175c5', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '4ed968f7b65f296d985c7ed483850ba15902fdcc', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: 'a6383a5f05f1c4ba19f37f67650836625b1d7ff7', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'e7622246eee82257c5f2c4e8ebe14e15c50615a8', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: '619129c7e28e73a3723d09bb20f5db4104664e52' }, this.size === 16 && (h("img", { key: '5798a5cf99caf50942b860c7999175abdff20e9d', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '1ca5db3a8e5d1d32b216f3522320179637f910da', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: 'd96185a2e87c597f75693636dd58572e6682d4bb', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'e695555af8ab00a6bcc9fdaf0528b885fc08eba4', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
     }
     static get is() { return "swirl-emoji-happy"; }
     static get encapsulation() { return "shadow"; }