@getflip/swirl-components 0.299.0 → 0.300.0

package/dist/esm/swirl-symbol-work.entry.js

@@ -12,7 +12,7 @@ const SwirlSymbolWork = class {
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: '55d41fd3cf1a0b8416421b0db8fd08c5370904bb', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '22d88e34a459cbd4de940db196e30ce54bbe5f2f' }, h("path", { key: '24abecf5743c8ec119ebf57476f1420a1f791d1d', d: "M20 6H16V4C16.0009 3.73709 15.9498 3.47661 15.8496 3.23354C15.7495 2.99047 15.6022 2.76962 15.4163 2.58372C15.2304 2.39782 15.0095 2.25054 14.7665 2.15035C14.5234 2.05017 14.2629 1.99907 14 2H10C9.73709 1.99907 9.47661 2.05017 9.23354 2.15035C8.99047 2.25054 8.76962 2.39782 8.58372 2.58372C8.39782 2.76962 8.25054 2.99047 8.15035 3.23354C8.05017 3.47661 7.99907 3.73709 8 4V6H4C3.73764 5.99933 3.47774 6.05068 3.23535 6.15107C2.99296 6.25147 2.77287 6.39892 2.58782 6.58491C2.40277 6.77089 2.25642 6.99171 2.15724 7.2346C2.05806 7.4775 2.00801 7.73764 2.01 8L2 19C1.99907 19.2629 2.05017 19.5234 2.15035 19.7665C2.25054 20.0095 2.39782 20.2304 2.58372 20.4163C2.76962 20.6022 2.99047 20.7495 3.23354 20.8496C3.47661 20.9498 3.73709 21.0009 4 21H20C20.2629 21.0009 20.5234 20.9498 20.7665 20.8496C21.0095 20.7495 21.2304 20.6022 21.4163 20.4163C21.6022 20.2304 21.7495 20.0095 21.8496 19.7665C21.9498 19.5234 22.0009 19.2629 22 19V8C22.0009 7.73709 21.9498 7.47661 21.8496 7.23354C21.7495 6.99047 21.6022 6.76962 21.4163 6.58372C21.2304 6.39782 21.0095 6.25054 20.7665 6.15035C20.5234 6.05017 20.2629 5.99907 20 6ZM14 6H10V4H14V6Z", fill: "currentColor" }))));
+        return (h("svg", { key: '7d6e82c91288c946b0c66cd2e1602655f3009364', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: 'c520247c24899f7f49347384a8f6d022e592abaf' }, h("path", { key: '934fa75a28007b26dcb488f87bee2c700b2f4182', d: "M20 6H16V4C16.0009 3.73709 15.9498 3.47661 15.8496 3.23354C15.7495 2.99047 15.6022 2.76962 15.4163 2.58372C15.2304 2.39782 15.0095 2.25054 14.7665 2.15035C14.5234 2.05017 14.2629 1.99907 14 2H10C9.73709 1.99907 9.47661 2.05017 9.23354 2.15035C8.99047 2.25054 8.76962 2.39782 8.58372 2.58372C8.39782 2.76962 8.25054 2.99047 8.15035 3.23354C8.05017 3.47661 7.99907 3.73709 8 4V6H4C3.73764 5.99933 3.47774 6.05068 3.23535 6.15107C2.99296 6.25147 2.77287 6.39892 2.58782 6.58491C2.40277 6.77089 2.25642 6.99171 2.15724 7.2346C2.05806 7.4775 2.00801 7.73764 2.01 8L2 19C1.99907 19.2629 2.05017 19.5234 2.15035 19.7665C2.25054 20.0095 2.39782 20.2304 2.58372 20.4163C2.76962 20.6022 2.99047 20.7495 3.23354 20.8496C3.47661 20.9498 3.73709 21.0009 4 21H20C20.2629 21.0009 20.5234 20.9498 20.7665 20.8496C21.0095 20.7495 21.2304 20.6022 21.4163 20.4163C21.6022 20.2304 21.7495 20.0095 21.8496 19.7665C21.9498 19.5234 22.0009 19.2629 22 19V8C22.0009 7.73709 21.9498 7.47661 21.8496 7.23354C21.7495 6.99047 21.6022 6.76962 21.4163 6.58372C21.2304 6.39782 21.0095 6.25054 20.7665 6.15035C20.5234 6.05017 20.2629 5.99907 20 6ZM14 6H10V4H14V6Z", fill: "currentColor" }))));
     }
 };
 SwirlSymbolWork.style = SwirlSymbolWorkStyle0;

package/dist/esm/swirl-symbol-xing.entry.js

