@getflip/swirl-components 0.317.2 → 0.319.0

package/dist/esm/swirl-app-layout_5.entry.js

@@ -379,7 +379,7 @@ const SwirlEmptyState = class {
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (h(Host, { key: 'b2c7cdf8a41625c365fea3669fbfcc67fd3bf7d4' }, h("div", { key: 'dbe0ba581446bd0305efec7b711ebed6046d0a83', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'a02d8f66af56cb2176bd5a083b6f5fe2bad923c0', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: 'f8f4f24198112c912571dce7d6752a594c8d3174', class: "empty-state__slotted-illustration" }, h("slot", { key: 'b58bbe01f06a1dacad722c2bf325e90db4758b4f', name: "illustration" })), h("div", { key: '73b5810d6ba9a303268603874dcefeba1aa76c6f', class: "empty-state__body" }, h("swirl-stack", { key: 'd3283378f052b0defceabc0cb9e6fa9918b2d229', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '29a753435128ba46fd3fb9128e878b5efd89475d', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: '2353c84e5cfc3feec631f2bd4fcd6d28fcbd50b8', class: "empty-state__content" }, h("swirl-text", { key: 'fa8030850bc7f6ed695582c1b1f8d0bb7815f4e4', align: "center", color: "subdued" }, h("slot", { key: 'd7260037d0a99faf84a8206f77bbe6e17864b24b' })))), h("div", { key: 'd2fd7b5cb909934e73b4d6d443badbeb3319ddc9', class: "empty-state__controls" }, h("slot", { key: '2dd3f0ae67ec091e7c4d1bf8df9b2f9008ec0c8e', name: "controls" }))))));
+        return (h(Host, { key: '94c0183213827a9e385891a8efaebf09a1373b41' }, h("div", { key: 'df6358b2d51045996b4db5f7d439cdac982a0ea1', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'afe293f061b57a8e3ef32d1a563ea0a50504d1a2', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '681f5893da0f9885f77335593aee396a256533eb', class: "empty-state__slotted-illustration" }, h("slot", { key: '09e0673a2b78059361be72881a0e974bbf080b85', name: "illustration" })), h("div", { key: 'dd54e6476baebaeeec075cbe453bcf3e998f6bd0', class: "empty-state__body" }, h("swirl-stack", { key: 'ad8fb7ddfda397fc19b55aa975baf78a4764b70e', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '243990d5402bfb9b02cd511300d5276ffb0ba54b', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: '1bb06393c28e20e43f80e9e1c9af44e0bc7f10f2', class: "empty-state__content" }, h("swirl-text", { key: 'cfa49896324f7a7065724129e0b2eb40308c2a94', align: "center", color: "subdued" }, h("slot", { key: '6f27905a027ffa3da097026119034902dcbacb00' })))), h("div", { key: '566a23490090c0c9c1e3bc6431a76219d34727fa', class: "empty-state__controls" }, h("slot", { key: '13e163bd884866127c76c5742faeb55c128d29e4', name: "controls" }))))));
     }
     get el() { return getElement(this); }
 };
