@getflip/swirl-components 0.364.0 → 0.365.1

package/dist/cjs/swirl-table-row-group.cjs.entry.js

@@ -41,10 +41,10 @@ const SwirlTableRowGroup = class {
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (index.h(index.Host, { key: 'f07932134c69f6a87c12298d3f4b5bf4ed83b88b', class: "table-row-group", role: "rowgroup" }, index.h("div", { key: 'e17baa04f240e479ea78b646f503cbe46e9bf992', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (index.h("swirl-button", { key: 'e31e0035ee8955ac8ab93bf27445700c2f99c820', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), index.h("span", { key: '3f482c8dde2eaeac7b19b70d3cce3af32c78f0a0', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { key: 'd7ee9097aea330707819efad0a72922ad4fbb583', class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { key: 'a8a4770d1f1c0af6c785d1d9a958e360b42ef9cf', content: this.tooltip, position: "top", positioning: "fixed" }, index.h("swirl-icon-info", { key: 'b2c5e2bc1726ccee3f1a198aad4a38ba068b9462', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("div", { key: 'da5b337f86c526638127821738457da3b4562cc8', class: {
+        return (index.h(index.Host, { key: '7ed817de9256030e39bfcceb210b758d9337da62', class: "table-row-group", role: "rowgroup" }, index.h("div", { key: '5bf82404aa5f1314cfc7a17821753c364e564410', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (index.h("swirl-button", { key: 'a73f8b5ae7cbf858cb521ef592a68e45b22369fe', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), index.h("span", { key: '3ea32396dd87d7f41103faf14b551dc86c0983bc', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { key: '6aad71d6c5f10526849ab5cf0ce167f7d27cfaca', class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { key: '814bcc0b5d1d82043bb8fac1b9010d4076f66643', content: this.tooltip, position: "top", positioning: "fixed" }, index.h("swirl-icon-info", { key: '0ceb6ec73f96deb08fe812255b8e6254defd0ac1', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("div", { key: '195482e9aff7a998acebdafa4531e4d898ccc2ac', class: {
                 "table-row-group__rows-container": true,
                 "table-row-group__rows-container--is-hidden": this.isVisible,
-            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, index.h("slot", { key: 'bd4e7b3041d589f226e30b5b8c09216e9f3e1296' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, index.h("slot", { key: '9981a787853c9df248e4fbf07ac0920cd3196d40' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-table-row.cjs.entry.js

@@ -18,7 +18,7 @@ const SwirlTableRow = class {
         const className = index$1.classnames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (index.h(index.Host, { key: 'ff24856124d9ec983f4a77cb2a90f5f20760feac', "aria-rowindex": this.index, class: className, role: "row" }, index.h("slot", { key: 'eeb25b47af7e2e3f57a025e09faa6896968fa8ef' })));
+        return (index.h(index.Host, { key: 'e719f1b061025231a4ab26a23a2999240cce9ae5', "aria-rowindex": this.index, class: className, role: "row" }, index.h("slot", { key: '5101fc064437e47c3ba6bd721ba991fb23b4f407' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -77,7 +77,7 @@ const SwirlTabs = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: 'd803e55f852e7c756e07bddee1a7c5de9ea831d1' }, index.h("div", { key: 'adb2783ef368f7ecc98f9ada51e345195eb67af7', class: "tabs" }, index.h("swirl-tab-bar", { key: 'feec30375de4c5544088655225460c5842993803', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), index.h("slot", { key: '6f5947ddc8dbf4c2558bd84534e7086ce2455a4a' })));
+        return (index.h(index.Host, { key: 'f96bdb8681babf66671867fef6b36b4a05fbc1d4' }, index.h("div", { key: 'b0d64e7fe96cb6eb8f81356749e6a6e8a69b57a5', class: "tabs" }, index.h("swirl-tab-bar", { key: 'e9327c7eb153a7afacd7d2c01328e595288e7022', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), index.h("slot", { key: '61ed03c9d0c37ab1336f6a09da38a3832df10448' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-theme-provider.cjs.entry.js

@@ -152,7 +152,7 @@ const SwirlThemeProvider = class {
         this.setDesignTokens = [];
     }
     render() {
-        return (index.h(index.Host, { key: '322386bc01853057ec26eff921e969eabbc0dbb1' }, index.h("slot", { key: '7c4ffb136e37ee6b2cd5d3c94aac53df6e1f4770' })));
+        return (index.h(index.Host, { key: '5e5666314a969520cd3afd9832d851810ba9cf2d' }, index.h("slot", { key: '659cc00af9c93fdad4fb686f7a66c01349c211e4' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

package/dist/cjs/swirl-time-input.cjs.entry.js

@@ -145,7 +145,7 @@ const SwirlTimeInput = class {
         const className = index$2.classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: 'fa7f4662e2b9baf6dedb9b5a810eb853a339fcce' }, index.h("div", { key: '2fd25360ae3c63126874895e2ec985b61dfbeda3', class: className }, index.h("input", { key: '849cc3d04dda1d1f1722a9bfaa62883bc9252774', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), index.h("span", { key: 'd5449d4cad74241044f49132667110efe32b75e8', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '14208ddd742edb2dee8c8a5c3ae2904cc67ddd4c', size: this.iconSize })))));
+        return (index.h(index.Host, { key: 'fcff63c5c5cae44ce02b0c11098a65d930c32cb4' }, index.h("div", { key: 'ea5190d825539eea8009234d492de00c61685016', class: className }, index.h("input", { key: 'f7fd06406aa6716ea98c960a974f25ef7dcc13ed', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), index.h("span", { key: 'f1d3db8f74ec7217119698736ceefa8486195bbd', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '329431e6fd0cc8758c2d9ae6b721f798f83a2ac2', size: this.iconSize })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -17,7 +17,7 @@ const SwirlToggleButton = class {
         const classNames = index$1.classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (index.h("button", { key: '129df4c17a3a0251c38ec684c6660db8d0d53b44', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (index.h("swirl-icon", { key: 'b9a81cc4c8a1c1f2f3cd0624146857c2ba7589bb', class: "button__icon", glyph: this.icon })), index.h("span", { key: '6582b099a185e00f199b1ed5a9ccaa43a5675c77', class: "button__label" }, this.label)));
+        return (index.h("button", { key: '7fea74ea5bdf424e022318ad1a47e1cb7a9524c1', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (index.h("swirl-icon", { key: '6075f521484294765adfe92586e12e5a977188cd', class: "button__icon", glyph: this.icon })), index.h("span", { key: '06db4d7123e013b8ed257621a00764c993b23cff', class: "button__label" }, this.label)));
     }
 };
 SwirlToggleButton.style = swirlToggleButtonCss;

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

@@ -90,12 +90,12 @@ const SwirlTreeNavigationItem = class {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (index.h(index.Host, { key: 'bd39e523e170e0f87e3e9ba6f01aa51af768a5fb', role: "none" }, index.h("li", { key: '25e7257484146b531d26019dccdec8e4986c9ddf', class: {
+        return (index.h(index.Host, { key: 'e208b1622c9178cfc4a2e296b25e7c67640aba29', role: "none" }, index.h("li", { key: '4fb5768056699d674ec4acebad45325c12b5c6dc', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, index.h(Tag, { key: 'b9023f754fd491ce04afefe32f196ffda0265573', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, index.h("span", { key: 'e725484f97132014187bc3d1cec79236facf9696', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: 'ae7976f40e828e45fa2aa7682378b88dceb7d564', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '3cc4f848bb07711528437b71df0a5401a12dcd8e', class: "tree-navigation-item__label" }, index.h("span", { key: 'ba704828ff95c1bca0c21867b88663bbbdc288fe', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: '09ef14a4df7d655b67aa2331e90b04548eba19c9', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: 'cb7e60c6d6e66cc16a0cb96e2684ef361a11cb2f', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: 'edc54b08ec413b4ce6fb43559771cec1bed304d3', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: 'df21ec80ee822819312b70e1dcf34d0a23eb8623', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (index.h("ul", { key: '181b51ffba98ac14f28a61db5e63a7f7429ced0c', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
+            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, index.h(Tag, { key: '890de4db9901ac6d160113c57a3b9fc5d0d2f213', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, index.h("span", { key: 'c5889ed380fcfbf32ff693c23968feaba55a31af', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: 'b1ef92dcb88ccf54ecf46b3b726c403a4ee983c1', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '55e185c0457bc4d384eb252c35b42951849b0e97', class: "tree-navigation-item__label" }, index.h("span", { key: '5b5c07fb67742e97747177105f2d62492edcfe50', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: '8e1c834c54ce2c641b3f7f2673bcb8f35bf7d620', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: 'cc62956a053f7dc9dacbe11e508b197cb7a355c0', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '4666fcb530af51df584bedce7927eff438d25a6d', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '3ef0bccfdb92ed52d8546e7d7064b52cac038cf8', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (index.h("ul", { key: '83436a280c0a3e75a5dbcaa98b8316d32086556c', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, index.h("slot", { key: 'ae47fe2369df40ada338495cb811b78a67fdcb97' }))))));
+            } }, index.h("slot", { key: '10545f5a40caaaca0813b012f7909cea37a820a3' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -9,7 +9,7 @@ const SwirlTreeNavigation = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a6e9f4952706e507f16d8d555db72a7b52e608e5' }, index.h("ul", { key: '567184f173968fb44477df5ed3921ec8641dd9cb', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: '6a6a1610ab6debadc77a3cf6e4d62113792059e2' }))));
+        return (index.h(index.Host, { key: '6a4a6277f27ec2cc4e13d811c43a969e3052089b' }, index.h("ul", { key: 'ee4dbfc8553e4dbbaf3b688a041ae73506b715e9', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: 'f3e66d8a17136a882e57b6ea1ccf1342775f2f94' }))));
     }
 };
 SwirlTreeNavigation.style = swirlTreeNavigationCss;

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: 'c76614a7b2a38c99f5fa1a08c3531f411e5e2074' }, index.h("button", { key: 'ec6809c5fe8095cb39ec4ab5a5bcbc6fd747e813', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: 'f0cee6af8be51d2dc57a91468d8ef4825bd79e81', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '03bea1ed845706d30e80eb763b7d7cc1f58e1a66', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'ba98d1243571b064c4ddc2a267d6bfce64e267b5' }, this.durationLabel), this.duration)), index.h("svg", { key: '91b7873574769ce1e581ad7709654b0c6f6bfb7a', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'e905a661af13844632062439b9e9dc16c7870f52', 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: 'a3a025b3373b93546e494ba608e619c7f0764c04' }, index.h("slot", { key: '88fc0f4322af22e3f1818ff4a064c1b186999dee' })));
+        return (index.h(index.Host, { key: '2629887aba4136ddd1d58b8eef851f87cb916281' }, index.h("slot", { key: 'e294868680464e61f643daaff98b7f07cbb2b405' })));
     }
 };
 SwirlVisuallyHidden.style = swirlVisuallyHiddenCss;

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

@@ -43,9 +43,12 @@
 .avatar--size-3xs {
   width: 1.25rem;
   height: 1.25rem;
-  font-size: 0.625rem;
 }
 
+.avatar--size-3xs .avatar__initials {
+    font-size: 0.625rem;
+  }
+
 .avatar--size-3xs.avatar--has-icon {
     padding-right: 0.125rem;
     padding-left: 0.125rem;
@@ -60,9 +63,12 @@
 .avatar--size-2xs {
   width: 1.5rem;
   height: 1.5rem;
-  font-size: 0.625rem;
 }
 
+.avatar--size-2xs .avatar__initials {
+    font-size: 0.625rem;
+  }
+
 .avatar--size-2xs.avatar--has-icon {
     padding-right: 0.125rem;
     padding-left: 0.125rem;
@@ -77,9 +83,12 @@
 .avatar--size-xs {
   width: 1.75rem;
   height: 1.75rem;
-  font-size: 0.75rem;
 }
 
+.avatar--size-xs .avatar__initials {
+    font-size: 0.75rem;
+  }
+
 .avatar--size-xs.avatar--has-icon {
     padding-right: 0.4375rem;
     padding-left: 0.4375rem;
@@ -94,9 +103,12 @@
 .avatar--size-s {
   width: 2rem;
   height: 2rem;
-  font-size: 0.75rem;
 }
 
+.avatar--size-s .avatar__initials {
+    font-size: 0.75rem;
+  }
+
 .avatar--size-s.avatar--has-icon {
     padding-right: var(--s-space-8);
     padding-left: var(--s-space-8);
@@ -111,9 +123,12 @@
 .avatar--size-m {
   width: 2.5rem;
   height: 2.5rem;
-  font-size: var(--s-font-size-base);
 }
 
+.avatar--size-m .avatar__initials {
+    font-size: var(--s-font-size-base);
+  }
+
 .avatar--size-m.avatar--has-icon {
     padding-right: 0.625rem;
     padding-left: 0.625rem;
@@ -128,9 +143,12 @@
 .avatar--size-l {
   width: 3rem;
   height: 3rem;
-  font-size: var(--s-font-size-lg);
 }
 
+.avatar--size-l .avatar__initials {
+    font-size: var(--s-font-size-lg);
+  }
+
 .avatar--size-l.avatar--has-icon {
     padding-right: var(--s-space-12);
     padding-left: var(--s-space-12);
@@ -145,9 +163,12 @@
 .avatar--size-xl {
   width: 4rem;
   height: 4rem;
-  font-size: var(--s-font-size-xl);
 }
 
+.avatar--size-xl .avatar__initials {
+    font-size: var(--s-font-size-xl);
+  }
+
 .avatar--size-xl.avatar--has-icon {
     padding-right: var(--s-space-16);
     padding-left: var(--s-space-16);
@@ -162,9 +183,12 @@
 .avatar--size-2xl {
   width: 9rem;
   height: 9rem;
-  font-size: 3.375rem;
 }
 
+.avatar--size-2xl .avatar__initials {
+    font-size: 3.375rem;
+  }
+
 .avatar--size-2xl.avatar--has-icon {
     padding-right: var(--s-space-32);
     padding-left: var(--s-space-32);
@@ -173,15 +197,15 @@
 .avatar--size-2xl.avatar--variant-square,
   .avatar--size-2xl.avatar--variant-square .avatar__image,
   .avatar--size-2xl.avatar--variant-square .avatar__initials {
-    border-radius: 2.25rem;
+    border-radius: 1.25rem;
   }
 
 .avatar--size-2xl .avatar__tool {
-    transform: none;
+    transform: translate3d(-25%, -25%, 0px);
   }
 
 .avatar--size-2xl .avatar__tool--position-top {
-    transform: none;
+    transform: translate3d(-25%, 25%, 0px);
   }
 
 .avatar--color-banana .avatar__initials {

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: '48581d0ff7b801be995c5d8704b223fb07a08b2a' }, h("div", { key: '1b429561f5e8e8e522c78159882a1f1ec5309128', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: 'b23bbe802fc7234681b712a1430ca5b2068b2da6', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '2ec98fcbb3577ad4866b2ac5c360cd05eeebef87', class: "console-layout__header" }, h("div", { key: '63c6cf27a7b2a4dc27ae6f511a9aac8458120f6b', class: "console-layout__logo" }, h("svg", { key: 'f6241b8dffd9024840e8121941bcb7ccdf684ce2', 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: 'e9710eae42ce7bf912ee1601cb0d47db8bdfe61a', 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: '3e861a13202fe294c124603252de65897f81d69a', 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: 'a6d85336769b8a0c96fb5bb32939c9ab32aa7b5a', 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: 'd583e13bf6b89cf303952bffc193b78ea31be7ea', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '61ca7354ac136e425ecc42f83ae1a0ff075f0749', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '3e5102c9aaaf0d6d077e19e22ea7bb668f2212c2', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '2c5e17bf9e1c0326cd689f252df55201419a922a', name: "navigation" })), h("div", { key: '92b7cba0378fae3327769fff4f61c8a749a24b3e', class: "console-layout__user" }, h("slot", { key: '00c0cb91759f7d0970da6ee6217835487371b373', name: "user" }))), h("main", { key: '797077ec51c1c18eaad96f9c7917b753c4175163', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'e09e66fec88270731c88d20f0a627d998993b656', class: "console-layout__app-bar" }, h("span", { key: '312fb2b990c07f8999d62c2aee2b85caa9062d6a', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'd3a87aef25bef30579becec0623a580b1d5d4772', 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: '5d65cddbb687dfde2593d24cb4e31288e0c32361', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '0129eef87c0cae44e92281754cc57f8db2600131', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '17bdb936c6ff2b00c8be88106b1e8f45e7fd034b', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'f126119e00cc24df538c08ae2b56d8f64bb9e92e', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: '0a2119a1509a84e75bd5a967c5156855d02c243f', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '257f231f503033036cbe60c01277471a3f46e92d', 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: 'b3cab181231a9e09fecb9683bb6e5b46fed11cb2', class: "console-layout__heading-container" }, h("swirl-heading", { key: '959c7dc63dadcb3accfcd70e74ade7ca577c6d7c', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '2e693d1593a088dfabbc089e70e92c25250c83c6', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'b019882a444bc761ab463aaf15e7fc091dbd5f8c', class: "console-layout__heading-container" }, h("slot", { key: 'b7cffd2194baf3a28da53f6fa116087dc88395bf', name: "heading" }))), h("div", { key: '0c743e0a7530a4dd95b33f6834acaa0f8d8fba3f', class: "console-layout__content-header-tools" }, h("slot", { key: 'e3f86dd0d5fd05c7661841473656560aaa33c1c4', name: "content-header-tools" }))), h("div", { key: '60d5fe0e308e72a17dd941c4d183c59cfe5e5d82', class: "console-layout__integration" }, h("slot", { key: '87a9a227bb4be710f411e0f92a3604d6a48f6da0', name: "content" }))), h("div", { key: '7859ad7f74d36dc57b389d44b4ff4e0366180c78', class: "console-layout__overlays" }, h("slot", { key: 'a0a3c85dbb2064666fdb87e093068a700806c59f', 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: '4c3926546a071aa53323c905d4fdfcb193209127' }, h("div", { key: 'cdf40d5e54ba47afe1305fb87143e64462419527', class: className }, h("input", { key: '6d0c4f4f48d20a56008439f86678378487473a2b', "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: '1a5263741ef2c29a997162ee50e0db17c12cb7dd', swirlPopover: `popover-${this.id}` }, h("button", { key: 'ea76ddf661f097f16c7bba92487e474975f312f5', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'ad60bd3638fbe0ed91e54308615f287918a571f7', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '9ca5035fdef0540e1bfe01bff29a1ae72f8e2e90', 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: 'af7f6bdcaf2d880fff6b411a9b159989a25b2173', 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: '518331f373b9da9067390fa2e05231d099ba2c44', onClick: this.onClick }, h("wc-datepicker", { key: 'b09bae9b1159dcc56aed19922e3487496cb4060a', 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: '8abe5fde0738508ab5adb4538cf92ebf4fd97ec3' }, h("div", { key: '93d03522ce3713c70c9a7b027360f2ab1e7c20be', class: "description-list", role: "list" }, h("slot", { key: 'ae7bee9b151e2adf7c30fa78858891e06037dbee' }))));
+        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"; }