@@ -12,7 +12,7 @@ const SwirlSymbolXing = class {
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: '24ea1a03c578af3b073620b3ae5db60dbc3b2075', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '495522c8ce8193387b7fb061103f325e3900f3c0' }, h("path", { key: '706dc481276831f71904a875af9e009c879b8d88', d: "M17.158 2.128C16.9889 2.13178 16.8248 2.18623 16.687 2.28428C16.5492 2.38234 16.444 2.51949 16.385 2.678C16.385 2.678 10.173 13.698 9.967 14.059C9.98 14.079 14.067 21.578 14.067 21.578C14.1342 21.7375 14.246 21.8742 14.389 21.9717C14.5319 22.0693 14.7 22.1235 14.873 22.128H17.751C17.8257 22.1338 17.9006 22.1199 17.9683 22.0878C18.036 22.0557 18.0942 22.0065 18.137 21.945C18.1743 21.8762 18.1933 21.7989 18.192 21.7206C18.1908 21.6423 18.1694 21.5656 18.13 21.498L14.063 14.068C14.0614 14.0653 14.0606 14.0622 14.0606 14.059C14.0606 14.0558 14.0614 14.0527 14.063 14.05L20.45 2.758C20.4882 2.68988 20.5082 2.61309 20.5082 2.535C20.5082 2.4569 20.4882 2.38012 20.45 2.312C20.4084 2.25141 20.3518 2.20262 20.2857 2.17038C20.2197 2.13813 20.1464 2.12353 20.073 2.128H17.158ZM5.041 6.078C4.96541 6.07176 4.88949 6.08504 4.8205 6.11656C4.75151 6.14808 4.69177 6.19678 4.647 6.258C4.61116 6.32697 4.59388 6.40408 4.59686 6.48175C4.59984 6.55942 4.62298 6.63498 4.664 6.701L6.613 10.076V10.093L3.551 15.504C3.5116 15.5708 3.49081 15.6469 3.49081 15.7245C3.49081 15.8021 3.5116 15.8782 3.551 15.945C3.59031 16.0081 3.64585 16.0595 3.71182 16.0938C3.77779 16.1281 3.85176 16.1441 3.926 16.14H6.81C6.98108 16.1336 7.14662 16.0776 7.2865 15.9789C7.42639 15.8802 7.5346 15.743 7.598 15.584L10.709 10.076L8.728 6.614C8.66239 6.45468 8.55179 6.31791 8.40972 6.22042C8.26765 6.12292 8.10026 6.06892 7.928 6.065H5.041V6.078Z", fill: "currentColor" }))));
+        return (h("svg", { key: 'dfe0afe49e152cd394b32adf298b40465b46962d', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '1035f4d3159c5e7d263fb8977f65b72c91cb2948' }, h("path", { key: '7499a9951cbf0b39da4da95efd32224e365ddc49', d: "M17.158 2.128C16.9889 2.13178 16.8248 2.18623 16.687 2.28428C16.5492 2.38234 16.444 2.51949 16.385 2.678C16.385 2.678 10.173 13.698 9.967 14.059C9.98 14.079 14.067 21.578 14.067 21.578C14.1342 21.7375 14.246 21.8742 14.389 21.9717C14.5319 22.0693 14.7 22.1235 14.873 22.128H17.751C17.8257 22.1338 17.9006 22.1199 17.9683 22.0878C18.036 22.0557 18.0942 22.0065 18.137 21.945C18.1743 21.8762 18.1933 21.7989 18.192 21.7206C18.1908 21.6423 18.1694 21.5656 18.13 21.498L14.063 14.068C14.0614 14.0653 14.0606 14.0622 14.0606 14.059C14.0606 14.0558 14.0614 14.0527 14.063 14.05L20.45 2.758C20.4882 2.68988 20.5082 2.61309 20.5082 2.535C20.5082 2.4569 20.4882 2.38012 20.45 2.312C20.4084 2.25141 20.3518 2.20262 20.2857 2.17038C20.2197 2.13813 20.1464 2.12353 20.073 2.128H17.158ZM5.041 6.078C4.96541 6.07176 4.88949 6.08504 4.8205 6.11656C4.75151 6.14808 4.69177 6.19678 4.647 6.258C4.61116 6.32697 4.59388 6.40408 4.59686 6.48175C4.59984 6.55942 4.62298 6.63498 4.664 6.701L6.613 10.076V10.093L3.551 15.504C3.5116 15.5708 3.49081 15.6469 3.49081 15.7245C3.49081 15.8021 3.5116 15.8782 3.551 15.945C3.59031 16.0081 3.64585 16.0595 3.71182 16.0938C3.77779 16.1281 3.85176 16.1441 3.926 16.14H6.81C6.98108 16.1336 7.14662 16.0776 7.2865 15.9789C7.42639 15.8802 7.5346 15.743 7.598 15.584L10.709 10.076L8.728 6.614C8.66239 6.45468 8.55179 6.31791 8.40972 6.22042C8.26765 6.12292 8.10026 6.06892 7.928 6.065H5.041V6.078Z", fill: "currentColor" }))));
     }
 };
 SwirlSymbolXing.style = SwirlSymbolXingStyle0;

package/dist/esm/swirl-symbol-youtube.entry.js

