@getflip/swirl-components 0.290.0 → 0.292.0

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

@@ -46,10 +46,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: 'eb20c98db01ff9bd3aac6b497fa6f7e3ed4e3ad9', class: "table-row-group", role: "rowgroup" }, index.h("div", { key: '1c5caf8fe15ba2e2374fbc98dca54ffe8762628d', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (index.h("swirl-button", { key: 'cc73bfe71d420e7c0c79d79c11d5fef78a075ef1', 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: 'fd964075bf619d18664cd5d7653e5789fac19e67', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { key: '58a526fb6c387074627d3ebecf26eeeb66c874f9', class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { key: 'acd103cfde8cd75fe7deb86e1ea15cb5b40730b4', content: this.tooltip, position: "top", positioning: "fixed" }, index.h("swirl-icon-info", { key: '5c4f59c7e46236d0d811b52eeccc95cc382d7c15', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("div", { key: 'aea0e3fedec73c5f59a7f96355794e7bb9726fb9', class: {
+        return (index.h(index.Host, { key: '3f843b7149f35349d269ccbb137f7e5d9378b252', class: "table-row-group", role: "rowgroup" }, index.h("div", { key: '5bdf13651025084b0430f40c6f3b66696799a5ac', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (index.h("swirl-button", { key: '9c97406fe45cb102543de38ab4891d010c77bd12', 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: '296df56608dee2b662681edc875d8e08da73bbc6', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { key: 'dd86f1c97f81eef4c84a51e7bef29025ac7b9302', class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { key: '8136c94ec639ed44dd46e6b77cd3c972d0c74f61', content: this.tooltip, position: "top", positioning: "fixed" }, index.h("swirl-icon-info", { key: '69a072a885de0c997cff659bec98878f1d86d727', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("div", { key: '8a1be8b8482c521642a7223b1ac2ef6e98b8eb2b', 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: 'd530d932920f87cc912fc256611886fbcdd2ca01' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, index.h("slot", { key: '59762004f9f09fcf8276796cbb25c2d4eec44c00' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -23,7 +23,7 @@ const SwirlTableRow = class {
         const className = index$1.classnames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (index.h(index.Host, { key: 'c88fcd68ccdebfe7849194d555026f2e028eac0a', "aria-rowindex": this.index, class: className, role: "row" }, index.h("slot", { key: '47a647470df409a4f3f08eb611f8a639dbf7fa51' })));
+        return (index.h(index.Host, { key: '17fe5b57507dabbfbce26b3f88c83c927a5ec3e9', "aria-rowindex": this.index, class: className, role: "row" }, index.h("slot", { key: '5f8572685e58580a5261cbc425982e2dfc60b6ed' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -326,7 +326,7 @@ const SwirlTable = class {
         this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
     }
     render() {
-        return (index.h(index.Host, { key: '7a80f66bb69e1e2bb518c9f4ad7373f3d1cd8aaf' }, index.h("div", { key: 'b902a14ca817ff832c0622469345dc0dffca1fe0', class: "table" }, index.h("div", { key: '86f4ee3195984e75b525062d9b379b8ee86d66e1', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: 'ba0104bfe969a01d50dcdcaa5624927b6869724a', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: '975f6b52dcaa745662c33f4faaf90d6b99fa66a6' }, index.h("div", { key: '582c32d143f9291b72ecafb726b51907bffabb5e', id: "caption" }, this.caption))), index.h("div", { key: '808c56a7fb22853894b988d8f8515b67dda232bc', role: "rowgroup" }, index.h("div", { key: '1aa3dc88ce963001bb792d42a9e3730519377b83', class: "table__header", role: "row" }, index.h("slot", { key: '1be89a881770c763962ebc0a88b01809bf1a7565', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: '8d891c4281b4e85a51589e44a7281cde41fe68d2', class: "table__body" }, index.h("slot", { key: '0e1a53489761f18466f7602c75ad6cbbc43f58f8', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: 'cb86d4b7da8de46dbcd0c24d0e8a54e5e6ef34de', class: "table__empty-row", role: "row" }, index.h("div", { key: '801287a643effbbdc592af74b72285e2a254bf42', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: 'ceaa762a51a2d65ed970bddb6e41fd0583ed07ed', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (index.h(index.Host, { key: '489e0af2784b875210a639f0274df147bf2e9a9a' }, index.h("div", { key: 'dcce14c2a441452f800a259d91d39f8bfec962b5', class: "table" }, index.h("div", { key: '7401b8e724d82978365e30f124587f55fd8eb8f9', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: '4ef505d8f63534189a09cbc10c0488676f64da46', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: '768afaa50928f328d49d3b8753a1ace11e4a6250' }, index.h("div", { key: '1717c365f6685d5a5f6e35f4af8418844872a9e1', id: "caption" }, this.caption))), index.h("div", { key: '0eac972a51fb8855bb0fe53f21e26de0574ecfa8', role: "rowgroup" }, index.h("div", { key: 'f1117b14100602c5aea6b55de9ced8417535615c', class: "table__header", role: "row" }, index.h("slot", { key: '20c8bf8b5d06d4a1814b0e370bf3b97c01fded35', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: 'dc3fcdcda939a78ab236104865fddcce10574012', class: "table__body" }, index.h("slot", { key: 'ea8d69b060c6130406bd8d891472217cc942b0aa', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: '0fd3d5ce20766413ace37aa1fde42f162b3569d7', class: "table__empty-row", role: "row" }, index.h("div", { key: '5b04c803236b2ab41a74e99c289d69063359e323', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: 'f26bac5dbd2b600b90f537fa833112754e9f1261', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -88,7 +88,7 @@ const SwirlTabs = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: '1ac2dfa2ae746878117dd5a9d084c4f01b3bfea8' }, index.h("div", { key: '01e1a9a7f5fd4801af2bd54750f3e7954a6fff50', class: "tabs" }, index.h("swirl-tab-bar", { key: '9435cfed3336d04ae4f531992c26e1fbd54c4520', 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: '649844c197a13ebc8cd4a7925acb1cf48d728404' })));
+        return (index.h(index.Host, { key: '6b910c04a51b3132298f089eefa597b0f863fc4e' }, index.h("div", { key: '5e16de5360ea32a19bbc95f6999176b5d967adb9', class: "tabs" }, index.h("swirl-tab-bar", { key: '7d225d01d16b36c73c38dd4f06aee18e71bf082c', 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: '7042180e086172dbca0a2974779284171b182b04' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -189,7 +189,7 @@ const SwirlTextInput = class {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (index.h(index.Host, { key: '8877954f2b89a0b7b9669c918b7daf110607c131' }, index.h("div", { key: 'da676db95d6671652984ac045c906c2793f3656f', class: className }, this.prefixLabel && (index.h("span", { key: '8da3604242fe0e746285915fe024f4920730c496', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '5223ee8c91b51c07191ca305c5bad1f6b7dd311a', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '6456ab9afe0c8be65de7a0c11259cf95e1cd1e4b', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: 'be09212cb1701d9f0f5a4e62450cf4a52e540db5', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: 'aa7b43c410667c07926bf961659f418dca46851b', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: 'ab4c0e6e8e61e80462bed282fda11edcbc36dc28', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: '145fcaa35c8c842cafb2d2988437e6db9bf1857d', class: "text-input__stepper" }, index.h("button", { key: '2ebb5e19d146e168479e82ca56d4332ff6693789', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: 'b8c528d353e1ed55b135538e36c4252203091449', size: this.iconSize })), index.h("button", { key: '58d8392f4263b0e3292020a66bf1b29756b72af0', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: 'e04b796438f6e3f77bc594bc400a027e8f1d2583', size: this.iconSize })))), this.showCharacterCounter && (index.h("span", { key: 'c387de92beed839754ebad2d032c56efecfb8f4e', class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (index.h(index.Host, { key: '0b8eede30ea9a577bfebda81539cc5e1e4b5fe95' }, index.h("div", { key: 'bc2a3ab889a8419636c393f9092ab3ed4a56f11c', class: className }, this.prefixLabel && (index.h("span", { key: 'a01095f25187269a58a9cc5cae28975b8d6365a3', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '3dbf1ce0097b57977a49a989eb2e4c842e990d79', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '3da40cda2b2f392da53a10797cc96fd726f48ef2', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: '38cc8425b91dc70a26013a600e49da131db868cd', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: 'aa9e6a263886a5447b4af70bc0156b74ac74ff46', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: 'fa338b9f668a7a2ce80c827a4a529a41f129a441', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: 'b113f02d036be11655038a48c5ed649d82b240a3', class: "text-input__stepper" }, index.h("button", { key: '61efb8ca9aebaacdeb8b1aac4e1bc96389a97487', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: 'd04ce617e500fe49751f0def355124c8a6913872', size: this.iconSize })), index.h("button", { key: 'dd2a2d378be0b6149332dcc49faca360cd96260a', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: '0615ab4dfe50d8ca22864e016df8634e8d47ffb8', size: this.iconSize })))), this.showCharacterCounter && (index.h("span", { key: '2d0ad8c0e8a8f894165ed20013a3e7429a93230c', class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get watchers() { return {
         "value": ["watchValue"]

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

@@ -156,7 +156,7 @@ const SwirlThemeProvider = class {
         this.setDesignTokens = [];
     }
     render() {
-        return (index.h(index.Host, { key: 'debfbb9678d6e369c7481e5f712ce472ba2d9c76' }, index.h("slot", { key: '6e754b8908c5ff60064f021c28666708da2f15a9' })));
+        return (index.h(index.Host, { key: '06cb7dab4654a9aff51a3461e0dab0d8a1399330' }, index.h("slot", { key: '942441b82aca3622b43526e59f258a0011ec9755' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

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

@@ -129,7 +129,7 @@ const SwirlTimeInput = class {
         const className = index$1.classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: 'e6c010677d0fe28d382412d125809f54b27b70f7' }, index.h("div", { key: 'fc50e1af664bea9d903acba075ce797f82c382de', class: className }, index.h("input", { key: '434bfe9e5029252ff1eacdd09dc1e5711847bb47', "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, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), index.h("span", { key: '680a27380203369f4daf51f631923c2b5307ad0b', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '15d2dad527da68b7200f678c6ac6c035bd301e8d', size: this.iconSize })))));
+        return (index.h(index.Host, { key: 'a38e24f535ad79a370fb2bb1f9d339632c59e60d' }, index.h("div", { key: '5ce3a38a4178db3e8dcf6e6e95e6ca12d38b3685', class: className }, index.h("input", { key: 'bfe7f9b3711f46c2edce8ce0a1cebf8c496e9979', "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, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), index.h("span", { key: 'ad37f6a6d1b7ba1895f1e1aa0a981bf1822cc975', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '21886d25c983e7295f2d43c95deb40328401366f', size: this.iconSize })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -22,7 +22,7 @@ const SwirlToggleButton = class {
         const classNames = index$1.classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (index.h("button", { key: 'b8e7f721501d04c68b53c450345b4dcabc790027', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, index.h("span", { key: '4eef8b7908fc9f7ba892068eedcfd9773dbe963f', class: "button__label" }, this.label)));
+        return (index.h("button", { key: 'bf631952cd307b78282e5f146970b5ec52864e71', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, index.h("span", { key: '389eaf537658ba0530e96c7a95d767edee278131', class: "button__label" }, this.label)));
     }
 };
 SwirlToggleButton.style = SwirlToggleButtonStyle0;

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

@@ -61,7 +61,7 @@ const SwirlToggleGroup = class {
         });
     }
     render() {
-        return (index.h("swirl-stack", { key: '3f15bce65905838eaafa73ecd6cebe6737c35b7f', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: 'ca54b914417598aacd1f92ed5ac8b486dc053d8b', onSlotchange: this.onSlotChange })));
+        return (index.h("swirl-stack", { key: '90295cb6ebd80d18d13b91ca6e201519a25d8d48', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: '80cdabf2a4cc3442a9890903fd26148d26db3ad4', onSlotchange: this.onSlotChange })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -99,12 +99,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: 'a42d7d58474bf84de0d134f2b3609967559dc879', role: "none" }, index.h("li", { key: '51cb405ab5f9530d4e6e765e67057ac9997d4634', class: {
+        return (index.h(index.Host, { key: 'c5c9aaab9e0ae98823e070397b4210748aa5b89a', role: "none" }, index.h("li", { key: '247b020fb82797a67995dfff2e0cc46d0f45b12b', 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: '44f560f801d3cf310501173dee5d2f4705570dce', 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: '123e8940aa5bf2428dfdcd7d64edaebbbec9cbc6', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: 'ffac14d62fa8e10df0ae5904e0e2cc7a1b2f2ef7', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '1efecc50dda818fd6bb170452347e56e9fbf55e5', class: "tree-navigation-item__label" }, index.h("span", { key: 'c4853609022c3396999efa4a865537decdc869e9', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: 'e1d8cb7ef87f2f30d0f98b578bcb062ea7db7f6c', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: '6b3366a4a34fbc0984ded85cfc95b26b85eb9841', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '486638d47ebde4c21734f40fc517ecbb57124d13', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: 'be197e40ece624cc4235ade598730bb0677adef0', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (index.h("ul", { key: '91f71af45a512ba54aebcef3cd5fec4b8c17b361', 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: 'ae089b5cfc9e906bbdb47a8a18a6f9e93f0f5178', 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: '2280b27ba700de1473c91eb35f5d2de08bc3540a', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: 'ee4146b5a61f0bad5d00371106fe782ffa32cd01', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '03f0283be566d93548cc0f516adcc2a9a3a9bc66', class: "tree-navigation-item__label" }, index.h("span", { key: '00af4fbe3d42cf0f7f327ae967381a30427f2492', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: 'c41f06c4e025286ddd8c79367d1f13f7b9360f4a', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: '5ccbfe78fb441c52db23ab0e9b92fd4f3367d6fd', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: 'aa87687dbee58bb91a9a91ed04e430730e27bdd9', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: 'acdf648348a2c4f9c1e5b29a6c410f29237b0f02', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (index.h("ul", { key: '8fc6a90fcedc94cae7a235982ff793a6d0f56a86', 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: '904ab4553e16b41f600100ac0ed143bf4068fd5a' }))))));
+            } }, index.h("slot", { key: '32c27c15243605450ec166c1ec1dfd3170da624f' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -13,7 +13,7 @@ const SwirlTreeNavigation = class {
         this.label = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '8246dcc5d18a8736dfd23c7974a8deccd0403ca9' }, index.h("ul", { key: '5b4979eba60411f412fabcb92243b497fc1b45ae', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: '1b04319c154ae86265056fde34d3b1012c33dd38' }))));
+        return (index.h(index.Host, { key: 'df4b506f6383d8bba14a49b1c06d36ef970af691' }, index.h("ul", { key: 'fb3d1cac0cfe246df7abb222294d24200a4e712b', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: 'efc6f605145aa153900f92e2ccb38f47b6a00d5c' }))));
     }
 };
 SwirlTreeNavigation.style = SwirlTreeNavigationStyle0;

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

@@ -81,11 +81,11 @@ const SwirlTreeViewItem = class {
             "tree-view-item--has-tags": hasTags,
         });
         const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
-        return (index.h(index.Host, { key: '47fd18686962962937ccc3708f5055dada1de65b', id: this.itemId, role: "none" }, index.h("li", { key: '16d0c6786f038ec8f1bb9082f7e3039856dd6733', class: className, role: "none" }, index.h("a", { key: '4e538aa7a3ae3704ae75702ae4b576d40b5afc2f', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
+        return (index.h(index.Host, { key: '99e7b997cc0ac4b876a39ad8c86463f65b1f2b04', id: this.itemId, role: "none" }, index.h("li", { key: '92d5be2ddaf1e9ffde494bd80558b21be1d47b89', class: className, role: "none" }, index.h("a", { key: '8013e23ffc362c1c40d2bf499cc311408f28b450', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
                 paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-${this.expandable ? "4" : "8"}))`,
-            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (index.h("span", { key: 'c8378dc70fa49a84ba345b7a352f480bc777f768', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: 'a9d66509696f58cecdd0d5ccacbdcd182f90d676' }, this.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: 'cc3b301449a61927977554764808d4a45ecc12bc' }, index.h("span", { key: 'ca01a05b89a703befb4323a770590f59d3c97452', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '654edeb374f8a8728bdf82e228231f62406fcfae', class: "tree-view-item__label" }, this.label), index.h("span", { key: '92809da1786d9852af825f6958113c0b01618416', class: "tree-view-item__tags" }, index.h("slot", { key: '38257ba68c4d6822d4b71e9b6aca8435b2a55c2e', name: "tags" }))), index.h("ul", { key: '50572d909fa2ce6df8f3b24d7dc151328bf5b12d', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
+            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (index.h("span", { key: '6e86292381b7968130520b76b33e95d6267de99a', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: '76518e2402d633f2f4e410155ef8306fc74ee231' }, this.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: '4cec92ec50f6e7b8eb7a10aa0557b39be03b1369' }, index.h("span", { key: '994c4d8f711823a38dc49d519d97d000dc94427e', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '0f0f0737811692e3d86d1147cbf9b5f2707156e4', class: "tree-view-item__label" }, this.label), index.h("span", { key: '6d59fb68782991840fa1e3728490bf3d52284b56', class: "tree-view-item__tags" }, index.h("slot", { key: 'c73c93ecfb910c927b43915e10deec8c63357af2', name: "tags" }))), index.h("ul", { key: '3025c601105e94f5a19e7585c74b50398e242275', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
                 display: !this.expanded || !hasChildren ? "none" : undefined,
-            } }, index.h("slot", { key: '9a73358108ba61c642c9cb36cf40123316979638' })))));
+            } }, index.h("slot", { key: '44a4643f2d58607f9013ba83f8e1cc6d817394d7' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -199,7 +199,7 @@ const SwirlTreeView = class {
         return nestedSibling ?? undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'c7ef2c549ea86a8206321c0d0ff1697b52e09596' }, index.h("ul", { key: '25ad431f5ec2295cf853e8d44c468203733f503c', "aria-label": this.label, class: "tree-view", role: "tree" }, index.h("slot", { key: '8478ccb313cc9ca6e1d60f7fbb4a194489bd9229', onSlotchange: this.onSlotChange }))));
+        return (index.h(index.Host, { key: 'bbcd1bc74c52c3b8896f20be1caadf84734e4b2f' }, index.h("ul", { key: '72bbdf03a78b04415cd17de341b4e4af7fcf3b54', "aria-label": this.label, class: "tree-view", role: "tree" }, index.h("slot", { key: '279f56e5bb2eec5852bacc8e5416164cafb22f50', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -16,7 +16,7 @@ const SwirlVideoThumbnail = class {
         this.src = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'c3391b000313dfda53d6f3b41b819ab281d44848' }, index.h("button", { key: 'a919fcec1196b1c38751e6f42230851202887bac', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '7f725cff5641767e7cf70342155959ada5e2a176', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '7e528e23564753c92407ef8959d1f1fec67decf6', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '98ab1fcecd46520ad8257da8a89f12536869061e' }, this.durationLabel), this.duration)), index.h("svg", { key: 'df470fd68c7e8190c87ea9d97e46ed37cf06189f', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'a7adb674f667bbfdb88bfccf9cd492a651d689fd', 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: '037e6f35a107a2ad164eacd3f528b6a5828c1e06' }, index.h("button", { key: '7c29bfc214d4d0673908a9256ac19dabe483947d', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '99f5ce1c96758efeda64ab45078c12d1b2073a4a', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '0ee014ffa46b74a96110d08efc80c411acf8b9fb', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'cbe67dc2b72a6131641345c9a592ea6026d83124' }, this.durationLabel), this.duration)), index.h("svg", { key: 'f10251c6fd959bfa10d3a53f48999b8a2fe1cb12', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'a61e05c87882a9173e0f5a7b9cf67af7e5c93214', 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 = SwirlVideoThumbnailStyle0;

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

@@ -12,7 +12,7 @@ const SwirlVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'dc381cd329d166df18e107e0216936c445300bd5' }, index.h("slot", { key: '8a604b0d79fe11af79b12848db1e84282cd41d4c' })));
+        return (index.h(index.Host, { key: '787f927a3a310f100160b65f0b88d2907f53e9a3' }, index.h("slot", { key: '9fda62dd3f0e8b00e5bae33edac6c6997db2d8c7' })));
     }
 };
 SwirlVisuallyHidden.style = SwirlVisuallyHiddenStyle0;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,8 @@
   "entries": [
     "components/swirl-heading/swirl-heading.js",
     "components/swirl-action-list-item/swirl-action-list-item.js",
+    "components/swirl-separator/swirl-separator.js",
+    "components/swirl-stack/swirl-stack.js",
     "components/swirl-app-bar/swirl-app-bar.js",
     "components/swirl-app-layout/swirl-app-layout.js",
     "components/swirl-text-input/swirl-text-input.js",
@@ -11,7 +13,6 @@
     "components/swirl-banner/swirl-banner.js",
     "components/swirl-box/swirl-box.js",
     "components/swirl-button/swirl-button.js",
-    "components/swirl-stack/swirl-stack.js",
     "components/swirl-button-group/swirl-button-group.js",
     "components/swirl-card/swirl-card.js",
     "components/swirl-carousel/swirl-carousel.js",
@@ -36,7 +37,6 @@
     "components/swirl-progress-indicator/swirl-progress-indicator.js",
     "components/swirl-radio/swirl-radio.js",
     "components/swirl-resource-list-item/swirl-resource-list-item.js",
-    "components/swirl-separator/swirl-separator.js",
     "components/swirl-search/swirl-search.js",
     "components/swirl-shell-navigation-item/swirl-shell-navigation-item.js",
     "components/swirl-skeleton-box/swirl-skeleton-box.js",

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

@@ -53,6 +53,7 @@ export class SwirlActionList {
                 this.container.setAttribute("tabindex", "0");
             }
         });
+        this.setSectionSeparator();
     }
     getItems() {
         return querySelectorAllDeep(this.el, '[role="menuitem"]');
@@ -75,8 +76,21 @@ export class SwirlActionList {
         return items.findIndex((item) => item === activeElement ||
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
+    setSectionSeparator() {
+        if (!this.el) {
+            return;
+        }
+        const sections = Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((el) => el.isConnected);
+        sections.forEach((section, index) => {
+            // First section should not have a separator if there are no items above
+            if (index === 0 &&
+                section.previousElementSibling?.tagName !== "SWIRL-ACTION-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+        });
+    }
     render() {
-        return (h(Host, { key: 'b16da7e5d0b8b4c9ee3e9160c013e5a2385d6900' }, h("div", { key: '1eeb9a88ebd644dd22c32022aabd83a9454dd2dc', "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: 'a2cbd9841b0a94a4fe40346c86301f548232d81d' }))));
+        return (h(Host, { key: 'bf72e9f0dae22b0accd9f9a41e78f4c39c562471' }, h("div", { key: '07952241b1a0bc5eea5da1177e7e8e20dae0c187', "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: '3ccd51eeb3c384bb5147ce09a63013c2f797c822', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-action-list-item/swirl-action-list-item.css

@@ -15,6 +15,7 @@
   justify-content: flex-start;
   align-items: center;
   border: none;
+  border-radius: var(--s-border-radius-sm);
   color: var(--s-text-default);
   background-color: var(--s-surface-overlay-default);
   font: inherit;

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

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  width: 100%;
 }
 
   :host * {
@@ -14,7 +15,6 @@
   display: block;
   width: 100%;
   padding: var(--s-space-8) var(--s-space-16);
-  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   color: var(--s-text-subdued);
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-base);

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

@@ -5,9 +5,12 @@ import { h, Host } from "@stencil/core";
 export class SwirlActionListSection {
     constructor() {
         this.label = undefined;
+        this.separatorSpacing = "4";
+        this.spacing = "0";
+        this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '297688f160ff018c0a2ecce9cb2bd2334a63b4ed' }, h("div", { key: '410c162413ca42fc3ea67cb8f242d425b565bb1c', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '5c65d4afe15c9c7beed9b475e22f20c5ef4bbdfb', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: '43ee7a618f4780e75b5d9434060807a0adeb522b', class: "action-list-section__items" }, h("slot", { key: 'fdccbc861430f3f6bc839e8166adfb64640fc56f' })))));
+        return (h(Host, { key: 'dfafe6bc3d74e22fbf60f07d0179bf71455bf48b' }, this.hasSeparator && (h("swirl-separator", { key: 'fd93a18adf97d0fb37f6f76e14992915e095ae92', spacing: this.separatorSpacing })), h("div", { key: '099c87cdb2e411546228fb28863a27c0e541caa3', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '7f73b8d374df2e68576320ea2276fcb1322a4780', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: 'd2b9872ca56dc628d83f41472603563f6f3e35b4', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'd9f3b4d084938db64a49975a56397b13db610ba8' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }
@@ -39,6 +42,72 @@ export class SwirlActionListSection {
                 },
                 "attribute": "label",
                 "reflect": false
+            },
+            "separatorSpacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlSeparatorSpacing",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlSeparatorSpacing": {
+                            "location": "import",
+                            "path": "../swirl-separator/swirl-separator",
+                            "id": "src/components/swirl-separator/swirl-separator.tsx::SwirlSeparatorSpacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "separator-spacing",
+                "reflect": false,
+                "defaultValue": "\"4\""
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlStackSpacing",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
+                    "references": {
+                        "SwirlStackSpacing": {
+                            "location": "import",
+                            "path": "../swirl-stack/swirl-stack",
+                            "id": "src/components/swirl-stack/swirl-stack.tsx::SwirlStackSpacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "spacing",
+                "reflect": false,
+                "defaultValue": "\"0\""
+            },
+            "hasSeparator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-separator",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -18,9 +18,9 @@ describe("swirl-action-list-section", () => {
             <span class="action-list-section__label" id="label" part="action-list-section__label">
               Label
             </span>
-            <div class="action-list-section__items">
+            <swirl-stack align="stretch" spacing="0">
               <slot></slot>
-            </div>
+            </swirl-stack>
           </div>
         </mock:shadow-root>
         <swirl-action-list-item label="This is an action"></swirl-action-list-item>

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

@@ -11,18 +11,22 @@ export default {
     title: "Components/SwirlActionListSection",
 };
 const Template = (args) => {
-    const container = document.createElement("div");
+    const container = document.createElement("swirl-action-list");
     container.setAttribute("role", "menu");
-    const element = generateStoryElement("swirl-action-list-section", args);
-    element.innerHTML = `
+    const sectionOne = generateStoryElement("swirl-action-list-section", args);
+    const sectionTwo = generateStoryElement("swirl-action-list-section", args);
+    sectionOne.innerHTML = `
     <swirl-action-list-item label="This is an action"></swirl-action-list-item>
     <swirl-action-list-item label="This is an action"></swirl-action-list-item>
     <swirl-action-list-item label="This is an action"></swirl-action-list-item>
   `;
-    container.append("\n  ", element, "\n");
+    sectionTwo.innerHTML = sectionOne.innerHTML;
+    container.append("\n  ", sectionOne, "\n");
+    container.append("\n  ", sectionTwo, "\n");
     return container;
 };
 export const SwirlActionListSection = Template.bind({});
 SwirlActionListSection.args = {
     label: "Section label",
+    hasSeparator: true,
 };

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

@@ -58,7 +58,7 @@ export class SwirlAppBar {
             paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
             paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
         };
-        return (h(Host, { key: 'f21458799a37778b5c7078c2f9679e4b323c306e' }, h("div", { key: '3ef4a4192a9422eb196869d72d7918057ed4427d', class: className, style: styles }, showLeftControls && (h("div", { key: '0f1c91a944780502d4253fc29a4119364b050f23', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: '300dec3bcb2e8d077c85d44549eb3fd43cd389b8', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: 'b703037e0f9cbf948cb2ffbe8fc708adc5b12808', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '7636c5ca8f7c835a873931e97064ebdb4e734f47', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '807553c0a0ba911a725aa22e4e10156e4a3a1f38', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'ae37678f60560b2cf13e75bd4e31f2da51db9371', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'd38fa06e1b0b2e6bfa37401ab22c98bba39f1a82', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '018f6e09dd24883fbcbbe045f5d90b2f1feb2a71', class: "app-bar__cta" }, h("slot", { key: '8691491e1759aee6b4a553ba7b4ed0794995a0bf', name: "cta" })), h("div", { key: 'e944c68e3d6a76818e98a8bf66d3c38f8e7484f9', class: "app-bar__heading" }, h("slot", { key: '2430a78a86602115a27f363139eec4520b3f8a00', name: "heading" })), h("div", { key: '5fbaca57c7b1dd1207f3fcd941ce583397bd5d9e', class: "app-bar__center-controls" }, h("slot", { key: '134470957f50dca26f9d5eb199caa5d02e9d61e5', name: "center-controls" })), h("div", { key: 'd7ad558e053ea6e76d24a317136669c338b95049', class: "app-bar__right-controls" }, h("slot", { key: 'a5a2d0dda80b23e3b855b4a84f834af53f24236f', name: "right-controls" })))));
+        return (h(Host, { key: 'd600deeb8a687bb4845149bcf2bad842f5ecf1f3' }, h("div", { key: '1c662e5e543ccec7fa1aa92721e7e3c43fbf6e4f', class: className, style: styles }, showLeftControls && (h("div", { key: '1360ad530e65281d1756d3857020dc745d103695', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: 'd1abed9606942b05ca70dc6a334b81050c4c1fe6', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: 'fe72d1498779c96c01893eb7befdbccaa537b947', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '8dcb78f5b58bf6bc641c456cc8a58f9fb001bf09', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '70d556ed3057812ba3bae94a3137f50475971b5d', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'ff0f84da0dc691e84d549c269efab64ad4052c58', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ba47ee06389bd22569408c48b6bdcfc6fdd1d039', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '48ec84b6d54b8a2bc480467ae6b7556f8d2f6756', class: "app-bar__cta" }, h("slot", { key: '2303f169c07f38410740fd75ef788944ee23cdd1', name: "cta" })), h("div", { key: 'a03346495a15b78da499f5e5dc584e140ddb3a85', class: "app-bar__heading" }, h("slot", { key: 'dedbfa247ba4d1c31f04aa670f11499218fe9b4e', name: "heading" })), h("div", { key: 'cae7eea7759c04cffc983d4dd525b6bf87b8ee8e', class: "app-bar__center-controls" }, h("slot", { key: 'fd94d148cbedad08013203e9aba179165c7afedb', name: "center-controls" })), h("div", { key: '16e9c5e550774658b7b6ea93ff695564f6d7e65e', class: "app-bar__right-controls" }, h("slot", { key: '218d119f1d046ceff9a243c155a00dd730b76508', name: "right-controls" })))));
     }
     static get is() { return "swirl-app-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: 'dd70f3b87a44a926c7b4da93b9e81a1eed6e2d97' }, h("span", { key: 'b2428a9fca48e5a9ad36dc345298254afefe2c90', class: className }, showImage && (h("img", { key: 'a0c55e77b3e238de83246752a37d9a376f624a6b', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: 'bedcd164cd1cc1fd698bcf74598e66c4d718e0c8', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: 'c56866be8b89817bc577b7081e3b2b0a859cd5d2' }, h("span", { key: '10581d1d8ae34c10133e0d8d911fc22a49625af6', class: className }, showImage && (h("img", { key: '5542d09f4e9afcead0d94d51208d8ab7fe3f1bdf', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: 'a6b5827035d9f8337232d00f2bc9bd7491ee6584', 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.js

@@ -349,14 +349,14 @@ export class SwirlAppLayout {
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: '2192bf3336762dea743265d083becd45482eedbf' }, h("section", { key: '3f8a980332d4f0ff89cb8b54731d06e2ed6923b5', "aria-labelledby": "app-name", class: className }, h("div", { key: '5b4efbeacb72bd6854e13b60017f16b49c7d3470', class: "app-layout__grid" }, h("header", { key: '496182fbe63fb76e8039079c7efc2a77f2c2f7be', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: 'aa33206028b8895027099dbb0ae1a702e132e039', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '58b240a3dfa39c69700f68b4c9a149077e48bead', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: 'a3e6c91b9f57424f46c9bf9ba7550328552a26ce', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: '37b5cbee5f7207cd453471eba7d071bd7693bed5', hideLabel: true, icon: this.navExpansionState !== "expanded"
+        return (h(Host, { key: 'bd1757d198f8e629b2e9754b47c30ebe5dc419a9' }, h("section", { key: '28b25940f98881967f1b39fabec35a839751159c', "aria-labelledby": "app-name", class: className }, h("div", { key: '52a19dc00ab90f4d0b774f84501e3eece9b4f42e', class: "app-layout__grid" }, h("header", { key: '820a3e03ad0c622e73df292141e78ffc5196f968', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: 'b3706641288a68f18319f0e4e5ba3ef47d6f398c', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: 'e5cacf0ebf353dd1760ef0b7dc124b0160554b12', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: '1e5e367858b4ae2ff731d96c9274c2dc580f47aa', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: '50d53650575d35d0fa744371e4b1b66b8c34632f', 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: '1b76d9241b88495dba00de2e6fb98926ee1d2861', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '51b1e6a6accad4a4173034e12e5aef256fd4d4af', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '3aa52779b10916a02cb8af0ac538311a11752f9a', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '1d182d4371456b494ade1f9f076706879a198231', class: "app-layout__navigation-controls" }, h("slot", { key: '85b394015a62588dc44374b6a4950e2118529f4e', name: "navigation-controls" })))), h("nav", { key: '6992a88da55541eb067e905de93c8bc1a093b04b', "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: 'c7ee551266b168aac662963dba75667cf201a48e', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '448cbde3919cdd986b7b49933d6afa8e96646db6', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '3c467742d3c0f80fe5aa56987c868a3b4e253988', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '80c04d971369df12490ae87d86664622aeb601b7', class: "app-layout__navigation-controls" }, h("slot", { key: '8e732928e682abe5eef49fc22614907f0fec0a91', name: "navigation-controls" })))), h("nav", { key: '71c3dc8235d56ce5c9cbfa5b701e020a735d6a22', "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: '68d20399402968c86fa57320274c5f047bd1ca7b', name: "navigation" })), h("section", { key: '52d59e9636b4ab053b0908bf990b73f48e6b5947', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '333ed1a7c47c50ca54c5cd50172aa3b7971913b3', class: "app-layout__app-bar" }, h("span", { key: '0c7fd56eb217ed64e3dd6308c88c71f97bae167f', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '5839a57d6e77288c0195a788e9a869e65063c465', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '0840f9bb0c1c1a40360e7a7b376498b2dd81a94f', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'e92ab3c9702c9121861996bf051ed972cbcf1af7', hideLabel: true, icon: this.transitionStyle === "dialog"
+                this.navExpansionState === "collapsed" }, h("slot", { key: 'f6a8b3b5bf48ca9a00017f907c7e1e4c245a129e', name: "navigation" })), h("section", { key: 'e44e1e6b08465e000378c80339b11680a1a8e725', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '3e0019dd933bc095980a871010a8723ebf95c89d', class: "app-layout__app-bar" }, h("span", { key: '1d2437a685cbba57563aa942c6dea4f5dc7ad728', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: 'a6f8147d45b2cc9aa877cb549f2e52e47a02975b', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '7678ad0057afab1ec8845940271a5e19d659c976', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '920ad1ff5b75f93179c4bf07ab56f3d042dd58ba', 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: '710f1bb3eabe05a6242399d7eafd75b888a5804d', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: 'f563b708831eb84fac2837c282b4b4b1425acea7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: '12571f31a669a614acfd32f7454d84d461607bb2', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: 'f7ff9464709e45343e507348182e381fe6ea384e', name: "custom-app-bar-back-button" })), h("div", { key: 'a666f10d9164da4ab09cd004b60e482e0a97e073', class: "app-layout__app-bar-content" }, h("slot", { key: 'ed2f67119740628b3728edc3667a187080e57c5e', name: "app-bar" })), h("div", { key: '2b6e269d6f7336e3c63f3682faa1a315c345649d', class: "app-layout__app-bar-controls" }, h("slot", { key: '8b156da7c2adfd5fa9d40053a07338a1480434b1', name: "app-bar-controls" })))), h("div", { key: '0b4579d78afefd3b85b90d0cef8707e778744ffa', class: "app-layout__banner" }, h("slot", { key: '689ccbd5956315c652b3ce5324983c0e8c6c7f82', name: "banner" })), h("div", { key: '10797e673aa548b3e3891f6ac52ba3192af4a0b3', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '7e7a12ce18cf8253aa2635cca54cefeb67ca739b', name: "content" })), h("div", { key: 'f72168b8c94062f8308ebd3b057200f8e573dd0a', class: "app-layout__bottom-bar" }, h("slot", { key: '01c84573749948a602bea15202a421e9207f2406', name: "bottom-bar" }))), h("aside", { key: '98fc39d9398c704382c9eda5ff8ecd480f560458', class: "app-layout__sidebar" }, h("header", { key: '51d7d5da2a7c49a2b7f2e40075439b7c67528fd6', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '3118ca488b32ff7a41a257d81bb0bcaee0223b8d', name: "custom-sidebar-header" })), h("header", { key: '22ce181e892eaf567682756c22091ec67fa79a6e', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'dd49fc0e2b3eb997250cf74b10b87eb0f7a3361c', 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: '3b9efe7bc6f5fdb423860806387843790c4d81f6', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'd251b48e76f0b4439f2de573cdd99fc22e98d141', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'ff32199befe85da72ba7f135ab2e14979f714183', name: "sidebar" }))), h("span", { key: 'b523374e50d55d49ae969d9dba0664b4c3d16229', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '6cd1a016a4ddff57117e55acf16e348f310ed4a4', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: 'db7051c0e81d62907746be98d713771e27cb0326', name: "floating-action-button" }))))));
+            this.navExpansionState !== "expanded" && (h("span", { key: '4356a054ba73b43ab719983f5e28f08618187c87', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '0dcc0b5175f72e651e9ba8fc54343bb8b10f044b', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'c409377d66e5d9653c3a4edacd00a7d1c36d41d8', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '19f1249cca6eb3d297c1bfb5c1237adf0563615d', name: "custom-app-bar-back-button" })), h("div", { key: '4d8ffb803fd1d60aeedc3abb27c2b587126b0809', class: "app-layout__app-bar-content" }, h("slot", { key: 'aa9769d6902c0dcea2873ed874d9efd39bcfdccb', name: "app-bar" })), h("div", { key: '87956c0906c878a60ba38a32ddd84b62e64c341d', class: "app-layout__app-bar-controls" }, h("slot", { key: 'de90973e95f87d557659269036fe3ba2ff841514', name: "app-bar-controls" })))), h("div", { key: '9092cbe26316ae42d16271d12ca0e22dba5f1d2d', class: "app-layout__banner" }, h("slot", { key: '442bba275cb42942e1f0910d9c02dda2a9af682f', name: "banner" })), h("div", { key: '924a188b2bbe99a0e75c70f1c7f5625995f1a099', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '94d6c1a191484f78595cc39eab5ff8229603d75d', name: "content" })), h("div", { key: '7c6aea10fad5a2852e7dd7c1faf2537e561ca7f7', class: "app-layout__bottom-bar" }, h("slot", { key: '425f8d91ec4c6970224cb8384ffa40c5f3242bec', name: "bottom-bar" }))), h("aside", { key: '7849759ec39060fa137dba9b466211568cd0746a', class: "app-layout__sidebar" }, h("header", { key: 'aaa9d7aaf245afee95d5b10bbe6cdd0fc3b0467f', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '9d215a803a91fe07e6f819a19ee44ff87e279fe4', name: "custom-sidebar-header" })), h("header", { key: '4c148f600be258693004721d74cfeacce295a54b', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'f4b0155f52a24d448fe3215d765bd5c6984f100e', 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: '69992a92cd4ec148de847b7235ec35b50d28beae', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'efba1faaebfc7fe100b0d53a1c5a5de79f5b7a29', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'f297a2f2db5bdafd7a88d7fea6fec50b8bac8e75', name: "sidebar" }))), h("span", { key: '4e87773e33eacaa27710a018e9f07803dc267ae9', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '704b7695fd2ece0c20f971f158e04cec95ffdb4f', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: 'a4c4bcfb8f498c7c6b878016ca84a29c7443c3d1', name: "floating-action-button" }))))));
     }
     static get is() { return "swirl-app-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,17 +200,17 @@ export class SwirlAutocomplete {
         const className = classnames("autocomplete", {
             "autocomplete--inactive": !this.active,
         });
-        return (h(Host, { key: '7ccdc5bbc34c0b67dd4bc43558672bfcaa925370' }, h("div", { key: '5db7afde57cedcd7f2f76cf3d3bf41ea3d1121f7', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
+        return (h(Host, { key: '58eeefcb57a5715a133f49b6cc147862402fda63' }, h("div", { key: '7dc51102fd166c185a5f6927b13e001eba0399d8', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
             Array.isArray(this.value) &&
-            this.value.length > 0 && (h("div", { key: '99b003b46ce6aca813468233ec46b9746afd5863', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: 'ad3f43e26a3ee67ffc1fa4a980d8a8a412f89787', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+            this.value.length > 0 && (h("div", { key: 'cdf129384b1551bf4a5dab9a95fb2a62c4f2538d', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: '4cf38354d4c4a5cea92f37bfaa6a6f9adc81834f', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
             return (h("swirl-tag", { key: item.id, label: item.label,
                 // eslint-disable-next-line react/jsx-no-bind
                 onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
-        })))), h("swirl-text-input", { key: 'b81c39bc6b02321f9ec1da7510e1ff5fefacf6eb', autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { key: 'e78b9b6e1179036e2c6133fab4e88e929450ba26', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
+        })))), h("swirl-text-input", { key: '615bcb83a20ddf04af8e452a6f0c5bbccc957c0a', autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { key: 'a7b788178aa3d66047833cd8b349d3c402901b7f', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
                 width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,
-            } }, this.loading && (h("div", { key: '464609dbec26c61919d20b617afc2c8b2bb2a1ae', class: "autocomplete__spinner" }, h("swirl-spinner", { key: '57467b10cf6732da9d3e913994cad372cfc4bdbe' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: '2e377e61b4dc64f51d48f73f4f92ffee8fc5816e', allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
+            } }, this.loading && (h("div", { key: 'd4c81fd79ce26e5929ab0cf9f271d855c96c0b41', class: "autocomplete__spinner" }, h("swirl-spinner", { key: '3931c2a99a601c738dbb33112a70a62183e1a455' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: 'acf7cfc83b7ed1f3900196e35b8b3e7e533fc029', allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
                 ? this.value.some((item) => item.id === suggestion.id)
                 : this.value?.id === suggestion.id, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.id })))))))));
     }

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

@@ -102,7 +102,7 @@ export class SwirlAvatar {
         });
         const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
         const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-        return (h(Host, { key: '56ebefc98134484870d719fda35e05d311716032', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: 'd6a8354aeb6d7e8ae7a01de79f66fc481d0627ed', class: className, part: "avatar" }, showImage && (h("span", { key: '212b277b9361c2935a4a937cda716bbd5f79afa6', class: "avatar__image" }, h("img", { key: 'd037a0e2ee08c7a324383ca075be9fa21e1bfbeb', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '08f7d449924aa06a5429668cdc8ca1b9aff81212', class: "avatar__initials" }, h("span", { key: '96c8725ee16bc7334675c44541aea46a50670bb4' }, this.initials))), showIcon && h("span", { key: '0e1794e27361d8b5a1c52fd604fd9e7d037ffbdb', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'ab06d6de3e3a501d66f4584ecc36179158c145a6', class: "avatar__icon" }, h("swirl-icon-person", { key: 'ba5d839ad1e4f6229ecd9dcef13d7150407dcc65' }))), showBadge && (h("span", { key: '956fad51793775322e5b608ea4226029ebe21d78', class: badgeClassName, innerHTML: this.badge })), h("span", { key: 'ea68303bb71630ef8e08985a45ecddb6102e1e04', class: toolClassName }, h("slot", { key: 'ae8b5bddf5231b0ea69fae465d73485affa9f430', name: "tool" }))), this.showLabel && (h("span", { key: '40236aaed6670ed3359ee656837d54b54323a0a8', "aria-hidden": true, class: "avatar__label" }, this.label))));
+        return (h(Host, { key: '728b1c63a1b2a83f38a22c7aabc7281cf87181cc', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '4653cdc720fbfa7e04ff92b204c266c46c9d1f09', class: className, part: "avatar" }, showImage && (h("span", { key: '6a742f467537cb5098ea514ec57f766afea784cc', class: "avatar__image" }, h("img", { key: '3d42bc8cd849bafbd523536e5a9daf36194416cb', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: 'ba8b221b627b68d0104cdb9e9aeaa7efcddbb8bc', class: "avatar__initials" }, h("span", { key: 'ed96f4a5f63fe453aef0d9833955404bd80930b5' }, this.initials))), showIcon && h("span", { key: '61952863d9cac6fcd3246cacacab6fa56c18ea8c', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'e827fc7897548ff5231e27d1687cec451b260ec8', class: "avatar__icon" }, h("swirl-icon-person", { key: 'f32fbe68cd752e18c9805ce58f55401db0b52bf8' }))), showBadge && (h("span", { key: '39452f2011d57ee16ed2fda13e851ecd1246cdc4', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '54bfc129b7161a8a46fe70dc85dd2567946e5b51', class: toolClassName }, h("slot", { key: '31097c526f73b003862fcb01196b2675c5b2fb9a', name: "tool" }))), this.showLabel && (h("span", { key: '08ee5038dd0a5df32c0f5e3cb36b6853f26618d5', "aria-hidden": true, class: "avatar__label" }, this.label))));
     }
     static get is() { return "swirl-avatar"; }
     static get encapsulation() { return "shadow"; }