@@ -400,7 +400,7 @@ const SwirlIconFolderShared = class {
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (h("svg", { key: 'c3c0849760dcb3cf894996dbfe77d0cf989f7439', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '409dd39b075f6088f7fe77e95395a1defcf6bdf3' }, h("path", { key: '94d8d1f52d4e8739213ce557f135c5bb8f9e7e36', d: "M9.99998 8.66669C10.3666 8.66669 10.6806 8.53602 10.942 8.27469C11.2029 8.0138 11.3333 7.70002 11.3333 7.33335C11.3333 6.96669 11.2029 6.65269 10.942 6.39135C10.6806 6.13046 10.3666 6.00002 9.99998 6.00002C9.63331 6.00002 9.31953 6.13046 9.05865 6.39135C8.79731 6.65269 8.66665 6.96669 8.66665 7.33335C8.66665 7.70002 8.79731 8.0138 9.05865 8.27469C9.31953 8.53602 9.63331 8.66669 9.99998 8.66669ZM7.33331 11.3334H12.6666V10.9667C12.6666 10.4667 12.4222 10.0694 11.9333 9.77469C11.4444 9.48046 10.8 9.33335 9.99998 9.33335C9.19998 9.33335 8.55553 9.48046 8.06665 9.77469C7.57776 10.0694 7.33331 10.4667 7.33331 10.9667V11.3334ZM2.66665 13.3334C2.29998 13.3334 1.9862 13.2029 1.72531 12.942C1.46398 12.6807 1.33331 12.3667 1.33331 12V4.00002C1.33331 3.63335 1.46398 3.31958 1.72531 3.05869C1.9862 2.79735 2.29998 2.66669 2.66665 2.66669H6.11665C6.29442 2.66669 6.46398 2.70002 6.62531 2.76669C6.7862 2.83335 6.92776 2.9278 7.04998 3.05002L7.99998 4.00002H13.3333C13.7 4.00002 14.014 4.13069 14.2753 4.39202C14.5362 4.65291 14.6666 4.96669 14.6666 5.33335V12C14.6666 12.3667 14.5362 12.6807 14.2753 12.942C14.014 13.2029 13.7 13.3334 13.3333 13.3334H2.66665ZM2.66665 4.00002V12H13.3333V5.33335H7.44998L6.11665 4.00002H2.66665Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'bd02fb994f968ff92b7cbd6116a60c2d7df656db' }, h("path", { key: 'a1d39b6a67a01490d3e39e6a2fe0425e94587893', d: "M15 13C15.55 13 16.021 12.804 16.413 12.412C16.8043 12.0207 17 11.55 17 11C17 10.45 16.8043 9.979 16.413 9.587C16.021 9.19567 15.55 9 15 9C14.45 9 13.9793 9.19567 13.588 9.587C13.196 9.979 13 10.45 13 11C13 11.55 13.196 12.0207 13.588 12.412C13.9793 12.804 14.45 13 15 13ZM11 17H19V16.45C19 15.7 18.6333 15.104 17.9 14.662C17.1667 14.2207 16.2 14 15 14C13.8 14 12.8333 14.2207 12.1 14.662C11.3667 15.104 11 15.7 11 16.45V17ZM4 20C3.45 20 2.97933 19.8043 2.588 19.413C2.196 19.021 2 18.55 2 18V6C2 5.45 2.196 4.97933 2.588 4.588C2.97933 4.196 3.45 4 4 4H9.175C9.44167 4 9.696 4.05 9.938 4.15C10.1793 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.021 6.196 21.413 6.588C21.8043 6.97933 22 7.45 22 8V18C22 18.55 21.8043 19.021 21.413 19.413C21.021 19.8043 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '0f27ca172bd518cbdfb5e95eb7833db9352f2ffd' }, h("path", { key: 'bac724eb32be5e5fee3dfb93da236ec66f09a2fc', d: "M17.5 15.1667C18.1416 15.1667 18.6911 14.938 19.1485 14.4807C19.605 14.0241 19.8333 13.475 19.8333 12.8334C19.8333 12.1917 19.605 11.6422 19.1485 11.1849C18.6911 10.7283 18.1416 10.5 17.5 10.5C16.8583 10.5 16.3092 10.7283 15.8526 11.1849C15.3953 11.6422 15.1666 12.1917 15.1666 12.8334C15.1666 13.475 15.3953 14.0241 15.8526 14.4807C16.3092 14.938 16.8583 15.1667 17.5 15.1667ZM12.8333 19.8334H22.1666V19.1917C22.1666 18.3167 21.7389 17.6214 20.8833 17.1057C20.0278 16.5908 18.9 16.3334 17.5 16.3334C16.1 16.3334 14.9722 16.5908 14.1166 17.1057C13.2611 17.6214 12.8333 18.3167 12.8333 19.1917V19.8334ZM4.66665 23.3334C4.02498 23.3334 3.47587 23.1051 3.01931 22.6485C2.56198 22.1912 2.33331 21.6417 2.33331 21V7.00002C2.33331 6.35835 2.56198 5.80924 3.01931 5.35269C3.47587 4.89535 4.02498 4.66669 4.66665 4.66669H10.7041C11.0153 4.66669 11.312 4.72502 11.5943 4.84169C11.8759 4.95835 12.1236 5.12363 12.3375 5.33752L14 7.00002H23.3333C23.975 7.00002 24.5245 7.22869 24.9818 7.68602C25.4384 8.14258 25.6666 8.69169 25.6666 9.33335V21C25.6666 21.6417 25.4384 22.1912 24.9818 22.6485C24.5245 23.1051 23.975 23.3334 23.3333 23.3334H4.66665ZM4.66665 7.00002V21H23.3333V9.33335H13.0375L10.7041 7.00002H4.66665Z", fill: "currentColor" })))));
+        return (h("svg", { key: '42e0f897dac83cec1079f3cee0c051d9eeb01db5', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '57a32d25c10ca474bd4674c760c9ed43f3df1670' }, h("path", { key: '32af653834b2600932f8b580baaef86873d40e23', d: "M9.99998 8.66669C10.3666 8.66669 10.6806 8.53602 10.942 8.27469C11.2029 8.0138 11.3333 7.70002 11.3333 7.33335C11.3333 6.96669 11.2029 6.65269 10.942 6.39135C10.6806 6.13046 10.3666 6.00002 9.99998 6.00002C9.63331 6.00002 9.31953 6.13046 9.05865 6.39135C8.79731 6.65269 8.66665 6.96669 8.66665 7.33335C8.66665 7.70002 8.79731 8.0138 9.05865 8.27469C9.31953 8.53602 9.63331 8.66669 9.99998 8.66669ZM7.33331 11.3334H12.6666V10.9667C12.6666 10.4667 12.4222 10.0694 11.9333 9.77469C11.4444 9.48046 10.8 9.33335 9.99998 9.33335C9.19998 9.33335 8.55553 9.48046 8.06665 9.77469C7.57776 10.0694 7.33331 10.4667 7.33331 10.9667V11.3334ZM2.66665 13.3334C2.29998 13.3334 1.9862 13.2029 1.72531 12.942C1.46398 12.6807 1.33331 12.3667 1.33331 12V4.00002C1.33331 3.63335 1.46398 3.31958 1.72531 3.05869C1.9862 2.79735 2.29998 2.66669 2.66665 2.66669H6.11665C6.29442 2.66669 6.46398 2.70002 6.62531 2.76669C6.7862 2.83335 6.92776 2.9278 7.04998 3.05002L7.99998 4.00002H13.3333C13.7 4.00002 14.014 4.13069 14.2753 4.39202C14.5362 4.65291 14.6666 4.96669 14.6666 5.33335V12C14.6666 12.3667 14.5362 12.6807 14.2753 12.942C14.014 13.2029 13.7 13.3334 13.3333 13.3334H2.66665ZM2.66665 4.00002V12H13.3333V5.33335H7.44998L6.11665 4.00002H2.66665Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'f0de36b019a6f09df95b8e025b9315836d0def04' }, h("path", { key: 'a4fd197af558877003c07e90614917e924c0a239', d: "M15 13C15.55 13 16.021 12.804 16.413 12.412C16.8043 12.0207 17 11.55 17 11C17 10.45 16.8043 9.979 16.413 9.587C16.021 9.19567 15.55 9 15 9C14.45 9 13.9793 9.19567 13.588 9.587C13.196 9.979 13 10.45 13 11C13 11.55 13.196 12.0207 13.588 12.412C13.9793 12.804 14.45 13 15 13ZM11 17H19V16.45C19 15.7 18.6333 15.104 17.9 14.662C17.1667 14.2207 16.2 14 15 14C13.8 14 12.8333 14.2207 12.1 14.662C11.3667 15.104 11 15.7 11 16.45V17ZM4 20C3.45 20 2.97933 19.8043 2.588 19.413C2.196 19.021 2 18.55 2 18V6C2 5.45 2.196 4.97933 2.588 4.588C2.97933 4.196 3.45 4 4 4H9.175C9.44167 4 9.696 4.05 9.938 4.15C10.1793 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.021 6.196 21.413 6.588C21.8043 6.97933 22 7.45 22 8V18C22 18.55 21.8043 19.021 21.413 19.413C21.021 19.8043 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'cc8c9a427ac7a421082a03f6ce44f5db5ebebd2b' }, h("path", { key: '4a4cd53f873554e6bb9431cae5ca03d612366231', d: "M17.5 15.1667C18.1416 15.1667 18.6911 14.938 19.1485 14.4807C19.605 14.0241 19.8333 13.475 19.8333 12.8334C19.8333 12.1917 19.605 11.6422 19.1485 11.1849C18.6911 10.7283 18.1416 10.5 17.5 10.5C16.8583 10.5 16.3092 10.7283 15.8526 11.1849C15.3953 11.6422 15.1666 12.1917 15.1666 12.8334C15.1666 13.475 15.3953 14.0241 15.8526 14.4807C16.3092 14.938 16.8583 15.1667 17.5 15.1667ZM12.8333 19.8334H22.1666V19.1917C22.1666 18.3167 21.7389 17.6214 20.8833 17.1057C20.0278 16.5908 18.9 16.3334 17.5 16.3334C16.1 16.3334 14.9722 16.5908 14.1166 17.1057C13.2611 17.6214 12.8333 18.3167 12.8333 19.1917V19.8334ZM4.66665 23.3334C4.02498 23.3334 3.47587 23.1051 3.01931 22.6485C2.56198 22.1912 2.33331 21.6417 2.33331 21V7.00002C2.33331 6.35835 2.56198 5.80924 3.01931 5.35269C3.47587 4.89535 4.02498 4.66669 4.66665 4.66669H10.7041C11.0153 4.66669 11.312 4.72502 11.5943 4.84169C11.8759 4.95835 12.1236 5.12363 12.3375 5.33752L14 7.00002H23.3333C23.975 7.00002 24.5245 7.22869 24.9818 7.68602C25.4384 8.14258 25.6666 8.69169 25.6666 9.33335V21C25.6666 21.6417 25.4384 22.1912 24.9818 22.6485C24.5245 23.1051 23.975 23.3334 23.3333 23.3334H4.66665ZM4.66665 7.00002V21H23.3333V9.33335H13.0375L10.7041 7.00002H4.66665Z", fill: "currentColor" })))));
     }
 };
 SwirlIconFolderShared.style = SwirlIconFolderSharedStyle0;