@@ -12,7 +12,7 @@ const SwirlSymbolYoutube = class {
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: '81ccf2a1c926616ec8e7730b39d1c97044bc5cba', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: 'bf16db3901d4f5feb31c3c1f1d637bcda8ffba34' }, h("path", { key: 'ab34d9516f4f14537e8373eedb30495150063b3a', d: "M21.582 7.201C21.4691 6.77542 21.2463 6.38698 20.936 6.07459C20.6257 5.76219 20.2388 5.5368 19.814 5.421C18.254 5 12 5 12 5C12 5 5.74599 5 4.18599 5.421C3.76123 5.5369 3.37436 5.76231 3.06408 6.0747C2.7538 6.38708 2.53101 6.77547 2.41799 7.201C2.12953 8.79965 1.9896 10.4216 1.99999 12.046C1.9896 13.6704 2.12953 15.2923 2.41799 16.891C2.53092 17.3166 2.75368 17.705 3.06397 18.0174C3.37426 18.3298 3.76118 18.5552 4.18599 18.671C5.74499 19.092 11.999 19.092 11.999 19.092C11.999 19.092 18.253 19.092 19.813 18.671C20.2378 18.5553 20.6248 18.3299 20.9351 18.0175C21.2454 17.7051 21.4682 17.3166 21.581 16.891C21.8695 15.2923 22.0098 13.6705 22 12.046C22.0104 10.4216 21.8704 8.79965 21.582 7.201ZM9.95399 15.019V9.072L15.181 12.045L9.95399 15.019Z", fill: "currentColor" }))));
+        return (h("svg", { key: 'edb47ec4ad12d833732d432e74bf47cefc44cdec', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '7faf15c5d97303b1931274f757b94f98c3e910b1' }, h("path", { key: '42dcb08d203468b5086c8a15912495bb80659431', d: "M21.582 7.201C21.4691 6.77542 21.2463 6.38698 20.936 6.07459C20.6257 5.76219 20.2388 5.5368 19.814 5.421C18.254 5 12 5 12 5C12 5 5.74599 5 4.18599 5.421C3.76123 5.5369 3.37436 5.76231 3.06408 6.0747C2.7538 6.38708 2.53101 6.77547 2.41799 7.201C2.12953 8.79965 1.9896 10.4216 1.99999 12.046C1.9896 13.6704 2.12953 15.2923 2.41799 16.891C2.53092 17.3166 2.75368 17.705 3.06397 18.0174C3.37426 18.3298 3.76118 18.5552 4.18599 18.671C5.74499 19.092 11.999 19.092 11.999 19.092C11.999 19.092 18.253 19.092 19.813 18.671C20.2378 18.5553 20.6248 18.3299 20.9351 18.0175C21.2454 17.7051 21.4682 17.3166 21.581 16.891C21.8695 15.2923 22.0098 13.6705 22 12.046C22.0104 10.4216 21.8704 8.79965 21.582 7.201ZM9.95399 15.019V9.072L15.181 12.045L9.95399 15.019Z", fill: "currentColor" }))));
     }
 };
 SwirlSymbolYoutube.style = SwirlSymbolYoutubeStyle0;

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

@@ -11,7 +11,7 @@ const SwirlHeading = class {
     }
     render() {
         const Tag = `swirl-symbol-${this.glyph}`;
-        return (h(Host, { key: '736f0bdc93b37f9ce72133fd601ddc82c323fc72' }, h(Tag, { key: '4b30ea09faae60cb9a4a57cfa43a39bdddc8c4dd', size: this.size })));
+        return (h(Host, { key: '66a1fcb46cbeabd891bb72eb6d1c577945a9cef5' }, h(Tag, { key: '195fa8e38f5ec3fe904d3852b362a8f7fc6ec087', size: this.size })));
     }
 };
 SwirlHeading.style = SwirlSymbolStyle0;

package/dist/esm/swirl-table-cell.entry.js

@@ -8,7 +8,7 @@ const SwirlTableCell = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '316b66ba0fe4bc2dff1bae627279bfef3312206d', class: "table-cell", role: "cell" }, h("slot", { key: '829b3c84293caa7e14c0e892cca191ad5b646351' })));
+        return (h(Host, { key: '41c1b95f569f7baa3274accbfd02b2248f9e8ecd', class: "table-cell", role: "cell" }, h("slot", { key: '9ae453d146897265f6dc136674d8cac893ac0c07' })));
     }
 };
 SwirlTableCell.style = SwirlTableCellStyle0;

package/dist/esm/swirl-table-column.entry.js

@@ -24,7 +24,7 @@ const SwirlTableColumn = class {
             maxWidth: this.maxWidth || "",
             minWidth: this.minWidth || "",
         };
