@getflip/swirl-components 0.483.0 → 0.485.0

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

@@ -62,7 +62,7 @@ const SwirlToggleGroup = class {
         const className = index$1.classnames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (index.h("swirl-stack", { key: '86db70a77b4c71c52533392d8daab961555c0224', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: '4f6742043f6e16c0953c7ec069ff7e4e2c2c1406', onSlotchange: this.onSlotChange })));
+        return (index.h("swirl-stack", { key: '67690dcc23d24c021eed8d5828fc0833807fb19a', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: '535c7e563913262583d0e86c194a45c198da1a4d', onSlotchange: this.onSlotChange })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -71,7 +71,7 @@ const SwirlToolbar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '70bf9f3d2ec87c5f36b9a8ded91abdee119f12e3' }, index.h("swirl-stack", { key: '53350ab541639aa2cba9cb2e689526af4d196382', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, index.h("slot", { key: '04a96fb9d55bb7af2a58b55c1172e33c73227c18' }))));
+        return (index.h(index.Host, { key: '57920cad38607c1a15c663b13874d19e06a16ff9' }, index.h("swirl-stack", { key: '4c9e08d5400d4229f9e30e6cbf96fbc05f1b06c6', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, index.h("slot", { key: 'dd7644db86035030fd9769bfc1525458618e5939' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -91,12 +91,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: '3488fa9b78e3898cf556e9f75d04bb24d9edaec1', role: "none" }, index.h("li", { key: 'a430ade02ecced8d11f5c7da4ab0cb981e47da24', class: {
+        return (index.h(index.Host, { key: 'f639736894bed6c789a2bb537d8231c370ade0bb', role: "none" }, index.h("li", { key: 'c85045099677ca811eea8b84d3e3a7cd1f6220e3', 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: '957c7bc383b1222cdbcccbb399c69bddf89c7b0d', 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: '7e9ef120c645741f66f9f399f432d9165e1a8d96', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: '3bbcda50080b8fa2f21e133b7113139302b40abe', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '2f6ee8cf151394338ac03c9b0e81ba654905fa19', class: "tree-navigation-item__label" }, index.h("span", { key: '8719135c9264d1490f05801d47c520d549407b1a', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: '61ab6e64be83f37845471fddc3f22213dc1ed540', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: '1cb7a99a551bcaa5957a1461e289f631170c3d97', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: 'c2a26b703c40281bbedb170faf77197a8d3df4b6', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '0b9aef24f43d2ac0cc5b27fcff5167f6131f3162', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (index.h("swirl-tag", { key: '39acee516fcdcf73261de017215fc3d23abeb535', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (index.h("ul", { key: '17d3cbe92c3cb98e130e12698793a2521c93f17c', 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: 'bb3c7dfc7bc881be8d7fae7aed968254936d483e', 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: 'cf614f5a4c13fcaf641b00d12aba3ba448f27222', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: 'f6632ee98c344777af8f6147c3cc68026408020d', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '8fd6d3396940a795614b209615b33e2a6a3ca28d', class: "tree-navigation-item__label" }, index.h("span", { key: '0449dac70e03a9cf654f51018e993e52a3d95f82', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: 'c9b8d08fbcd1e12cc23e51f7828d3e1c4ebba3cb', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: 'bd640fcd081f50e189ada0b0e17c4a90f3a9765c', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: 'e39b033d6183895d5b6811e02caf61d3e94b9fa7', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '8626cadcbeef84ef70dda06504b0fa11b8c77fe8', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (index.h("swirl-tag", { key: '9cc101ff1456c6e8be06623746cf14e9d47370d9', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (index.h("ul", { key: '53f0a70081717a316665673807032e680714da74', 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: 'a4eb2026f67c8d96c12c8d505279eec91e42baf3' }))))));
+            } }, index.h("slot", { key: '54cfc7b15820d80de2474a65180f3bef4884796e' }))))));
     }
     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: 'c42a1a8b3122e8de403a6a4d0f0bbcb81f4b06cf' }, index.h("ul", { key: '81878bc78812d155c5570422881c768edb4ee2dc', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: '98e19f023943355a61a11020dc84b81b64693921' }))));
+        return (index.h(index.Host, { key: 'db2103702144b1f48a6f6a4b6ac74c2141fb8b31' }, index.h("ul", { key: '28ca3e64b714eb3845e3e3bb71be6bb3be9bd386', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: '912be04c9fd64e54223c9a185be515eb32843970' }))));
     }
 };
 SwirlTreeNavigation.style = swirlTreeNavigationCss();

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: 'fa77eb65e34260d867e3c4cd3ce53278c5671813', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: 'f6588d46099f38063ecb209dade982499168405b', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: 'a7b1ebe65874cf61cf15b7d9862e7d6aa789d04c', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (index.h(index.Host, { key: 'fef970c07fc3123503e035112fe7e52115ff057c', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: '33bc6518dcca289192ca2607a99f0efa10bba901', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: '55d51b7cc91bf9adb51c5e7f36365ec08012a763', "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: '3d663f5336df2c513cd00695bb399b277db4d95a', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: 'd0f47de87f1a0de9d33c99fca5babf9f8f0c93cd', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: '3bad764862675097f1b3b01407b74c6636135860', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: 'eb0fd50459d78c2585e8629248b3586d6a9ffb47' }, 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: '3111b110d6dc29588486f971417adf37604c4b55' }, index.h("span", { key: '6c030abac62da1de432846345e9159cf37732928', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '9097ce7ee740b643056874b0a2f74f896bdea108', class: "tree-view-item__label" }, this.label), index.h("span", { key: '3aac385884aa3a9cb6560f5048a339378d470083', class: "tree-view-item__tags" }, index.h("slot", { key: '93b476218086c857a82a2dd6156ebd288c36af66', name: "tags" }))), index.h("ul", { key: 'fc51e13ebe4d7071ae35f7b027584cf22b83495e', "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: '6fe53ca04d992b2cef7d5d2cedb5eb119fdea162', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '001696960c2893a8fc881f5c961b18d75af2a23f', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: '1d458f9abae531dc0f48ca8ba57fcd62d0020eb2', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: 'c891f69fc682d14f1502ddec8dc6688453449711' }, 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: 'cde788efaed79b489c1765e14bc08a6e73344efa' }, index.h("span", { key: '3f8f49d065901483b521f5646df4ef3dba8a1143', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: 'e4f9af62617994508af401bc6867cb98151c3b75', class: "tree-view-item__label" }, this.label), index.h("span", { key: '86c3694ec3bfd6a78df23c91abed72900d15f135', class: "tree-view-item__tags" }, index.h("slot", { key: '25a3c909290b92c30f3694bd46670ab3cea7ab4c', name: "tags" }))), index.h("ul", { key: 'ec63119eebc2c54568e0557bb93ecd1337f7b565', "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: 'ebef792c7ff381cd3614993d80ca04d347473c56' })))));
+            } }, index.h("slot", { key: '07d406b0fb59133df2d64b2e8228309a974c3072' })))));
     }
     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: '1f7a41b6ab67a789534b3638ee11d1de2da1cb87' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: 'a877069ad8ed12f0f6612d484fd6033d58245274' }, index.h("span", { key: '8db50809d89bcbd2c2201c005133734430e6c443', "aria-live": "assertive" }, this.liveRegionText))), index.h("ul", { key: '8703927f12e7a2cbc49c789fead8e3242211d473', "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: 'e29ee3b671fa82a637db1ec12f8d294ddf46ecbd', onSlotchange: this.onSlotChange }))));
+        return (index.h(index.Host, { key: '30e6e9f186e102f9f0e963ceadbc4023eb27b559' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: 'a357db78cefc2dbb7ef751c88fa8700518e23936' }, index.h("span", { key: 'de4c7c511dee37fd462abd40ad9637387bf4a6c0', "aria-live": "assertive" }, this.liveRegionText))), index.h("ul", { key: 'efa77a78b995e2e897ade19b111c4a03eed2f7ee', "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: '66201ff8c5dfb3c18f061cc98740f824761371ee', 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: '44d3cf2290ae4d2b992e27aaa43af6cdf65eb15a' }, index.h("button", { key: 'a326cef7e4e9ea7bca8727bb5c2afc52e8497386', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: 'f5e57641acd33b25ee1e980611128c80af0218fb', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '3f0824b314fdb77ffc7fa78c0b14b6aa8dab1dda', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '7d2370ece099f7e82d04c8d97762035fdd83a8ac' }, this.durationLabel), this.duration)), index.h("svg", { key: 'c30507dca4dc86d3c4bd9216d0887e3fb6e5984d', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'bf5be85516606e11165d0a6dd214035616931143', 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: '1d111254c6cf7a48608534f0198c497d282cad53' }, index.h("button", { key: '6b1cfd9e6fda1b95d3b82b620e2fd471ca8a9aac', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '8a9e545a63d6c459a733ede938d8d4ddc6c44b6f', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '43e92f3f70e57f931ae864f440254d541d67059a', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'ea8c61532cf72856d0bd20fdca0565e33da15e52' }, this.durationLabel), this.duration)), index.h("svg", { key: '52bc68ac62553c9cf085f3373873b83320e9db3b', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'ef0acb75dfbd715b5186fdd6a740049d32e5ad65', 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: 'd92c8af38ad515473da75d630bf18ca904f9d7b8' }, index.h("slot", { key: '6cc3685036214482539265a0fb12990e8983094f' })));
+        return (index.h(index.Host, { key: '10b5f1132acca349dfade5fdf769c18c78cdf383' }, index.h("slot", { key: '52a489d29e2c7e0cdca6127ca0dd9ace69e1ff81' })));
     }
 };
 SwirlVisuallyHidden.style = swirlVisuallyHiddenCss();

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

@@ -56,7 +56,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'c8f85db59dcda24375ace62c3e8434fdf5f7df09' }, h("slot", { key: '1485d2b4c9a84ca1ef72fedba07eccbee956af2c' })));
+        return (h(Host, { key: '53058b590f5964f77f27c1a2d5dc3e4f6303bca4' }, h("slot", { key: '40aadacc04d62c2ad7dcb2184e3c96cede6b1c9e' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: 'c7dbf8610a8061663e807d6448d816b6c5c04c2c' }, h("div", { key: '0c181fb5a7d324d41fdf509d3995cf659004797a', class: className }, h(HeadingTag, { key: 'eb4690b426695b295c34df728f9263cbd6426e74', class: "accordion-item__heading" }, h("button", { key: 'c6c513a6f769c5c9883601e08b87256e5ed8f643', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("slot", { key: 'f2b6ef8fd42c27bacee97bc1ce9ef2e50b8133cd', name: "media" }), h("span", { key: '3e80e812a5aba76b6f43b7a65193efc6ecc07044', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'df59a0989f9578d3f1f29240c2031d8d6e9add96', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: '3cddf0c277e4a658845adfa56c5e24fdf954987e', name: "trailing" }), h("span", { key: 'e7f05f9c01318bd187724d3a055dd518a5b2869a', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '4935c3703e306b07636550ceacb74a466a203edc', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'e5152cbcb2f891a277c15ad80c05b590b87fa401', glyph: "expand-more", size: 20 }))))), h("div", { key: 'ac8d64944ec2623630eabe08dade9f482e9e342b', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '139c8943a079c8aa25df74541c37d70d35694cd8' })))));
+        return (h(Host, { key: 'f15a0677326d12d4b9d4eb23c9d5efe65611f7d6' }, h("div", { key: 'ccc8c752e65b5325bdab89e1c27e285b6241d38f', class: className }, h(HeadingTag, { key: '15bed907cc15f0b3589263c7837c1f5602e9cb7c', class: "accordion-item__heading" }, h("button", { key: '83152164de9659cf826ac4898742fff772e01860', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("slot", { key: 'e6f97e10880180b1461b15fef1fdfbd6ab00487d', name: "media" }), h("span", { key: '303a2952d526306fe52f4aa1e4e62df8c3b71e4f', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '0f174ee5694050ccc2a05d4a946a954875c31b12', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: 'b1816e439f7b680b3347cd9f214a271eab449b93', name: "trailing" }), h("span", { key: '72b1f1fb9088fb74c8dd0fcd3e2745a6bde25b6c', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '478218253cc30ad3c706fb8bd160e4fc62a0d841', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '18d538ce575e8e50167ab4dd85ca370e5c7d0d91', glyph: "expand-more", size: 20 }))))), h("div", { key: '1389d81ed3bce89f1967bc8d588cc9c89596d66c', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '24e8e2ada9bbade7ad6a8eee6a56d34ee7803a60' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class SwirlActionList {
         });
     }
     render() {
-        return (h(Host, { key: 'cf013eaeed19ab9ddd4891d5a8bece6e70730abb' }, h("div", { key: '42bee5d06a772b9c0a8374f32236a5b8cd83fe16', "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: 'b17819fbe30858706ffc29a3c42b444c33fea0a9', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: 'c6ce9b1fce62151da12fe07c07d338122ceaafa8' }, h("div", { key: 'c040c40c62c3037208cd5790dbc83adf3170f18a', "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: '35e4e5306fa2f333554893b292302a18dccd0736', 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: 'acb3259a63a1da2df94107a9298027d022af7d5f' }, this.hasSeparator && (h("swirl-separator", { key: '51bc058c31ad16d4ef91d7e88de412de5b952900', spacing: this.separatorSpacing })), h("div", { key: '0d339786efb8e590182329e11542d31cd6e8fd9c', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'e07a0763d66622d2554259e30a3e66c256e0df09', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'cbc713d8365ec0fa7e8261ec513ed684eb896707', spacing: this.spacing, align: "stretch" }, h("slot", { key: '48cbcfa966e92ced923fbc0d43bd9f0ee4c2e56f' })))));
+        return (h(Host, { key: 'b1f48748eb872060713c7cd9e2d85b903a8bc877' }, this.hasSeparator && (h("swirl-separator", { key: '0b81779a74fe4b20a790c9098616b8a0393129e7', spacing: this.separatorSpacing })), h("div", { key: 'a91fa502721bdeaf491e216467c7545fd5522cd5', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '6321d99508e7bccd2590fb966532acdb751058f9', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'bf4859d757a18080947baa4967ccafe904e534d2', spacing: this.spacing, align: "stretch" }, h("slot", { key: '6c681834ca30b1843e883dbca0434c7fcf652e30' })))));
     }
     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: '5b0fa71fbf6761ec97c3418a09ecfbc9ba977bc2' }, h("span", { key: '3203bbe5126117c48bab273d044f42dfb331d081', class: className }, showImage && (h("img", { key: '9ea7f0f9082697d61685cf808eef9bd03090102e', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '2f814f5d380125db47105f10da342783ddd6038a', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: 'c58475dbf646a9d006890916e87d83cd9906ee83' }, h("span", { key: 'b0d64cfd31d6e716eb2eae9f08140f476b4ad8be', class: className }, showImage && (h("img", { key: '0c2ae8bd6f3462a4549c55cd7e3b0ebe70d1e1bc', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: 'f352ef23a3396184e88e41894357e6ddb15301d0', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 :host {
   --header-height: 3.5625rem;
+  --swirl-app-layout-sidebar-width: 25rem;
 
   position: relative;
   z-index: 1;
@@ -172,7 +173,10 @@
 
 @media (min-width: 768px) {
       .app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid, .app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid {
-        grid-template-columns: 1fr min(50%, 25rem);
+        grid-template-columns: 1fr min(
+            50%,
+            var(--swirl-app-layout-sidebar-width)
+          );
         grid-template-areas:
           "body sidebar"
           "body sidebar";
@@ -186,6 +190,12 @@
       "body";
   }
 
+@media (min-width: 768px) {
+      .app-layout--sidebar-inline.app-layout--sidebar-custom-width.app-layout--sidebar-active .app-layout__grid, .app-layout--sidebar-inline.app-layout--sidebar-custom-width.app-layout--sidebar-opening .app-layout__grid {
+        grid-template-columns: 1fr var(--swirl-app-layout-sidebar-width);
+      }
+    }
+
 @media (min-width: 1800px) {
 
 .app-layout--has-navigation.app-layout--has-sidebar:not(
@@ -193,7 +203,7 @@
   ) .app-layout__sidebar {
       position: static;
       z-index: auto;
-      width: 25rem;
+      width: var(--swirl-app-layout-sidebar-width);
       animation: none;
       box-shadow: none;
       background-color: var(--s-background-default)
@@ -207,7 +217,7 @@
   ).app-layout--sidebar-opening .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar:not(
     .app-layout--sidebar-positioning-overlay
   ).app-layout--sidebar-active .app-layout__grid {
-        grid-template-columns: 25rem 1fr 25rem;
+        grid-template-columns: 25rem 1fr var(--swirl-app-layout-sidebar-width);
         grid-template-areas:
           "header body sidebar"
           "navigation body sidebar"
@@ -301,7 +311,7 @@
       top: 0;
       right: 0;
       bottom: 0;
-      width: min(40%, 25rem);
+      width: min(40%, var(--swirl-app-layout-sidebar-width));
     }
 
     .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--rounded-corners) {
@@ -310,6 +320,12 @@
     }
   }
 
+@media (min-width: 768px) {
+    .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-custom-width .app-layout__sidebar {
+      width: var(--swirl-app-layout-sidebar-width);
+    }
+  }
+
 @media (max-width: 767px) {
     .app-layout--mobile-view-navigation .app-layout__grid {
       grid-template-areas:
@@ -771,12 +787,20 @@
       top: 0;
       right: 0;
       bottom: 0;
-      width: min(50%, 25rem);
+      width: min(50%, var(--swirl-app-layout-sidebar-width));
       border-left: var(--s-border-width-default) solid var(--s-border-default);
       box-shadow: var(--s-shadow-level-3);
     }
   }
 
+@media (min-width: 768px) {
+      .app-layout--sidebar-positioning-overlay:not(
+    .app-layout--has-navigation
+  ).app-layout--has-sidebar.app-layout--sidebar-custom-width .app-layout__sidebar {
+        width: var(--swirl-app-layout-sidebar-width);
+      }
+    }
+
 @keyframes app-layout-nav-overlay-slide-in-desktop {
   from {
     width: 0;
@@ -1216,7 +1240,7 @@
   }
   to {
     overflow: hidden;
-    grid-template-columns: 25rem 1fr 25rem;
+    grid-template-columns: 25rem 1fr var(--swirl-app-layout-sidebar-width);
   }
 }
 
@@ -1227,14 +1251,14 @@
   }
   to {
     overflow: hidden;
-    grid-template-columns: 0 1fr 25rem;
+    grid-template-columns: 0 1fr var(--swirl-app-layout-sidebar-width);
   }
 }
 
 @keyframes app-layout-sidebar-slide-out {
   from {
     overflow: hidden;
-    grid-template-columns: 25rem 1fr 25rem;
+    grid-template-columns: 25rem 1fr var(--swirl-app-layout-sidebar-width);
   }
   to {
     overflow: hidden;
@@ -1245,7 +1269,7 @@
 @keyframes app-layout-sidebar-slide-out-with-collapsed-nav {
   from {
     overflow: hidden;
-    grid-template-columns: 0 1fr 25rem;
+    grid-template-columns: 0 1fr var(--swirl-app-layout-sidebar-width);
   }
   to {
     overflow: hidden;
@@ -1260,14 +1284,14 @@
   }
   to {
     overflow: hidden;
-    grid-template-columns: 1fr 25rem;
+    grid-template-columns: 1fr var(--swirl-app-layout-sidebar-width);
   }
 }
 
 @keyframes app-layout-no-nav-sidebar-slide-out {
   from {
     overflow: hidden;
-    grid-template-columns: 1fr 25rem;
+    grid-template-columns: 1fr var(--swirl-app-layout-sidebar-width);
   }
   to {
     overflow: hidden;

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

@@ -347,18 +347,24 @@ export class SwirlAppLayout {
             "app-layout--rounded-corners": this.roundedCorners,
             "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
             "app-layout--sidebar-closing": this.sidebarClosing,
+            "app-layout--sidebar-custom-width": Boolean(this.sidebarWidth),
+            "app-layout--sidebar-inline": this.hasSidebar &&
+                !this.hasNavigation &&
+                this.sidebarPositioning !== "overlay",
             "app-layout--sidebar-opening": this.sidebarOpening,
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: 'e8fa3517c20be50f23651a6618d0a654360dd8bb' }, h("section", { key: '29bae81c9047360e9a41d1e1b5b4478f18e65900', "aria-labelledby": "app-name", class: className }, h("div", { key: '8399a6c2d5885a8abaa3da3183282d6838026bc9', class: "app-layout__grid" }, h("header", { key: '7139743470378cd46bc6b01b3d3628d9e4e2fd4d', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '79057b7fc1b7f969a72e3a5bf2f6f19abd5c1d58', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '48113ac7f2a57bee6cf7ea639d8f62a9192582cd', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: '7414f2ec88b8369728d76d419b169cb3d936b6f5', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'cce77f4a0de5288ab8496e2d27aa40952e9997ed', hideLabel: true, icon: this.navExpansionState !== "expanded"
+        return (h(Host, { key: 'ea5e9984dfa86c576366d2ec73e8649152c14928', style: {
+                "--swirl-app-layout-sidebar-width": this.sidebarWidth,
+            } }, h("section", { key: '8480c594adca8240e1f54b80e38b1fbb7e987276', "aria-labelledby": "app-name", class: className }, h("div", { key: '85ad1344215084054ffa8703d68bb1de1a4cabef', class: "app-layout__grid" }, h("header", { key: 'd47c99f2762bcd6be5a327dbeb10a43fb4568557', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '3561308f08c40d1450fba3d76d8a4ca9801b42ef', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '7161e03c5a97a5610b71c1a84396a582c5372d3e', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: '815e76032a56f68a3a29c7209c2f00b84c4266f0', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'c84849add9c4f76a2f226a5c050bb0540f7df07b', hideLabel: true, icon: this.navExpansionState !== "expanded"
                 ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
-                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: 'e1a586370b0b04dc4d100fcb895e2ba371dae64e', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '0b77ac2c49a9db06cc3f7792d06dd269945c58da', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: 'd2e7989615352c42dce6005da07dbaed0c6d99ee', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: 'd6655e944086aa11f95c4cab4da3ea9ef827cc76', class: "app-layout__navigation-controls" }, h("slot", { key: '6c7d9dbf8b2707cdcb01bffaff8ce9f6059389b4', name: "navigation-controls" })))), h("nav", { key: '111e910171f0d799ac8e3eb5fd6fd5e7c7f832a6', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: '4f1931413fb83b0667d07e75f700abf06335230e', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '8188874ac49378f4de9c49ee84f70a9b6e111e37', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '889b1fcacbf88a72710cd36af7c54a7728df089f', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: 'd0d371a1e080e10dcda1d29204a117798730eee8', class: "app-layout__navigation-controls" }, h("slot", { key: '3bca7780bb2bfe59471467de001f849b9b232662', name: "navigation-controls" })))), h("nav", { key: 'e612f7874dc250d88f4c554c1200eb07c7f97f41', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
                 this.collapsibleNavigation &&
-                this.navExpansionState === "collapsed" }, h("slot", { key: '580dd1a0a999a77195279c7cc887585857080276', name: "navigation" })), h("section", { key: 'f77cb25f6be2b64d7213ff7f917b5f6869880b9f', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '06467a7005a8bccfa66bd662a28e9aea4771d27a', class: "app-layout__app-bar" }, h("span", { key: 'a2f2d531d1b7f304d9f3fa5159dbea8f78b45553', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '4e83761fc85b17c739abc1d8c7158d5cd362706f', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '1c257404a9cfd84debbd0486f8f17b2d7916839c', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'f67661832bb9ed96006e13f4cf998cb395adcce5', hideLabel: true, icon: this.transitionStyle === "dialog"
+                this.navExpansionState === "collapsed" }, h("slot", { key: '913cb8b7bc4cbc05d7fe30e5651937a5d8ac7258', name: "navigation" })), h("section", { key: 'ae73f4764e10c73b404601a765f735fb0c2b3c51', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '0179719859439f3d433486d36ad5eb87cff76e93', class: "app-layout__app-bar" }, h("span", { key: 'c3f902620abf9db0369184ee9dba7e61bbde8ecb', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '520cbff25beeacac88c63ef52f1169fc1cd82bac', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '2c237ec3f04ce5da7d571ed4aa3e69c42eeb19b2', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'ab1cc889450248c3a2555a46558d8a8d1d3e6e69', hideLabel: true, icon: this.transitionStyle === "dialog"
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
-            this.navExpansionState !== "expanded" && (h("span", { key: '39d626d775997e9bab9e9ae3946084d73d715583', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '7e967c7d6314707a913b461271e4908ca80d70a7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: '76e4be74a94b18c027c33140736c36c98e7024e3', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '81df9b04bc26d1fb85f8160c55cc2df72aafedfa', name: "custom-app-bar-back-button" })), h("div", { key: '955ccd31ee748b0f9bf03e573f920884a402b7f4', class: "app-layout__app-bar-content" }, h("slot", { key: '16deec03db91173bf75664f2fbc1ceac7a30004f', name: "app-bar" })), h("div", { key: 'bce238fc1df86c571e663419d8f3faeeffa36982', class: "app-layout__app-bar-controls" }, h("slot", { key: '540b1410a2cf45d6b04b1ae7ebd8c1f92b9edeaa', name: "app-bar-controls" })))), h("div", { key: '110496d5b1001a4cfd1510c5b01e6ba108d5de17', class: "app-layout__banner" }, h("slot", { key: 'd899e047a077a3ea4638311913623cc6ef8d3112', name: "banner" })), h("div", { key: '137484f06a5e4fea74ab0f5febc30b327c500710', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '3854ac4b1108ec4083c05b6d989b899e5b4bd999', class: "app-layout__content-inner" }, h("slot", { key: '68d9a207834dcf01164545df8d813d817b1fcad0', name: "content" })), h("div", { key: 'e7c2fd5cc7802e3d4cfa83fc54e1b58587fc05b7', class: "app-layout__bottom-banner" }, h("slot", { key: '655ad74d80da4bde2d8e1c5f76e5276f8debbf67', name: "bottom-banner" }))), h("div", { key: '6fa13e005398621057950af22593851bc5bb40bb', class: "app-layout__bottom-bar" }, h("slot", { key: '7f3c36cb64f027d9db9ed6f6343242fdccffc313', name: "bottom-bar" }))), h("aside", { key: '7269ec313d3bcc3cd1dec5abe8cf81b440987e8f', class: "app-layout__sidebar" }, h("header", { key: '63ba307a1ee8755ed86cfdf73eda6cfe38b4b8ac', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '4027a4f20d4b2703422547bbbdd81221b8816c85', name: "custom-sidebar-header" })), h("header", { key: 'f853e2f2fc57e27a9d14265bb4abb948c198e8ea', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'a5afb72e7cf946c9078732708d02ab26eae5c955', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '797791edbae180dd39835a407479f56b824f2733', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '1d1a0a76937293430f572b6c5930e010d70102fd', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'dc8ff45e81cbd1be539e851d2da00042b6d3ce26', name: "sidebar" }))), h("span", { key: 'e11c29160fcf21b6212d28e55a8092cc8bb36931', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '15eb5b55036b38780182689b7d11f084c9425038', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '50383a0c6b5cb438fd606f2bba6ad0184eb2a953', name: "floating-action-button" }))))));
+            this.navExpansionState !== "expanded" && (h("span", { key: '39640ad1337b38b65cb04e209298964217dc5b97', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '63be47f8bdefdc5335e975b8288f4252e388676a', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'a73ca0324d442a9fd2f76f28fe422070ebfd3392', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '6b168560d179661b6ccbbaf84fde150f9445c33a', name: "custom-app-bar-back-button" })), h("div", { key: 'ff9df5292be7e45fa73a6aa3fad3d160946c16e8', class: "app-layout__app-bar-content" }, h("slot", { key: 'f0d622141406b628d83722090b0b2a30e1210ac5', name: "app-bar" })), h("div", { key: 'ae0d9fa3eeb8acad36e2fa2890a39debaf7858c1', class: "app-layout__app-bar-controls" }, h("slot", { key: '7a645cda89b0e3224bed75a33b4a11949e2ccdf7', name: "app-bar-controls" })))), h("div", { key: '2ec277c97e569e907f95c5719fed9103fa2f69f2', class: "app-layout__banner" }, h("slot", { key: '7c3fa21988e8c6aa5a5ce19461a9c493e22520a0', name: "banner" })), h("div", { key: '2d818bf92b9f02f6339bf04e9305b543a724fc6a', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '42fa90a807337bdffeaea454f1d1abc0e8f26c01', class: "app-layout__content-inner" }, h("slot", { key: 'a4561df256b12e7893e3ee3832b75dfa15b06d5b', name: "content" })), h("div", { key: 'd20801097b89fa70739fed10c35b8960fc93ff95', class: "app-layout__bottom-banner" }, h("slot", { key: '99b0849ace8d3d1c128b744f96bbd4587d77fd52', name: "bottom-banner" }))), h("div", { key: 'dfca52dba0807f59010d6820a18b45ad4ed43359', class: "app-layout__bottom-bar" }, h("slot", { key: '1cbf5067eba3dd9cedd53debbf0c9613f2d95af1', name: "bottom-bar" }))), h("aside", { key: 'b9a3cb541c078c17f55935ac703f2bd5a63d26f1', class: "app-layout__sidebar" }, h("header", { key: '658023fbfd242bcfb41ca7fb1b1702f91eecc273', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'd1b4f31b3a65f6906737c4e5cb8d623967ff3756', name: "custom-sidebar-header" })), h("header", { key: 'a0613856d435c7ab946838da48bea242f54b9076', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'f097dddd068842235cf9d59f6f367419b5d1fb90', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '582ddba3782037f96a6b76b661348e5357a5579f', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'fd66588b9c671f934e7a49e16c60e5c707fd38eb', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: '9b6f8493ce6d38cf25ff0446b90c4feba5de166c', name: "sidebar" }))), h("span", { key: '19c8eb89279ef4932cc44c60228301f20d0e1457', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '44ff78e3f1de73f50e64565e78edec285c75aab7', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '03c26b21b33b29619055763717d6c7fb3d4ac288', name: "floating-action-button" }))))));
     }
     static get is() { return "swirl-app-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -754,6 +760,25 @@ export class SwirlAppLayout {
                 "reflect": false,
                 "attribute": "sidebar-heading"
             },
+            "sidebarWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sidebar-width"
+            },
             "transitionStyle": {
                 "type": "string",
                 "mutable": false,

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

@@ -5,6 +5,9 @@ export default {
         appName: {
             description: "Displayed above the navigation area, if present. Otherwise displayed above the content area.",
         },
+        sidebarWidth: {
+            description: "Sets a fixed sidebar width on tablet and desktop viewports. Mobile sidebar views remain full width.",
+        },
         transitionStyle: {
             control: "select",
             options: ["none", "slides", "dialog"],

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

@@ -79,13 +79,13 @@ export class SwirlButton {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: 'ba6372237afb1a000b5cb0805e12e1d998ba608e', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'c22f997d83b7bcb16e176addf039c6e583f88343', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
+        return (h(Host, { key: '23af0e8e19b77a5029052dc40dccf50ebb65333f', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'd0b2fb060f9bfc94405c2975cacbcea51ca36a3d', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
                 cursor: !this.disabled && this.cursor !== "pointer"
                     ? this.cursor
                     : undefined,
                 fontSize: this.inheritFontSize ? "inherit" : undefined,
                 lineHeight: this.inheritFontSize ? "inherit" : undefined,
-            } }, Boolean(this.icon) && (h("span", { key: 'eacadeb82d465ef4ed35ed57cbb332e6d36e21cb', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'affe93319cadf0fbc9438f1dd6f4df19a592d9e4', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '2251909072a2c524cb15016a0c63848c4e0640cf', name: "icon" }))), !hideLabel && h("span", { key: 'fbfd536b6a466286e138385e6374e4553543f5a2', class: "button__label" }, this.label), hasTag && (h("span", { key: '707dc78718fdc32cb802992f1705d25e72ba4162', class: "button__tag" }, h("slot", { key: 'bd3d1c54238decfcdb54c28859759efae62df996', name: "tag" }))), hasTrailingSlot && (h("div", { key: 'aea035d7b953e7e5e471859cf0a7e73e26f0a2ad', class: "button__trailing-slot" }, h("slot", { key: '9c4278315c6f0d0ac166da345ccadd56d4b77ecc', name: "trailing" }))))));
+            } }, Boolean(this.icon) && (h("span", { key: 'a4196f5355f8e0f69c13cae46968ef4a1bb163e3', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '2aed20db5403a6443399b4d9fea887f6f5871b05', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '899c93e098532d74c7c8a9a3137cdc6a949d20e9', name: "icon" }))), !hideLabel && h("span", { key: '9d65045a5cdee4a2e68bfde5c22b6baab468bd89', class: "button__label" }, this.label), hasTag && (h("span", { key: 'cf77726d3c75a76380db368070d5f77f05327cf3', class: "button__tag" }, h("slot", { key: '5d86b0fecca7e9215fd59a13e37f636d6d030ba6', name: "tag" }))), hasTrailingSlot && (h("div", { key: '6cc13ae1748655189f7e9d968171e65f59df5a0a', class: "button__trailing-slot" }, h("slot", { key: '705986f1edb1fd0b7aeb8ec0e83b2d2c77c33bf0', name: "trailing" }))))));
     }
     static get is() { return "swirl-button"; }
     static get encapsulation() { return "scoped"; }

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: '75b679b553d593388edbc6329be661d567992297', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (h(Host, { key: '3dee76aae503080b212ab304b1b2d4bc11c3fc0c', "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: 'aabaaae69d01ceb3a7a9e929f77c3a7de2d63d0e' })));
+            }, tabIndex: 0 }, h("slot", { key: '18395f1c057a4b8adfea8f96599fccdaeade58ab' })));
     }
     static get is() { return "swirl-carousel-slide"; }
     static get encapsulation() { return "shadow"; }

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: '7fb72a7d241b4371a727c8028a3e55325f133732' }, h("div", { key: '77b6807ed3d48dc017aea25e6fd33b88f8d58e20', class: className }, h("input", { key: 'e0f4baaaaf1399b7b8d9a02f7f7fa6f37d9b0427', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: '51b7b183c7d2e5dbd07ef0810b3d94b474e51fa9', swirlPopover: this.pickerId }, h("button", { key: '3a15ab5f469b4498e56596195849a7101eaaa4d1', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: '8faa0ba1fdf6d55cd5e9ff8d1cb42738d586a0eb' }, h("div", { key: 'fbc9200a7318669ace362f25510124ced61b418b', class: className }, h("input", { key: '7837f8b509251caf79d46a6341cb0e43772a246b', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: '256e94f88ee8b0ce91d3c22bd5236ab7aa2be07e', swirlPopover: this.pickerId }, h("button", { key: '1b0b3b76331731d3c1af0d73ccb6dde06326184b', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
                 backgroundColor: this.disabled
                     ? "var(--s-border-subdued)"
                     : this.value,
-            }, type: "button" })), h("swirl-popover", { key: 'fed520dfbe8789e62136bee0914c99c697201239', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'a77e5a8205fdfd16b1f5e7792e35d49fd5a6987d', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '23b7426ee1d4a9bccf311ca46621c09d779eeee4', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: 'd93b43a8b6d680d7d52743dde653a8333d67d514', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '3189ed30ad815e64b265e1f3c3b4464e5799b7ca', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'e2cd1e63d998d906b824c5d0c8e4a6eaedfe23f3', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get is() { return "swirl-color-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -158,11 +158,11 @@ export class SwirlConsoleLayout {
             "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
             "console-layout--hide-content-header": this.hideContentHeader,
         });
-        return (h(Host, { key: '877a99276f633b0c211ea753e8900a286c715c25' }, h("div", { key: '5586571f3fdf9e53038e519895691d4bc7f02ec4', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '12a85311d8068aeed8399d9070d0785d66824bfa', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '21d40c363f181148ae6719ba5dac8dd81ccfbee7', class: "console-layout__header" }, h("div", { key: 'fcf090e6ecde0cc590ee3562d129c133f6ba3736', class: "console-layout__logo" }, h("svg", { key: '64ee96bab28665e62c021ab6bcf00ca232602ef6', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '32d2efa245e5bf92f79c16a41ef3961e1289ca18', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), h("swirl-text", { key: '66d01881ffa7eed51ac23707e2803df840c626a9', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: 'fd9a4fe72a628827f936576d189c21232bd0cc1c', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'd4f3a64b04a40c26c3ffb37d7162e715e36fe9d7', name: "navigation" })), h("div", { key: 'c9d20af26bd0f73b65e2695df9d45691f1d3e370', class: "console-layout__user" }, h("slot", { key: 'eb4c972928244f44fb228e850ae5292853258f8b', name: "user" }))), h("main", { key: '0b4fedd1556dd5a03b2a2abc1907872b3e68d81b', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'ec865f602abb7389d54c7d724c5b3e8e061f399a', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: 'e43fdcee425d18854fa5a2562d0ceb4bf2d9270e', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: 'c17c47a0083729471c38b5b39cb1321ccd5b500d', class: "console-layout__app-bar" }, h("span", { key: '056f5cb385c2e1d23e61160f95e856e49172f69f', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'd6d7501b4e06a909ebe26b74db6a964d654e4f44', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: '6d3d76b3bbe059e36b83d71bef04189d9bf52697' }, h("div", { key: '8be9369affb1e769fa088af15c278d5bcef3239c', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '18f96ffe0cd4531fa1c1432571e9865c81419519', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'a6ca9595440e044f01e9eeb99a02669006651377', class: "console-layout__header" }, h("div", { key: 'eedf50754624ba62d2dee201caaa4c722472e867', class: "console-layout__logo" }, h("svg", { key: '126b0b43f34bb3b4b17ce55f443a28a9ab920bf1', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5816b1cf9245a21f410b78d4df44be804f1f8653', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), h("swirl-text", { key: '94260711560885dd241e2c982d41a6a445ab500e', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '02f8498f9cc229c3f2264e47df1a524033bcdc3b', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'ba5909d095b6287796877cd96d795f93dc440512', name: "navigation" })), h("div", { key: 'df6cf86f2df40b1311d7e8272b0aead808001358', class: "console-layout__user" }, h("slot", { key: '71d379979ed62b36ab090e2ee7275f84b2348738', name: "user" }))), h("main", { key: '79b024113f1ff98be044b1ff439b060ec427ba2e', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '11c0da8a1ceb9f1114b31fb2f253ef2cedb6e841', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '945c13dc3f1a137f67dc4dd23372abd59303dad1', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: 'ade2fdb3b97bca5b11d3f51960130554102eaf93', class: "console-layout__app-bar" }, h("span", { key: '3763982c2893f0e9f4051858cc13348b9ad87464', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'adb4797947a8164a439920cf46b78c01ba71ee6a', 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: '354b92ed6af2aa0051cfbb0161613dc32cbe2b26', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '346895b42e20c227c22d4f065b952bdd436c467b', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '21ba3ef3b8549fcf5d6c7e761551c9aa520b64d8', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'fec0e51550ebc7e65904a26cc6a78bfa5dd773ba', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: 'a330cb8873383a6600414701ba0ea125aac15a99', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: 'f48c576eccaa12004dae489601f662700f11ac76', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '59ec11a9ff739c49797c6374fab5afc7df7f4514', 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: '0d029d7ebf84628808ac2501f863609948cc5d2d', class: "console-layout__heading-container" }, h("swirl-heading", { key: '3cbabeb0a8a841dab374bed6ef50a29d685b5551', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '097a88d77cb6242e39861037ef0bcf78e915c4dd', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '74c47854623acd241d3a7201fed507334323c888', class: "console-layout__heading-container" }, h("slot", { key: '518687f5c9f81198013a85a81e0a1d932cc8fda8', name: "heading" }))), h("div", { key: 'cd4d077c51e8ab5ba94c344b9ca055450700233f', class: "console-layout__content-header-tools" }, h("slot", { key: 'f89f06be1d237273cce2f9cfe26cea171d71758f', name: "content-header-tools" })))), h("div", { key: '2542615930e0927c9ea8185e4827f3c063b21044', class: "console-layout__integration", style: contentStyles }, h("slot", { key: 'd68be43006c3e7eb82d52f8f6563d4ae679264cb', name: "content" })))), h("footer", { key: '157ca488101270e296a0265761193b64db44f3c3', class: "console-layout__footer" }, h("slot", { key: '87fd0b86404d9e3bc5ccbd44f3fdca4a1ef01138', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '17d923022d523704af1d1916637d2af4a5a5504e', class: "console-layout__overlays" }, h("slot", { key: '7a436c4622b62db07cba9935f4930e8e06800971', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '888442817c242245c8a4254b1fcbdac131e9664b', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '9a42899542bf5a8f3015e4a9830adf7e82b16602', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '368709207382507b0f3acc7eff553af7fd21ca12', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '1b818fdd0857179d2571b2c3636e4ea253670c71', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '997508980962020a361281a61acbda609dd02f5f', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: '597ee6188a39738b85cfe5b8ee1cff5e81fc470b', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '9dbf4f8f04e1e32eac104d324448d9678122e141', 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: '017cca3478dabf0347de9c906da9639dfd55a186', class: "console-layout__heading-container" }, h("swirl-heading", { key: 'd2799b47248282463d9e53f81870d3a644c48778', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '758441b1390f2e7014b25123d978f0b3f37dd09d', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'c1da0ed02c4391cd1134e29380df6999432ed390', class: "console-layout__heading-container" }, h("slot", { key: '20b72fc9bebfe7fa55272d3743448b75cdbec86c', name: "heading" }))), h("div", { key: '631804252b9d02e7e77c447736f82c72b86c5b12', class: "console-layout__content-header-tools" }, h("slot", { key: 'd8111f725736d6269e617cf6f69bf1c2a4082058', name: "content-header-tools" })))), h("div", { key: 'bc36dc116663e54fba88653175ea494b9746503d', class: "console-layout__integration", style: contentStyles }, h("slot", { key: '563651e53020e12c2d936ab8c0585a9939ea2dc2', name: "content" })))), h("footer", { key: '1fbabaa24e0a457835e0e173542c29387d834666', class: "console-layout__footer" }, h("slot", { key: 'e7444b9ee022f3a1bb816fe4b7c32e25c9e07d9b', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '0ab722bb6bc57e4b3bc2fe11e771f6f796c7fd0e', class: "console-layout__overlays" }, h("slot", { key: '86312704fefb36b2b9f8d5a24a191c588acf23f1', name: "overlays" }))))));
     }
     static get is() { return "swirl-console-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class SwirlDataCellStack {
         const descriptionId = this.description
             ? `${this.headerId}-description`
             : undefined;
-        return (h(Host, { key: 'c5a7f1db47518a1159922596dca273835ad8e273' }, h("div", { key: '5a9155ba4874b1a2aefa9ac66376843ed330c17e', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: 'f96be02e2672c703fc0f036cea4b8a46ca600ae5', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: '69d283e694e896bd4a8d06941400668873cdfdfc', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '45aeece6c12e55eb617d9e3d0ca5b704e0aeae4e', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: '768d7a8fd7b8b47dc3ce97b23e8488c7c6c663bc', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: 'fe3829a57d9e5357c58f6fca5d4236a611c0b553', class: "data-cell-stack__cta" }, h("slot", { key: '7a7ff7b1e33321685e3bb552154cfcebbd094463', name: "cta" }))))), h("div", { key: '8ba716b5991d67d0edfbd6139f821a3eace709d7', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: 'f3c3f72c0c551a3bc730e4d83b13cccb0d632bfd', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: '9816cd9a28f4771294e607d37f7eafa7bbeec397' }, h("div", { key: 'a4f70e0edf996c0502f17bdc7cad8de297431e76', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '66ea79f97995eb38d609ac76681b60c8d2986aee', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: '170fa4424c37ede46d21c98fe9a0a3e30e7dc6ad', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '8b533a3efc877d00f2b883b4bd97f5ce3ff0d82e', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: '09b7ab8c1916e3eee5dc319a82b2cdf2261f0507', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '2d543e439b20b707cac55899382b4da1db83e867', class: "data-cell-stack__cta" }, h("slot", { key: 'f425a418b60908285450b4714f941272e541ad9a', name: "cta" }))))), h("div", { key: '14ba4e4c794c2d6bd27ff4dffaf7241139a1d694', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: 'aa91bc50a03d16f0ca0ff7026f41074200480053', onSlotchange: this.onSlotChange })))));
     }
     static get is() { return "swirl-data-cell-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -215,7 +215,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '2ec594d964122a487dfe11366be4fcc7b569d8e2' }, h("div", { key: '68865174eaed718b1b9a01cc30da844092419404', class: className }, h("input", { key: '5d19ca6467fe106aa847d7c2190ee8383f8fdd03', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: '934f9a34104e23208fc82f5517129199610bcd6a', swirlPopover: `popover-${this.id}` }, h("button", { key: 'b0f758fec8fa2305ebf5e0266a03fa60dfca9c1f', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '01348f120dd398170b2c5e28c81397a621175cb8', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '86c33819d1169ed69eb2f07db7e4e644ec6cbd5c', 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: '75e98326b305696e9a35f218f25dd96eab152f67', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: 'f166999a20fff05802989608ed1329a585564547' }, h("div", { key: '11f437da98a042c658724fe906e0f921a99e97af', class: className }, h("input", { key: '3763a00b384f7be10e36101411bf28e8298dfb2e', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: '8d588fae83751487fdacceb53d09f6030fdab74b', swirlPopover: `popover-${this.id}` }, h("button", { key: '0b5a831ca17bb7a24616625ea59c5a4ce330df8f', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'd961c2eb0baf5d7b643b5d50619c36ae4a864443', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '3fd0b3eaa50b893873d48bb3f0976b862ff4e839', 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: '539b2e3b63d02c53acb4449d65ae9c502d2d9f22', 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

@@ -37,7 +37,7 @@ export class SwirlDatePicker {
         const className = classnames({
             "date-picker--fixed-max-width": this.fixedMaxWidth,
         });
-        return (h(Host, { key: 'a52360627cab5b1c4aecc6cb2700b00adef28853', onClick: this.onClick }, h("wc-datepicker", { key: '64496eb6d4ec9e7c4f37b6a9b83f67e8318a81b4', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
+        return (h(Host, { key: '13262346d09cdbffecabceaa83e0439f413b5c5c', onClick: this.onClick }, h("wc-datepicker", { key: '74021ff9f381cbe525f5dc52f05dfa9287e9b2d9', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
     }
     static get is() { return "swirl-date-picker"; }
     static get encapsulation() { return "shadow"; }