@@ -663,7 +663,7 @@ const SwirlResourceList = class {
         });
     }
     render() {
-        return (h(Host, { key: '75b6aaec0334003d9755d95ef1d714cea883e2ee', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '7be89d4dee67bb39656f1a02aa0de6dfd8ab5ca1', role: "alert" }, this.assistiveText), h("swirl-box", { key: '297f7c30bdd8f58085c73ded006d3318e549415c', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '8adb2b98114c8f0e3ce7fafba51e49b4077549bc', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: '01ff5e3c893cfba15e3eb770070ead72fda054dd' })))));
+        return (h(Host, { key: '2e533a477f7ee05e19973808f07f5e5869c59220', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '4b75c2fcc83e451d1da08ffef245ccddc02d421b', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'e3efe4e1b82cd3bbe83d568a20347175e025a11b', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '3b9d4f761c8d790c513b963197ec220eeaa8455d', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: '8418a6f13a24317aedd0c408c50e6c921ceef5c3' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -827,7 +827,7 @@ const SwirlResourceListItem = class {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (h(Host, { key: '5d6ce8dd702aa495a772e84af4ea3d0eac622040', role: "row" }, h("div", { key: '93742e0ab97a0492ce2b1a61a62aa255159cbeb9', class: className, role: "gridcell" }, h(Tag, { key: '64d5d055ffe333cc18e3d1e62116734040c495ba', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'e9f3dc69c0bbbea93afca630c915cef31a102a8c', class: "resource-list-item__media" }, h("slot", { key: 'a9c6e586812fcf6f16f6b9d30f149c44da0297ae', name: "media" }))), h("span", { key: 'd2e19d8730f6f3c48d186623e0c5ed9d6c1015f7', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '70a3ddfd89938d061927d7ac32de87bed159b432', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'f3cd67313f6f9a9407597b8e37cd920efaa6b8e4', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: 'c0e7654cc92f6576ff147c1dd22466f7760434d9', class: "resource-list-item__meta" }, h("span", { key: 'b27b82a80699f5c5f2b226b5bacc2a3f6d479007', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'ce40faf5efb334d3d225c8e2873e18234bb66ea0', class: "resource-list-item__badges" }, h("slot", { key: 'f16a7c43d36107fbb7222eb3f7f40dfb2d634461', name: "badges" }))))), this.selectable && (h("span", { key: 'ac7da10fe97172a199e192e7812c3dfd5e818942', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'c4257a7e34e3de2cb63a39d0f0a036e779d3f123', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'e1ec46fe059cd970b2bb07012a68f5ddabb52a0c' }))))), h("span", { key: '0a23454e9ad0aacaf89cc082c52b713adc127e27', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: 'a78e47f888f20caf3f970e8111f2c5fb1ffd6a9b', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '83694dc44e21a0c0e4372502f680dcd45c8d5940', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '859230f282bbe178949d574b82b204855003fdc9', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'f0823b102dc80b98804f4b970ba739456558fb52', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '53da1e22b93d1a1134d03d3174cdc4e6ab9c560c', size: this.iconSize })))));
+        return (h(Host, { key: 'bfb0bd7d6d15856f14518cdd626c40dcb2eb78f3', role: "row" }, h("div", { key: '4489a4452594e6d3b99f4c4a980e89f464c35d38', class: className, role: "gridcell" }, h(Tag, { key: '25556f093a70d65789ed83eb51e6c97f8c4f9e1c', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'ebec2a582ff80ba6af9e30d1eaa2423398c92c40', class: "resource-list-item__media" }, h("slot", { key: '48f6959f85a00e70a8f49e9e07bc9618d0cb1159', name: "media" }))), h("span", { key: '8b3c9f913676f3b0cdc2a053c824f28c8f03faf8', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: 'ab72e18c3843286724eb7bb2a9b7fb2a5c4dd159', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'ee9405cb46da67633280e37c718ece7f5f78e504', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: 'd548b8ecc1067390903ad67a5c8c3e028b2f8130', class: "resource-list-item__meta" }, h("span", { key: 'c2e924c99d8a259d681d6f185377b668d33a19cd', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'ee319cd05ba53bddcb25fde8f350a60a34469146', class: "resource-list-item__badges" }, h("slot", { key: '0de74a753a1d5c244909238ab77366fafc6a84e5', name: "badges" }))))), this.selectable && (h("span", { key: 'b5fab0360c74249ea743d5ec162c6a45f5fe2be3', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'b5819da58152f00eb869623318cffd7ff1ae684f', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '9e84afe4b45f0eecceea46b6f23673a30ebf72d3' }))))), h("span", { key: '178627f4d126a48e9f2b98218735902321594efd', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: 'c3e8c355eeecb886b97a8cc7c35b5a22d1191764', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '1da96bd1bcc3fef40db960ad169443319cbc052d', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '0932be7ca64755cd8e1d4172a8bbd187f6efbe34', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'd1ea880ee0adcb6b90f791dfa39fc65282c32c13', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '78b7aae4fd568f82fbf717a6ae0285f70219bebd', size: this.iconSize })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-avatar-group.entry.js