-        return (h(Host, { key: 'b4b2b34e8bc2f9dacf9ee83ff0976f7a29deb265', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '494a409686b6826531a8f2b40914c3baf85a4fa6' }, h("slot", { key: 'd7a1607dbe9e7e897f0699dbc7b8f118a667094b' })), this.sortable && (h("span", { key: '71f37474cc4c854bdbf421aead9cfad84abf9ee5', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: '4709f69b17239f3aa10b6513bb1b45b7e0a998a8', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: 'de9b1cdb14ae43dc8a1b042bac4423ba837b1191', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (h(Host, { key: '928c4901ce0a82166ae1869bf4e0a6fc455bc93f', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '9fd6853d5ca6f749a1594baae50b800a18f49748' }, h("slot", { key: 'a64fd9c2a587f8ea79531d5a145ec66fcce2e1a3' })), this.sortable && (h("span", { key: '9b38668da82995eeee2cc1cfa0938f9cce41d570', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'ae88490ecca4a744ed0391f588104c5c88a801ed', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '1c816479d6ed0c695ac6401b67fcc4539a8a870e', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
     }
     get el() { return getElement(this); }
 };

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

@@ -42,10 +42,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 (h(Host, { key: 'c88b498464392825915456cde50e1cd86784e95b', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'b430a7f8bbce7899a1e305b5f32f84d6d6741cfd', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'f80767556a73cca5be5e161d773b0f48416ef0fc', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: '176eb2d179d37e89259529d6017a9722909ec603', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'a3873dd1f620fbed2eb3f88732070c43960b83ba', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '04b48bab737428de33efc053dec6e230d1ca6189', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: 'e3666b0cef84945676edd6ab67fcd1a94c488890', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'fc4ae5148aa61fb7c47f18c354518706f316df18', class: {
+        return (h(Host, { key: 'cf7d31b53422f4d44a94a2dee538abdfbaaa0f8a', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'ef5076b4454bc61e623771432dbe8efdcd4e8273', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'a30d99f13f8dddfcc3b5e69db6762d469a13caac', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'ae22d3333c3ce17868f9eefc9c1c8284dbce4c3e', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'db5b1dbb3e033daa9aebf75e366ddefb420c284c', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'ef1aa1f305af4ec793f4ef8b77e952edf7c2fd94', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '62ba9fe4742d2e73b13499193875f05ca45a1e46', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'd61b4a5c20ce648991041fbf63a08b6434a26ce9', 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) }, h("slot", { key: '1291364c64464f539014870e1faf5a98ea089173' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'adbf793b772158fe96be757b3a1e1dbdf3b3deb0' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-ea
 import { c as classnames } from './index-267776a4.js';
 import { c as closestPassShadow } from './utils-877a768f.js';
 
-const swirlTableRowCss = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}";
+const swirlTableRowCss = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host(.table-row--moving){border:var(--swirl-table-moving-row-border)}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}";
 const SwirlTableRowStyle0 = swirlTableRowCss;
 
 const SwirlTableRow = class {
@@ -19,7 +19,7 @@ const SwirlTableRow = class {
         const className = classnames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: '2447fb97560094815d341fc1f2354cd35c2b654e', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '18cb9d6800ec03f2226b01d74129e3255a6a10d6' })));
+        return (h(Host, { key: '3f346c9978c4de720ba49522dea9f308e97ce447', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '7a13cb11d5649321042a53d1b3dc4a347089fde5' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,5 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-eaf83092.js';
-import { d as debounce, i as isMobileViewport } from './utils-877a768f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eaf83092.js';
+import { c as classnames } from './index-267776a4.js';
+import { S as Sortable } from './sortable.esm-0bfddf0c.js';
+import { d as debounce, i as isMobileViewport, q as querySelectorAllDeep } from './utils-877a768f.js';
 
 /* global setTimeout, clearTimeout */
 
@@ -72,12 +74,19 @@ function defer() {
   return deferred;
 }
 
-const swirlTableCss = ":host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),\n    2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),\n    0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell>*{flex-grow:1}";
+const swirlTableCss = ".sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n      var(--s-border-highlight)}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),\n    2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),\n    0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:flex}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
 const SwirlTableStyle0 = swirlTableCss;
 
+const defaultDragDropInstructions = {
+    end: "Dropped. Final position in table: {position} of {rowCount}.",
+    initial: "Press space to move the row.",
+    moved: "Current position in table: {position} of {rowCount}.",
+    start: "Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop.",
+};
 const SwirlTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.dropRow = createEvent(this, "dropRow", 7);
         this.triggerRerender = debounce(async () => {
             await this.updateLayout();
             this.updateEmptyState();
@@ -98,20 +107,86 @@ const SwirlTable = class {
         this.onSlotChange = async () => {
             await this.updateLayout();
             this.updateEmptyState();
+            this.setupDragDrop();
+        };
+        this.onFocus = (event) => {
+            if (this.movingViaKeyboard) {
+                const movingRow = this.el.querySelector(".table-row--moving");
+                if (movingRow) {
+                    this.focusDragHandleOfRow(movingRow);
+                }
+            }
+            const focusedDragHandle = !!event.target?.closest(this.dragDropHandle);
+            if (this.liveRegionText === "" && focusedDragHandle) {
+                this.updateLiveRegionText("initial");
+            }
+        };
+        this.onBlur = (event) => {
+            const newlyFocusedElement = event.relatedTarget;
+            const focusedDragHandle = !!newlyFocusedElement?.closest(this.dragDropHandle);
+            if (this.el.contains(newlyFocusedElement) && focusedDragHandle) {
+                return;
+            }
+            if (this.liveRegionText !== "") {
+                this.updateLiveRegionText();
+            }
+        };
+        this.onKeyDown = (event) => {
+            if (!this.enableDragDrop) {
+                return;
+            }
+            const row = event.target?.closest("swirl-table-row");
+            const focusedDragHandle = !!event.target?.closest(this.dragDropHandle);
+            if (!focusedDragHandle) {
+                return;
+            }
+            if (event.code === "Space") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.toggleKeyboardMove(row);
+            }
+            else if (event.code === "ArrowUp") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveRow(row, "up");
+            }
+            else if (event.code === "ArrowDown") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveRow(row, "down");
+            }
+            else if (event.code === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.cancelKeyboardMove();
+            }
         };
         this.caption = undefined;
+        this.dragDropHandle = undefined;
+        this.dragDropInstructions = defaultDragDropInstructions;
         this.emptyStateLabel = "No results found.";
+        this.enableDragDrop = undefined;
         this.label = undefined;
         this.empty = undefined;
+        this.liveRegionText = "";
         this.scrollable = undefined;
         this.scrolled = undefined;
         this.scrolledToEnd = undefined;
     }
     async componentDidLoad() {
         this.setupIntersectionObserver();
+        queueMicrotask(() => {
+            this.setupDragDrop();
+        });
     }
     disconnectedCallback() {
         this.intersectionObserver?.disconnect();
+        this.sortable?.destroy();
+    }
+    handleEnableDragDropChange() {
+        queueMicrotask(() => {
+            this.setupDragDrop();
+        });
     }
     /**
      * Set up an Intersection Observer to monitor when the table container becomes visible.
@@ -124,6 +199,50 @@ const SwirlTable = class {
         });
         this.intersectionObserver.observe(this.container);
     }
+    setupDragDrop() {
+        if (this.sortable) {
+            this.sortable.destroy();
+            this.sortable = undefined;
+        }
+        if (this.enableDragDrop) {
+            const tableHasRowGroups = !!this.el.querySelector("swirl-table-row-group");
+            if (tableHasRowGroups) {
+                // Drag & drop for multiple row groups is not yet implemented.
+                console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');
+                return;
+            }
+            if (!this.dragDropHandle) {
+                console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');
+                return;
+            }
+            const slottedEl = this.el.querySelector('[slot="rows"]');
+            this.dragDropContainer =
+                slottedEl?.tagName !== "SWIRL-TABLE-ROW"
+                    ? slottedEl ?? this.bodyEl
+                    : this.bodyEl;
+            this.sortable = new Sortable(this.dragDropContainer, {
+                animation: 100,
+                direction: "vertical",
+                handle: this.dragDropHandle,
+                fallbackOnBody: true,
+                group: `swirl-table-${Math.random().toString().substring(2)}`,
+                onEnd: (event) => {
+                    event.stopPropagation();
+                    const { to, newIndex, oldIndex, item } = event;
+                    this.dropRow.emit({
+                        newIndex,
+                        oldIndex,
+                        item,
+                        itemId: item.id ?? item.querySelector(":scope > swirl-table-row").id,
+                        newNextSiblingItemId: newIndex < to.children.length - 1
+                            ? to.children[newIndex + 1].id
+                            : undefined,
+                        newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
+                    });
+                },
+            });
+        }
+    }
     async onVisibilityChange(entries) {
         const inViewport = entries.some((entry) => entry.isIntersecting);
         if (inViewport) {
@@ -148,7 +267,7 @@ const SwirlTable = class {
         this.triggerRerender();
     }
     resetEmptyRowStyles() {
-        const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+        const emptyRow = this.el.querySelector(".table__empty-row");
         if (!Boolean(emptyRow)) {
             return;
         }
@@ -226,16 +345,16 @@ const SwirlTable = class {
         return Array.from(this.el.querySelectorAll("swirl-table-cell"));
     }
     layoutEmptyRow() {
-        const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+        const emptyRow = this.el.querySelector(".table__empty-row");
         if (!Boolean(emptyRow)) {
             return;
         }
-        const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+        const scrollWidth = `${this.el.querySelector(".table__container").scrollWidth}px`;
         emptyRow.style.width = scrollWidth;
     }
     layoutRowGroups() {
         const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-        const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container")?.scrollWidth}px`;
+        const scrollWidth = `${this.el.querySelector(".table__container")?.scrollWidth}px`;
         tableRowGroups.forEach((tableRowGroup) => {
             const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
             if (!Boolean(headerRow)) {
@@ -321,10 +440,108 @@ const SwirlTable = class {
         const rowsContainer = this.el.querySelector('[slot="rows"]');
         this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
     }
+    updateLiveRegionText(key, data = {}) {
+        let newText = key ? this.dragDropInstructions[key] : "";
+        for (const [key, value] of Object.entries(data ?? {})) {
+            newText = newText.replaceAll(`{${key}}`, String(value));
+        }
+        if (newText !== this.liveRegionText) {
+            this.liveRegionText = newText;
+        }
+    }
+    toggleKeyboardMove(row) {
+        if (this.movingViaKeyboard) {
+            this.endKeyboardMove(row);
+        }
+        else {
+            this.startKeyboardMove(row);
+        }
+    }
+    startKeyboardMove(row) {
+        this.movingViaKeyboard = true;
+        this.positionBeforeKeyboardMove = Array.from(this.dragDropContainer.children).indexOf(row);
+        row.classList.add("table-row--moving");
+        this.updateLiveRegionText("start", {
+            position: Array.from(this.dragDropContainer.children).indexOf(row) + 1,
+            rowCount: this.dragDropContainer.children.length,
+        });
+    }
+    endKeyboardMove(row) {
+        this.movingViaKeyboard = false;
+        row.classList.remove("table-row--moving");
+        this.updateLiveRegionText("end", {
+            position: Array.from(this.dragDropContainer.children).indexOf(row) + 1,
+            rowCount: this.dragDropContainer.children.length,
+        });
+        this.dropRow.emit({
+            item: row,
+            newIndex: Array.from(this.dragDropContainer.children).indexOf(row),
+            oldIndex: this.positionBeforeKeyboardMove,
+            itemId: row.id,
+            newNextSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(row) <
+                this.dragDropContainer.children.length - 1
+                ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(row) + 1].id
+                : undefined,
+            newPrevSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(row) > 0
+                ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(row) - 1].id
+                : undefined,
+        });
+        this.positionBeforeKeyboardMove = undefined;
+    }
+    cancelKeyboardMove() {
+        if (!this.movingViaKeyboard) {
+            return;
+        }
+        const row = this.el.querySelector(".table-row--moving");
+        if (!row) {
+            return;
+        }
+        row.classList.remove("table-row--moving");
+        this.movingViaKeyboard = false;
+        if (this.positionBeforeKeyboardMove !== undefined) {
+            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[this.positionBeforeKeyboardMove]);
+        }
+    }
+    moveRow(row, direction) {
+        if (!this.movingViaKeyboard) {
+            return;
+        }
+        let newIndex;
+        if (direction === "up") {
+            const currentIndex = Array.from(this.dragDropContainer.children).indexOf(row);
+            newIndex = Math.max(0, currentIndex - 1);
+            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[newIndex]);
+        }
+        else {
+            const currentIndex = Array.from(this.dragDropContainer.children).indexOf(row);
+            newIndex = Math.min(this.dragDropContainer.children.length - 1, currentIndex + 1);
+            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[newIndex + 1]);
+        }
+        this.updateLiveRegionText("moved", {
+            position: newIndex + 1,
+            rowCount: this.dragDropContainer.children.length,
+        });
+        this.focusDragHandleOfRow(row);
+    }
+    focusDragHandleOfRow(row) {
+        const handle = querySelectorAllDeep(row, this.dragDropHandle)?.[0];
+        if (handle.tagName === "BUTTON") {
+            handle.focus();
+        }
+        else {
+            handle.querySelector("button")?.focus();
+        }
+    }
     render() {
-        return (h(Host, { key: '1dad264e782e779ec3c641670d6745ae27f311f1' }, h("div", { key: '972ff6748270ec8c89e68803dec81bb3b696b7d5', class: "table" }, h("div", { key: '8421a34d775292faec2fdb16971aa328a3d9e40d', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: '2057cabb89b21c4d2634552b6c868026f90c1746', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '853d3788f7e0dd1170cfbfc84e5d810e999bf800' }, h("div", { key: '72ecf2b03aa6c46d45609254f5fa9af2fbbcb039', id: "caption" }, this.caption))), h("div", { key: '02b2b15ca2aefc20a3237d95ca34b892a9bc9b41', role: "rowgroup" }, h("div", { key: '6543839c056f6caf174f65670668c2a5c6f2606e', class: "table__header", role: "row" }, h("slot", { key: 'e6581bc48062a1d704ba2b9280b35190f03e2c64', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '04e5564657fed6b436679cd300e56e18d8f64ce8', class: "table__body" }, h("slot", { key: '4054d9418eb60559e996bb630143fbaceca90a5a', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: '8200eb9e5bf3d8b52ead63df6d77db21bc6adbac', class: "table__empty-row", role: "row" }, h("div", { key: 'f86a99a732345affb1e8fd1224673970066da191', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: '29199285a11c90a6839a68c84edd71f04fbf4d6e', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        const className = classnames("table", {
+            "table--keyboard-move": this.movingViaKeyboard,
+        });
+        return (h(Host, { key: '072ad27c0d91fe202a82c853917575d36f9868b9' }, h("div", { key: '30915cb7a92b2f45d0ee3dc6b7af1040d0765b93', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '286a7f9a8a88054c6b330ccd49527495157001e8' }, h("span", { key: '9b94d79b0f8882da55b09cd3edede48ca1bac26d', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '0221127e6feedb0c4f2dc8fefd9f00a08e72e711', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: 'c7afbe0db6e602ff7b7c59c149a2abb2dca39168', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'a02b165844fc9685c158e8115fb90c48ae6e87f3' }, h("div", { key: 'c6fd789ad9d5a7e2ba1af8d1179c96c50806e10d', id: "caption" }, this.caption))), h("div", { key: '7386f5e1d6f6a1ec1e3f81b4f302fb3026e674fa', role: "rowgroup" }, h("div", { key: '4a9c0fb92683cd8530acdb9bc912e9ca080ce5b3', class: "table__header", role: "row" }, h("slot", { key: '23fe3ffe2bf0f78684846c4fd3ecfed994a871b4', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '972dcf9e869a187edc976a30bc513efcd3e6a549', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: '5610098e443132f5a745c8e345d4e3a03c917190', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: 'c85753cf3ef5cb3ec2e62b623372d248eb485495', class: "table__empty-row", role: "row" }, h("div", { key: '533e9cfebbc9bb4336d1c2c3bba54ccf8ebe1765', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: 'e9a348686f3c80a33501e9bb85f8c92c068e7fe5', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "enableDragDrop": ["handleEnableDragDropChange"]
+    }; }
 };
 SwirlTable.style = SwirlTableStyle0;
 

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

@@ -84,7 +84,7 @@ const SwirlTabs = class {
         }));
     }
     render() {
-        return (h(Host, { key: '8f776091b83d55785e936df66c991738f1f98102' }, h("div", { key: '94e213f60729e970661621a683b791c44a67a90e', class: "tabs" }, h("swirl-tab-bar", { key: 'd680d7a11f6a0a89edcd6f0a63cf2d79e64d50f0', 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 })), h("slot", { key: 'edc54b9b40475e1930eb98c08774a5e7d721e31e' })));
+        return (h(Host, { key: '341704212596c244b030469cbc133c845f43b17a' }, h("div", { key: 'bea41635c44fa9a7090b39511353d4fe9e38c23f', class: "tabs" }, h("swirl-tab-bar", { key: '1aa5dcdaff37a0934c887dac63bcca6f38da89c3', 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 })), h("slot", { key: '29e72997a00d6630e6abbaa279ea282f890a03c7' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -984,7 +984,7 @@ const SwirlText = class {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: '58852d3eda21365916053627efdfd755cf1a3512' }, h(Tag, { key: 'c88165cea60cb0d540f1636262a449818c8127a2', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '267baa6125ef490f3536adc3d51f16e9782ef94a' }))));
+        return (h(Host, { key: '713388ef1ff5eb7d6114a53cd1145169079edf95' }, h(Tag, { key: '4b14c27894c47122d5ebdb16bea0dc8023693b8d', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '8057eff74c66a986a47c9978fce2f83ca4272112' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -152,7 +152,7 @@ const SwirlThemeProvider = class {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: '0f1694a7bf967fcbffdd7e915ec4aa4a8d2f93cf' }, h("slot", { key: '7c3c75d2927e01783040f473ba41f3831164bfa8' })));
+        return (h(Host, { key: 'e292aaf46693437e24ce6f2a331e43ac486dfb6d' }, h("slot", { key: '5d64cc274bfcfcb78cd379730f3361ebb56c4d9f' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

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

@@ -125,7 +125,7 @@ const SwirlTimeInput = class {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '2c4924715b04c0e77299b48a29fe7ec044229884' }, h("div", { key: 'b8bceee82f8ee07a206515e8f3bf3ba6c7fd6320', class: className }, h("input", { key: 'd06d11faf603e2c8526ab780ac64bbe10b61d562', "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 }), h("span", { key: 'b84dd53cb89b2532904f0978c951dcab01996d33', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '0c6df7dcd4388bfd2b06c6e70e2a30e36474ea3a', size: this.iconSize })))));
+        return (h(Host, { key: '11575c7c43abed50d92714f74e70997ba3513d73' }, h("div", { key: '22b1e8c6fb208fdb04d0564b62aeee6149bfef0d', class: className }, h("input", { key: '6142af4dcf4a7f9cfb83a08f63fa200e29ed8641', "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 }), h("span", { key: '2d6b3392c86d2c324b413f3b5d47c9b07bdc8cce', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'f6f663c6628b6268757e2675890bd66afa2980ce', size: this.iconSize })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-toast-provider.entry.js

@@ -51,7 +51,7 @@ const SwirlToastProvider = class {
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: '3650e2962ff80074ed761a02c2181aa199b113e7', role: "status" }, h("swirl-stack", { key: 'a7d56803f722b22f3a58d4a9685d467895e8a65b', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '6b3eb6381417fc57320494b85675634ec8cbd28e', role: "status" }, h("swirl-stack", { key: '26b7c2f18fefc092f0822a995f1066ef8c8fc6ef', spacing: "12" }, this.toasts.map((toast) => {
             const props = { ...toast, content: undefined };
             return (h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
         }))));

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

@@ -59,7 +59,7 @@ const SwirlToast = class {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: 'ff494adb183bfd3b0cf64f854370f65d9025688d' }, h("div", { key: 'ec42812f4e085d3853d529c5155847d3166d7235', class: className }, this.icon && (h("span", { key: '9565980b265dfb58f2d3f4625642c4b42b286bb0', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '20a9d20e6a1250d8584768db191033b7dca0faeb', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '59a95eece747a0a434c6730c84ca8138b7036b5c' })), h("button", { key: '413e402fb6504c7791d68e21b2dd333a79fb4e2e', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '76fb12bf16bdd0f7dfb1d51becf2774e438921a3', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '676e4706190a84cee6b6b6b1800e8788fc1ba828' }, h("div", { key: '9cc47f4d3c482c091b95d43b497dd90e12e02528', class: className }, this.icon && (h("span", { key: 'ad828f1c327c8ce8628f68ccf7364ee345dc974f', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '7cc6eebcf936e40ebf1bd1f661b595a96dd29d72', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'df2debd57ed2aa87b529aa81fda26bd1fc02a721' })), h("button", { key: '1d1c2938862a572253611bf226265f3cc3e8ac71', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'a1ea242f9764316d018c37af9c2c55cc0a11a6a0', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get watchers() { return {
         "duration": ["watchDuration"]

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

@@ -18,7 +18,7 @@ const SwirlToggleButton = class {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: 'f1fd00b70d49441eed96d0c3cd3b513abc2e2942', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: '62b776441bc1175ff19ceaeebd19bb7ea9818b51', class: "button__label" }, this.label)));
+        return (h("button", { key: '60ec065056c43a35a655d5a659230feaa2dfbe7c', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: '90282ff1de8a2bdb023c32f3e41c79c2d763bbaf', class: "button__label" }, this.label)));
     }
 };
 SwirlToggleButton.style = SwirlToggleButtonStyle0;

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

@@ -57,7 +57,7 @@ const SwirlToggleGroup = class {
         });
     }
     render() {
-        return (h("swirl-stack", { key: 'dd91f7ccecce01bf2bd29a155b888b1c7ff0325e', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'b22ba319fb73e5c448e513156f64f817766fd055', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '38ba2ae6fd183ef0b1f45af3aa09dc13d9a0fc7e', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '333d7b64beda4587448e92a7dc70e9ff7e7dbd40', onSlotchange: this.onSlotChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -71,7 +71,7 @@ const SwirlToolbar = class {
         });
     }
     render() {
-        return (h(Host, { key: '0bd307a0ad1039736f25124308ad98dc4fa03d18' }, h("swirl-stack", { key: '626904a735a98982c9f84aa1e27e1e4b7cd78606', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: 'c4f06b12016aa2589d470ca1dcf4f53a3ed2c099' }))));
+        return (h(Host, { key: '5416d10668ae2e88c6ea3501184dffe87779b9f5' }, h("swirl-stack", { key: '02e4d2a3d41b63d50fa85cbab86ff0a11bfb02ee', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '46c598bd3a3b716f28c897669396bd276de3a2dd' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -115,7 +115,7 @@ const SwirlTooltip = class {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '529375924a131657990ae49ca1577e384d7fb757', onKeydown: this.onKeydown }, h("span", { key: '6738c27b573fd2b6b9ddf090454a67fe1f28a7fa', class: className }, h("span", { key: '4152986331edada0253c5eee675c2841ddee4f21', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '15e1427b464e34bd69aa29527d99294e56e2a432' })), h("span", { key: '1632c52e95fd3b944ba6377beeab511deb1e995d', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: 'bb0876790cd15f687658d29771ceb91b8dd88001', onKeydown: this.onKeydown }, h("span", { key: '9da9846ede5394a165faa1ded155f88f9760a947', class: className }, h("span", { key: '327bbb9753c47e08c0909f2df05aa4d86b5a4022', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '5b5a39b6507808a3926b613af1612b19d64585ad' })), h("span", { key: '81122c462ef32fb61185efe4bd796eec600eb341', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -123,7 +123,7 @@ const SwirlTooltip = class {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: 'f25541f0a71832bc92bd90cadabb38e22c5e8f1a', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'e7e07ec6b2dbebe5a713e05d9c608a91f8128c80', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '5772550951013f59e059277ba958efc6380f8f73', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '5bdfba1be1a42825041510626995a68726a6cec2', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '98b85837ac1ab5e8809bc264e67eb6b058837405', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'd6486b3b8b03567eadc72b514c2fa874040c1e6c', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

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

@@ -95,12 +95,12 @@ const SwirlTreeNavigationItem = class {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: 'f18b67c58e0aa8fac5291b8c0a6214852021cc6c', role: "none" }, h("li", { key: '7aa01185db544c5a5d9f97383c75dde04a22dc18', class: {
+        return (h(Host, { key: '91d0825352336d88b1c20738c08f93833957b615', role: "none" }, h("li", { key: '44b1b57d68086aed645921d86ec588dd10a93345', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '817727ed7c788a5faa868fb25effdc3518167228', 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 }, h("span", { key: '4a4a71f00bc9a9825a51d39a0dc4dacd3a099400', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '4b887aef2710b7d99ca08879cec167c5bf0d1811', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '0c2416f44caf82a332c79f70856f1b1f7aab93a0', class: "tree-navigation-item__label" }, h("span", { key: '99283c67764645d4eae695c7db89c9526f3cd108', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '0e97d7a64bfb73b2167d6778186cbf8db2981136', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '7c8e76613a0f2534c5f72315cd2266551f96f233', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '9a1783de80521b08918cf06081846b533b4052d6', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '5486be6428722d1b6b28f920f0bd17311c71ab99', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'ebf61cb2e6ec23082a58282e0028ce2dd68097e0', 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 }, h(Tag, { key: '645f8b69e22a756704b64cfeb1147fad52ae21ea', 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 }, h("span", { key: 'ee3be24c31d978b237f3365eb9db5ebaa9dcd0bd', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '1a6ba5fa0d42d36b5cef10ae4b5c4a674c54e0a9', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'fb45c421326713a33e4aea6235da052b7faa7267', class: "tree-navigation-item__label" }, h("span", { key: 'f1d44d360ffdd000901d94d7ccf3a339b20ff8a1', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '60092336a4f8258de8dc255d4ff3561bcb421f88', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'c226108f24408a27febff0f21508fbc3053d6dfd', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'f25c601b3bb4a953cb2c50a860fc8c82e34aa4c9', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'f546a936e52e4502d908d35087e10fc1bc042959', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '065e64f7762c564c0210395aabb9ba3521e5b4cd', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, h("slot", { key: '519cdbd7d36202ad4ead9fd87900a70a6f0c7d11' }))))));
+            } }, h("slot", { key: '0ac59a0c165c0e515af930c47da8666f1eac14dc' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -9,7 +9,7 @@ const SwirlTreeNavigation = class {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '359b8985019aacfff300043c67f0553a6ed87471' }, h("ul", { key: 'f6bdb96a9817f370ab2b926faf8db231534d22b3', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '7fe3965d7916fcf181f851e55d303a413923cc40' }))));
+        return (h(Host, { key: '6170dc1783135092d40e783ee2c8377035057fbd' }, h("ul", { key: 'dc04e572d7a61c96acf21aa3d026b12373d089a9', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '04fb3e839d94ef7bfa13cb0b624909a567c2ba79' }))));
     }
 };
 SwirlTreeNavigation.style = SwirlTreeNavigationStyle0;