@@ -27,7 +27,7 @@ const SwirlAvatarGroup = class {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: 'fddf4384a09977c3e8bcceda588d68df8bc28945' }, h("div", { key: '61640eb3cd9f0ddb86e314eec73f5aea1ebcd31c', class: className, role: "group" }, h("slot", { key: '6e3d9ca333d3cac62c4edae14cf279c5224188f1' }), this.badge && (h("span", { key: 'b86156b83070ff8c4263828f979ce68d7b4aebd1', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: '76e85ac1f2499bddae35aea6e1ce1281294a707a' }, h("div", { key: 'a2763cdee26628d8b3926af85302cc0d74a1ee60', class: className, role: "group" }, h("slot", { key: '1e15e3f8e2b36912a3f4e834e6f24a8e4bc0bc09' }), this.badge && (h("span", { key: 'd6c7e9e98de8e5191f17dccfe7e662c05314dc85', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
 };
 SwirlAvatarGroup.style = SwirlAvatarGroupStyle0;

package/dist/esm/swirl-carousel-slide.entry.js

@@ -16,11 +16,11 @@ const SwirlCarouselSlide = class {
         const className = classnames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (h(Host, { key: '4512287502ed0e8fa7faef980b14e77264c68d9f', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (h(Host, { key: 'e75b302d0c27d9571444d6019cc2295ab86413f1', "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: '17010c17d5149e3517cc02eda7b79abf11b79fc1' })));
+            }, tabIndex: 0 }, h("slot", { key: '63794dea8f1ab9790b135a39eb9f84e004e4e349' })));
     }
 };
 SwirlCarouselSlide.style = SwirlCarouselSlideStyle0;

package/dist/esm/swirl-carousel.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, a as Host, g as getElement
 import { c as classnames } from './index-267776a4.js';
 import { d as debounce } from './utils-877a768f.js';
 
-const swirlCarouselCss = ":host{--swirl-carousel-spacing:var(--s-space-16);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:\"\";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient(\n      90deg,\n      var(--s-background-default) 0%,\n      transparent 100%\n    )}.carousel:after{right:0;background:linear-gradient(\n      270deg,\n      var(--s-background-default) 0%,\n      transparent 100%\n    )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}";
+const swirlCarouselCss = ":host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fade-color:var(--s-background-default);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:\"\";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient(\n      90deg,\n      var(--swirl-carousel-fade-color) 0%,\n      transparent 100%\n    )}.carousel:after{right:0;background:linear-gradient(\n      270deg,\n      var(--swirl-carousel-fade-color) 0%,\n      transparent 100%\n    )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}";
 const SwirlCarouselStyle0 = swirlCarouselCss;
 
 const SwirlCarousel = class {
@@ -10,6 +10,10 @@ const SwirlCarousel = class {
         registerInstance(this, hostRef);
         this.activeSlidesChange = createEvent(this, "activeSlidesChange", 7);
         this.activeSlides = [];
+        this.carouselFadeColorMap = {
+            default: "var(--s-background-default)",
+            "on-surface-overlay": "var(--s-surface-overlay-default)",
+        };
         this.updateActiveSlideReferences = debounce(() => {
             const activeSlides = this.getActiveSlides();
             const activeSlidesChanged = activeSlides.some((slide, index) => this.activeSlides[index] !== slide);
@@ -40,6 +44,7 @@ const SwirlCarousel = class {
         this.nextSlideButtonLabel = "Next slide";
         this.previousSlideButtonLabel = "Previous slide";
         this.fade = false;
+        this.fadeColor = "default";
         this.loopAround = false;
         this.padding = "16";
         this.paddingBlockEnd = undefined;
@@ -132,6 +137,7 @@ const SwirlCarousel = class {
     }
     render() {
         this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
+        this.el.style.setProperty("--swirl-carousel-fade-color", this.carouselFadeColorMap[this.fadeColor]);
         const slidesStyles = {
             padding: Boolean(this.padding)
                 ? `var(--s-space-${this.padding})`
@@ -159,7 +165,7 @@ const SwirlCarousel = class {
             "carousel--is-at-start": this.isAtStart,
             "carousel--is-at-end": this.isAtEnd,
         });
-        return (h(Host, { key: '49ae3956e780803b3a71be6bc6ae10f49f4ff6a2', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: 'f178dfcf58ece220b1ef9f76dbea5a72082ddc73', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: 'b9cf8dffb2017a8ce51f7ffc1d566de428481863', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '9b59149c2838e52c00eb3f312b5c66a12e56e965', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: 'f5b9343af6a14957982aeca99b2931139cd9d58d', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '8684886a48992ec0f61cab7c87b73c3cba1be4d1', onSlotchange: this.onSlotChange })))));
+        return (h(Host, { key: '1e26fcf73b92609c88ed3f702fe53e750e26f6da', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '02e7684b10d536d75a1590dfa162315307b01118', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '0becf4dd5a8184cc3e25738bca97c266cee87a4d', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '08fe60febb3c9cc4c0c5747126277586d7f24e6e', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: 'b421a6ef4b4c1870aefbb0e54d785811cfa701d9', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'e46a799bf218fd0ceeb4baa718c9d975e82f377a', onSlotchange: this.onSlotChange })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-color-input.entry.js

@@ -454,11 +454,11 @@ const SwirlColorInput = class {
         const className = classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (h(Host, { key: 'ea86580e4084e0a511ab206034037b9a79cdd8ed' }, h("div", { key: '23c8c2a248e487325f51733a6d57f81896b8ff4a', class: className }, h("input", { key: 'e2749d5da3fe3891b56e6e8ad9d48ae5128ade3b', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value }), h("swirl-popover-trigger", { key: '82da56c15058870871d53d76c6c1f2618358e0a4', swirlPopover: this.pickerId }, h("button", { key: '74871e68e08c191409db7caf88bd511cc43517d8', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (h(Host, { key: '84cc3e16101043574dd4d30f7903ce92b034309c' }, h("div", { key: '439383e3e3384bcd255bec502a2df0dd5be1a661', class: className }, h("input", { key: '59edc6b99c9cb8cfecbb4d672584a37edcbad943', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value }), h("swirl-popover-trigger", { key: 'f5f6ae99f40c8bc2dd565fa2114cc5aeb795ecae', swirlPopover: this.pickerId }, h("button", { key: 'aef319ab0793cc4882632d73a73ca38f9484a1ec', "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: '64a1ea8de315b717d8d9276b9db96e2398e4d30a', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: '137104c8282fc8d5c68842e1fb5d2557e90f9437', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '58b93d66d99cfe2aa045eea81d2993aafe0e4608', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), h("swirl-popover", { key: '948eb8d67e9497014133f4bf757d5a5c900ff83d', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'c6987312e10639e16573f8129fae48aa71b2d734', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'f182577c4d61d00aabb8547fa02c809ee8959243', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get watchers() { return {
         "value": ["watchValue"]